Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adds preliminary support for playing on mobile web #222

Merged
merged 8 commits into from
Oct 29, 2022
Merged

Adds preliminary support for playing on mobile web #222

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
cb83b55
Adds mobile web comments
willroberts Oct 29, 2022
7800f8d
Spaces instead of tabs in HBS templates
willroberts Oct 29, 2022
3ce0b1c
Aligns div indentation
willroberts Oct 29, 2022
c5ad1a2
Adds more comments and non-Apple PWA meta tag
willroberts Oct 29, 2022
55123f1
Updates comments
willroberts Oct 29, 2022
98b54be
Set viewport width to device-width
willroberts Oct 29, 2022
1d49e5c
Start viewport scaling at 30% (384x216) and let it automatically scal…
willroberts Oct 29, 2022
a4a92d4
Updates docs
willroberts Oct 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,15 @@ Desktop clients for Windows, Mac, and Linux can be downloaded on the
Desktop clients currently use the staging environment. They'll use the
production environment once it's available.

## Playing on Android or iOS

We have basic support for playing on mobile web currently. From your phone's
browser, head to https://staging.duelyst.org to try it out.

To hide the status/navigation bar in Chrome or Safari, open the game and select
"Add to Home Screen". When you open the game from the home screen, the status
bar will be hidden.

## Contributing to OpenDuelyst

If you'd like to contribute to OpenDuelyst, check out our
Expand Down
129 changes: 75 additions & 54 deletions app/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,57 +1,78 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>DUELYST</title>
<link rel="icon" type="image/gif" href="{{window.location.origin}}/favicon.gif">
<link rel="shortcut icon" href="{{window.location.origin}}/favicon.ico">
<meta name="description" content="">
<meta name="viewport" content="width=800, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="screen-orientation" content="portrait"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="msapplication-tap-highlight" content="no">
<meta name="full-screen" content="yes"/>
<meta name="x5-fullscreen" content="true"/>

<script type="text/javascript">
// this is for cocos
window.ccMapLimit = 100
</script>

<!-- DUELYST CSS HERE ++ -->
<link rel="stylesheet" href="duelyst.css">

</head>
<body>

<!-- application container div -->
<div id="app">
<div id="app-main">
<div id="app-horizontal">
<canvas id="app-gamecanvas"></canvas>
<div id="app-content-region"></div>
<div id="app-utility-region"></div>
</div>
<div id="app-vertical">
<div id="app-modal-region"></div>
<div id="app-notifications-region"></div>
</div>
</div>
<div id="app-overlay-region"></div>
<div id="maintenance-announcements-region"></div>
<div id="app-preloading">
<div class="brand-main">
<h1>DUELYST</h1>
</div>
<img class="mystic-loader" src="loading.gif">
</div>
</div>
<!-- end container div -->

<!-- DUELYST JS HERE ++ -->
<script src="vendor.js" crossorigin></script>
<script src="duelyst.js" crossorigin></script>

</body>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>DUELYST</title>
<link rel="icon" type="image/gif" href="{{window.location.origin}}/favicon.gif">
<link rel="shortcut icon" href="{{window.location.origin}}/favicon.ico">
<meta name="description" content="">

<!-- Mobile web configuration -->
<!-- https://developer.mozilla.org/en-US/docs/Web/Guide/Mobile -->

<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag -->
<meta name="viewport" content="width=device-width, initial-scale=0.1, maximum-scale=1.0, user-scalable=no">

<!-- https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Managing_screen_orientation -->
<!-- Note: The orientation API may not be supported by Safari on Mac/iOS -->
<!-- https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation#browser_compatibility -->
<!-- We don't use the orientation API from CSS -->
<!-- Cocos2D may attempt to read orientation to support rotation -->
<meta name="screen-orientation" content="portrait"/>

<!-- Progressive Web App settings -->
<!-- https://en.wikipedia.org/wiki/Progressive_web_app -->
<!-- https://web.dev/native-hardware-fullscreen/#launching-a-page-fullscreen-from-home-screen -->
<!-- See also: https://developer.chrome.com/blog/pwacompat/ -->
<!-- This setting hides the status/navigation bar on Chrome apps -->
<meta name="mobile-web-app-capable" content="yes"/>

<!-- This setting hides the status/navigation bar on Safari apps -->
<!-- https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html -->
<!-- This appears to possibly be deprecated, with archived documentation -->
<meta name="apple-mobile-web-app-capable" content="yes"/>

<!-- End mobile web configuration -->

<meta name="msapplication-tap-highlight" content="no">
<meta name="full-screen" content="yes"/>
<meta name="x5-fullscreen" content="true"/>

<script type="text/javascript">
// this is for cocos
window.ccMapLimit = 100
</script>

<link rel="stylesheet" href="duelyst.css">
</head>

<body>
<!-- application container div -->
<div id="app">
<div id="app-main">
<div id="app-horizontal">
<canvas id="app-gamecanvas"></canvas>
<div id="app-content-region"></div>
<div id="app-utility-region"></div>
</div>
<div id="app-vertical">
<div id="app-modal-region"></div>
<div id="app-notifications-region"></div>
</div>
</div>
<div id="app-overlay-region"></div>
<div id="maintenance-announcements-region"></div>
<div id="app-preloading">
<div class="brand-main">
<h1>DUELYST</h1>
</div>
<img class="mystic-loader" src="loading.gif">
</div>
</div>
<!-- end container div -->

<script src="vendor.js" crossorigin></script>
<script src="duelyst.js" crossorigin></script>
</body>
</html>
170 changes: 85 additions & 85 deletions app/index.register.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,96 +1,96 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>DUELYST</title>
<link rel="icon" type="image/gif" href="{{window.location.origin}}/favicon.gif">
<link rel="shortcut icon" href="{{window.location.origin}}/favicon.ico">
<meta name="description" content="">
<meta name="viewport" content="width=800, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="screen-orientation" content="portrait"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="msapplication-tap-highlight" content="no">
<meta name="full-screen" content="yes"/>
<meta name="x5-fullscreen" content="true"/>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>DUELYST</title>
<link rel="icon" type="image/gif" href="{{window.location.origin}}/favicon.gif">
<link rel="shortcut icon" href="{{window.location.origin}}/favicon.ico">
<meta name="description" content="">
<meta name="viewport" content="width=800, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="screen-orientation" content="portrait"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="msapplication-tap-highlight" content="no">
<meta name="full-screen" content="yes"/>
<meta name="x5-fullscreen" content="true"/>

<script type="text/javascript">
// this is for cocos
window.ccMapLimit = 100
</script>
<script type="text/javascript">
// this is for cocos
window.ccMapLimit = 100
</script>

<!-- DUELYST CSS HERE ++ -->
<link rel="stylesheet" href="duelyst.css">
<!-- DUELYST CSS HERE ++ -->
<link rel="stylesheet" href="duelyst.css">

{{#if analyticsEnabled}}
<!-- Google Analytics initialization code-->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
{{#if analyticsEnabled}}
<!-- Google Analytics initialization code-->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

if (window.isDesktop) {
var uuid = window.uuid
if (!localStorage["gaClientId"])
localStorage.setItem("gaClientId",uuid.v4())
var clientId = localStorage["gaClientId"];
ga('create', "{{gaId}}",{
'storage': 'none',
'clientId': clientId
});
ga('set', 'checkProtocolTask', function(){}); // Disable file protocol checking.
} else {
ga('create', "{{gaId}}", 'auto');
}
ga('send', 'pageview');
</script>
{{/if}}
</head>
<body>
if (window.isDesktop) {
var uuid = window.uuid
if (!localStorage["gaClientId"])
localStorage.setItem("gaClientId",uuid.v4())
var clientId = localStorage["gaClientId"];
ga('create', "{{gaId}}",{
'storage': 'none',
'clientId': clientId
});
ga('set', 'checkProtocolTask', function(){}); // Disable file protocol checking.
} else {
ga('create', "{{gaId}}", 'auto');
}
ga('send', 'pageview');
</script>
{{/if}}
</head>
<body>

<!-- application container div -->
<div id="app">
<div id="app-main">
<div id="app-horizontal">
<canvas id="app-gamecanvas"></canvas>
<div id="app-content-region"></div>
<div id="app-utility-region"></div>
</div>
<div id="app-vertical">
<div id="app-modal-region"></div>
<div id="app-notifications-region"></div>
</div>
</div>
<div id="app-overlay-region"></div>
<div id="maintenance-announcements-region"></div>
<div id="app-preloading">
<div class="brand-main">
<h1>DUELYST</h1>
</div>
<img class="mystic-loader" src="loading.gif">
</div>
</div>
<!-- end container div -->
<!-- application container div -->
<div id="app">
<div id="app-main">
<div id="app-horizontal">
<canvas id="app-gamecanvas"></canvas>
<div id="app-content-region"></div>
<div id="app-utility-region"></div>
</div>
<div id="app-vertical">
<div id="app-modal-region"></div>
<div id="app-notifications-region"></div>
</div>
</div>
<div id="app-overlay-region"></div>
<div id="maintenance-announcements-region"></div>
<div id="app-preloading">
<div class="brand-main">
<h1>DUELYST</h1>
</div>
<img class="mystic-loader" src="loading.gif">
</div>
</div>
<!-- end container div -->

<!-- DUELYST JS HERE ++ -->
<script src="vendor.js" crossorigin></script>
<script src="register.js" crossorigin></script>
<!-- DUELYST JS HERE ++ -->
<script src="vendor.js" crossorigin></script>
<script src="register.js" crossorigin></script>

{{#if zendeskEnabled}}
<!-- Start of duelystsupport Zendesk Widget script -->
<script>/*<![CDATA[*/window.zEmbed = function(e,t){var n,o,d,i,s,a=[],r=document.createElement("iframe");window.zEmbed=function()
{a.push(arguments)}
,window.zE=window.zE||window.zEmbed,r.src="javascript:false",r.title="",r.role="presentation",(r.frameElement||r).style.cssText="display: none",d=document.getElementsByTagName("script"),d=d[d.length-1],d.parentNode.insertBefore(r,d),i=r.contentWindow,s=i.document;try
{o=s}
catch(e)
{n=document.domain,r.src='javascript:var d=document.open();d.domain="'+n+'";void(0);',o=s}
o.open()._l=function()
{var e=this.createElement("script");n&&(this.domain=n),e.id="js-iframe-async",e.src="https://assets.zendesk.com/embeddable_framework/main.js",this.t=+new Date,this.zendeskHost="duelystsupport.zendesk.com",this.zEQueue=a,this.body.appendChild(e)}
,o.write('<body onload="document._l();">'),o.close()};
/*]]>*/</script>
<!-- End of duelystsupport Zendesk Widget script -->
{{/if}}
{{#if zendeskEnabled}}
<!-- Start of duelystsupport Zendesk Widget script -->
<script>/*<![CDATA[*/window.zEmbed = function(e,t){var n,o,d,i,s,a=[],r=document.createElement("iframe");window.zEmbed=function()
{a.push(arguments)}
,window.zE=window.zE||window.zEmbed,r.src="javascript:false",r.title="",r.role="presentation",(r.frameElement||r).style.cssText="display: none",d=document.getElementsByTagName("script"),d=d[d.length-1],d.parentNode.insertBefore(r,d),i=r.contentWindow,s=i.document;try
{o=s}
catch(e)
{n=document.domain,r.src='javascript:var d=document.open();d.domain="'+n+'";void(0);',o=s}
o.open()._l=function()
{var e=this.createElement("script");n&&(this.domain=n),e.id="js-iframe-async",e.src="https://assets.zendesk.com/embeddable_framework/main.js",this.t=+new Date,this.zendeskHost="duelystsupport.zendesk.com",this.zEQueue=a,this.body.appendChild(e)}
,o.write('<body onload="document._l();">'),o.close()};
/*]]>*/</script>
<!-- End of duelystsupport Zendesk Widget script -->
{{/if}}

</body>
</body>
</html>