added wasm port

This commit is contained in:
2025-07-08 22:32:58 +08:00
parent fa675c4b7f
commit 325ee25b2e
31 changed files with 1572 additions and 181 deletions

View File

@@ -0,0 +1,3 @@
[build]
target = "wasm32-unknown-unknown"

39
rdraught-wasm/Cargo.toml Normal file
View File

@@ -0,0 +1,39 @@
[package]
name = "rdraught-wasm"
authors.workspace = true
edition.workspace = true
homepage.workspace = true
license.workspace = true
repository.workspace = true
rust-version.workspace = true
version.workspace = true
# [lib]
# crate-type = ["cdylib"]
[dependencies]
rdraught.workspace = true
rdraught-ui-common.workspace = true
wasm-bindgen.workspace = true
console_error_panic_hook.workspace = true
rmath.workspace = true
base64.workspace = true
[dependencies.web-sys]
workspace = true
features = [
'DomMatrix',
'CanvasRenderingContext2d',
'CssStyleDeclaration',
'Document',
'Element',
'EventTarget',
'HtmlCanvasElement',
'HtmlElement',
'MouseEvent',
'Node',
'HtmlImageElement',
'SvgImageElement',
'Window',
]

27
rdraught-wasm/dist/index.html vendored Normal file
View File

@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
<style>
body {
margin: 0px;
}
</style>
<link rel="modulepreload" href="/rdraught-wasm-1d648b9090e33d1f.js" crossorigin="anonymous" integrity="sha384-T7IqpVlu6X9Lrf6TI9E2mHL6bPl2B4DHWKUGmbtsfGa1QSmnJBFB8IRe7clx0yWb"><link rel="preload" href="/rdraught-wasm-1d648b9090e33d1f_bg.wasm" crossorigin="anonymous" integrity="sha384-v+/7HPNa68RnAHRmXFFl7L7bUCWjUJnc8AGKHfn6l5NJiPANQ7yqdGRb+abf1wyh" as="fetch" type="application/wasm"></head>
<body>
<script type="module">
import init, * as bindings from '/rdraught-wasm-1d648b9090e33d1f.js';
const wasm = await init({ module_or_path: '/rdraught-wasm-1d648b9090e33d1f_bg.wasm' });
window.wasmBindings = bindings;
dispatchEvent(new CustomEvent("TrunkApplicationStarted", {detail: {wasm}}));
</script></body>
</html>

16
rdraught-wasm/index.html Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
<style>
body {
margin: 0px;
}
</style>
</head>
<body>
</body>
</html>

View File

@@ -0,0 +1,27 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="45" height="45">
<g style="fill:none; fill-opacity:0; fill-rule:evenodd; stroke:#ffc837; stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4; stroke-dasharray:none; stroke-opacity:1;" transform="translate(0,0)">
<path
d="M 22.5,11.63 L 22.5,6"
style="fill:none; stroke:#ffc837; stroke-linejoin:miter;" />
<path
d="M 20,8 L 25,8"
style="fill:none; stroke:#ffc837; stroke-linejoin:miter;" />
<path
d="M 22.5,25 C 22.5,25 27,17.5 25.5,14.5 C 25.5,14.5 24.5,12 22.5,12 C 20.5,12 19.5,14.5 19.5,14.5 C 18,17.5 22.5,25 22.5,25"
style="fill:#ffffff; stroke:#ffc837; stroke-linecap:butt; stroke-linejoin:miter;" />
<path
d="M 11.5,37 C 17,40.5 27,40.5 32.5,37 L 32.5,30 C 32.5,30 41.5,25.5 38.5,19.5 C 34.5,13 25,16 22.5,23.5 L 22.5,27 L 22.5,23.5 C 19,16 9.5,13 6.5,19.5 C 3.5,25.5 11.5,29.5 11.5,29.5 L 11.5,37 z "
style="fill:#ffffff; stroke:#ffc837;" />
<path
d="M 11.5,30 C 17,27 27,27 32.5,30"
style="fill:none; stroke:#ffc837;" />
<path
d="M 11.5,33.5 C 17,30.5 27,30.5 32.5,33.5"
style="fill:none; stroke:#ffc837;" />
<path
d="M 11.5,37 C 17,34 27,34 32.5,37"
style="fill:none; stroke:#ffc837;" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@@ -0,0 +1,27 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="45" height="45">
<g style="fill:none; fill-opacity:0; fill-rule:evenodd; stroke:#776b00; stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4; stroke-dasharray:none; stroke-opacity:1;" transform="translate(0,0)">
<path
d="M 22.5,11.63 L 22.5,6"
style="fill:none; stroke:#776b00; stroke-linejoin:miter;" />
<path
d="M 20,8 L 25,8"
style="fill:none; stroke:#776b00; stroke-linejoin:miter;" />
<path
d="M 22.5,25 C 22.5,25 27,17.5 25.5,14.5 C 25.5,14.5 24.5,12 22.5,12 C 20.5,12 19.5,14.5 19.5,14.5 C 18,17.5 22.5,25 22.5,25"
style="fill:#ffffff; stroke:#776b00; stroke-linecap:butt; stroke-linejoin:miter;" />
<path
d="M 11.5,37 C 17,40.5 27,40.5 32.5,37 L 32.5,30 C 32.5,30 41.5,25.5 38.5,19.5 C 34.5,13 25,16 22.5,23.5 L 22.5,27 L 22.5,23.5 C 19,16 9.5,13 6.5,19.5 C 3.5,25.5 11.5,29.5 11.5,29.5 L 11.5,37 z "
style="fill:#ffffff; stroke:#776b00;" />
<path
d="M 11.5,30 C 17,27 27,27 32.5,30"
style="fill:none; stroke:#776b00;" />
<path
d="M 11.5,33.5 C 17,30.5 27,30.5 32.5,33.5"
style="fill:none; stroke:#776b00;" />
<path
d="M 11.5,37 C 17,34 27,34 32.5,37"
style="fill:none; stroke:#776b00;" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

61
rdraught-wasm/src/lib.rs Normal file
View File

@@ -0,0 +1,61 @@
use std::cell::Cell;
use std::rc::Rc;
use wasm_bindgen::prelude::*;
use web_sys::CanvasRenderingContext2d;
use web_sys::MouseEvent;
extern crate console_error_panic_hook;
// #[wasm_bindgen(start)]
fn main() -> Result<(), JsValue> {
let document = web_sys::window().unwrap().document().unwrap();
let canvas = document
.create_element("canvas")?
.dyn_into::<web_sys::HtmlCanvasElement>()?;
document.body().unwrap().append_child(&canvas)?;
canvas.set_width(640);
canvas.set_height(480);
canvas.style().set_property("border", "solid")?;
let context = canvas
.get_context("2d")?
.unwrap()
.dyn_into::<web_sys::CanvasRenderingContext2d>()?;
let context = Rc::new(context);
let pressed = Rc::new(Cell::new(false));
{
let context = context.clone();
let pressed = pressed.clone();
let closure = Closure::<dyn FnMut(_)>::new(move |event: web_sys::MouseEvent| {
context.begin_path();
context.move_to(event.offset_x() as f64, event.offset_y() as f64);
pressed.set(true);
});
canvas.add_event_listener_with_callback("mousedown", closure.as_ref().unchecked_ref())?;
closure.forget();
}
{
let context = context.clone();
let pressed = pressed.clone();
let closure = Closure::<dyn FnMut(_)>::new(move |event: web_sys::MouseEvent| {
if pressed.get() {
context.line_to(event.offset_x() as f64, event.offset_y() as f64);
context.stroke();
context.begin_path();
context.move_to(event.offset_x() as f64, event.offset_y() as f64);
}
});
canvas.add_event_listener_with_callback("mousemove", closure.as_ref().unchecked_ref())?;
closure.forget();
}
{
let closure = Closure::<dyn FnMut(_)>::new(move |event: web_sys::MouseEvent| {
pressed.set(false);
context.line_to(event.offset_x() as f64, event.offset_y() as f64);
context.stroke();
});
canvas.add_event_listener_with_callback("mouseup", closure.as_ref().unchecked_ref())?;
closure.forget();
}
Ok(())
}

446
rdraught-wasm/src/main.rs Normal file
View File

@@ -0,0 +1,446 @@
use base64::Engine;
use base64::engine::general_purpose::STANDARD as b64;
use core::f64::consts::PI;
use rdraught::{DraughtsBoard, DraughtsGame, Move, Piece, Player, Position, RectangularBoard};
use rdraught_ui_common::{
Point, Rect, SharedMutable, SharedMutableRef, Xform, new_shared_mut, new_shared_mut_ref,
};
use wasm_bindgen::prelude::*;
use web_sys::{CanvasRenderingContext2d, Document, HtmlImageElement, MouseEvent};
extern crate console_error_panic_hook;
#[wasm_bindgen]
extern "C" {
// Use `js_namespace` here to bind `console.log(..)` instead of just
// `log(..)`
#[wasm_bindgen(js_namespace = console)]
fn log(s: &str);
// The `console.log` is quite polymorphic, so we can bind it with multiple
// signatures. Note that we need to use `js_name` to ensure we always call
// `log` in JS.
#[wasm_bindgen(js_namespace = console, js_name = log)]
fn log_u32(a: u32);
// Multiple arguments too!
#[wasm_bindgen(js_namespace = console, js_name = log)]
fn log_many(a: &str, b: &str);
}
macro_rules! console_log {
// Note that this is using the `log` function imported above during
// `bare_bones`
($($t:tt)*) => (log(&format_args!($($t)*).to_string()))
}
struct PieceDrawer {
red_crown: HtmlImageElement,
white_crown: HtmlImageElement,
}
impl PieceDrawer {
fn new(document: &Document) -> Result<PieceDrawer, JsValue> {
const CROWN_RED: &[u8] = include_bytes!("crown_red.svg");
const CROWN_WHITE: &[u8] = include_bytes!("crown_white.svg");
let red_crown = document
.create_element("img")?
.dyn_into::<HtmlImageElement>()?;
let src = b64.encode(CROWN_RED);
let src = format!("data:image/svg+xml;base64,{}", src);
red_crown.set_src(&src);
let white_crown = document
.create_element("img")?
.dyn_into::<HtmlImageElement>()?;
let src = b64.encode(CROWN_WHITE);
let src = format!("data:image/svg+xml;base64,{}", src);
white_crown.set_src(&src);
Ok(PieceDrawer {
red_crown,
white_crown,
})
}
fn draw_piece(
&self,
ctx: &CanvasRenderingContext2d,
xform: &Xform,
cell: Rect,
piece: Piece,
) -> Result<(), JsValue> {
ctx.save();
let center = cell.center();
let outer_radius = cell.width() * 0.3;
let thickness = outer_radius * 0.5;
let vertical_scale_factor = 0.7;
{
let p = Point::new(0.0, cell.center().y()) * xform;
let xform = xform.clone()
* Xform::xlate(-p.x(), -p.y())
* Xform::scale(1.0, vertical_scale_factor)
* Xform::xlate(p.x(), p.y());
apply_xform(ctx, &xform)?;
}
ctx.set_fill_style_str("#000");
ctx.begin_path();
ctx.arc(
center.x(),
center.y() + thickness / 2.0,
outer_radius,
0.0,
PI,
)?;
ctx.line_to(center.x() - outer_radius, center.y() - thickness / 2.0);
ctx.arc(
center.x(),
center.y() - thickness / 2.0,
outer_radius,
PI,
2.0 * PI,
)?;
ctx.line_to(center.x() + outer_radius, center.y() + thickness / 2.0);
ctx.fill();
match piece.player() {
Some(Player::Red) => {
ctx.set_fill_style_str("#ff0000");
}
Some(Player::White) => {
ctx.set_fill_style_str("#ffffff");
}
None => {}
}
let radius = cell.width() * 0.275;
ctx.begin_path();
ctx.arc(
center.x(),
center.y() - thickness / 2.0,
radius,
0.0,
2.0 * PI,
)?;
ctx.fill();
ctx.restore();
ctx.save();
if let Some(player) = piece.player() {
if piece.is_crowned() {
{
let p = Point::new(cell.center().x(), cell.center().y()) * xform;
let f = 0.55;
let xform = xform.clone()
* Xform::xlate(-p.x(), -p.y())
* Xform::scale(1.0, vertical_scale_factor)
* Xform::scale(f, f)
* Xform::xlate(p.x(), p.y());
apply_xform(ctx, &xform)?;
}
let image = match player {
Player::White => self.white_crown.clone(),
Player::Red => self.red_crown.clone(),
};
ctx.draw_image_with_html_image_element_and_dw_and_dh(
&image,
cell.tl().x(),
cell.tl().y() - thickness / 1.0,
cell.width(),
cell.height(),
)?;
}
}
ctx.restore();
Ok(())
}
}
fn apply_xform(ctx: &CanvasRenderingContext2d, xform: &Xform) -> Result<(), JsValue> {
ctx.set_transform(
xform.xx(),
xform.xy(),
xform.yx(),
xform.yy(),
xform.tx(),
xform.ty(),
)
}
fn from_ctx(ctx: &CanvasRenderingContext2d) -> Result<Xform, JsValue> {
let m = ctx.get_transform()?;
Ok(Xform::new(m.a(), m.c(), m.b(), m.d(), m.e(), m.f()))
}
fn map_row(current_player: Player, row: usize) -> usize {
match current_player {
Player::White => DraughtsBoard::rows() - 1 - row,
Player::Red => row,
}
}
trait Agent {}
struct App {
game: DraughtsGame,
board: Rect,
screen: Rect,
xform: Xform,
selected_piece: Option<Position>,
available_moves: Vec<Move>,
main_player: Player,
red_agent: Box<dyn Agent>,
white_agent: Box<dyn Agent>,
}
struct Human {}
impl Human {
fn new() -> Human {
Human {}
}
}
impl Agent for Human {}
impl Default for App {
fn default() -> Self {
let board = Rect::from_size(
Point::new(100.0, 400.0),
App::SQUARE_SIZE * DraughtsBoard::columns() as f64,
App::SQUARE_SIZE * DraughtsBoard::rows() as f64,
);
App {
game: DraughtsGame::default(),
board,
screen: Rect::new(Point::new(0.0, 0.0), Point::new(0.0, 0.0)),
xform: Xform::default(),
selected_piece: None,
available_moves: Vec::new(),
main_player: Player::White,
red_agent: Box::new(Human::new()),
white_agent: Box::new(Human::new()),
}
}
}
impl App {
const SQUARE_SIZE: f64 = 100.0;
fn draw(
&mut self,
ctx: &CanvasRenderingContext2d,
piece_drawer: &PieceDrawer,
) -> Result<(), JsValue> {
ctx.clear_rect(0.0, 0.0, self.screen.width(), self.screen.height());
let board = &self.board;
let f = f64::min(
self.screen.width() / board.width(),
self.screen.height() / board.height(),
);
ctx.save();
self.xform = Xform::default()
* Xform::xlate(-board.center().x(), -board.center().y())
* Xform::scale(f, f)
* Xform::xlate(self.screen.center().x(), self.screen.center().y());
apply_xform(ctx, &self.xform)?;
// let board_center = board.center();
// let screen_center = screen.center();
// let xlate = -board_center;
// ctx.restore();
// ctx.translate(-xlate.x(), -xlate.y())?;
// ctx.scale(f, f)?;
// ctx.translate(screen_center.x(), screen_center.y())?;
// console_log!("xform2: {}", from_ctx(ctx)?);
let available_moves: Vec<Position> = self
.available_moves
.iter()
.map(Move::get_end_position)
.collect();
for i in 0..DraughtsBoard::rows() {
for j in 0..DraughtsBoard::columns() {
let cell = Rect::new(
Point::new(
board.tl().x() + i as f64 * App::SQUARE_SIZE,
board.tl().y() + j as f64 * App::SQUARE_SIZE,
),
Point::new(
board.tl().x() + (i + 1) as f64 * App::SQUARE_SIZE,
board.tl().y() + (j + 1) as f64 * App::SQUARE_SIZE,
),
);
if (i + j) % 2 == 0 {
ctx.set_fill_style_str("#cccc99");
} else {
ctx.set_fill_style_str("#666633");
}
ctx.fill_rect(cell.tl().x(), cell.tl().y(), cell.width(), cell.height());
if (i + j) % 2 != 0 {
let current_player = Player::White;
let position = Position::from_index((map_row(current_player, j), i));
let piece = self.game.piece_at(position);
if piece.is_present() {
piece_drawer.draw_piece(ctx, &self.xform, cell.clone(), piece)?;
}
if let Some(selected_piece) = self.selected_piece {
if selected_piece == position {
// console_log!("Selected: {}", selected_piece);
ctx.save();
ctx.set_shadow_blur(300.0);
ctx.set_shadow_color("#ffffff");
ctx.begin_path();
ctx.move_to(cell.tl().x(), cell.tl().y());
ctx.line_to(cell.br().x(), cell.tl().y());
ctx.line_to(cell.br().x(), cell.br().y());
ctx.line_to(cell.tl().x(), cell.br().y());
ctx.line_to(cell.tl().x(), cell.tl().y());
ctx.clip();
ctx.set_stroke_style_str("#fff");
ctx.set_line_width(4.0);
ctx.begin_path();
ctx.move_to(board.tl().x(), board.tl().y());
ctx.line_to(board.br().x(), board.tl().y());
ctx.line_to(board.br().x(), board.br().y());
ctx.line_to(board.tl().x(), board.br().y());
ctx.line_to(board.tl().x(), board.tl().y());
ctx.move_to(cell.tl().x(), cell.tl().y());
ctx.line_to(cell.br().x(), cell.tl().y());
ctx.line_to(cell.br().x(), cell.br().y());
ctx.line_to(cell.tl().x(), cell.br().y());
ctx.line_to(cell.tl().x(), cell.tl().y());
ctx.stroke();
ctx.restore();
}
}
if available_moves.contains(&position) {
ctx.save();
ctx.set_shadow_blur(300.0);
ctx.set_shadow_color("#0000ff");
ctx.begin_path();
ctx.move_to(cell.tl().x(), cell.tl().y());
ctx.line_to(cell.br().x(), cell.tl().y());
ctx.line_to(cell.br().x(), cell.br().y());
ctx.line_to(cell.tl().x(), cell.br().y());
ctx.line_to(cell.tl().x(), cell.tl().y());
ctx.clip();
ctx.set_stroke_style_str("#0f0");
ctx.set_line_width(4.0);
ctx.begin_path();
ctx.move_to(board.tl().x(), board.tl().y());
ctx.line_to(board.br().x(), board.tl().y());
ctx.line_to(board.br().x(), board.br().y());
ctx.line_to(board.tl().x(), board.br().y());
ctx.line_to(board.tl().x(), board.tl().y());
ctx.move_to(cell.tl().x(), cell.tl().y());
ctx.line_to(cell.br().x(), cell.tl().y());
ctx.line_to(cell.br().x(), cell.br().y());
ctx.line_to(cell.tl().x(), cell.br().y());
ctx.line_to(cell.tl().x(), cell.tl().y());
ctx.stroke();
ctx.restore();
}
}
}
}
ctx.restore();
Ok(())
}
}
fn main() -> Result<(), JsValue> {
let document = web_sys::window().unwrap().document().unwrap();
let canvas = document
.create_element("canvas")?
.dyn_into::<web_sys::HtmlCanvasElement>()?;
canvas.style().set_property("background-color", "black")?;
document.body().unwrap().append_child(&canvas)?;
// canvas.style().set_property("border", "solid")?;
let window = web_sys::window().expect("should have a window in this context");
let width = window.inner_width().unwrap().as_f64().unwrap();
let height = window.inner_height().unwrap().as_f64().unwrap();
canvas.set_width(width as u32);
canvas.set_height(height as u32);
let app = new_shared_mut_ref(App::default());
let ctx = canvas
.get_context("2d")?
.unwrap()
.dyn_into::<web_sys::CanvasRenderingContext2d>()?;
let piece_drawer = new_shared_mut_ref(PieceDrawer::new(&document)?);
{
let piece_drawer = piece_drawer.clone();
let screen = Rect::new(Point::new(0.0, 0.0), Point::new(width, height));
app.borrow_mut().screen = screen;
app.borrow_mut().draw(&ctx, &piece_drawer.borrow())?;
}
{
let app = app.clone();
let canvas = canvas.clone();
let ctx = ctx.clone();
let piece_drawer = piece_drawer.clone();
let closure = Closure::<dyn FnMut()>::new(move || {
let window = web_sys::window().expect("should have a window in this context");
let width = window.inner_width().unwrap().as_f64().unwrap() as u32;
let height = window.inner_height().unwrap().as_f64().unwrap() as u32;
canvas.set_width(width);
canvas.set_height(height);
app.borrow_mut().screen = Rect::new(
Point::new(0.0, 0.0),
Point::new(canvas.width() as f64, canvas.height() as f64),
);
app.borrow_mut().draw(&ctx, &piece_drawer.borrow()).unwrap();
});
let window = web_sys::window().expect("should have a window in this context");
window.set_onresize(Some(closure.as_ref().unchecked_ref()));
closure.forget();
}
{
let app = app.clone();
let piece_drawer = piece_drawer.clone();
let mouse_click_handler = Closure::wrap(Box::new(move |event: MouseEvent| {
let mut app = app.borrow_mut();
let xform = app.xform.invert();
let board = &app.board;
let position = Point::new(event.x() as f64, event.y() as f64) * &xform - board.tl();
if position.x() > 0.0
&& position.x() < board.width()
&& position.y() > 0.0
&& position.y() < board.height()
{
let col = f64::floor(position.x() / App::SQUARE_SIZE) as usize;
let row = f64::floor(position.y() / App::SQUARE_SIZE) as usize;
let row = map_row(app.main_player, row);
if (row + col) % 2 == 0 {
let position = Position::new(row as u8, col as u8).unwrap();
let selected_move = app
.available_moves
.iter()
.find(|mv| mv.get_end_position() == position)
.map(Move::clone);
if app.selected_piece.is_some() && selected_move.is_some() {
let mv = selected_move.unwrap();
app.game.check_and_apply_move(&mv).unwrap();
app.selected_piece = None;
app.available_moves.clear();
} else {
app.selected_piece = Some(position);
let mut available_moves = Vec::<Move>::new();
for mv in app.game.moves_for_piece(position) {
available_moves.push(mv);
}
app.available_moves = available_moves;
// console_log!("Clicked at: ({}, {})", col, row);
}
} else {
app.selected_piece = None;
app.available_moves.clear();
}
} else {
app.selected_piece = None;
app.available_moves.clear();
}
app.draw(&ctx, &piece_drawer.borrow()).unwrap();
}) as Box<dyn FnMut(MouseEvent)>);
canvas.set_onclick(Some(mouse_click_handler.as_ref().unchecked_ref()));
mouse_click_handler.forget();
}
Ok(())
}

View File

@@ -0,0 +1,12 @@
use std::cell::{Cell, RefCell};
use std::rc::Rc;
pub(crate) type SharedMutable<T> = Rc<Cell<T>>;
pub(crate) type SharedMutableRef<T> = Rc<RefCell<T>>;
pub(crate) fn new_shared_mut_ref<T>(obj: T) -> SharedMutableRef<T> {
Rc::new(RefCell::new(obj))
}
pub(crate) fn new_shared_mut<T>(obj: T) -> SharedMutable<T> {
Rc::new(Cell::new(obj))
}