alert texts, better click management

This commit is contained in:
andy 2021-07-10 21:00:30 +01:00
parent cd9ee4859f
commit 13a17d538b
3 changed files with 92 additions and 32 deletions

View File

@ -56,8 +56,8 @@ impl Game {
self.current.current_turn
}
pub fn current_cell_state(&self, idx: BrdIdx) -> Square {
self.current.cell(self.current.cell_idx(idx))
pub fn current_cell_state(&self, idx: &BrdIdx) -> Square {
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
}

View File

@ -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="col-sm-12">
<div class="row p-3">
<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>

View File

@ -1,5 +1,5 @@
import { Game, Board, BrdIdx, Painter, Team, init_wasm, Moveable, SquareState } from "draught";
import { memory } from "draught/draught_bg.wasm";
import { Game, Board, BrdIdx, Painter, Team, init_wasm, Moveable, SquareState, Square } from "draught";
// 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) {
statusText.hidden = false;
function setStatusText(txt, hide = true) {
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;
}
}