refine spectator count

This commit is contained in:
AlecM33
2022-12-26 14:31:50 -05:00
parent da5b531952
commit 1c156b0a55
4 changed files with 28 additions and 43 deletions

View File

@@ -25,7 +25,8 @@ export const HTMLFragments = {
</div>
<div>
<div id='lobby-people-container'>
<label for='lobby-players'>Other People</label>
<label for='lobby-players'></label>
<div id="spectator-count"></div>
<div id='lobby-players'></div>
</div>
<div id='lobby-footer'>

View File

@@ -46,6 +46,11 @@ export class Lobby {
const playerCount = this.container.querySelector('#game-player-count');
playerCount.innerText = this.stateBucket.currentGameState.gameSize + ' Players';
setNumberOfSpectators(
this.stateBucket.currentGameState.spectators.length,
this.container.querySelector('#spectator-count')
)
const gameCode = this.container.querySelector('#game-code');
gameCode.innerHTML = 'Or enter this code on the homepage: <span>' +
this.stateBucket.currentGameState.accessCode + '</span>';
@@ -91,6 +96,10 @@ export class Lobby {
this.socket.on(globals.EVENT_IDS.NEW_SPECTATOR, (spectator) => {
this.stateBucket.currentGameState.spectators.push(spectator);
setNumberOfSpectators(
this.stateBucket.currentGameState.spectators.length,
document.getElementById('spectator-count')
);
});
// this.socket.on(globals.EVENT_IDS.PLAYER_LEFT, (player) => {
@@ -127,6 +136,12 @@ export class Lobby {
}
}
function setNumberOfSpectators(number, el) {
el.innerText = '+ ' + (number === 1
? number + ' Spectator'
: number + ' Spectators');
}
function enableOrDisableStartButton (gameState, buttonContainer, handler) {
if (gameState.isFull) {
buttonContainer.querySelector('#start-game-button').addEventListener('click', handler);

View File

@@ -25,7 +25,10 @@
#lobby-people-container label {
display: block;
margin-bottom: 0.5em;
}
#spectator-count {
color: #b1afcd;
}
.lobby-player-client {

View File

@@ -5,7 +5,7 @@ const globals = require('../config/globals');
information that they shouldn't.
*/
const GameStateCurator = {
getGameStateFromPerspectiveOfPerson: (game, person, gameRunner, socket, logger) => {
getGameStateFromPerspectiveOfPerson: (game, person, gameRunner) => {
return getGameStateBasedOnPermissions(game, person, gameRunner);
},
@@ -58,30 +58,6 @@ function getGameStateBasedOnPermissions (game, person, gameRunner) {
out: person.out
};
switch (person.userType) {
case globals.USER_TYPES.PLAYER:
case globals.USER_TYPES.KILLED_PLAYER: {
const state = {
accessCode: game.accessCode,
status: game.status,
moderator: GameStateCurator.mapPerson(game.moderator),
client: client,
deck: game.deck,
gameSize: game.gameSize,
people: game.people
.filter((person) => {
return person.assigned === true;
})
.map((filteredPerson) =>
GameStateCurator.mapPerson(filteredPerson)
),
timerParams: game.timerParams,
isFull: game.isFull
};
if (game.status === globals.STATUS.ENDED) {
state.people = GameStateCurator.mapPeopleForModerator(game.people);
}
return state;
}
case globals.USER_TYPES.MODERATOR:
return {
accessCode: game.accessCode,
@@ -98,22 +74,9 @@ function getGameStateBasedOnPermissions (game, person, gameRunner) {
)
};
case globals.USER_TYPES.TEMPORARY_MODERATOR:
return {
accessCode: game.accessCode,
status: game.status,
moderator: GameStateCurator.mapPerson(game.moderator),
client: client,
deck: game.deck,
gameSize: game.gameSize,
people: game.people
.filter((person) => {
return person.assigned === true;
})
.map((filteredPerson) => GameStateCurator.mapPerson(filteredPerson)),
timerParams: game.timerParams,
isFull: game.isFull
};
case globals.USER_TYPES.SPECTATOR:
case globals.USER_TYPES.PLAYER:
case globals.USER_TYPES.KILLED_PLAYER:
return {
accessCode: game.accessCode,
status: game.status,
@@ -127,7 +90,10 @@ function getGameStateBasedOnPermissions (game, person, gameRunner) {
})
.map((filteredPerson) => GameStateCurator.mapPerson(filteredPerson)),
timerParams: game.timerParams,
isFull: game.isFull
isFull: game.isFull,
spectators: game.spectators.map((filteredPerson) =>
GameStateCurator.mapPerson(filteredPerson)
)
};
default:
break;