From 632e53e7b3601b739b1b7961e34a7ebf1cf0444c Mon Sep 17 00:00:00 2001 From: Andrio Celos Date: Sun, 2 Oct 2022 01:03:55 +1000 Subject: [PATCH] Client: Nulls in player list is no longer allowed --- TableturfBattleClient/src/GameVariables.ts | 11 ++--- TableturfBattleClient/src/Pages/GamePage.ts | 44 +++++++---------- TableturfBattleClient/src/Pages/LobbyPage.ts | 9 ++-- .../src/Pages/PreGamePage.ts | 47 +++++++++---------- TableturfBattleClient/src/app.ts | 2 +- 5 files changed, 45 insertions(+), 68 deletions(-) diff --git a/TableturfBattleClient/src/GameVariables.ts b/TableturfBattleClient/src/GameVariables.ts index 88604fa..3e8e64e 100644 --- a/TableturfBattleClient/src/GameVariables.ts +++ b/TableturfBattleClient/src/GameVariables.ts @@ -3,15 +3,10 @@ let clientToken = window.localStorage.getItem('clientToken') || ''; /** The data of the current game, or null if not in a game. */ let currentGame: { id: string, - /** The list of players in the current game. May have empty slots. */ - players: (Player | null)[], + /** The list of players in the current game. */ + players: Player[], /** The user's player data, or null if they are spectating. */ - me: { - playerIndex: number, - hand: Card[] | null, - deck: Card[] | null, - cardsUsed: number[] - } | null, + me: PlayerData | null, /** The WebSocket used for receiving game events, or null if not yet connected. */ webSocket: WebSocket } | null; diff --git a/TableturfBattleClient/src/Pages/GamePage.ts b/TableturfBattleClient/src/Pages/GamePage.ts index 6dd0cc6..5db7665 100644 --- a/TableturfBattleClient/src/Pages/GamePage.ts +++ b/TableturfBattleClient/src/Pages/GamePage.ts @@ -32,17 +32,15 @@ cols[4][4] = Space.SpecialInactive2; cols[4][21] = Space.SpecialInactive1; board.resize(cols); -function loadPlayers(players: (Player | null)[]) { +function loadPlayers(players: Player[]) { for (let i = 0; i < players.length; i++) { const player = players[i]; - if (player != null) { - currentGame!.players[i] = players[i]; - playerBars[i].name = player.name; - updateStats(i); - document.body.style.setProperty(`--primary-colour-${i + 1}`, `rgb(${player.colour.r}, ${player.colour.g}, ${player.colour.b})`); - document.body.style.setProperty(`--special-colour-${i + 1}`, `rgb(${player.specialColour.r}, ${player.specialColour.g}, ${player.specialColour.b})`); - document.body.style.setProperty(`--special-accent-colour-${i + 1}`, `rgb(${player.specialAccentColour.r}, ${player.specialAccentColour.g}, ${player.specialAccentColour.b})`); - } + currentGame!.players[i] = players[i]; + playerBars[i].name = player.name; + updateStats(i); + document.body.style.setProperty(`--primary-colour-${i + 1}`, `rgb(${player.colour.r}, ${player.colour.g}, ${player.colour.b})`); + document.body.style.setProperty(`--special-colour-${i + 1}`, `rgb(${player.specialColour.r}, ${player.specialColour.g}, ${player.specialColour.b})`); + document.body.style.setProperty(`--special-accent-colour-${i + 1}`, `rgb(${player.specialAccentColour.r}, ${player.specialAccentColour.g}, ${player.specialAccentColour.b})`); } } @@ -51,9 +49,9 @@ function updateStats(playerIndex: number) { playerBars[playerIndex].points = board.getScore(playerIndex); playerBars[playerIndex].pointsDelta = 0; playerBars[playerIndex].pointsTo = 0; - playerBars[playerIndex].specialPoints = currentGame.players[playerIndex]!.specialPoints; - playerBars[playerIndex].statSpecialPointsElement.innerText = currentGame.players[playerIndex]!.totalSpecialPoints.toString(); - playerBars[playerIndex].statPassesElement.innerText = currentGame.players[playerIndex]!.passes.toString(); + playerBars[playerIndex].specialPoints = currentGame.players[playerIndex].specialPoints; + playerBars[playerIndex].statSpecialPointsElement.innerText = currentGame.players[playerIndex].totalSpecialPoints.toString(); + playerBars[playerIndex].statPassesElement.innerText = currentGame.players[playerIndex].passes.toString(); } function showReady(playerIndex: number) { @@ -80,7 +78,7 @@ function setupControlsForPlay() { for (let i = 0; i < 4; i++) { canPlayCard[i] = board.canPlayCard(currentGame.me.playerIndex, currentGame.me.hand[i], false); - canPlayCardAsSpecialAttack[i] = currentGame.players[currentGame.me.playerIndex]!.specialPoints >= currentGame.me.hand[i].specialCost + canPlayCardAsSpecialAttack[i] = currentGame.players[currentGame.me.playerIndex].specialPoints >= currentGame.me.hand[i].specialCost && board.canPlayCard(currentGame.me.playerIndex, currentGame.me.hand[i], true); handButtons[i].inputElement.disabled = !canPlayCard[i]; } @@ -97,7 +95,7 @@ function setupControlsForPlay() { } async function playInkAnimations(data: { - game: { state: GameState, board: Space[][], turnNumber: number, players: (Player | null)[] }, + game: { state: GameState, board: Space[][], turnNumber: number, players: Player[] }, placements: { cards: { playerIndex: number, card: Card }[], spacesAffected: { space: { x: number, y: number }, newState: Space }[] }[], specialSpacesActivated: { x: number, y: number }[] }, anySpecialAttacks: boolean) { @@ -127,27 +125,24 @@ async function playInkAnimations(data: { board.refresh(); if (data.specialSpacesActivated.length > 0) await delay(1000); // Delay if we expect that this changed the board. - for (let i = 0; i < playerBars.length; i++) { - const player = data.game.players[i]; - if (player) - playerBars[i].specialPoints = player.specialPoints; - } - for (let i = 0; i < playerBars.length; i++) { + for (let i = 0; i < data.game.players.length; i++) { + playerBars[i].specialPoints = data.game.players[i].specialPoints; playerBars[i].pointsDelta = board.getScore(i) - playerBars[i].points; } await delay(1000); - for (let i = 0; i < playerBars.length; i++) { + for (let i = 0; i < data.game.players.length; i++) { updateStats(i); } await delay(1000); } function showResult() { + if (currentGame == null) return; midGameContainer.hidden = true; resultContainer.hidden = false; let winners = [ 0 ]; let maxPoints = playerBars[0].points; - for (let i = 1; i < playerBars.length; i++) { + for (let i = 1; i < currentGame.players.length; i++) { if (playerBars[i].points > maxPoints) { winners.splice(0); winners.push(i); @@ -156,7 +151,6 @@ function showResult() { winners.push(i); } - if (currentGame == null) return; for (let i = 0; i < currentGame.players.length; i++) { const el = playerBars[i].resultElement; if (winners.includes(i)) { @@ -201,10 +195,6 @@ function updateHand(cards: any[]) { // Send the play to the server. let req = new XMLHttpRequest(); req.open('POST', `${config.apiBaseUrl}/games/${currentGame!.id}/play`); - req.addEventListener('load', e => { - if (req.status == 204) { - } - }); let data = new URLSearchParams(); data.append('clientToken', clientToken); data.append('cardNumber', card.number.toString()); diff --git a/TableturfBattleClient/src/Pages/LobbyPage.ts b/TableturfBattleClient/src/Pages/LobbyPage.ts index d4af68d..f1cccd6 100644 --- a/TableturfBattleClient/src/Pages/LobbyPage.ts +++ b/TableturfBattleClient/src/Pages/LobbyPage.ts @@ -4,11 +4,8 @@ let submitDeckButton = document.getElementById('submitDeckButton') as HTMLButton function clearReady() { if (currentGame == null) return; for (var i = 0; i < currentGame.players.length; i++) { - const player = currentGame.players[i]; - if (player != null) { - player.isReady = false; - updatePlayerListItem(i); - } + currentGame.players[i].isReady = false; + updatePlayerListItem(i); } } @@ -17,7 +14,7 @@ function updatePlayerListItem(playerIndex: number) { const listItem = playerListItems[playerIndex]; if (player != null) { listItem.innerText = player.name; - if (player) + if (player.isReady) listItem.innerText += ' (Ready)'; } else listItem.innerText = "Waiting..."; diff --git a/TableturfBattleClient/src/Pages/PreGamePage.ts b/TableturfBattleClient/src/Pages/PreGamePage.ts index 5cb5364..068d5e0 100644 --- a/TableturfBattleClient/src/Pages/PreGamePage.ts +++ b/TableturfBattleClient/src/Pages/PreGamePage.ts @@ -72,7 +72,7 @@ function getGameInfo(gameID: string, myPlayerIndex: number | null) { currentGame = { id: gameID, - me: playerData != null ? { playerIndex: playerData.playerIndex, hand: playerData.hand?.map(Card.fromJson) || null, deck: playerData.deck?.map(Card.fromJson) || null, cardsUsed: playerData.cardsUsed } : null, + me: playerData != null ? { playerIndex: playerData.playerIndex, hand: playerData.hand?.map(Card.fromJson) || null, deck: playerData.deck?.map(Card.fromJson) || null, cardsUsed: playerData.cardsUsed, move: playerData.move } : null, players: response.game.players, webSocket: webSocket }; @@ -80,12 +80,9 @@ function getGameInfo(gameID: string, myPlayerIndex: number | null) { for (const li of playerListItems) playerList.removeChild(li); playerListItems.splice(0); - for (var player of currentGame.players) { + for (let i = 0; i < 2; i++) { var el = document.createElement('li'); - if (player) - el.innerText = player.name; - else - el.innerText = "Waiting..."; + el.innerText = i < currentGame.players.length ? currentGame.players[i].name : 'Waiting...'; playerListItems.push(el); playerList.appendChild(el); } @@ -93,7 +90,7 @@ function getGameInfo(gameID: string, myPlayerIndex: number | null) { onGameStateChange(response.game, playerData); for (let i = 0; i < response.game.players.length; i++) { - if (response.game.players[i]?.isReady) + if (response.game.players[i].isReady) showReady(i); } @@ -124,11 +121,11 @@ function getGameInfo(gameID: string, myPlayerIndex: number | null) { if (s) { let payload = JSON.parse(s); if (payload.event == 'join') { - currentGame.players[payload.data.playerIndex] = payload.data.player; + currentGame.players.push(payload.data.player); playerListItems[payload.data.playerIndex].innerText = payload.data.player.name; updatePlayerListItem(payload.data.playerIndex); } else if (payload.event == 'playerReady') { - currentGame.players[payload.data.playerIndex]!.isReady = true; + currentGame.players[payload.data.playerIndex].isReady = true; updatePlayerListItem(payload.data.playerIndex); if (playContainers[payload.data.playerIndex].getElementsByTagName('div').length == 0) { @@ -148,25 +145,23 @@ function getGameInfo(gameID: string, myPlayerIndex: number | null) { clearPlayContainers(); for (let i = 0; i < currentGame.players.length; i++) { const player = currentGame.players[i]; - if (player != null) { - player.specialPoints = payload.data.game.players[i].specialPoints; - player.totalSpecialPoints = payload.data.game.players[i].totalSpecialPoints; - player.passes = payload.data.game.players[i].passes; + player.specialPoints = payload.data.game.players[i].specialPoints; + player.totalSpecialPoints = payload.data.game.players[i].totalSpecialPoints; + player.passes = payload.data.game.players[i].passes; - const move = payload.data.moves[i]; - const button = new CardButton('checkbox', move.card); - if (move.isSpecialAttack) { - anySpecialAttacks = true; - button.element.classList.add('specialAttack'); - } else if (move.isPass) { - const el = document.createElement('div'); - el.className = 'passLabel'; - el.innerText = 'Pass'; - button.element.appendChild(el); - } - button.inputElement.hidden = true; - playContainers[i].append(button.element); + const move = payload.data.moves[i]; + const button = new CardButton('checkbox', move.card); + if (move.isSpecialAttack) { + anySpecialAttacks = true; + button.element.classList.add('specialAttack'); + } else if (move.isPass) { + const el = document.createElement('div'); + el.className = 'passLabel'; + el.innerText = 'Pass'; + button.element.appendChild(el); } + button.inputElement.hidden = true; + playContainers[i].append(button.element); } await playInkAnimations(payload.data, anySpecialAttacks); diff --git a/TableturfBattleClient/src/app.ts b/TableturfBattleClient/src/app.ts index 2110732..2d976f9 100644 --- a/TableturfBattleClient/src/app.ts +++ b/TableturfBattleClient/src/app.ts @@ -59,7 +59,7 @@ function onGameStateChange(game: any, playerData: any) { case GameState.Ongoing: turnNumberLabel.setTurnNumber(game.turnNumber); board.autoHighlight = true; - canPlay = currentGame.me != null && !currentGame.players[currentGame.me.playerIndex]?.isReady; + canPlay = currentGame.me != null && !currentGame.players[currentGame.me.playerIndex].isReady; setupControlsForPlay(); break; case GameState.Ended: