fixup: game full screen on Web (#37)

lovebaihezi · Nov 14, 2024 · e31d49c · e31d49c
1 parent a320071
commit e31d49c
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 9 deletions.
diff --git a/src/game_logic.rs b/src/game_logic.rs
@@ -62,3 +62,9 @@ pub fn reset_game(
         }
     }
 }
+
+#[cfg(test)]
+mod game_logic_test {
+    #[test]
+    fn time_paused_on() {}
+}
diff --git a/src/main.rs b/src/main.rs
@@ -7,8 +7,17 @@ use dinosaur::{
 };
 
 fn main() {
+    let default_plugin = DefaultPlugins.set(WindowPlugin {
+        primary_window: Some(Window {
+            title: "Dinosaur Game".to_string(),
+            canvas: Some("#game".to_string()),
+            fit_canvas_to_parent: true,
+            ..Default::default()
+        }),
+        ..Default::default()
+    });
     let exit = App::new()
-        .add_plugins((DefaultPlugins, FrameTimeDiagnosticsPlugin))
+        .add_plugins((default_plugin, FrameTimeDiagnosticsPlugin))
         .insert_resource(GameStatus { speed: 5, score: 0 })
         .insert_resource(ClearColor(Color::srgb(1.0, 1.0, 1.0)))
         .add_systems(

diff --git a/web/index.html b/web/index.html
@@ -25,19 +25,36 @@
         </style>
     </head>
     <body style="margin: 0px">
+        <canvas width="1024" height="960" id="game"></canvas>
         <script type="module">
             import "./restart-audio-context.js";
             import init from "./dinosaur.js";
 
-            init().catch((error) => {
-                if (
-                    !error.message.startsWith(
-                        "Using exceptions for control flow, don't mind me. This isn't actually an error!",
-                    )
-                ) {
-                    throw error;
-                }
+            const canvas = document.getElementById("game");
+
+            function updateCanvasSize(window, canvas) {
+                canvas.style.width = window.innerWidth + "px";
+                canvas.style.height = window.innerHeight + "px";
+            }
+
+            // Resize Canvas on Window Resize
+            window.addEventListener("resize", () => {
+                updateCanvasSize(window, canvas);
             });
+
+            init()
+                .then(() => {
+                    updateCanvasSize(window, canvas);
+                })
+                .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>
 </html>