use existing canvas

This commit is contained in:
2026-01-08 13:25:13 -08:00
parent f9d4a8c344
commit 7843b414e7
4 changed files with 49 additions and 11 deletions

2
Cargo.lock generated
View File

@@ -3847,7 +3847,9 @@ dependencies = [
"strafesnet_session", "strafesnet_session",
"strafesnet_settings", "strafesnet_settings",
"strafesnet_snf", "strafesnet_snf",
"wasm-bindgen",
"wasm-bindgen-futures", "wasm-bindgen-futures",
"web-sys",
"wgpu", "wgpu",
"winit", "winit",
] ]

View File

@@ -29,7 +29,9 @@ strafesnet_rbx_loader = { path = "../lib/rbx_loader", registry = "strafesnet", o
strafesnet_session = { path = "../engine/session", registry = "strafesnet" } strafesnet_session = { path = "../engine/session", registry = "strafesnet" }
strafesnet_settings = { path = "../engine/settings", registry = "strafesnet" } strafesnet_settings = { path = "../engine/settings", registry = "strafesnet" }
strafesnet_snf = { path = "../lib/snf", registry = "strafesnet", optional = true } strafesnet_snf = { path = "../lib/snf", registry = "strafesnet", optional = true }
wasm-bindgen = "0.2.99"
wasm-bindgen-futures = "0.4.49" wasm-bindgen-futures = "0.4.49"
web-sys = { version = "0.3.76", features = ["console"] }
wgpu = "28.0.0" wgpu = "28.0.0"
winit = "0.30.7" winit = "0.30.7"

View File

@@ -22,8 +22,13 @@ fn create_window(title:&str,event_loop:&winit::event_loop::EventLoop<()>)->Resul
attr=attr.with_title(title); attr=attr.with_title(title);
#[cfg(target_arch="wasm32")] #[cfg(target_arch="wasm32")]
{ {
use wasm_bindgen::JsCast;
use winit::platform::web::WindowAttributesExtWebSys; 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) event_loop.create_window(attr)
} }

View File

@@ -1,13 +1,42 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/> <meta
<title>Strafe Client</title> name="viewport"
content="width=device-width, height=device-height, initial-scale=1"
/>
<title>Strafe Client</title>
<base data-trunk-public-url /> <base data-trunk-public-url />
</head> <style type="text/css">
<body> :focus {
<link data-trunk rel="rust" href="../strafe-client/Cargo.toml"/> outline: none;
</body> }
body {
margin: 0px;
background: #fff;
width: 100%;
height: 100%;
}
#content {
/* This allows the flexbox to grow to max size, this is needed for WebGPU */
flex: 1 1 100%;
/* This forces CSS to ignore the width/height of the canvas, this is needed for WebGL */
contain: size;
}
.main-canvas {
margin: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas class="main-canvas" id="canvas"></canvas>
<link data-trunk rel="rust" href="../strafe-client/Cargo.toml" />
</body>
</html> </html>