fixed website canvas

johanhelsing · Aug 4, 2023 · 572024e · 572024e
1 parent 4370405
commit 572024e
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 25 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/examples/bevy_ggrs/src/lib.rs b/examples/bevy_ggrs/src/lib.rs
@@ -50,7 +50,6 @@ pub fn run() {
                 .set(WindowPlugin {
                     primary_window: Some(Window {
                         title: "Matchbox Bevy GGRS Example".to_string(),
-                        canvas: Some("#bevy_ggrs_example".to_string()),
                         fit_canvas_to_parent: true, // behave on wasm
                         ..default()
                     }),

diff --git a/website/Cargo.toml b/website/Cargo.toml
@@ -14,5 +14,6 @@ readme = "../README.md"
 
 [dependencies]
 bevy_ggrs_example = { path = "../examples/bevy_ggrs" }
-stylist = { version = "0.12.1", features = ["yew"] }
+stylist = { version = "0.12", features = ["yew"] }
 yew = { version = "0.20.0", features = ["csr"] }
+web-sys = { version = "0.3", features = ["Window", "Event", "EventTarget"] }
diff --git a/website/Trunk.toml b/website/Trunk.toml
diff --git a/website/src/main.rs b/website/src/main.rs
@@ -1,39 +1,33 @@
 use stylist::{global_style, yew::styled_component};
+use web_sys::Event;
 use yew::{html, Html};
 
 #[styled_component(Root)]
 fn root() -> Html {
     global_style!(
         r#"
-        html {
-            min-height: 100%;
-            position: relative;
-        }
-        
-        body {
-            height: 100%;
+        html, body {
             padding: 0;
             margin: 0;
         }
+        body {
+            width: 100vw;
+            height: 100vh;
+            overflow: hidden;
+        }
     "#
     )
     .expect("Unable to mount global style");
 
-    let css = css!(
-        r#"
-        position: absolute;
-        overflow: hidden;
-        width: 100%;
-        height: 100%;
-        "#
-    );
-
-    html! {
-        <div class={ css }>
-            <canvas id="bevy_ggrs_example"></canvas>
-        </div>
+    // Trigger a resize to get the Bevy canvas to resize to fit the frame.
+    //
+    // Same as window.dispatchEvent(new Event('resize'));
+    let window = web_sys::window().unwrap();
+    window
+        .dispatch_event(&Event::new("resize").unwrap())
+        .unwrap();
 
-    }
+    html!() // Render nothing. Bevy handles the rest.
 }
 
 fn main() {