From 6baaa14bde032afa363dbdd50119a20e9f47df1c Mon Sep 17 00:00:00 2001 From: Maks Jopek Date: Mon, 26 Apr 2021 14:43:25 +0200 Subject: Bugfixes: to home, [40] -> [1], not destroying old chequer --- frontend/ts/gameBoard.ts | 17 +++++++++-------- frontend/ts/gameTable.ts | 32 ++++++++++++++++---------------- frontend/ts/ghost.ts | 7 ++++--- frontend/ts/logic.ts | 30 +++++++++++++++++++----------- frontend/ts/startGame.ts | 48 ++++++++++++++++++++++++++++++------------------ 5 files changed, 78 insertions(+), 56 deletions(-) (limited to 'frontend/ts') diff --git a/frontend/ts/gameBoard.ts b/frontend/ts/gameBoard.ts index da5e8d6..14ccac6 100644 --- a/frontend/ts/gameBoard.ts +++ b/frontend/ts/gameBoard.ts @@ -41,7 +41,7 @@ export default class gameBoardClass { } static removeChequer(coords: Coordinates, all: boolean) { let td = gameTable.getTd(coords); - gameBoardClass.hideChequer(coords); + gameBoardClass.hideChequer(coords, all); td.onmouseenter = () => null; td.onmouseleave = () => null; td.onclick = () => null; @@ -51,31 +51,32 @@ export default class gameBoardClass { let td = gameTable.getTd(coords); if (td.dataset.count === undefined) throw new Error("td.dataset.count is undefined!!!") - + + if(td.className === '') + td.classList.add("chequer"); + if (td.dataset.count === '0') { td.classList.add("chequer-" + StartGame.colors[color]); td.dataset.count = '1'; td.innerHTML = ''; } else { td.dataset.count = (parseInt(td.dataset.count) + 1).toString(); - td.innerHTML = 'x' + td.dataset.count; + td.innerHTML = td.dataset.count === '1' ? '' : 'x' + td.dataset.count; } } static hideChequer(coords: Coordinates, all = false) { let td = gameTable.getTd(coords); - if (td.dataset.count === '0') - return; if (td.dataset.count === undefined) throw new Error("td.dataset.count is undefined!!!") - if (td.dataset.count === '1' || all === true) { - td.className = td.className.replace(/chequer-.*/, ''); + if (all === true || ['0', '1'].includes(td.dataset.count)) { + td.className = 'chequer'; td.dataset.count = '0'; td.innerHTML = ''; } else { td.dataset.count = (parseInt(td.dataset.count) - 1).toString(); - td.innerHTML = 'x' + td.dataset.count; + td.innerHTML = td.dataset.count === '1' ? '' : 'x' + td.dataset.count; } } } \ No newline at end of file diff --git a/frontend/ts/gameTable.ts b/frontend/ts/gameTable.ts index c95ddb2..a0f9c6a 100644 --- a/frontend/ts/gameTable.ts +++ b/frontend/ts/gameTable.ts @@ -1,22 +1,22 @@ import { Coordinates } from "../../helpers/helpersBack"; export default class gameTable { - static numberOfSquaresOnGameBoard = 11; - static gameTable: HTMLTableElement; + static numberOfSquaresOnGameBoard = 11; + static gameTable: HTMLTableElement; - static drawGameTable(): void { - for (let i = 0; i < gameTable.numberOfSquaresOnGameBoard; i++) { - let tr = document.createElement("tr"); - for (let j = 0; j < gameTable.numberOfSquaresOnGameBoard; j++) { - let td = document.createElement("td"); - td.classList.add("chequer"); - td.dataset.count = '0'; - tr.appendChild(td); - } - gameTable.gameTable.appendChild(tr); - } - } - static getTd(coords: Coordinates): HTMLElement { - return gameTable.gameTable.children[coords.y].children[coords.x] as HTMLElement; + static drawGameTable(): void { + for (let i = 0; i < gameTable.numberOfSquaresOnGameBoard; i++) { + let tr = document.createElement("tr"); + for (let j = 0; j < gameTable.numberOfSquaresOnGameBoard; j++) { + let td = document.createElement("td"); + td.classList.add("chequer"); + td.dataset.count = '0'; + tr.appendChild(td); } + gameTable.gameTable.appendChild(tr); + } + } + static getTd(coords: Coordinates): HTMLElement { + return gameTable.gameTable.children[coords.y].children[coords.x] as HTMLElement; + } } \ No newline at end of file diff --git a/frontend/ts/ghost.ts b/frontend/ts/ghost.ts index e7b4cb0..208127d 100644 --- a/frontend/ts/ghost.ts +++ b/frontend/ts/ghost.ts @@ -11,7 +11,7 @@ export default class ghost { chequer.ghost?.coords === undefined ? console.log("showShost::chequer.ghost.coords === undefined", chequer.ghost?.coords === undefined) : ''; return; } - gameBoardClass.showChequer(chequer.ghost.coords, color) + gameBoardClass.showChequer(chequer.ghost.coords, 4) } static hideGhost(chequer: Chequer | HoBSquare): void { if (chequer.ghost === undefined || chequer.ghost.coords === undefined) { @@ -52,7 +52,7 @@ export default class ghost { } static allBlink(gameBoard: GameBoard, color: tColors) { for (let square of gameBoard.map) { - if (square.chequers.some(el => el.ghost !== undefined)) + if (square.chequers.some(el => el.ghost !== undefined) === true) ghost.blink(square); } for (let chequer of gameBoard.bases[color as keyof HomesOrBases]) { @@ -66,7 +66,7 @@ export default class ghost { } static blink(chequer: Square | HoBSquare) { if (ghost.interval === undefined) - ghost.interval = setInterval(ghost.blinking, 1000); + ghost.interval = setInterval(ghost.blinking, 700); let td = gameTable.getTd({ x: chequer.x, y: chequer.y }); ghost.ghostsTds.push({ td, class: td.className }); } @@ -78,6 +78,7 @@ export default class ghost { } static allStopBlink() { clearInterval(ghost.interval); + ghost.interval = undefined; ghost.hide = true; for (let td of ghost.ghostsTds) { td.td.className = td.class; diff --git a/frontend/ts/logic.ts b/frontend/ts/logic.ts index b677307..438bd8c 100644 --- a/frontend/ts/logic.ts +++ b/frontend/ts/logic.ts @@ -1,5 +1,5 @@ import { Coordinates, GameBoard, HomesOrBases, Square, tColors } from "../../helpers/helpersBack"; - +import Helpers from "../../helpers/helpers.js" export default class Logic { static moveFromBase(gameBoard: GameBoard, color: tColors,) { let start: Square, i: number; @@ -27,25 +27,32 @@ export default class Logic { return gameBoard; } static moveInMap(gameBoard: GameBoard, color: tColors, number: number) { + console.log("moveInMap::color ", color) gameBoard.map.forEach((square, i) => { if (square.chequers.length > 0 && square.chequers[0].color === color) { - for (let chequer of square.chequers) { let x: number | undefined, y: number | undefined, coords: Coordinates | undefined, inMap: boolean, homeIndex: number | undefined, befStart: number | undefined; - gameBoard.map.forEach((square, i) => { - if (square.start === color) - befStart = i - 1; - }); + if (color !== Helpers.Color.red) { + gameBoard.map.forEach((square, i) => { + if (square.start === color) + befStart = i - 1; + }); + } else { + befStart = gameBoard.map.length - 1; + } if (befStart === undefined) throw new Error("before start doesnt exist"); let range = (start: number, end: number) => Array.from(Array(end + 1).keys()).slice(start); + console.log("range ", range(i, i + number)); + console.log("homeIndex ", befStart); // if(i >= befStart && i + number <= befStart) { if (range(i, i + number).includes(befStart)) { + // debugger; // homeIndex = gameBoard.map.length - i - 1 - number - 1; - homeIndex = number - befStart + i; + homeIndex = number - befStart + i - 1; inMap = false; if (homeIndex < gameBoard.homes[0].length) { @@ -55,10 +62,12 @@ export default class Logic { else { x = y = undefined; } + console.log("toHome check ", { x, y, homeIndex, befStart }); } else { - if(i + number >= gameBoard.map.length) - number += i - gameBoard.map.length - 1 - number; //* -$number 'cause adding $number on 62 && 63 - // i += number - gameBoard.map.length - 1 - number; //* -$number 'cause adding $number on 62 && 63 + if (i + number >= gameBoard.map.length) { + // debugger; + number += i - gameBoard.map.length - i; //* -$i 'cause adding $i on 62 && 63 + }// i += number - gameBoard.map.length - 1 - number; //* -$number 'cause adding $number on 62 && 63 console.log("newIndex: ", i + number) x = gameBoard.map[i + number].x; y = gameBoard.map[i + number].y; @@ -81,7 +90,6 @@ export default class Logic { } } }) - return gameBoard; } static moveInHome(gameBoard: GameBoard, color: tColors, number: number) { diff --git a/frontend/ts/startGame.ts b/frontend/ts/startGame.ts index 0afbb7d..d73b846 100644 --- a/frontend/ts/startGame.ts +++ b/frontend/ts/startGame.ts @@ -8,8 +8,8 @@ import ghost from "./ghost.js"; import gameBoardClass from "./gameBoard.js"; export default class StartGame { - bgColors = ["primary", "danger", "success", "warning"]; - static colors = ["blue", "red", "green", "yellow"]; + bgColors = ["primary", "danger", "success", "warning", "white"]; + static colors = ["blue", "red", "green", "yellow", "white"]; colors = StartGame.colors; radius = 20; startInterval = () => { this.getData(); this.interval = setInterval(() => this.getData(), 2000); } @@ -105,10 +105,11 @@ export default class StartGame { } rollDice = async (e: MouseEvent): Promise => { - let number = Helpers.getRandomInt(1, 7); + this.btnRollDice.style.display = "none"; + // ! let number = Helpers.getRandomInt(1, 7); + let number = 6; this.diceHash; this.divDice.classList.add(`dice-${number}`); - this.btnRollDice.style.display = "none"; this.calcMoves(number); } @@ -132,7 +133,7 @@ export default class StartGame { } this.mineTurn = false; let where = chequer.ghost.where; - + let olderGameBoard = JSON.stringify(this.gameBoard); if (where.from === "map") { this.gameBoard.map[where.oldIndex].chequers.pop(); } else if (where.from === "base") { @@ -142,18 +143,17 @@ export default class StartGame { } if (where.to === "map") { - let mapIndex = this.gameBoard.map[where.newIndex], - enemyColor = mapIndex.chequers[0]?.color; + let enemyColor = this.gameBoard.map[where.newIndex].chequers[0]?.color; if (enemyColor !== this.color && enemyColor !== undefined) { let enemyBase = this.gameBoard.bases[enemyColor as keyof HomesOrBases]; - for (let chequer of mapIndex.chequers) { + for (let chequer of this.gameBoard.map[where.newIndex].chequers) { let i = 0; for (let c of enemyBase) { if (c.chequer < 0) break; i++; } chequer.ghost = { - color: enemyColor, coords: { x: mapIndex.x, y: mapIndex.y }, + color: enemyColor, coords: { x: this.gameBoard.map[where.newIndex].x, y: this.gameBoard.map[where.newIndex].y }, where: { from: "map", oldIndex: where.newIndex, to: "base", newIndex: i @@ -161,10 +161,9 @@ export default class StartGame { } this.doTurn(chequer, true); } - mapIndex.chequers = []; + this.gameBoard.map[where.newIndex].chequers = []; } - - mapIndex.chequers.push({ color: this.color }); + this.gameBoard.map[where.newIndex].chequers.push({ color: this.color }); } else if (where.to === "base") { this.gameBoard.bases[this.color as keyof HomesOrBases][where.newIndex].chequer = this.color; } else { @@ -172,18 +171,32 @@ export default class StartGame { } if (redraw === true) { + (window as any).clicked = true; + let won = this.gameHasBeenWon(); + ghost.allStopBlink(); + ghost.removeGhosts(this.gameBoard, this.color); gameBoardClass.drawGameBoard(this.gameBoard, this.drawChequer); this.sendGameBoard(false); + // (window as any).clicked = false; } } async hideDice(wait: boolean) { let diceHash = this._diceHash; - wait === true ? await Helpers.sleep(5000) : ''; + wait === true ? await Helpers.sleep(2000) : ''; if (diceHash === this.diceHash) this.divDice.className = this.divDice.className.replace(/dice.*/, ''); } + gameHasBeenWon(): boolean { + let home = this.gameBoard.homes[this.color as keyof HomesOrBases]; + for(let square of home) { + if(square.chequer < 0) + return false; + } + return true; + } + async sendGameBoard(diceWait: boolean) { ghost.allStopBlink(); ghost.removeGhosts(this.gameBoard, this.color); @@ -217,6 +230,7 @@ export default class StartGame { } async getData() { + console.log("gettingData"); let data: { gameBoard: GameBoard, currentPlayer: number, started: number, data: Data, timeTillTurnEnd: number } = await Helpers.mFetch("/getCurrentGameState", {}); if (data.started === 1) { @@ -227,7 +241,8 @@ export default class StartGame { this.mineTurn = true; this.gameWasStopped = false; this.btnRollDice.style.display = "block"; - }// else if (JSON.stringify(data.gameBoard) !== JSON.stringify(this.gameBoard)) { + } /* else if (StartGame.waitForNewTurn === false) { */ + console.log("Redrawing gameBoard - newer from server"); this.gameBoard = data.gameBoard; gameBoardClass.drawGameBoard(this.gameBoard, this.drawChequer); // } @@ -240,10 +255,7 @@ export default class StartGame { this.setOpponents(this.data, false); } - // TODO: Going to home - // TODO: Check stacking // TODO: Check zbijanie - // TODO: Going from [40] -> [0] - // TODO: Ending turn + // TODO: Check gameHasBeenWon() } } -- cgit v1.3.1