From 4d899d3c97c9c8cc50a1b849973636a1fc770d46 Mon Sep 17 00:00:00 2001
From: Robert Garrett <robertgarrett404@gmail.com>
Date: Fri, 19 Dec 2025 13:27:42 -0600
Subject: [PATCH] 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.
---
 www/index.html | 41 ++++++++++++++++++++++++++++++++++++-----
 1 file changed, 36 insertions(+), 5 deletions(-)

diff --git a/www/index.html b/www/index.html
index 6a7156b..8822aaa 100644
--- a/www/index.html
+++ b/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,9 +62,11 @@
   <h1>
     Robert's Bad Asteroids Game
   </h1>
-  <canvas id="game-canvas" width="800" height="600"></canvas>
-  <main>
+  <!-- <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>
       <p>
@@ -91,16 +114,24 @@
         <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'
-
-    document.getElementById("gameload-button").onclick = async function loadGame() {
+    
+    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 wasm_stream = compressed.body.pipeThrough(new DecompressionStream("gzip"))
       let blob = await new Response(wasm_stream).blob();