alert texts, better click management
This commit is contained in:
parent
cd9ee4859f
commit
13a17d538b
@ -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);
|
||||
}
|
||||
} else {
|
||||
log!("Unable to make move, {:?}", able);
|
||||
}
|
||||
|
||||
// board has been changed, update player turn
|
||||
self.current.current_turn = self.current.current_turn.opponent();
|
||||
|
||||
} else {
|
||||
log!("Unable to make move, {:?}", able);
|
||||
}
|
||||
|
||||
able
|
||||
}
|
||||
|
||||
|
@ -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>
|
||||
|
102
www/index.js
102
www/index.js
@ -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;
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user