Merge branch 'selector'

- Add core_input_keys example. - Stop the previous instance of RaylibJs
tsoding · Feb 8, 2024 · e9d15d3 · e9d15d3
2 parents 56994f2 + a3b8252
commit e9d15d3
Showing 1 changed file with 52 additions and 22 deletions.
diff --git a/index.html b/index.html
@@ -7,8 +7,13 @@
             position: absolute;
             top: 50%;
             left: 50%;
-            height: 100%;
             transform: translate(-50%, -50%);
+            border: 1px solid black
+        }
+
+        #raylib-example-select {
+            display: block;
+            max-width: 8rem;
         }
 
         .not-hosted-msg {
@@ -32,34 +37,59 @@
     <script src="raylib.js"></script>
 </head>
 <body>
+    <label for="raylib-example-select">Choose an Example:</label>
+        <select id="raylib-example-select" onchange="startRaylib(this.value)">
+        <!-- This is populated by js -->
+        </select>
     <canvas id="game"></canvas>
     <script>
+        const wasmPaths = {
+            "tsoding": ["game",],
+            "core": ["core_basic_window", "core_basic_screen_manager", "core_input_keys",],
+        }
+
+        const raylibExampleSelect = document.getElementById("raylib-example-select");
+
+        for (const exampleCategory in wasmPaths){
+            raylibExampleSelect.innerHTML += `<optgroup label="${exampleCategory}">`
+            for (const example of wasmPaths[exampleCategory]){
+                raylibExampleSelect.innerHTML += `<option>${example}</option>`
+            }
+            raylibExampleSelect.innerHTML += "</optgroup>"
+        }
+
         const { protocol } = window.location;
         const isHosted = protocol !== "file:";
+        let raylibJs = undefined;
 
-        if (isHosted) {
-            const raylibJs = new RaylibJs();
-            raylibJs.start({
-                //wasmPath: "wasm/core_basic_window.wasm",
-                //wasmPath: "wasm/core_basic_screen_manager.wasm",
-                wasmPath: "wasm/core_input_keys.wasm",
-                //wasmPath: "wasm/game.wasm",
-                canvasId: "game",
-            });
-        } else {
-            window.addEventListener("load", () => {
-                document.body.innerHTML = `
-                    <div class="not-hosted-msg">
-                        <div class="important">
-                          <p>Unfortunately, due to CORs restrictions, the wasm assembly cannot be fetched.</p>
-                          <p>Please navigate to this location using a web server.</p>
-                          <p>If you have Python 3 on your system you can just do:</p>
+        function startRaylib(selectedWasm){
+            if (isHosted) {
+                if (raylibJs !== undefined) {
+                    raylibJs.stop();
+                }
+                raylibJs = new RaylibJs();
+                raylibJs.start({
+                    wasmPath: `wasm/${selectedWasm}.wasm`,
+                    canvasId: "game",
+                });
+            } else {
+                window.addEventListener("load", () => {
+                    document.body.innerHTML = `
+                        <div class="not-hosted-msg">
+                            <div class="important">
+                                <p>Unfortunately, due to CORs restrictions, the wasm assembly cannot be fetched.</p>
+                                <p>Please navigate to this location using a web server.</p>
+                                <p>If you have Python 3 on your system you can just do:</p>
+                            </div>
+                            <code>$ python3 -m http.server 6969</code>
                         </div>
-                        <code>$ python3 -m http.server 6969</code>
-                    </div>
-                `;
-            });
+                        `;
+                });
+            }
+
         }
+
+        startRaylib("game");
     </script>
 </body>
 </html>