updated layout and added audio resume script

index.html

@@ -6,13 +6,14 @@
         /* to make touch input work on safari (disable zoom and such) */
         touch-action: none;
       }
-      body {
+      body,
+      html {
         margin: 0;
         padding: 0;
         background: linear-gradient(-45deg, #a6a6a6, #5ac05a, #262626, #a6a6a6);
         background-size: 400% 400%;
         animation: gradient 15s ease infinite;
-        /* height: 100vh; */
+        width: 100vw;
         height: 100%;
         display: flex;
         justify-content: center;
@@ -29,6 +30,7 @@
       }
       canvas {
         background-color: white;
+        display: block;
       }
 
       @keyframes gradient {
@@ -48,4 +50,75 @@
     import init from './out/wasm_battle_arena.js'
     init()
   </script>
+
+  <!-- from https://github.com/jakobhellermann/wasm-server-runner/blob/main/static/index.html -->
+  <script>
+    // document.body.addEventListener("contextmenu", (e) => {
+    //     e.preventDefault();
+    //     e.stopPropagation();
+    // });
+
+    // Insert hack to make sound autoplay on Chrome as soon as the user interacts with the tab:
+    // https://developers.google.com/web/updates/2018/11/web-audio-autoplay#moving-forward
+
+    // the following function keeps track of all AudioContexts and resumes them on the first user
+    // interaction with the page. If the function is called and all contexts are already running,
+    // it will remove itself from all event listeners.
+    (function () {
+        // An array of all contexts to resume on the page
+        const audioContextList = [];
+
+        // An array of various user interaction events we should listen for
+        const userInputEventNames = [
+            "click",
+            "contextmenu",
+            "auxclick",
+            "dblclick",
+            "mousedown",
+            "mouseup",
+            "pointerup",
+            "touchend",
+            "keydown",
+            "keyup",
+        ];
+
+        // A proxy object to intercept AudioContexts and
+        // add them to the array for tracking and resuming later
+        self.AudioContext = new Proxy(self.AudioContext, {
+            construct(target, args) {
+                const result = new target(...args);
+                audioContextList.push(result);
+                return result;
+            },
+        });
+
+        // To resume all AudioContexts being tracked
+        function resumeAllContexts(_event) {
+            let count = 0;
+
+            audioContextList.forEach((context) => {
+                if (context.state !== "running") {
+                    context.resume();
+                } else {
+                    count++;
+                }
+            });
+
+            // If all the AudioContexts have now resumed then we unbind all
+            // the event listeners from the page to prevent unnecessary resume attempts
+            // Checking count > 0 ensures that the user interaction happens AFTER the game started up
+            if (count > 0 && count === audioContextList.length) {
+                userInputEventNames.forEach((eventName) => {
+                    document.removeEventListener(eventName, resumeAllContexts);
+                });
+            }
+        }
+
+        // We bind the resume function for each user interaction
+        // event on the page
+        userInputEventNames.forEach((eventName) => {
+            document.addEventListener(eventName, resumeAllContexts);
+        });
+    })();
+  </script>
 </html>