use existing canvas

2025-01-03 20:53:06 -08:00
parent 30b2a92c2a
commit 199c96abca
4 changed files with 34 additions and 1 deletions
--- 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>