From 0c839402aeb0cb96b0b34f0096518989d274f0a7 Mon Sep 17 00:00:00 2001 From: andy Date: Fri, 2 Jul 2021 16:53:03 +0100 Subject: [PATCH] working UI, all player controlled --- src/board/mod.rs | 1 + src/lib.rs | 2 +- src/paint.rs | 10 ++++++ www/index.js | 93 ++++++++++++++++++++++++++++++++++++++++-------- 4 files changed, 90 insertions(+), 16 deletions(-) diff --git a/src/board/mod.rs b/src/board/mod.rs index 1b10084..80becce 100644 --- a/src/board/mod.rs +++ b/src/board/mod.rs @@ -127,6 +127,7 @@ pub struct BrdIdx { #[wasm_bindgen] impl BrdIdx { + #[wasm_bindgen(constructor)] pub fn from(row: usize, col: usize) -> BrdIdx { BrdIdx{ row, col diff --git a/src/lib.rs b/src/lib.rs index 3b3742b..64bbf48 100644 --- a/src/lib.rs +++ b/src/lib.rs @@ -32,7 +32,7 @@ macro_rules! log { } #[wasm_bindgen] -pub fn init_game() { +pub fn init_wasm() { log!("Initialising WebAssembly"); utils::set_panic_hook(); } \ No newline at end of file diff --git a/src/paint.rs b/src/paint.rs index 9f2258e..e548b74 100644 --- a/src/paint.rs +++ b/src/paint.rs @@ -14,6 +14,7 @@ use crate::board::{Board}; use crate::board::iter::PieceIterator; use crate::board::enums::Team::*; +use crate::board::enums::Strength::*; /// Default hex colour value for white square background const WHITE_SQUARE: &str = "#FFFFFF"; @@ -36,6 +37,8 @@ const BLACK_PIECE: &str = "#ed0000"; const WHITE_PIECE_OUTLINE: &str = "#9c9c9c"; /// Default hex colour value for black piece outline const BLACK_PIECE_OUTLINE: &str = "#a60000"; +/// Default hex colour value for black piece outline +const KING_OUTLINE: &str = "#ffea00"; /// Whether to outline pieces const DRAW_PIECE_OUTLINES: bool = true; /// Line width for outlining pieces @@ -59,6 +62,7 @@ pub struct Painter { white_piece_line: JsValue, black_piece_line: JsValue, + king_line: JsValue, piece_lines: bool, piece_line_width: f64, @@ -147,6 +151,7 @@ impl Painter { white_piece_line: JsValue::from_str(WHITE_PIECE_OUTLINE), black_piece_line: JsValue::from_str(BLACK_PIECE_OUTLINE), + king_line: JsValue::from_str(KING_OUTLINE), piece_lines: DRAW_PIECE_OUTLINES, piece_line_width: PIECE_OUTLINE_WIDTH, @@ -176,6 +181,7 @@ impl Painter { white_piece_line: JsValue::from_str(WHITE_PIECE_OUTLINE), black_piece_line: JsValue::from_str(BLACK_PIECE_OUTLINE), + king_line: JsValue::from_str(KING_OUTLINE), piece_lines: DRAW_PIECE_OUTLINES, piece_line_width: PIECE_OUTLINE_WIDTH, @@ -301,6 +307,10 @@ impl Painter { }, } + if piece.strength == King { + self.context.set_stroke_style(&self.king_line); + } + let center_x: f64 = (brd_idx.col as f64 * cell_width as f64) + (cell_width as f64) / 2.0; let center_y: f64 = (brd_idx.row as f64 * cell_height as f64) + (cell_height as f64) / 2.0; diff --git a/www/index.js b/www/index.js index ed220dc..852fc01 100644 --- a/www/index.js +++ b/www/index.js @@ -1,7 +1,9 @@ -import { Game, Board, Painter, Team, init_game } from "draught"; +import { Game, Board, BrdIdx, Painter, Team, init_wasm } from "draught"; import { memory } from "draught/draught_bg.wasm"; -init_game(); +/////////////////// +// CONSTS +/////////////////// const CANVAS_WIDTH = 480; const CANVAS_HEIGHT = 480; @@ -11,17 +13,86 @@ const BOARD_HEIGHT = 8; const PIECE_ROWS = 3; +const GameState = { + HUMAN_TURN: { + THINKING: "human_turn.thinking", + FROM_SELECTED: "human_turn.from_selected" + }, + AI_TURN: "ai_turn" +} + +////////////////// +// GAME STUFF +////////////////// + +init_wasm(); + +// let board = new Board(BOARD_WIDTH, BOARD_HEIGHT, Team.Black); + +let current_state = GameState.HUMAN_TURN.THINKING; +let painter = new Painter(CANVAS_WIDTH, CANVAS_HEIGHT, "game-canvas"); +// painter.draw(board); + +let from = null; +let to = null; + +let game = new Game(BOARD_WIDTH, BOARD_HEIGHT, PIECE_ROWS, Team.Black); +game.set_painter(painter); +game.draw(); + +///////////////// +// CANVAS +///////////////// + const canvas = document.getElementById("game-canvas"); canvas.addEventListener("click", (event) => { var mousepos = getMousePos(canvas, event); // console.log(mousepos); - var cell = { - x: Math.floor((mousepos.x / CANVAS_WIDTH) * BOARD_WIDTH), - y: Math.floor((mousepos.y / CANVAS_HEIGHT) * BOARD_HEIGHT), - } - console.log(cell); + var cell = new BrdIdx( + Math.floor((mousepos.y / CANVAS_HEIGHT) * BOARD_HEIGHT), + Math.floor((mousepos.x / CANVAS_WIDTH) * BOARD_WIDTH), + ); + // console.log(cell); + process_canvas_click(cell); }) +//////////////// +// FUNCS +//////////////// + +function start_game() { + game = new Game(BOARD_WIDTH, BOARD_HEIGHT, PIECE_ROWS, Team.Black); + game.set_painter(painter); + game.draw(); + + current_state = GameState.HUMAN_TURN.THINKING; +} + +function process_canvas_click(cell_coord) { + switch(current_state) { + case GameState.HUMAN_TURN.THINKING: + console.log("Your turn, first piece picked"); + + from = cell_coord; + current_state = GameState.HUMAN_TURN.FROM_SELECTED; + + break; + case GameState.HUMAN_TURN.FROM_SELECTED: + console.log("Your turn, first piece already picked, picking second"); + + to = cell_coord; + game.make_move(from, to); + game.draw(); + + current_state = GameState.HUMAN_TURN.THINKING; + + break; + case GameState.AI_TURN: + console.log("It's the AI's turn!"); + break; + } +} + function getMousePos(canvas, evt) { var rect = canvas.getBoundingClientRect(); return { @@ -30,11 +101,3 @@ function getMousePos(canvas, evt) { }; } -let painter = new Painter(CANVAS_WIDTH, CANVAS_HEIGHT, "game-canvas"); - -// let board = new Board(BOARD_WIDTH, BOARD_HEIGHT, Team.Black); -// painter.draw(board); - -let game = new Game(BOARD_WIDTH, BOARD_HEIGHT, PIECE_ROWS, Team.Black, "game-canvas", CANVAS_WIDTH, CANVAS_HEIGHT); -game.set_painter(painter); -game.draw();