alert texts, better click management

src/game/mod.rs

@@ -56,8 +56,8 @@ impl Game {
         self.current.current_turn
     }
 
-    pub fn current_cell_state(&self, idx: BrdIdx) -> Square {
+    pub fn current_cell_state(&self, idx: &BrdIdx) -> Square {
-        self.current.cell(self.current.cell_idx(idx))
+        self.current.cell(self.current.cell_idx(*idx))
     }
 
     /// Attempt to make a move given a source and destination index
@@ -74,13 +74,14 @@ impl Game {
             else {
                 self.execute_jump(from, to);
             }
+
+            // board has been changed, update player turn
+            self.current.current_turn = self.current.current_turn.opponent();
+
         } else {
             log!("Unable to make move, {:?}", able);
         }
 
-        // board has been changed, update player turn
-        self.current.current_turn = self.current.current_turn.opponent();
-
         able
     }
 

www/index.html

@@ -42,12 +42,19 @@
             <div class="row p-3">
                 <div class="col-sm-12">
                     <a href="doc/draught" class="btn btn-secondary">Docs</a>
+                    <!-- <button id="startBtn" class="btn btn-primary">Start</button> -->
                 </div>
             </div>
 
-            <div class="row p-1">
+            <div class="row p-3">
-                <div class="col-sm-12">
+                <div class="col-sm-6">
+                    <h1 id="team-p"></h1>
+                </div>
+                <div class="col-sm-6">
                     <p hidden id="status-p"></p>
+                    <div hidden id="status-d" class="alert alert-danger" role="alert">
+                        A simple success alert—check it out!
+                    </div>
                 </div>
             </div>
         </div>

www/index.js

@@ -1,5 +1,5 @@
-import { Game, Board, BrdIdx, Painter, Team, init_wasm, Moveable, SquareState } from "draught";
+import { Game, Board, BrdIdx, Painter, Team, init_wasm, Moveable, SquareState, Square } from "draught";
-import { memory } from "draught/draught_bg.wasm";
+// import { memory } from "draught/draught_bg.wasm";
 
 ///////////////////
 //    CONSTS
@@ -13,6 +13,8 @@ const BOARD_HEIGHT = 8;
 
 const PIECE_ROWS = 3;
 
+const STATUS_TIMEOUT = 3000;
+
 const GameState = {
     HUMAN_TURN: {
         THINKING: "human_turn.thinking",
@@ -30,6 +32,14 @@ init_wasm();
 // let board = new Board(BOARD_WIDTH, BOARD_HEIGHT, Team.Black);
 
 const statusText = document.getElementById("status-p");
+const statusAlert = document.getElementById("status-d");
+const teamText = document.getElementById("team-p");
+
+// const startBtn = document.getElementById("startBtn");
+// startBtn.onclick = start_game;
+
+let statusTimeout = null;
+let setStatus = setStatusAlert;
 
 let current_state = GameState.HUMAN_TURN.THINKING;
 let painter = new Painter(CANVAS_WIDTH, CANVAS_HEIGHT, "game-canvas");
@@ -37,13 +47,12 @@ let painter = new Painter(CANVAS_WIDTH, CANVAS_HEIGHT, "game-canvas");
 
 let clicks = [];
 
-let from = null;
-let to = null;
-
 let game = new Game(BOARD_WIDTH, BOARD_HEIGHT, PIECE_ROWS, Team.Black);
 game.set_painter(painter);
 game.draw();
 
+updateTeamText();
+
 /////////////////
 //   CANVAS
 /////////////////
@@ -69,47 +78,46 @@ function start_game() {
     game.set_painter(painter);
     game.draw();
 
+    updateTeamText();
     current_state = GameState.HUMAN_TURN.THINKING;
 }
 
 function process_canvas_click(cell_coord) {
 
-    // if (game.current_cell_state(cell_coord).state == SquareState.Unplayable ) {
-    //     from = null;
-    //     to = null;
-    //     current_state = GameState.HUMAN_TURN.THINKING;
-    //     setStatusText("Unplayable Square!");
-    //     return;
-    // }
-
     switch(current_state) {
         case GameState.HUMAN_TURN.THINKING:
+            if (game.current_cell_state(cell_coord).state != SquareState.Occupied ) {
+                return;
+            }
+
+            if (game.current_cell_state(cell_coord).occupant.team != game.current_turn() ) {
+                return;
+            }
+
             console.log("Your turn, first piece picked");
 
             clicks.push(cell_coord);
-
-            // from = cell_coord;
             current_state = GameState.HUMAN_TURN.FROM_SELECTED; 
             
             break;
         case GameState.HUMAN_TURN.FROM_SELECTED:
+            if (game.current_cell_state(cell_coord).state != SquareState.Empty ) {
+                return;
+            }
+
             console.log("Your turn, first piece already picked, picking second");
 
             clicks.push(cell_coord);
 
-            // to = cell_coord;
-
             if (clicks.length != 2) {
-                setStatusText(`Error: wrong number of clicks to process ${clicks.length}`);
+                setStatus(`Error: wrong number of clicks to process ${clicks.length}`);
                 console.error(`Error: wrong number of clicks to process ${clicks.length}`);
 
                 return;
             }
 
-            // console.log(clicks[0].eq(clicks[1]));
-
             if (clicks[0].eq(clicks[1])) {
-                setStatusText("Move Cancelled");
+                setStatus("Move Cancelled");
             } else {
 
                 let status = game.make_move(clicks[0], clicks[1]);
@@ -118,20 +126,28 @@ function process_canvas_click(cell_coord) {
                     case Moveable.Allowed:
                         break;
                     case Moveable.IllegalTrajectory:
+                        setStatus("You can't move like that!");
                         break;
                     case Moveable.JumpingSameTeam:
+                        setStatus("You can't jump your own piece!");
                         break;
                     case Moveable.NoJumpablePiece:
+                        setStatus("There's nothing to jump!");
                         break;
                     case Moveable.OccupiedDest:
+                        setStatus("There's a piece there!");
                         break;
                     case Moveable.OutOfBounds:
+                        setStatus("That square's not on the board! (how have you managed that?)");
                         break;
                     case Moveable.UnoccupiedSrc:
+                        setStatus("There's no piece to move!");
                         break;
                     case Moveable.Unplayable:
+                        setStatus("That's not a playable square!");
                         break;
                     case Moveable.WrongTeamSrc:
+                        setStatus("That's not your piece!");
                         break;
                 }
                 
@@ -139,8 +155,6 @@ function process_canvas_click(cell_coord) {
 
             game.draw();
             clicks = [];
-            // from = null;
-            // to = null;
             current_state = GameState.HUMAN_TURN.THINKING;
             
             break;
@@ -148,6 +162,8 @@ function process_canvas_click(cell_coord) {
             console.log("It's the AI's turn!");
             break;
     }
+
+    updateTeamText();
 }
 
 function getMousePos(canvas, evt) {
@@ -158,8 +174,44 @@ function getMousePos(canvas, evt) {
     };
 }
 
-function setStatusText(txt) {
+function setStatusText(txt, hide = true) {
-    statusText.hidden = false;
+    if(statusTimeout != null) {
+        clearInterval(statusTimeout);
+    }
+
     statusText.innerText = txt;
+
+    if(hide) {
+        statusTimeout = setTimeout(() => {
+            statusText.innerText = "";
+        }, STATUS_TIMEOUT);
+    }
 }
 
+function setStatusAlert(txt, alertType = "danger", hide = true) {
+    if(statusTimeout != null) {
+        clearInterval(statusTimeout);
+    }
+
+    statusAlert.className = `alert alert-${alertType}`;
+    statusAlert.innerText = txt;
+    statusAlert.hidden = false;
+
+    if(hide) {
+        statusTimeout = setTimeout(() => {
+            statusAlert.hidden = true;
+        }, STATUS_TIMEOUT);
+    }
+}
+
+function updateTeamText(){
+    let team = game.current_turn();
+    switch(team) {
+        case Team.White:
+            teamText.innerText = "⚪ White ⚪";
+            break;
+        case Team.Black:
+            teamText.innerText = "🔴 Black 🔴";
+            break;
+    }
+}