Leahnaya/TableturfBattleApp
1
0
Fork 0
mirror of https://github.com/AndrioCelos/TableturfBattleApp.git synced 2026-09-29 05:41:59 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Client: Nulls in player list is no longer allowed

Browse Source
This commit is contained in:
Andrio Celos
2022-10-02 01:03:55 +10:00
parent 42864b92be
commit 632e53e7b3
5 changed files with 45 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
TableturfBattleClient/src/GameVariables.ts
View File

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

44
TableturfBattleClient/src/Pages/GamePage.ts
View File

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

9
TableturfBattleClient/src/Pages/LobbyPage.ts
View File

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

47
TableturfBattleClient/src/Pages/PreGamePage.ts
View File

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

2
TableturfBattleClient/src/app.ts
View File

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