From 6d5afc24456fcde71776a8f58b501aa3c22085d0 Mon Sep 17 00:00:00 2001
From: Robert Garrett <robertgarrett404@gmail.com>
Date: Fri, 19 Dec 2025 11:46:18 -0600
Subject: [PATCH] Add a basic "load game" button

This will ensure the user has interacted with the page before the game
starts, thus allowing the sound to play correctly.

It doesn't re-load the game if the user quits. I'd like to figure out
how to do that.

The need to push the button isn't immediately obvious. It should be over
top (or in place of) the canvas to best convey that the user must start
the game.
---
 www/index.html | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/www/index.html b/www/index.html
index a095289..6a7156b 100644
--- a/www/index.html
+++ b/www/index.html
@@ -41,8 +41,9 @@
   <h1>
     Robert's Bad Asteroids Game
   </h1>
-  <canvas id="game-canvas" width="1280" height="720"></canvas>
+  <canvas id="game-canvas" width="800" height="600"></canvas>
   <main>
+    <button id="gameload-button">Load Game</button>
     <article>
       <h2>Description</h2>
       <p>
@@ -98,15 +99,18 @@
   <script type="module">
     import init from './asteroids.js'
 
-    let compressed = await fetch("./asteroids_bg.wasm.gz")
-    let wasm_stream = compressed.body.pipeThrough(new DecompressionStream("gzip"))
-    let blob = await new Response(wasm_stream).blob();
-
-    init(await blob.arrayBuffer()).catch((error) => {
-      if (!error.message.startsWith("Using exceptions for control flow, don't mind me. This isn't actually an error!")) {
-        throw error;
-      }
-    });
+    document.getElementById("gameload-button").onclick = async function loadGame() {
+      console.log("Game Load button was pressed!");
+      let compressed = await fetch("./asteroids_bg.wasm.gz")
+      let wasm_stream = compressed.body.pipeThrough(new DecompressionStream("gzip"))
+      let blob = await new Response(wasm_stream).blob();
+      
+      init(await blob.arrayBuffer()).catch((error) => {
+        if (!error.message.startsWith("Using exceptions for control flow, don't mind me. This isn't actually an error!")) {
+          throw error;
+        }
+      });
+    }
   </script>
 </body>