Auto Fullscreen (remove manual fullscreen option)

oklemenz · Nov 5, 2021 · d1d6ebf · d1d6ebf
1 parent 21f49b9
commit d1d6ebf
Show file tree

Hide file tree

Showing 7 changed files with 231 additions and 384 deletions.
diff --git a/README.md b/README.md
@@ -11,10 +11,9 @@ Prince of Persia reimplementation written in HTML5 / JavaScript
 
 - Browser: https://princejs.com
   - Use Landscape Mode (Single Tab, Disable Landscape Tab Bar in Browser Settings)
-  - Force Fullscreen: https://princejs.com?fullscreen=true
 - Add to Home Screen to start as Fullscreen App
 - Reduced difficulty (50%):
-  - https://princejs.com?strength=50&fullscreen=true
+  - https://princejs.com?strength=50
 - Touch Controls (tap/drag area on screen):
 
   ![Mobile](assets/web/mobile.svg)
@@ -45,12 +44,11 @@ Url parameters are leveraged to save game state automatically (shortcut in brack
 - `time (t)`: Remaining Minutes (1-60, default: 60)
 - `strength (s)`: Guard Strength in "%" (0-100, default: 100)
 - `width (w)`: Game Width in "px" (default: 0 (fit to screen))
-- `fullscreen (f)`: Fullscreen mode (=100vh) (default: false)
 - `shortcut (_)`: Write url in shortcut version (default: false)
 
 Default url looks as follows:
 
-https://princejs.com?level=1&health=3&time=60&strength=100&width=0&fullscreen=false
+https://princejs.com?level=1&health=3&time=60&strength=100&width=0
 
 Default shortcut url looks as follows:
 
@@ -86,18 +84,18 @@ Custom levels can be played performing the following steps.
 
 Converted levels from https://www.popot.org/custom_levels.php:
 
-- [100](https://princejs.com?level=100): Tower of Revenge (own)
-- [101-114](https://princejs.com?level=101): [Prince of Persia Revisited](https://www.popot.org/custom_levels.php?mod=0000163)
-- [115-128](https://princejs.com?level=115): [Jaffar's House](https://www.popot.org/custom_levels.php?mod=0000220)
-- [129-142](https://princejs.com?level=129): [Ipank's Levels](https://www.popot.org/custom_levels.php?mod=0000151)
-- [143-156](https://princejs.com?level=143): [Barre's Alternative](https://www.popot.org/custom_levels.php?mod=0000189)
-- [157-170](https://princejs.com?level=157): [Miracles Don't Exist](https://www.popot.org/custom_levels.php?mod=0000098)
-- [171-184](https://princejs.com?level=171): [Babylon Tower Climb](https://www.popot.org/custom_levels.php?mod=0000109)
-- [185-198](https://princejs.com?level=185): [Lost in Errors](https://www.popot.org/custom_levels.php?mod=0000144)
-- [199-212](https://princejs.com?level=199): [Story Retold](https://www.popot.org/custom_levels.php?mod=0000146)
-- [213-226](https://princejs.com?level=213): [Prince of Persia Guard Revolt](https://www.popot.org/custom_levels.php?mod=0000162)
-- [227-240](https://princejs.com?level=227): [Return of Prince](https://www.popot.org/custom_levels.php?mod=0000207)
+- [100](https://princejs.com?level=100&strength=50): Tower of Revenge (own)
+- [101-114](https://princejs.com?level=101&strength=50): [Prince of Persia Revisited](https://www.popot.org/custom_levels.php?mod=0000163)
+- [115-128](https://princejs.com?level=115&strength=50): [Jaffar's House](https://www.popot.org/custom_levels.php?mod=0000220)
+- [129-142](https://princejs.com?level=129&strength=50): [Ipank's Levels](https://www.popot.org/custom_levels.php?mod=0000151)
+- [143-156](https://princejs.com?level=143&strength=50): [Barre's Alternative](https://www.popot.org/custom_levels.php?mod=0000189)
+- [157-170](https://princejs.com?level=157&strength=50): [Miracles Don't Exist](https://www.popot.org/custom_levels.php?mod=0000098)
+- [171-184](https://princejs.com?level=171&strength=50): [Babylon Tower Climb](https://www.popot.org/custom_levels.php?mod=0000109)
+- [185-198](https://princejs.com?level=185&strength=50): [Lost in Errors](https://www.popot.org/custom_levels.php?mod=0000144)
+- [199-212](https://princejs.com?level=199&strength=50): [Story Retold](https://www.popot.org/custom_levels.php?mod=0000146)
+- [213-226](https://princejs.com?level=213&strength=50): [Prince of Persia Guard Revolt](https://www.popot.org/custom_levels.php?mod=0000162)
+- [227-240](https://princejs.com?level=227&strength=50): [Return of Prince](https://www.popot.org/custom_levels.php?mod=0000207)
 
 ## Credits
 
-- https://github.com/ultrabolido
+- https://github.com/ultrabolido
diff --git a/assets/web/game.css b/assets/web/game.css
@@ -0,0 +1,50 @@
+html,
+body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    background-color: black;
+}
+
+@media (orientation: portrait) {
+    html,
+    body {
+        overflow: hidden;
+    }
+}
+
+body,
+body * {
+    -webkit-touch-callout: none;
+    user-select: none;
+    -webkit-user-select: none;
+    overflow: hidden;
+}
+
+canvas {
+    width: 100% !important;
+    height: 100% !important;
+    object-fit: contain;
+}
+
+.game {
+    margin: auto;
+    width: 100vw;
+    height: calc(100vh - env(safe-area-inset-bottom, 0px));
+}
+
+@media (orientation: portrait) {
+    .game {
+        height: 100%;
+    }
+}
+
+.game_container {
+    display: block;
+    touch-action: none;
+}
+
+.flipped {
+    transform: scaleY(-1);
+}
diff --git a/index.html b/index.html
@@ -17,6 +17,7 @@
     <link rel="apple-touch-icon" sizes="152x152" href="assets/web/touch-icon-152.png" />
     <link rel="apple-touch-icon" sizes="180x180" href="assets/web/touch-icon-180.png" />
     <link rel="manifest" href="site.webmanifest" />
+    <link type="text/css" rel="stylesheet" href="assets/web/game.css" />
     <script src="lib/phaser.min.js"></script>
     <script src="src/Boot.js"></script>
     <script src="src/Preloader.js"></script>
@@ -49,40 +50,6 @@
     <script src="src/tiles/Star.js"></script>
     <script src="src/tiles/Sword.js"></script>
     <script src="src/tiles/Torch.js"></script>
-    <style>
-      html,
-      body {
-        width: 100%;
-        height: 100%;
-        margin: 0;
-        padding: 0;
-        background-color: black;
-      }
-      body,
-      body * {
-        -webkit-touch-callout: none;
-        user-select: none;
-        -webkit-user-select: none;
-      }
-      canvas {
-        width: 100% !important;
-        height: 100% !important;
-        object-fit: contain;
-      }
-      .game {
-        margin: auto;
-        width: 100%;
-        height: calc(100% - env(safe-area-inset-bottom, 0px));
-      }
-      @media all and (orientation: landscape) {
-        .fullscreen.game {
-          height: calc(100vh - env(safe-area-inset-bottom, 0px));
-        }
-      }
-      .flipped {
-        transform: scaleY(-1);
-      }
-    </style>
   </head>
   <body oncontextmenu="return false;">
     <div class="game" id="gameContainer"></div>