From 931ed34c3394e54bc0117d36bc46e83df04c23c2 Mon Sep 17 00:00:00 2001 From: Andrio Celos Date: Thu, 31 Aug 2023 15:26:55 +1000 Subject: [PATCH] Add ability to show the turn number rather than turns left --- TableturfBattleClient/index.html | 2 +- TableturfBattleClient/src/Pages/GamePage.ts | 20 ++++++++++---------- TableturfBattleClient/src/TurnNumberLabel.ts | 15 +++++++++++++-- TableturfBattleClient/src/app.ts | 8 ++++---- 4 files changed, 28 insertions(+), 17 deletions(-) diff --git a/TableturfBattleClient/index.html b/TableturfBattleClient/index.html index 03c3c1b..b209ae1 100644 --- a/TableturfBattleClient/index.html +++ b/TableturfBattleClient/index.html @@ -433,7 +433,7 @@ -
Total:
0
+
Total
0
diff --git a/TableturfBattleClient/src/Pages/GamePage.ts b/TableturfBattleClient/src/Pages/GamePage.ts index 23eea3e..07c6fda 100644 --- a/TableturfBattleClient/src/Pages/GamePage.ts +++ b/TableturfBattleClient/src/Pages/GamePage.ts @@ -144,7 +144,7 @@ function initReplay() { showPage('game'); clearPlayContainers(); timeLabel.hide(); - turnNumberLabel.setTurnNumber(null); + turnNumberLabel.turnNumber = null; replaySwitchGame(0); } @@ -172,7 +172,7 @@ function initTest(stage: Stage) { testControls.hidden = false; clearPlayContainers(); timeLabel.hide(); - turnNumberLabel.setTurnNumber(null); + turnNumberLabel.turnNumber = null; showPage('game'); testDeckButton.checked = true; @@ -191,7 +191,7 @@ replayNextButton.buttonElement.addEventListener('click', _ => { replayUpdateHand(); replayAnimationAbortController.abort(); replayAnimationAbortController = null; - turnNumberLabel.setTurnNumber(currentGame.turnNumber); + turnNumberLabel.turnNumber = currentGame.turnNumber; board.refresh(); const scores = board.getScores(); for (let i = 0; i < currentGame.players.length; i++) { @@ -205,7 +205,7 @@ replayNextButton.buttonElement.addEventListener('click', _ => { replayPreviousButton.enabled = true; currentGame.state = GameState.Ongoing; currentGame.turnNumber++; - turnNumberLabel.setTurnNumber(currentGame.turnNumber); + turnNumberLabel.turnNumber = currentGame.turnNumber; replayUpdateHand(); } else if (currentGame.turnNumber > 12) { currentGame.state = currentReplay.gameNumber + 1 >= currentReplay.games.length ? GameState.SetEnded : GameState.GameEnded; @@ -253,7 +253,7 @@ replayNextButton.buttonElement.addEventListener('click', _ => { replayAnimationAbortController = new AbortController(); (async () => { await playInkAnimations({ game: { state: GameState.Ongoing, board: null, turnNumber: currentGame.turnNumber, players: currentGame.players }, moves, placements: result.placements, specialSpacesActivated: result.specialSpacesActivated }, anySpecialAttacks, replayAnimationAbortController.signal); - turnNumberLabel.setTurnNumber(currentGame.turnNumber); + turnNumberLabel.turnNumber = currentGame.turnNumber; clearPlayContainers(); if (currentGame.turnNumber > 12) { currentGame.state = currentReplay.gameNumber + 1 >= currentReplay.games.length ? GameState.SetEnded : GameState.GameEnded; @@ -300,7 +300,7 @@ replayPreviousButton.buttonElement.addEventListener('click', _ => { if (currentGame.turnNumber > 0) { currentGame.state = GameState.Ongoing; - turnNumberLabel.setTurnNumber(currentGame.turnNumber); + turnNumberLabel.turnNumber = currentGame.turnNumber; const scores = board.getScores(); for (let i = 0; i < currentGame.players.length; i++) { const move = currentReplay.turns[currentGame.turnNumber - 1][i]; @@ -314,7 +314,7 @@ replayPreviousButton.buttonElement.addEventListener('click', _ => { } else { currentGame.state = GameState.Redraw; replayPreviousButton.enabled = false; - turnNumberLabel.setTurnNumber(null); + turnNumberLabel.turnNumber = null; } replayUpdateHand(); @@ -377,7 +377,7 @@ function replaySwitchGame(gameNumber: number) { replayNextButton.enabled = true; handContainer.hidden = false; gameButtonsContainer.hidden = false; - turnNumberLabel.setTurnNumber(null); + turnNumberLabel.turnNumber = null; const stage = currentReplay.games[gameNumber].stage; board.resize(stage.copyGrid()); @@ -400,7 +400,7 @@ flipButton.addEventListener('click', () => { replayAnimationAbortController.abort(); replayAnimationAbortController = null; clearPlayContainers(); - turnNumberLabel.setTurnNumber(currentGame.turnNumber); + turnNumberLabel.turnNumber = currentGame.turnNumber; const scores = board.getScores(); for (let i = 0; i < currentGame.players.length; i++) { updateStats(i, scores); @@ -658,7 +658,7 @@ async function playInkAnimations(data: { function showResult() { if (currentGame == null) return; - turnNumberLabel.setTurnNumber(null); + turnNumberLabel.turnNumber = null; let winners = [ 0 ]; let maxPoints = playerBars[0].points; for (let i = 1; i < currentGame.players.length; i++) { diff --git a/TableturfBattleClient/src/TurnNumberLabel.ts b/TableturfBattleClient/src/TurnNumberLabel.ts index 716d048..0b4e2ce 100644 --- a/TableturfBattleClient/src/TurnNumberLabel.ts +++ b/TableturfBattleClient/src/TurnNumberLabel.ts @@ -2,17 +2,28 @@ class TurnNumberLabel { containerElement: HTMLElement; element: HTMLElement; + private _turnNumber: number | null = null; + private absoluteMode = false; + constructor(conatinerElement: HTMLElement, element: HTMLElement) { this.containerElement = conatinerElement; this.element = element; + conatinerElement.addEventListener('click', () => { + this.absoluteMode = !this.absoluteMode; + this.containerElement.getElementsByTagName('p')[0].innerText = this.absoluteMode ? 'Turn' : 'Turns left'; + if (this.turnNumber != null) + this.element.innerText = (this.absoluteMode ? this.turnNumber : 13 - this.turnNumber).toString(); + }); } - setTurnNumber(value: number | null) { + get turnNumber() { return this._turnNumber; } + set turnNumber(value: number | null) { + this._turnNumber = value; if (value == null) this.containerElement.hidden = true; else { this.containerElement.hidden = false; - this.element.innerText = (13 - value).toString(); + this.element.innerText = (this.absoluteMode ? value : 13 - value).toString(); if (value >= 10) this.element.classList.add('nowOrNever'); else diff --git a/TableturfBattleClient/src/app.ts b/TableturfBattleClient/src/app.ts index daaa4e8..cb20e3c 100644 --- a/TableturfBattleClient/src/app.ts +++ b/TableturfBattleClient/src/app.ts @@ -166,7 +166,7 @@ function onGameStateChange(game: any, playerData: PlayerData | null) { case GameState.Redraw: if (currentGame.me) setConfirmLeavingGame(); redrawModal.hidden = currentGame.me == null || currentGame.players[currentGame.me.playerIndex].isReady; - turnNumberLabel.setTurnNumber(null); + turnNumberLabel.turnNumber = null; canPlay = false; timeLabel.faded = redrawModal.hidden; timeLabel.paused = false; @@ -175,7 +175,7 @@ function onGameStateChange(game: any, playerData: PlayerData | null) { for (let i = 0; i < currentGame.players.length; i++) showWaiting(i); if (currentGame.me) setConfirmLeavingGame(); - turnNumberLabel.setTurnNumber(game.turnNumber); + turnNumberLabel.turnNumber = game.turnNumber; board.autoHighlight = true; canPlay = currentGame.me != null && !currentGame.players[currentGame.me.playerIndex].isReady; timeLabel.faded = !canPlay; @@ -186,7 +186,7 @@ function onGameStateChange(game: any, playerData: PlayerData | null) { case GameState.SetEnded: clearConfirmLeavingGame(); gamePage.classList.add('gameEnded'); - turnNumberLabel.setTurnNumber(null); + turnNumberLabel.turnNumber = null; timeLabel.hide(); canPlay = false; showResult(); @@ -379,7 +379,7 @@ function setupWebSocket(gameID: string) { (async () => { await playInkAnimations(payload.data, anySpecialAttacks); if (payload.playerData) updateHandAndDeck(payload.playerData); - turnNumberLabel.setTurnNumber(payload.data.game.turnNumber); + turnNumberLabel.turnNumber = payload.data.game.turnNumber; clearPlayContainers(); if (payload.event == 'gameEnd') { currentGame.state = payload.data.game.state;