100% size canvas, add loading text

2023-11-04 22:37:01 +02:00 · 2023-11-04 22:37:01 +02:00 · 7aa70cd564
commit 7aa70cd564
parent 60d0f64356
1 changed files with 14 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -9,15 +9,29 @@
    <style>
        canvas {
            background-color: black;
+            display: block;
+            width: 100%;
+            height: 100%;
+            min-width: 4px;
+            min-height: 4px;
+        }
+        #loading {
+            color: white;
+            position: absolute;
+            top: 50%;
+            right: 50%;
+            z-index: 100;
        }
    </style>
 </head>

 <body style="margin: 0; padding: 0">
+    <h1 id="loading">Loading...</h1>
    <script type="module">
        import init from "./pkg/wgpu_renderer.js";
        init().then(() => {
            console.log("WASM Loaded");
+            document.getElementById("loading")?.remove();
        });
    </script>
 </body>