feat: install gamepadzilla

psywave-games · Nov 6, 2023 · a6ad458 · a6ad458
1 parent b8ad88d
commit a6ad458
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 11 deletions.
diff --git a/fake_npm_install.sh b/fake_npm_install.sh
@@ -1,6 +1,8 @@
 #!/usr/bin/sh
 mkdir -p html
+URL_GAMEPAD=https://rodrigodornelles.github.io/npm-gamepadzilla/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
 (curl -fsSL $URL_FCEUX_JS || wget -qO- $URL_FCEUX_JS) > html/fceux.js
 (curl -fsSL $URL_FCEUX_WASM || wget -qO- $URL_FCEUX_WASM) > html/fceux.wasm
diff --git a/res/index.html b/res/index.html
@@ -24,13 +24,14 @@
             text-align: center;
             background-color: black;
         }
-        canvas {
+        #gameCanvas {
             width: 100vmin;
+        }
+        canvas {
             padding-left: 0;
             padding-right: 0;
             margin-left: auto;
             margin-right: auto;
-            display: block;
             image-rendering: pixelated;
             image-rendering: crisp-edges;
         }
@@ -44,29 +45,42 @@
             margin: 15vh 20%;
             background-color: white;
         }
-
         .btn:hover {
             opacity: 0.9;
             cursor: pointer;
         }
+        .gpz-btn, .gpz-joy {
+            width: 25vw;
+        }
     </style>
   </head>
-  <body>
+  <body style="touch-action: none">
     <section>loading...</section>
     <canvas id="gameCanvas" width="256" height="240" style="display: none"></canvas>
+    <div id="gamepad" style="display: flex">
+        <canvas width="128" height="128"
+            style="display: none"
+            class="gpz-joy"
+            data-gpz-bind="ArrowUp ArrowLeft ArrowDown ArrowRight">
+        </canvas>
+        <canvas width="128" height="128"
+            style="display: none"
+            class="gpz-btn"
+            data-gpz-bind="KeyF">
+        </canvas>
+    </div>
     <span class="btn" data-rom="cocobattleroyale.nes" style="display: none;">Play (USA)<span>🇺🇸</span></span>
     <span class="btn" data-rom="kokobatoru.nes" style="display: none;">Play (JAP)<span>🇯🇵</span></span>
     <span class="btn" data-rom="galinharoyale.nes" style="display: none;">Play (BRA)<span>🇧🇷</span></span>
-    <script type="text/javascript" src="fceux.js"></script>    
     <script>
     window.addEventListener("DOMContentLoaded", () => {
-        const canvas =  document.querySelector('#gameCanvas');
-        const loading = document.querySelector('section');
-        const buttons = document.querySelectorAll('.btn');
+        const loading = document.querySelector('section')
+        const buttons = document.querySelectorAll('.btn')
+        const canvas = document.querySelectorAll('canvas')
 
-        function start(game) {
-            buttons.forEach(button => button.style.display = 'none');
-            canvas.style.display='block'
+        function start(game) {  
+            buttons.forEach(el => el.style.display = 'none')
+            canvas.forEach(el => el.style.display = 'block')
 
             fceux.init('#gameCanvas');
             fceux.downloadGame(game);
@@ -133,6 +147,11 @@
             })
         })
     }
+    if (/Win|Mac|Linux/.test(navigator.platform)) {
+        document.querySelector('#gamepad').style.display='none'
+    }
     </script>
+    <script type="text/javascript" src="gamepadzilla.js"></script>
+    <script type="text/javascript" src="fceux.js"></script>    
   </body>
 </html>
diff --git a/res/pwa.js b/res/pwa.js
@@ -4,6 +4,7 @@ const urlsToCache = [
     'index.html',
     'favicon.ico',
     'fceux.js',
+    'gamepadzilla.js',
     'fceux.wasm',
     'cocobattleroyale.nes',
     'galinharoyale.nes',