Improved "load game" button, now with elem swap

The canvas element no longer exists in the page source. Instead, there
is a div styled to look similar and contain a button. The button is
styled to match the ones in the Bevy app. When pressed, the button
creates the canvas element, replaces the fake canvas div, and loads the
WASM to do it's thing.

Makefile

@@ -40,10 +40,10 @@ target/$(CARGO_TARGET)/$(CARGO_PROFILE)/asteroids.wasm: $(SRCS) Cargo.lock Cargo
 out:
 	mkdir $@
 
-out/assets: out
+out/assets: | out
 	mkdir $@
 
-out/assets/%.ogg: out/assets assets/%.ogg
+out/assets/%.ogg: assets/%.ogg | out/assets
 	cp -ar assets/$*.ogg $@
 
 # Both the JS and WASM files are generated by the wasm-bindgen call, so both

www/index.html

@@ -12,6 +12,7 @@
         margin: auto;
         padding: 0.5em;
       }
+      #prestart-controls,
       canvas {
         margin-top: 1em;
         margin-left: auto;
@@ -22,6 +23,26 @@
         border-radius: 8px;
         background-color: rgb(40%, 40%, 40%);
       }
+      #prestart-controls {
+        width: 800px;
+        height: 600px;
+        text-align: center;
+        align-content: center;
+      }
+      button {
+        font-size: 20px;
+        text-shadow: 0.2em 0.2em 0px rgba(0, 0, 0, 75%);
+        padding: 1em;
+        border-radius: 2em;
+        border-style: solid;
+        border-color: black;
+        color: rgb(90%, 90%, 90%);
+        background-color: rgb(15%, 15%, 15%);
+      }
+      button:hover {
+        background-color: rgb(25%, 25%, 25%);
+        border-color: rgb(90%, 90%, 90%);
+      }
       main {
         margin-left: auto;
         margin-right: auto;
@@ -41,7 +62,10 @@
   <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> -->
+  <div id="prestart-controls">
+    <button id="gameload-button">Load Game</button>
+  </div>
   <main>
     <article>
       <h2>Description</h2>
@@ -90,23 +114,34 @@
         <tr>
           <td>Program Version</td>
           <!-- This version text is completely unchecked. I'll need to do something about that. -->
-          <td><code>v0.5.0</code></td>
+          <td><code>v0.6.0-dev3</code></td>
         </tr>
       </table>
     </article>
   </main>
   <script type="module">
     import init from './asteroids.js'
+    
+    let button = document.getElementById("gameload-button");
+    button.onclick = async function loadGame() {
+      console.log("Game Load button was pressed!");
+      let canvas = document.createElement("canvas");
+      // <canvas id="game-canvas" width="800" height="600"></canvas>
+      canvas.setAttribute("id", "game-canvas");
+      canvas.setAttribute("width", "800");
+      canvas.setAttribute("height", "600");
+      button.parentElement.replaceWith(canvas);
 
-    let compressed = await fetch("./asteroids_bg.wasm.gz")
+      let compressed = await fetch("./asteroids_bg.wasm.gz")
-    let wasm_stream = compressed.body.pipeThrough(new DecompressionStream("gzip"))
+      let wasm_stream = compressed.body.pipeThrough(new DecompressionStream("gzip"))
-    let blob = await new Response(wasm_stream).blob();
+      let blob = await new Response(wasm_stream).blob();
-
+      
-    init(await blob.arrayBuffer()).catch((error) => {
+      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!")) {
+        if (!error.message.startsWith("Using exceptions for control flow, don't mind me. This isn't actually an error!")) {
-        throw error;
+          throw error;
-      }
+        }
-    });
+      });
+    }
   </script>
 </body>