feat: improve mobile responsive

psywave-games · Nov 8, 2023 · 46feeb4 · 46feeb4
1 parent a6ad458
commit 46feeb4
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/fake_npm_install.sh b/fake_npm_install.sh
@@ -1,6 +1,6 @@
 #!/usr/bin/sh
 mkdir -p html
-URL_GAMEPAD=https://rodrigodornelles.github.io/npm-gamepadzilla/gamepadzilla.js
+URL_GAMEPAD=https://cdn.jsdelivr.net/npm/gamepadzilla@1/dist/gamepadzilla.js
 URL_FCEUX_JS=https://cdn.jsdelivr.net/npm/[email protected]/dist/fceux.min.js
 URL_FCEUX_WASM=https://cdn.jsdelivr.net/npm/[email protected]/dist/fceux.wasm
 (curl -fsSL $URL_GAMEPAD || wget -qO- $URL_GAMEPAD) > html/gamepadzilla.js

diff --git a/res/index.html b/res/index.html
@@ -17,8 +17,11 @@
     <meta property="twitter:title" content="Coco Battle Royale 2" />
     <meta property="twitter:description" content="Coco Battle Royale II ココバトル (kokobatoru) 2 is a homebrew game for nintendo years 80 console, distributed as free software. " />
     <meta property="twitter:image" content="https://psywave-games.github.io/coco-battle-royale-2/coco-banner.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
     <style>
+        *, *::after, *::before {
+            touch-action: none;
+        }
         body {
             width: 100vw;
             text-align: center;
@@ -27,6 +30,9 @@
         #gameCanvas {
             width: 100vmin;
         }
+        #gamepad canvas {
+            width: 49%;
+        }
         canvas {
             padding-left: 0;
             padding-right: 0;
@@ -54,7 +60,7 @@
         }
     </style>
   </head>
-  <body style="touch-action: none">
+  <body>
     <section>loading...</section>
     <canvas id="gameCanvas" width="256" height="240" style="display: none"></canvas>
     <div id="gamepad" style="display: flex">