diff --git a/Cargo.lock b/Cargo.lock
index ff79d55..cf5c2b6 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -3705,7 +3705,9 @@ dependencies = [
"strafesnet_session",
"strafesnet_settings",
"strafesnet_snf",
+ "wasm-bindgen",
"wasm-bindgen-futures",
+ "web-sys",
"wgpu",
"winit",
]
diff --git a/strafe-client/Cargo.toml b/strafe-client/Cargo.toml
index d5c847f..ed07e72 100644
--- a/strafe-client/Cargo.toml
+++ b/strafe-client/Cargo.toml
@@ -29,6 +29,8 @@ strafesnet_rbx_loader = { path = "../lib/rbx_loader", registry = "strafesnet", o
strafesnet_session = { path = "../engine/session", registry = "strafesnet" }
strafesnet_settings = { path = "../engine/settings", registry = "strafesnet" }
strafesnet_snf = { path = "../lib/snf", registry = "strafesnet", optional = true }
+wasm-bindgen = "0.2.99"
wasm-bindgen-futures = "0.4.49"
+web-sys = { version = "0.3.76", features = ["console"] }
wgpu = "24.0.0"
winit = "0.30.7"
diff --git a/strafe-client/src/setup.rs b/strafe-client/src/setup.rs
index ebc0e25..649bda4 100644
--- a/strafe-client/src/setup.rs
+++ b/strafe-client/src/setup.rs
@@ -22,8 +22,13 @@ fn create_window(title:&str,event_loop:&winit::event_loop::EventLoop<()>)->Resul
attr=attr.with_title(title);
#[cfg(target_arch="wasm32")]
{
+ use wasm_bindgen::JsCast;
use winit::platform::web::WindowAttributesExtWebSys;
- attr=attr.with_append(true);
+ let canvas=web_sys::window().unwrap()
+ .document().unwrap()
+ .get_element_by_id("canvas").unwrap()
+ .dyn_into::<web_sys::HtmlCanvasElement>().unwrap();
+ attr=attr.with_canvas(Some(canvas));
}
event_loop.create_window(attr)
}
diff --git a/web-client/index.html b/web-client/index.html
index b1f1d97..054522e 100644
--- a/web-client/index.html
+++ b/web-client/index.html
@@ -6,8 +6,32 @@
<title>Strafe Client</title>
<base data-trunk-public-url />
+ <style type="text/css">
+ body {
+ margin: 0px;
+ background: #fff;
+ width: 100%;
+ height: 100%;
+ }
+ .root {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ }
+ .main-canvas {
+ margin: 0;
+ /* This allows the flexbox to grow to max size, this is needed for WebGPU */
+ flex: 1;
+ /* This forces CSS to ignore the width/height of the canvas, this is needed for WebGL */
+ contain: size;
+ }
+ </style>
</head>
<body>
+ <div class="root">
+ <canvas class="main-canvas" id="canvas"></canvas>
+ </div>
<link data-trunk rel="rust" href="../strafe-client/Cargo.toml"/>
</body>
</html>