WIP: Yew frontend

sinon · sinon · commit f858778297eb · 2025-07-24T21:18:09.000+01:00
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -1,5 +1,5 @@
 [workspace]
-members = ["crates/chip8-interpreter", "crates/chip8-cli"]
+members = ["crates/chip8-interpreter", "crates/chip8-cli", "crates/frontend"]
 resolver = "2"
 
 [workspace.package]
diff --git a/crates/chip8-interpreter/src/lib.rs b/crates/chip8-interpreter/src/lib.rs
@@ -4,6 +4,8 @@
 #![no_std]
 #![allow(clippy::cast_possible_truncation, clippy::cast_sign_loss)]
 
+use core::fmt;
+
 const RAM_SIZE: usize = 4096;
 // The original implementation of the Chip-8 language used a 64x32-pixel monochrome display with this format:
 pub const SCREEN_HEIGHT: usize = 32;
@@ -94,6 +96,19 @@ impl rustler::Resource for Chip8Emulator {}
 #[rustler::resource_impl]
 impl Chip8Emulator {}
 
+impl fmt::Display for Chip8Emulator {
+    fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
+        for line in self.display.as_slice().chunks(SCREEN_WIDTH) {
+            for &segment in line {
+                let symbol = if segment == true { '◻' } else { '◼' };
+                write!(f, "{}", symbol)?;
+            }
+            write!(f, "\n")?;
+        }
+        Ok(())
+    }
+}
+
 impl Chip8Emulator {
     #[must_use]
     pub fn new() -> Self {
diff --git a/crates/frontend/.gitignore b/crates/frontend/.gitignore
@@ -0,0 +1 @@
+dist/
diff --git a/crates/frontend/Cargo.toml b/crates/frontend/Cargo.toml
@@ -0,0 +1,12 @@
+[package]
+name = "frontend"
+authors.workspace = true
+version.workspace = true
+edition.workspace = true
+license.workspace = true
+homepage.workspace = true
+repository.workspace = true
+
+[dependencies]
+yew = { version = "0.21.0", features = ["csr"] }
+chip8-interpreter = { path = "../chip8-interpreter" }
diff --git a/crates/frontend/NOTES.md b/crates/frontend/NOTES.md
@@ -0,0 +1,16 @@
+Serve html from Yew with:
+`trunk serve --open`
+
+Next steps:
+- Investigate:
+    - `wasm_bindgen`
+    - Look at creating the js file using [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame) to create the needed render loop for calling `emu.tick()`
+
+
+Links:
+
+- https://rustwasm.github.io/docs/book/game-of-life/hello-world.html
+- https://github.com/rustwasm/create-wasm-app
+- https://github.com/rustwasm/wasm-pack-template
+- https://yew.rs/docs/getting-started/build-a-sample-app
+- https://alexcrichton.github.io/wasm-bindgen/examples/2d-canvas.html
diff --git a/crates/frontend/index.html b/crates/frontend/index.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+
+<head></head>
+
+<style>
+    body {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+</style>
+
+<body></body>
+
+</html>
diff --git a/crates/frontend/src/main.rs b/crates/frontend/src/main.rs
@@ -0,0 +1,31 @@
+use chip8_interpreter::Chip8Emulator;
+use yew::{prelude::*, virtual_dom::VNode};
+
+#[function_component(App)]
+fn app() -> Html {
+    let mut emu = Chip8Emulator::new();
+    let pong = include_bytes!("../../roms/PONG");
+    emu.load_data(pong);
+    let display: Vec<VNode> = emu
+        .to_string()
+        .split("\n")
+        .into_iter()
+        .map(|row| {
+            html! {
+                <p>{format!("{row}")}</p>
+            }
+        })
+        .collect();
+    html! {
+        <>
+            <h1>{ "Chip8 Emulator state" }</h1>
+            <div>
+                {display}
+            </div>
+        </>
+    }
+}
+
+fn main() {
+    yew::Renderer::<App>::new().render();
+}
