feat(web): add basic html structure

gaoliveira21 · Dec 23, 2023 · 1de3391 · 1de3391
1 parent 59c4653
commit 1de3391
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 6 deletions.
diff --git a/web/public/chip8.wasm b/web/public/chip8.wasm
diff --git a/web/public/index.html b/web/public/index.html
@@ -8,6 +8,57 @@
 </head>
 
 <body>
+  <form id="select-rom">
+    <fieldset>
+      <legend>Select ROM</legend>
+
+      <div>
+        <input type="radio" id="pong" name="rom" value="PONG.ch8" checked />
+        <label for="PONG">Pong</label>
+        <details open>
+          <summary>Keyboard</summary>
+          <ul>
+            <li>↑ = <kbd>1</kbd></li>
+            <li>↓ = <kbd>Q</kbd></li>
+          </ul>
+        </details>
+      </div>
+
+      <div>
+        <input type="radio" id="snake" name="rom" value="SNAKE.ch8" />
+        <label for="snake">Snake [steveRoll]</label>
+        <details open>
+          <summary>Keyboard</summary>
+          <ul>
+            <li>↑ = <kbd>2</kbd></li>
+            <li>→ = <kbd>E</kbd></li>
+            <li>↓ = <kbd>S</kbd></li>
+            <li>← = <kbd>Q</kbd></li>
+            <li>Restart = <kbd>V</kbd></li>
+          </ul>
+        </details>
+      </div>
+
+      <div>
+        <input type="radio" id="space-invaders" name="rom" value="SPACE_INVADERS.ch8" />
+        <label for="space-invaders">Space Invaders [David Winter]</label>
+        <details open>
+          <summary>Keyboard</summary>
+          <ul>
+            <li>Shoot = <kbd>W</kbd></li>
+            <li>← = <kbd>Q</kbd></li>
+            <li>→ = <kbd>E</kbd></li>
+            <li>Start/Restart = <kbd>W</kbd></li>
+          </ul>
+        </details>
+      </div>
+    </fieldset>
+
+    <p>When running game press <kbd>ESC</kbd> to reload</p>
+
+    <button type="submit">Confirm</button>
+  </form>
+
   <script src="js/wasm_exec.js"></script>
   <script src="js/polyfill.js"></script>
   <script src="js/wasm_load.js"></script>

diff --git a/web/public/js/wasm_load.js b/web/public/js/wasm_load.js
@@ -1,5 +1,29 @@
-const go = new Go()
+const form = document.querySelector("form#select-rom")
 
-WebAssembly
-  .instantiateStreaming(fetch("chip8.wasm"), go.importObject)
-  .then(result => go.run(result.instance))
+form.addEventListener("submit", (e) => {
+  e.preventDefault()
+
+  const data = new FormData(form)
+
+  const rom = data.get("rom")
+
+  document.rom = rom
+
+  form.remove()
+
+  const go = new Go()
+
+  WebAssembly
+    .instantiateStreaming(fetch(`chip8.wasm`), go.importObject)
+    .then(result => {
+      go.run(result.instance)
+      const canvas = document.getElementsByTagName("canvas")[0]
+
+      canvas.addEventListener("keydown", (e) => {
+        console.log(e.key)
+          if (e.key == "Escape") {
+            location.reload()
+          }
+        })
+    })
+})
diff --git a/web/web.go b/web/web.go
@@ -3,6 +3,8 @@ package main
 import (
 	"log"
 	"os"
+	"path"
+	"syscall/js"
 
 	"github.com/gaoliveira21/chip8/core"
 	"github.com/gaoliveira21/chip8/web/http"
@@ -11,11 +13,15 @@ import (
 func main() {
 	os.Setenv("EXEC_MODE", "web")
 
-	rom, err := http.ReadFile("roms/PONG.ch8")
+	document := js.Global().Get("document")
+
+	romName := document.Get("rom").String()
+
+	rom, err := http.ReadFile(path.Join("roms", romName))
 
 	if err != nil {
 		log.Fatal(err)
 	}
 
-	core.RunChip8(rom, "[CHIP-8] - PONG")
+	core.RunChip8(rom, "[CHIP-8] - "+romName)
 }