Add ability to show the turn number rather than turns left

This commit is contained in:
Andrio Celos
2023-08-31 15:26:55 +10:00
parent b92da588a3
commit 931ed34c33
4 changed files with 28 additions and 17 deletions

View File

@@ -433,7 +433,7 @@
<button type="button" id="deckRenameButton" disabled>Rename</button>
<button type="button" id="deckDeleteButton" class="danger" disabled>Delete</button>
</div>
<div class="deckSizeContainer">Total: <div id="deckViewSize">0</div></div>
<div class="deckSizeContainer">Total <div id="deckViewSize">0</div></div>
<div id="deckCardListView">
</div>
</section>

View File

@@ -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++) {

View File

@@ -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

View File

@@ -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;