Fix Github Pages URL and show ROM source (#12)

* Fix URLs for github pages

* Show source for rom

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>

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();

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
+

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
+

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
+

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
+

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);
 }
+

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/