From 9628c1cbd05009bd5ba0d99d3c4569f90e3a17a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?=
 <belen-albeza@users.noreply.github.com>
Date: Thu, 18 Jul 2024 21:21:31 +0200
Subject: [PATCH] Fix Github Pages URL and show ROM source (#12)

* Fix URLs for github pages

* Show source for rom
---
 coco-ui/index.html                |  26 +++++-----
 coco-ui/index.js                  |  76 +++++++++++++++++++++++-------
 coco-ui/roms/deo_system_debug.rom | Bin 6 -> 0 bytes
 coco-ui/roms/empty.rom            | Bin 1 -> 0 bytes
 coco-ui/roms/pixel_fill.tal       |  18 +++++++
 coco-ui/roms/put_pixel.tal        |  15 ++++++
 coco-ui/roms/sprite.tal           |  20 ++++++++
 coco-ui/roms/sprite_move.tal      |  38 +++++++++++++++
 coco-ui/styles.css                |  10 +++-
 deploy.sh                         |   2 +-
 10 files changed, 173 insertions(+), 32 deletions(-)
 delete mode 100644 coco-ui/roms/deo_system_debug.rom
 delete mode 100644 coco-ui/roms/empty.rom
 create mode 100644 coco-ui/roms/pixel_fill.tal
 create mode 100644 coco-ui/roms/put_pixel.tal
 create mode 100644 coco-ui/roms/sprite.tal
 create mode 100644 coco-ui/roms/sprite_move.tal

diff --git a/coco-ui/index.html b/coco-ui/index.html
index 175e9e3..f82ec9b 100644
--- a/coco-ui/index.html
+++ b/coco-ui/index.html
@@ -14,21 +14,23 @@ <h1>👻-8</h1>
   <main>
     <canvas id="coco-video" class="coco-video" width="192" height="144"></canvas>
       <section class="coco-controls">
-        <select name="rom" id="coco-rom-selector">
-          <option value="empty.rom">Empty</option>
-          <option value="deo_system_debug.rom">Debug</option>
-          <option value="put_pixel.rom">Pixel (single)</option>
-          <option value="pixel_fill.rom">Pixel (fill)</option>
-          <option value="sprite.rom">Sprite</option>
-          <option value="sprite_move.rom">Moving Sprite</option>
-        </select>
-
+          <label>Select ROM:
+          <select name="rom" id="coco-rom-selector">
+            <option value="put_pixel">Pixel (single)</option>
+            <option value="pixel_fill">Pixel (fill)</option>
+            <option value="sprite">Sprite</option>
+            <option value="sprite_move">Moving Sprite</option>
+          </select>
+        </label>
         <div>
-          <input type="checkbox" id="coco-show-bytecode">
-          <label for="coco-show-bytecode">Show bytecode</label>
+          <label><input type="checkbox" id="coco-show-source" disabled> Show source</label>
+          <label><input type="checkbox" id="coco-show-bytecode" disabled> Show bytecode</label>
         </div>
       </section>
-      <section id="coco-bytecode" class="bytecode" style="display: none;"></section>
+      <aside class="debug">
+        <section id="coco-bytecode" class="bytecode" style="display: none;"></section>
+        <pre id="coco-source" class="source" style="display: none;"></pre>
+      </aside>
   </main>
   <footer>
     <p>Crafted with 🖤 by <a href="https://www.ladybenko.net">ladybenko</a>.</p>
diff --git a/coco-ui/index.js b/coco-ui/index.js
index 3cb7830..2a82ca1 100644
--- a/coco-ui/index.js
+++ b/coco-ui/index.js
@@ -15,7 +15,12 @@ async function handleFile(file) {
   }
 }
 
-async function fetchRom(path) {
+async function handleSource(file) {
+  const contents = await file.text();
+  document.querySelector("#coco-source").innerHTML = contents;
+}
+
+async function fetchFile(path) {
   try {
     const response = await fetch(path);
     return response;
@@ -25,40 +30,75 @@ async function fetchRom(path) {
   return null;
 }
 
-function setupRomSelector(selectEl, defaultRom) {
+function setupRomSelector(defaultRom, { selectEl, ...others }) {
   const defaultOption = selectEl.querySelector(`option[value="${defaultRom}"]`);
   defaultOption.selected = true;
 
   selectEl.addEventListener("change", async (event) => {
-    const romUrl = `/roms/${event.target.value}`;
-    const rom = await fetchRom(romUrl);
-    if (rom) {
-      await handleFile(rom);
-    }
+    const filename = event.target.value;
+    await fetchBytecodeAndSource(filename, { ...others });
   });
 }
 
-function setupControls() {
-  let showBytecodeCheckbox = document.querySelector("#coco-show-bytecode");
-  let bytecodeEl = document.querySelector("#coco-bytecode");
-
+function setupControls({
+  showBytecodeCheckbox,
+  showSourceCheckbox,
+  bytecodeEl,
+  sourceEl,
+}) {
   showBytecodeCheckbox.addEventListener("change", (event) => {
     bytecodeEl.style.display = event.target.checked ? "block" : "none";
   });
+
+  showSourceCheckbox.addEventListener("change", (event) => {
+    sourceEl.style.display = event.target.checked ? "block" : "none";
+  });
+}
+
+async function fetchBytecodeAndSource(
+  filename,
+  { showSourceCheckbox, showBytecodeCheckbox, bytecodeEl, sourceEl }
+) {
+  showSourceCheckbox.disabled = true;
+  showBytecodeCheckbox.disabled = true;
+
+  bytecodeEl.innerHTML = "Loading…";
+  sourceEl.innerHTML = "Loading…";
+
+  fetchFile(`roms/${filename}.rom`).then(async (rom) => {
+    await handleFile(rom);
+    showBytecodeCheckbox.disabled = false;
+  });
+
+  fetchFile(`roms/${filename}.tal`).then(async (source) => {
+    await handleSource(source);
+    showSourceCheckbox.disabled = false;
+  });
 }
 
 async function main() {
   const _ = await initWasm("./vendor/coco_ui_bg.wasm");
+
   const romSelector = document.querySelector("#coco-rom-selector");
+  const showBytecodeCheckbox = document.querySelector("#coco-show-bytecode");
+  const bytecodeEl = document.querySelector("#coco-bytecode");
+  let showSourceCheckbox = document.querySelector("#coco-show-source");
+  let sourceEl = document.querySelector("#coco-source");
 
-  const defaultRom = "sprite_move.rom";
-  setupRomSelector(romSelector, defaultRom);
-  setupControls();
+  let debugControls = {
+    sourceEl,
+    showBytecodeCheckbox,
+    bytecodeEl,
+    showSourceCheckbox,
+  };
 
-  const rom = await fetchRom(`/roms/${defaultRom}`);
-  if (rom) {
-    await handleFile(rom);
-  }
+  const defaultRom = "sprite";
+  setupRomSelector(`${defaultRom}`, {
+    selectEl: romSelector,
+    ...debugControls,
+  });
+  setupControls(debugControls);
+  await fetchBytecodeAndSource(defaultRom, debugControls);
 }
 
 main();
diff --git a/coco-ui/roms/deo_system_debug.rom b/coco-ui/roms/deo_system_debug.rom
deleted file mode 100644
index 95dd53bc117ff913893ec52f6f3f646b7bdc7478..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6
NcmZo*Y+w>+000F)0UH1S

diff --git a/coco-ui/roms/empty.rom b/coco-ui/roms/empty.rom
deleted file mode 100644
index f76dd238ade08917e6712764a16a22005a50573d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1
IcmZPo000310RR91

diff --git a/coco-ui/roms/pixel_fill.tal b/coco-ui/roms/pixel_fill.tal
new file mode 100644
index 0000000..fc71ef4
--- /dev/null
+++ b/coco-ui/roms/pixel_fill.tal
@@ -0,0 +1,18 @@
+( pixel fill example )
+|10 @Screen &vector $2 &x $1 &y $1 &pixel $1
+
+|100
+  ( screen center )
+  #60 .Screen/x DEO
+  #48 .Screen/y DEO
+
+  ( fill top left quadrant )
+  #e8 .Screen/pixel DEO
+  ( fill top right quadrant )
+  #69 .Screen/pixel DEO
+  ( fill bottom right quadrant )
+  #2c .Screen/pixel DEO
+  ( fill bottom left quadrant )
+  #ab .Screen/pixel DEO
+BRK
+
diff --git a/coco-ui/roms/put_pixel.tal b/coco-ui/roms/put_pixel.tal
new file mode 100644
index 0000000..6ed9336
--- /dev/null
+++ b/coco-ui/roms/put_pixel.tal
@@ -0,0 +1,15 @@
+( pixel deo example )
+|10 @Screen &vector $2 &x $1 &y $1 &pixel $1
+
+|100
+  ( fill bg )
+  #00 .Screen/x DEO
+  #00 .Screen/y DEO
+  #21 .Screen/pixel DEO
+
+  ( draw pixel at the center )
+  #60 .Screen/x DEO
+  #48 .Screen/y DEO
+  #08 .Screen/pixel DEO
+BRK
+
diff --git a/coco-ui/roms/sprite.tal b/coco-ui/roms/sprite.tal
new file mode 100644
index 0000000..e6c7d18
--- /dev/null
+++ b/coco-ui/roms/sprite.tal
@@ -0,0 +1,20 @@
+( sprite example )
+|10 @Screen &vector $2 &x $1 &y $1 &pixel $1 &pad $3 &address $2 &sprite $1 
+
+|0100 ( -> )
+  #5c .Screen/x DEO
+  #44 .Screen/y DEO
+  ;coco .Screen/address DEO2
+  #00 .Screen/sprite DEO
+BRK
+
+@coco
+0077 7700
+0777 7770
+6717 7176
+7f77 77f7
+7711 1177
+7772 8777
+7777 7777
+7607 7067
+
diff --git a/coco-ui/roms/sprite_move.tal b/coco-ui/roms/sprite_move.tal
new file mode 100644
index 0000000..a96c40d
--- /dev/null
+++ b/coco-ui/roms/sprite_move.tal
@@ -0,0 +1,38 @@
+( sprite example )
+|10 @Screen &vector $2 &x $1 &y $1 &pixel $1 &pad $3 &address $2 &sprite $1 
+
+%MOD { DUP2 DIV MUL SUB } ( a b -- a%b )
+
+|0100 ( -> )
+  ;on-frame .Screen/vector DEO2
+  ;coco .Screen/address DEO2
+
+  ( draw bg )
+  #21 .Screen/pixel DEO
+BRK
+
+@on-frame ( -> )
+  ( clear foreground )
+  .Screen/x DEI
+  #00 .Screen/x DEO
+  #00 .Screen/y DEO
+  #30 .Screen/pixel DEO
+  
+  ( move ghost )
+  INC #c0 MOD .Screen/x DEO
+  #44 .Screen/y DEO
+
+  ( draw ghost )
+  #10 .Screen/sprite DEO
+BRK
+
+@coco
+0077 7700
+0777 7770
+6717 7176
+7f77 77f7
+7711 1177
+7772 8777
+7777 7777
+7607 7067
+
diff --git a/coco-ui/styles.css b/coco-ui/styles.css
index d9e7516..6dcbdac 100644
--- a/coco-ui/styles.css
+++ b/coco-ui/styles.css
@@ -27,7 +27,6 @@ select, button {
   display: grid;
   grid-template-rows: auto 1fr auto;
   row-gap: 1rem;
-  /* height: 100vh; */
   width: var(--width);
 }
 
@@ -44,9 +43,18 @@ select, button {
   justify-content: space-between;
 }
 
+.debug {
+  display: grid;
+  row-gap: 1rem;
+}
+
 .bytecode {
   max-height: 20vh;
+}
+
+.bytecode, .source {
   border: 1px solid black;
   padding: 1rem;
   max-width: (--width);
 }
+
diff --git a/deploy.sh b/deploy.sh
index 957929b..8639421 100755
--- a/deploy.sh
+++ b/deploy.sh
@@ -1,4 +1,4 @@
-./build.sh
+mkdir -p dist/roms
 cp -r coco-ui/roms dist/
 cp -r coco-ui/vendor dist/
 cp coco-ui/index.* dist/