fix frontend board mapping, game-over handling, and WASM-4
- fix Xform yx and add a shared view-aware board_position helper - add GTK automatic game-over, restart, status, and multi-capture selection - pin librsvg to the 2.60 series to match GTK4/glib 0.20 - add WASM orientation, undo/redo/new/flip controls, and winner overlay - replace WASM crown images with canvas paths and remove dead files/deps - make WASM-4 playable with mouse input, crowns, winner handling, and correct mapping - move the WASM-4 release profile to the workspace root - clean up frontend dead code and update the README
This commit is contained in:
@@ -8,22 +8,15 @@ 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',
|
||||
@@ -31,9 +24,8 @@ features = [
|
||||
'EventTarget',
|
||||
'HtmlCanvasElement',
|
||||
'HtmlElement',
|
||||
'KeyboardEvent',
|
||||
'MouseEvent',
|
||||
'Node',
|
||||
'HtmlImageElement',
|
||||
'SvgImageElement',
|
||||
'Window',
|
||||
]
|
||||
|
||||
@@ -1,27 +0,0 @@
|
||||
<?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>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
@@ -1,27 +0,0 @@
|
||||
<?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>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
@@ -1,61 +0,0 @@
|
||||
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(())
|
||||
}
|
||||
+294
-302
@@ -1,156 +1,18 @@
|
||||
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 rdraught::{
|
||||
DraughtsBoard, DraughtsGame, Move, Piece, Player, Position, RDraughtApplication,
|
||||
RectangularBoard,
|
||||
};
|
||||
use rdraught_ui_common::{Point, Rect, Xform, board_position, new_shared_mut_ref};
|
||||
use wasm_bindgen::prelude::*;
|
||||
use web_sys::{CanvasRenderingContext2d, Document, HtmlImageElement, MouseEvent};
|
||||
use web_sys::{CanvasRenderingContext2d, KeyboardEvent, MouseEvent};
|
||||
|
||||
extern crate console_error_panic_hook;
|
||||
const CROWN_COLOR: &str = "#ffd700";
|
||||
|
||||
#[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 player_name(player: Player) -> &'static str {
|
||||
match player {
|
||||
Player::Red => "Red",
|
||||
Player::White => "White",
|
||||
}
|
||||
}
|
||||
|
||||
@@ -165,42 +27,129 @@ fn apply_xform(ctx: &CanvasRenderingContext2d, xform: &Xform) -> Result<(), JsVa
|
||||
)
|
||||
}
|
||||
|
||||
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 draw_crown(ctx: &CanvasRenderingContext2d, center: Point, size: f64) -> Result<(), JsValue> {
|
||||
let width = size * 0.35;
|
||||
let height = size * 0.2;
|
||||
let top = center.y() - height / 2.0;
|
||||
|
||||
ctx.begin_path();
|
||||
ctx.move_to(center.x() - width / 2.0, top);
|
||||
ctx.line_to(center.x() - width / 4.0, top + height);
|
||||
ctx.line_to(center.x(), top - height * 0.25);
|
||||
ctx.line_to(center.x() + width / 4.0, top + height);
|
||||
ctx.line_to(center.x() + width / 2.0, top);
|
||||
ctx.close_path();
|
||||
ctx.set_fill_style_str(CROWN_COLOR);
|
||||
ctx.fill();
|
||||
Ok(())
|
||||
}
|
||||
|
||||
fn map_row(current_player: Player, row: usize) -> usize {
|
||||
match current_player {
|
||||
Player::White => DraughtsBoard::rows() - 1 - row,
|
||||
Player::Red => row,
|
||||
fn draw_piece(
|
||||
ctx: &CanvasRenderingContext2d,
|
||||
xform: &Xform,
|
||||
cell: Rect,
|
||||
piece: Piece,
|
||||
) -> Result<(), JsValue> {
|
||||
if !piece.is_present() {
|
||||
return Ok(());
|
||||
}
|
||||
|
||||
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 piece_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, &piece_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();
|
||||
|
||||
if piece.is_crowned() {
|
||||
draw_crown(
|
||||
ctx,
|
||||
Point::new(center.x(), center.y() - thickness / 2.0),
|
||||
cell.width(),
|
||||
)?;
|
||||
}
|
||||
|
||||
ctx.restore();
|
||||
Ok(())
|
||||
}
|
||||
|
||||
trait Agent {}
|
||||
fn draw_highlight(ctx: &CanvasRenderingContext2d, cell: &Rect, color: &str) -> Result<(), JsValue> {
|
||||
ctx.save();
|
||||
ctx.set_shadow_blur(300.0);
|
||||
ctx.set_shadow_color(color);
|
||||
ctx.begin_path();
|
||||
ctx.move_to(cell.tl().x(), cell.tl().y());
|
||||
ctx.line_to(cell.tl().x(), cell.br().y());
|
||||
ctx.line_to(cell.br().x(), cell.br().y());
|
||||
ctx.line_to(cell.br().x(), cell.tl().y());
|
||||
ctx.line_to(cell.tl().x(), cell.tl().y());
|
||||
ctx.clip();
|
||||
ctx.begin_path();
|
||||
ctx.set_stroke_style_str(color);
|
||||
ctx.set_line_width(4.0);
|
||||
ctx.move_to(cell.tl().x(), cell.tl().y());
|
||||
ctx.line_to(cell.tl().x(), cell.br().y());
|
||||
ctx.line_to(cell.br().x(), cell.br().y());
|
||||
ctx.line_to(cell.br().x(), cell.tl().y());
|
||||
ctx.line_to(cell.tl().x(), cell.tl().y());
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
Ok(())
|
||||
}
|
||||
|
||||
struct App {
|
||||
game: DraughtsGame,
|
||||
rd: RDraughtApplication,
|
||||
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(
|
||||
@@ -209,172 +158,174 @@ impl Default for App {
|
||||
App::SQUARE_SIZE * DraughtsBoard::rows() as f64,
|
||||
);
|
||||
App {
|
||||
game: DraughtsGame::default(),
|
||||
rd: RDraughtApplication::new(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> {
|
||||
|
||||
fn new_game(&mut self) {
|
||||
self.rd = RDraughtApplication::new(DraughtsGame::default());
|
||||
self.selected_piece = None;
|
||||
self.available_moves.clear();
|
||||
}
|
||||
|
||||
fn flip_view(&mut self) {
|
||||
self.main_player = match self.main_player {
|
||||
Player::White => Player::Red,
|
||||
Player::Red => Player::White,
|
||||
};
|
||||
self.selected_piece = None;
|
||||
self.available_moves.clear();
|
||||
}
|
||||
|
||||
fn update_selection_after_move(&mut self) {
|
||||
if let Some(pending) = self.rd.game().pending_capture() {
|
||||
self.selected_piece = Some(pending);
|
||||
self.available_moves = self.rd.game().moves_for_piece(pending).collect();
|
||||
} else {
|
||||
self.selected_piece = None;
|
||||
self.available_moves.clear();
|
||||
}
|
||||
}
|
||||
|
||||
fn draw(&mut self, ctx: &CanvasRenderingContext2d) -> Result<(), JsValue> {
|
||||
ctx.clear_rect(0.0, 0.0, self.screen.width(), self.screen.height());
|
||||
let board = &self.board;
|
||||
let f = f64::min(
|
||||
let factor = 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::scale(factor, factor)
|
||||
* 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
|
||||
|
||||
let available_positions: Vec<Position> = self
|
||||
.available_moves
|
||||
.iter()
|
||||
.filter_map(Move::get_end_position)
|
||||
.collect();
|
||||
for i in 0..DraughtsBoard::rows() {
|
||||
for j in 0..DraughtsBoard::columns() {
|
||||
|
||||
for screen_row in 0..DraughtsBoard::rows() {
|
||||
for screen_col 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,
|
||||
board.tl().x() + screen_col as f64 * App::SQUARE_SIZE,
|
||||
board.tl().y() + screen_row 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,
|
||||
board.tl().x() + (screen_col + 1) as f64 * App::SQUARE_SIZE,
|
||||
board.tl().y() + (screen_row + 1) as f64 * App::SQUARE_SIZE,
|
||||
),
|
||||
);
|
||||
if (i + j) % 2 == 0 {
|
||||
if (screen_row + screen_col) % 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::new(map_row(current_player, j) as u8, i as u8)
|
||||
.expect("board loop only visits valid squares");
|
||||
let piece = self.game.piece_at(position);
|
||||
|
||||
let board_position =
|
||||
board_position(self.main_player, screen_row as u8, screen_col as u8).ok();
|
||||
if let Some(position) = board_position {
|
||||
let piece = self.rd.game().piece_at(position);
|
||||
if piece.is_present() {
|
||||
piece_drawer.draw_piece(ctx, &self.xform, cell.clone(), piece)?;
|
||||
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();
|
||||
}
|
||||
if board_position == self.selected_piece {
|
||||
draw_highlight(ctx, &cell, "#ffffff")?;
|
||||
}
|
||||
if let Some(position) = board_position {
|
||||
if available_positions.contains(&position) {
|
||||
draw_highlight(ctx, &cell, "#00ff00")?;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
ctx.restore();
|
||||
|
||||
if let Some(winner) = self.rd.game().winner() {
|
||||
ctx.save();
|
||||
ctx.set_fill_style_str("rgba(0, 0, 0, 0.65)");
|
||||
ctx.fill_rect(0.0, 0.0, self.screen.width(), self.screen.height());
|
||||
ctx.set_fill_style_str("#ffffff");
|
||||
ctx.set_font("48px sans-serif");
|
||||
ctx.set_text_align("center");
|
||||
ctx.set_text_baseline("middle");
|
||||
ctx.fill_text(
|
||||
&format!("{} wins", player_name(winner)),
|
||||
self.screen.center().x(),
|
||||
self.screen.center().y(),
|
||||
)?;
|
||||
ctx.set_font("20px sans-serif");
|
||||
ctx.fill_text(
|
||||
"Press N for a new game",
|
||||
self.screen.center().x(),
|
||||
self.screen.center().y() + 40.0,
|
||||
)?;
|
||||
ctx.restore();
|
||||
} else {
|
||||
ctx.save();
|
||||
ctx.set_fill_style_str("#ffffff");
|
||||
ctx.set_font("14px sans-serif");
|
||||
ctx.set_text_align("left");
|
||||
ctx.set_text_baseline("top");
|
||||
ctx.fill_text(
|
||||
&format!(
|
||||
"{} to move | Ctrl+Z undo Ctrl+Y redo N new F flip",
|
||||
player_name(self.rd.game().next_move())
|
||||
),
|
||||
10.0,
|
||||
10.0,
|
||||
)?;
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
Ok(())
|
||||
}
|
||||
}
|
||||
|
||||
fn main() -> Result<(), JsValue> {
|
||||
console_error_panic_hook::set_once();
|
||||
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)?);
|
||||
.dyn_into::<CanvasRenderingContext2d>()?;
|
||||
{
|
||||
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();
|
||||
app.borrow_mut().screen = Rect::new(Point::new(0.0, 0.0), Point::new(width, height));
|
||||
app.borrow_mut().draw(&ctx)?;
|
||||
}
|
||||
|
||||
{
|
||||
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;
|
||||
@@ -385,64 +336,105 @@ fn main() -> Result<(), JsValue> {
|
||||
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();
|
||||
app.borrow_mut().draw(&ctx).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 ctx = ctx.clone();
|
||||
let mouse_click_handler = Closure::wrap(Box::new(move |event: MouseEvent| {
|
||||
let mut app = app.borrow_mut();
|
||||
if app.rd.game().winner().is_some() {
|
||||
return;
|
||||
}
|
||||
|
||||
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 position =
|
||||
Point::new(event.offset_x() as f64, event.offset_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() == Some(position))
|
||||
.map(Move::clone);
|
||||
if app.selected_piece.is_some() && selected_move.is_some() {
|
||||
let mv = selected_move.unwrap();
|
||||
if app.game.check_and_apply_move(&mv).is_ok() {
|
||||
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);
|
||||
}
|
||||
app.selected_piece = None;
|
||||
app.available_moves.clear();
|
||||
app.draw(&ctx).unwrap();
|
||||
return;
|
||||
}
|
||||
|
||||
let screen_col = (position.x() / App::SQUARE_SIZE).floor() as u8;
|
||||
let screen_row = (position.y() / App::SQUARE_SIZE).floor() as u8;
|
||||
let Ok(position) = board_position(app.main_player, screen_row, screen_col) else {
|
||||
app.selected_piece = None;
|
||||
app.available_moves.clear();
|
||||
app.draw(&ctx).unwrap();
|
||||
return;
|
||||
};
|
||||
|
||||
let selected_move = app
|
||||
.available_moves
|
||||
.iter()
|
||||
.find(|mv| mv.get_end_position() == Some(position))
|
||||
.cloned();
|
||||
if app.selected_piece.is_some() && selected_move.is_some() {
|
||||
if app.rd.apply_move(selected_move.unwrap()).is_ok() {
|
||||
app.update_selection_after_move();
|
||||
}
|
||||
} else {
|
||||
let has_moves = app.rd.game().moves_for_piece(position).next().is_some();
|
||||
if has_moves {
|
||||
app.selected_piece = Some(position);
|
||||
app.available_moves = app.rd.game().moves_for_piece(position).collect();
|
||||
} 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();
|
||||
app.draw(&ctx).unwrap();
|
||||
}) as Box<dyn FnMut(MouseEvent)>);
|
||||
canvas.set_onclick(Some(mouse_click_handler.as_ref().unchecked_ref()));
|
||||
mouse_click_handler.forget();
|
||||
}
|
||||
|
||||
{
|
||||
let app = app.clone();
|
||||
let ctx = ctx.clone();
|
||||
let key_handler = Closure::wrap(Box::new(move |event: KeyboardEvent| {
|
||||
let mut app = app.borrow_mut();
|
||||
let key = event.key().to_ascii_lowercase();
|
||||
let ctrl = event.ctrl_key();
|
||||
let shift = event.shift_key();
|
||||
let handled = if ctrl && (key == "y" || (key == "z" && shift)) {
|
||||
app.rd.redo().ok();
|
||||
app.selected_piece = None;
|
||||
app.available_moves.clear();
|
||||
true
|
||||
} else if ctrl && key == "z" {
|
||||
app.rd.undo().ok();
|
||||
app.selected_piece = None;
|
||||
app.available_moves.clear();
|
||||
true
|
||||
} else if key == "n" {
|
||||
app.new_game();
|
||||
true
|
||||
} else if key == "f" {
|
||||
app.flip_view();
|
||||
true
|
||||
} else {
|
||||
false
|
||||
};
|
||||
if handled {
|
||||
event.prevent_default();
|
||||
app.draw(&ctx).unwrap();
|
||||
}
|
||||
}) as Box<dyn FnMut(KeyboardEvent)>);
|
||||
window.set_onkeydown(Some(key_handler.as_ref().unchecked_ref()));
|
||||
key_handler.forget();
|
||||
}
|
||||
|
||||
Ok(())
|
||||
}
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
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