Enable full-screen

build/web/styles.css

@@ -1,56 +1,55 @@
-:root {
-    --game-ui-height: 600px;
-}
-
-body, html {
-    height: 100%;
-}
-
-body {
-    background: repeating-linear-gradient(
-            135deg,
-            black 0,
-            black 2px,
-            white 2px,
-            white 20px
-    );
-    margin: 0;
+body,
+html {
+  height: 100%;
+  margin: 0;
+  padding: 0;
 }
 
 .game-container {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 #bevy {
-    background-color: white;
-    width: 800px;
-    height: var(--game-ui-height);
+  width: 100%;
+  height: 100%;
+
+  background: repeating-linear-gradient(
+    135deg,
+    black 0,
+    black 2px,
+    white 2px,
+    white 20px
+  );
 }
 
 .loader {
-    --loader-size: 32px;
-    --loader-position-y: 155px;
-    position: fixed;
-    left: calc(50% - var(--loader-size) / 2);
-    top: calc(50% - var(--game-ui-height) / 2 + var(--loader-position-y));
-    width: var(--loader-size);
-    height: var(--loader-size);
-    border: 3px solid #005c80;
-    border-bottom-color: transparent;
-    border-radius: 50%;
-    box-sizing: border-box;
-    animation: rotation 2s linear infinite;
+  --loader-size: 32px;
+  --loader-position-y: 155px;
+  position: fixed;
+  left: calc(50% - var(--loader-size) / 2);
+  top: var(--loader-position-y);
+  width: var(--loader-size);
+  height: var(--loader-size);
+  border: 3px solid #005c80;
+  border-bottom-color: transparent;
+  border-radius: 50%;
+  box-sizing: border-box;
+  animation: rotation 2s linear infinite;
 }
 
 .loader:not([hidden]) {
-    display: inline-block;
+  display: inline-block;
 }
 
 @keyframes rotation {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }

src/bevy_config.rs

@@ -2,6 +2,8 @@ use anyhow::{Context, Result};
 use bevy::prelude::*;
 use bevy::window::PresentMode;
 use bevy::window::PrimaryWindow;
+#[cfg(not(feature = "wasm"))]
+use bevy::window::WindowMode;
 use bevy::winit::WinitWindows;
 use bevy_mod_sysfail::macros::*;
 use std::io::Cursor;
@@ -15,6 +17,10 @@ pub(crate) fn bevy_config_plugin(app: &mut App) {
             title: "Foxtrot".to_string(),
             canvas: Some("#bevy".to_owned()),
             present_mode: PresentMode::AutoVsync,
+            // This breaks WASM for some reason
+            #[cfg(not(feature = "wasm"))]
+            mode: WindowMode::BorderlessFullscreen,
+            fit_canvas_to_parent: true,
             ..default()
         }),
         ..default()

src/ingame_menu.rs

@@ -1,5 +1,6 @@
 use crate::player_control::actions::{ActionsFrozen, UiAction};
 use crate::GameState;
+use bevy::app::AppExit;
 use bevy::prelude::*;
 use bevy_egui::{egui, EguiContexts};
 use leafwing_input_manager::prelude::ActionState;
@@ -12,6 +13,7 @@ pub(crate) fn ingame_menu_plugin(app: &mut App) {
 fn handle_pause(
     mut time: ResMut<Time>,
     actions: Query<&ActionState<UiAction>>,
+    mut app_exit_events: EventWriter<AppExit>,
     mut actions_frozen: ResMut<ActionsFrozen>,
     mut egui_contexts: EguiContexts,
     mut paused: Local<bool>,
@@ -37,6 +39,14 @@ fn handle_pause(
                             ui.heading("Game Paused");
                             ui.separator();
                             ui.label("Press ESC to resume");
+
+                            ui.add_space(100.0);
+
+                            if ui.button("Quit Game").clicked() {
+                                app_exit_events.send(AppExit);
+                                #[cfg(feature = "wasm")]
+                                wasm::close_tab()
+                            }
                         });
                     });
             }
@@ -47,3 +57,16 @@ fn handle_pause(
         }
     }
 }
+
+#[cfg(feature = "wasm")]
+mod wasm {
+    use wasm_bindgen::prelude::*;
+
+    #[wasm_bindgen(inline_js = "
+        export function close_tab() {
+            window.close();
+        }")]
+    extern "C" {
+        pub(crate) fn close_tab();
+    }
+}

src/level_instantiation/map.rs

@@ -17,6 +17,7 @@ pub(crate) fn map_plugin(app: &mut App) {
             .run_if(not(any_with_component::<Player>()))
             .in_set(OnUpdate(GameState::Playing)),
     );
+
     #[cfg(feature = "wasm")]
     app.add_system(show_wasm_loader.in_set(OnUpdate(GameState::Playing)));
 }