working UI, all player controlled

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

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

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;
 

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();