Deploying to gh-pages from @ 18ab7a9 🚀

PIWEEK · Jul 18, 2024 · 1a6da52 · 1a6da52
1 parent 4e100af
commit 1a6da52
Show file tree

Hide file tree

Showing 10 changed files with 160 additions and 0 deletions.
diff --git a/deo_system_debug.rom b/deo_system_debug.rom
diff --git a/empty.rom b/empty.rom
diff --git a/index.html b/index.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>👻 COCO-8</title>
+  <script type="module" defer src="./index.js"></script>
+  <link rel="stylesheet" href="styles.css" type="text/css">
+</head>
+<body>
+  <div class="wrapper">
+  <header>
+    <h1>👻-8</h1>
+  </header>
+  <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>
+
+        <div>
+          <input type="checkbox" id="coco-show-bytecode">
+          <label for="coco-show-bytecode">Show bytecode</label>
+        </div>
+      </section>
+      <section id="coco-bytecode" class="bytecode" style="display: none;"></section>
+  </main>
+  <footer>
+    <p>Crafted with 🖤 by <a href="https://www.ladybenko.net">ladybenko</a>.</p>
+    <p>
+      <a href="https://github.com/PIWEEK/coco-8">Source code</a>
+    </p>
+  </footer>
+  </div>
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,64 @@
+import initWasm, { runRom } from "./vendor/coco_ui.js";
+
+async function handleFile(file) {
+  const buffer = await file.arrayBuffer();
+  const rom = new Uint8Array(buffer);
+
+  const bytecode = Array.from(rom)
+    .map((x) => x.toString(16).padStart(2, "0"))
+    .join(" ");
+  document.querySelector("#coco-bytecode").innerHTML = bytecode;
+
+  const output = runRom(rom);
+  if (output.debug) {
+    console.log(output.debug);
+  }
+}
+
+async function fetchRom(path) {
+  try {
+    const response = await fetch(path);
+    return response;
+  } catch (err) {
+    console.error(err);
+  }
+  return null;
+}
+
+function setupRomSelector(selectEl, defaultRom) {
+  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);
+    }
+  });
+}
+
+function setupControls() {
+  let showBytecodeCheckbox = document.querySelector("#coco-show-bytecode");
+  let bytecodeEl = document.querySelector("#coco-bytecode");
+
+  showBytecodeCheckbox.addEventListener("change", (event) => {
+    bytecodeEl.style.display = event.target.checked ? "block" : "none";
+  });
+}
+
+async function main() {
+  const _ = await initWasm("./vendor/coco_ui_bg.wasm");
+  const romSelector = document.querySelector("#coco-rom-selector");
+
+  const defaultRom = "sprite_move.rom";
+  setupRomSelector(romSelector, defaultRom);
+  setupControls();
+
+  const rom = await fetchRom(`/roms/${defaultRom}`);
+  if (rom) {
+    await handleFile(rom);
+  }
+}
+
+main();
diff --git a/pixel_fill.rom b/pixel_fill.rom
diff --git a/put_pixel.rom b/put_pixel.rom
diff --git a/sprite.rom b/sprite.rom
diff --git a/sprite_move.rom b/sprite_move.rom
diff --git a/styles.css b/styles.css
@@ -0,0 +1,52 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+* {
+  --width: 768px; /* x4 */
+  margin: 0;
+}
+
+body {
+  font-family: monospace;
+  -webkit-font-smoothing: antialiased;
+  min-height: 100vh;
+  display: grid;
+  place-content: center;
+}
+
+select, button {
+  font: inherit;
+  padding: 0.25rem 1rem;
+}
+
+.wrapper {
+  padding: 1rem;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  row-gap: 1rem;
+  /* height: 100vh; */
+  width: var(--width);
+}
+
+.coco-video {
+  image-rendering: pixelated;
+  image-rendering: crisp-edges;
+  width: 100%;
+  background: black;
+}
+
+.coco-controls {
+  margin: 1rem 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.bytecode {
+  max-height: 20vh;
+  border: 1px solid black;
+  padding: 1rem;
+  max-width: (--width);
+}
diff --git a/vendor/.gitignore b/vendor/.gitignore
@@ -0,0 +1,3 @@
+*
+!.gitignore
+