added wasm port
This commit is contained in:
3
rdraught-wasm/.cargo/config.toml
Normal file
3
rdraught-wasm/.cargo/config.toml
Normal file
@@ -0,0 +1,3 @@
|
||||
[build]
|
||||
target = "wasm32-unknown-unknown"
|
||||
|
39
rdraught-wasm/Cargo.toml
Normal file
39
rdraught-wasm/Cargo.toml
Normal 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
27
rdraught-wasm/dist/index.html
vendored
Normal 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
16
rdraught-wasm/index.html
Normal 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>
|
27
rdraught-wasm/src/crown_red.svg
Normal file
27
rdraught-wasm/src/crown_red.svg
Normal 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 |
27
rdraught-wasm/src/crown_white.svg
Normal file
27
rdraught-wasm/src/crown_white.svg
Normal 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
61
rdraught-wasm/src/lib.rs
Normal 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
446
rdraught-wasm/src/main.rs
Normal 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(())
|
||||
}
|
12
rdraught-wasm/src/types.rs
Normal file
12
rdraught-wasm/src/types.rs
Normal 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))
|
||||
}
|
Reference in New Issue
Block a user