Skip to content

WIP: Yew frontend #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sinon merged 1 commit into from
Jul 24, 2025
Merged

WIP: Yew frontend #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,076 changes: 1,069 additions & 7 deletions Cargo.lock
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion Cargo.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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]
Expand Down
15 changes: 15 additions & 0 deletions crates/chip8-interpreter/src/lib.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -94,6 +96,19 @@
#[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 { '◼' };

Check warning on line 103 in crates/chip8-interpreter/src/lib.rs

View workflow job for this annotation

GitHub Actions / clippy

[clippy] crates/chip8-interpreter/src/lib.rs#L103 

warning: equality checks against true are unnecessary
   --> crates/chip8-interpreter/src/lib.rs:103:33
    |
103 |                 let symbol = if segment == true { '◻' } else { '◼' };
    |                                 ^^^^^^^^^^^^^^^ help: try simplifying it as shown: `segment`
    |
    = help: for further information visit https://rust-lang.github.io/rust-clippy/master/index.html#bool_comparison
    = note: `#[warn(clippy::bool_comparison)]` on by default
Raw output 
crates/chip8-interpreter/src/lib.rs:103:33:w:warning: equality checks against true are unnecessary
   --> crates/chip8-interpreter/src/lib.rs:103:33
    |
103 |                 let symbol = if segment == true { '◻' } else { '◼' };
    |                                 ^^^^^^^^^^^^^^^ help: try simplifying it as shown: `segment`
    |
    = help: for further information visit https://rust-lang.github.io/rust-clippy/master/index.html#bool_comparison
    = note: `#[warn(clippy::bool_comparison)]` on by default


__END__
write!(f, "{}", symbol)?;

Check warning on line 104 in crates/chip8-interpreter/src/lib.rs

View workflow job for this annotation

GitHub Actions / clippy

[clippy] crates/chip8-interpreter/src/lib.rs#L104 

warning: variables can be used directly in the `format!` string
   --> crates/chip8-interpreter/src/lib.rs:104:17
    |
104 |                 write!(f, "{}", symbol)?;
    |                 ^^^^^^^^^^^^^^^^^^^^^^^
    |
    = help: for further information visit https://rust-lang.github.io/rust-clippy/master/index.html#uninlined_format_args
    = note: `#[warn(clippy::uninlined_format_args)]` on by default
help: change this to
    |
104 -                 write!(f, "{}", symbol)?;
104 +                 write!(f, "{symbol}")?;
    |
Raw output 
crates/chip8-interpreter/src/lib.rs:104:17:w:warning: variables can be used directly in the `format!` string
   --> crates/chip8-interpreter/src/lib.rs:104:17
    |
104 |                 write!(f, "{}", symbol)?;
    |                 ^^^^^^^^^^^^^^^^^^^^^^^
    |
    = help: for further information visit https://rust-lang.github.io/rust-clippy/master/index.html#uninlined_format_args
    = note: `#[warn(clippy::uninlined_format_args)]` on by default
help: change this to
    |
104 -                 write!(f, "{}", symbol)?;
104 +                 write!(f, "{symbol}")?;
    |


__END__
}
write!(f, "\n")?;

Check warning on line 106 in crates/chip8-interpreter/src/lib.rs

View workflow job for this annotation

GitHub Actions / clippy

[clippy] crates/chip8-interpreter/src/lib.rs#L106 

warning: using `write!()` with a format string that ends in a single newline
   --> crates/chip8-interpreter/src/lib.rs:106:13
    |
106 |             write!(f, "\n")?;
    |             ^^^^^^^^^^^^^^^
    |
    = help: for further information visit https://rust-lang.github.io/rust-clippy/master/index.html#write_with_newline
    = note: `#[warn(clippy::write_with_newline)]` on by default
help: use `writeln!` instead
    |
106 -             write!(f, "\n")?;
106 +             writeln!(f)?;
    |
Raw output 
crates/chip8-interpreter/src/lib.rs:106:13:w:warning: using `write!()` with a format string that ends in a single newline
   --> crates/chip8-interpreter/src/lib.rs:106:13
    |
106 |             write!(f, "\n")?;
    |             ^^^^^^^^^^^^^^^
    |
    = help: for further information visit https://rust-lang.github.io/rust-clippy/master/index.html#write_with_newline
    = note: `#[warn(clippy::write_with_newline)]` on by default
help: use `writeln!` instead
    |
106 -             write!(f, "\n")?;
106 +             writeln!(f)?;
    |


__END__
}
Ok(())
}
}

impl Chip8Emulator {
#[must_use]
pub fn new() -> Self {
Expand Down
1 change: 1 addition & 0 deletions crates/frontend/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
dist/
12 changes: 12 additions & 0 deletions crates/frontend/Cargo.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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" }
16 changes: 16 additions & 0 deletions crates/frontend/NOTES.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
22 changes: 22 additions & 0 deletions crates/frontend/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
31 changes: 31 additions & 0 deletions crates/frontend/src/main.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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

Check warning on line 9 in crates/frontend/src/main.rs

View workflow job for this annotation

GitHub Actions / clippy

[clippy] crates/frontend/src/main.rs#L9 

warning: useless conversion to the same type: `std::str::Split<'_, &str>`
  --> crates/frontend/src/main.rs:9:31
   |
9  |       let display: Vec<VNode> = emu
   |  _______________________________^
10 | |         .to_string()
11 | |         .split("\n")
12 | |         .into_iter()
   | |____________________^
   |
   = help: for further information visit https://rust-lang.github.io/rust-clippy/master/index.html#useless_conversion
   = note: `#[warn(clippy::useless_conversion)]` on by default
help: consider removing `.into_iter()`
   |
9  ~     let display: Vec<VNode> = emu
10 +         .to_string()
11 +         .split("\n")
   |
Raw output 
crates/frontend/src/main.rs:9:31:w:warning: useless conversion to the same type: `std::str::Split<'_, &str>`
  --> crates/frontend/src/main.rs:9:31
   |
9  |       let display: Vec<VNode> = emu
   |  _______________________________^
10 | |         .to_string()
11 | |         .split("\n")
12 | |         .into_iter()
   | |____________________^
   |
   = help: for further information visit https://rust-lang.github.io/rust-clippy/master/index.html#useless_conversion
   = note: `#[warn(clippy::useless_conversion)]` on by default
help: consider removing `.into_iter()`
   |
9  ~     let display: Vec<VNode> = emu
10 +         .to_string()
11 +         .split("\n")
   |


__END__
.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();
}