display current moderator, fix assignment of spectator

This commit is contained in:
AlecM33
2023-04-01 23:49:21 -04:00
parent daf2fe781f
commit a26b405ffa
8 changed files with 75 additions and 35 deletions

View File

@@ -88,6 +88,10 @@ export const HTMLFragments = {
<p>(Double-click here again to hide)</p> <p>(Double-click here again to hide)</p>
</div> </div>
<div id='game-people-container'> <div id='game-people-container'>
<div id="current-moderator" class="moderator">
<div id="current-moderator-name"></div>
<div id="current-moderator-type"></div>
</div>
<label id='players-alive-label'></label> <label id='players-alive-label'></label>
<div id="spectator-count" tabindex="0"></div> <div id="spectator-count" tabindex="0"></div>
<div id='game-player-list'></div> <div id='game-player-list'></div>
@@ -118,6 +122,10 @@ export const HTMLFragments = {
</div> </div>
</div> </div>
<div id='game-people-container'> <div id='game-people-container'>
<div id="current-moderator" class="moderator">
<div id="current-moderator-name"></div>
<div id="current-moderator-type"></div>
</div>
<label id='players-alive-label'></label> <label id='players-alive-label'></label>
<div id="spectator-count" tabindex="0"></div> <div id="spectator-count" tabindex="0"></div>
<div id='game-player-list'></div> <div id='game-player-list'></div>
@@ -294,6 +302,10 @@ export const HTMLFragments = {
</div> </div>
</div> </div>
<div id='game-people-container'> <div id='game-people-container'>
<div id="current-moderator" class="moderator">
<div id="current-moderator-name"></div>
<div id="current-moderator-type"></div>
</div>
<label id='players-alive-label'></label> <label id='players-alive-label'></label>
<div id='game-player-list'></div> <div id='game-player-list'></div>
</div>`, </div>`,

View File

@@ -88,6 +88,9 @@ export class InProgress {
} }
} }
renderPlayerRole(this.stateBucket.currentGameState); renderPlayerRole(this.stateBucket.currentGameState);
displayCurrentModerator(this.stateBucket.currentGameState.people
.find((person) => person.userType === globals.USER_TYPES.MODERATOR
|| person.userType === globals.USER_TYPES.TEMPORARY_MODERATOR));
this.renderPlayersWithNoRoleInformationUnlessRevealed(false); this.renderPlayersWithNoRoleInformationUnlessRevealed(false);
} }
@@ -162,38 +165,40 @@ export class InProgress {
} }
renderSpectatorView () { renderSpectatorView () {
displayCurrentModerator(this.stateBucket.currentGameState.people
.find((person) => person.userType === globals.USER_TYPES.MODERATOR
|| person.userType === globals.USER_TYPES.TEMPORARY_MODERATOR));
this.renderPlayersWithNoRoleInformationUnlessRevealed(); this.renderPlayersWithNoRoleInformationUnlessRevealed();
} }
setSocketHandlers () { setSocketHandlers () {
this.socket.on(globals.EVENT_IDS.KILL_PLAYER, (id) => { this.socket.on(globals.EVENT_IDS.KILL_PLAYER, (killedPlayer) => {
const killedPerson = this.stateBucket.currentGameState.people.find((person) => person.id === id); this.stateBucket.currentGameState.people = this.stateBucket.currentGameState.people
if (killedPerson) { .map(person => person.id === killedPlayer.id ? killedPlayer : person);
killedPerson.out = true; console.log(this.stateBucket.currentGameState.people);
killedPerson.killed = true; if (this.stateBucket.currentGameState.client.userType === globals.USER_TYPES.MODERATOR) {
killedPerson.userType = killedPerson.userType === globals.USER_TYPES.BOT toast(killedPlayer.name + ' killed.', 'success', true, true, 'medium');
? globals.USER_TYPES.KILLED_BOT this.renderPlayersWithRoleAndAlignmentInfo(this.stateBucket.currentGameState.status === globals.STATUS.ENDED);
: globals.USER_TYPES.KILLED_PLAYER; } else {
if (this.stateBucket.currentGameState.client.userType === globals.USER_TYPES.MODERATOR) { console.log(killedPlayer);
toast(killedPerson.name + ' killed.', 'success', true, true, 'medium'); if (killedPlayer.id === this.stateBucket.currentGameState.client.id) {
this.renderPlayersWithRoleAndAlignmentInfo(this.stateBucket.currentGameState.status === globals.STATUS.ENDED); const clientUserType = document.getElementById('client-user-type');
if (clientUserType) {
clientUserType.innerText = globals.USER_TYPES.KILLED_PLAYER + ' \uD83D\uDC80';
}
this.updatePlayerCardToKilledState();
toast('You have been killed!', 'warning', true, true, 'medium');
} else { } else {
if (killedPerson.id === this.stateBucket.currentGameState.client.id) { toast(killedPlayer.name + ' was killed!', 'warning', true, true, 'medium');
const clientUserType = document.getElementById('client-user-type'); if (killedPlayer.userType === globals.USER_TYPES.MODERATOR) {
if (clientUserType) { displayCurrentModerator(killedPlayer);
clientUserType.innerText = globals.USER_TYPES.KILLED_PLAYER + ' \uD83D\uDC80';
}
this.updatePlayerCardToKilledState();
toast('You have been killed!', 'warning', true, true, 'medium');
} else {
toast(killedPerson.name + ' was killed!', 'warning', true, true, 'medium');
}
if (this.stateBucket.currentGameState.client.userType === globals.USER_TYPES.TEMPORARY_MODERATOR) {
this.removePlayerListEventListeners(false);
} else {
this.renderPlayersWithNoRoleInformationUnlessRevealed(false);
} }
} }
if (this.stateBucket.currentGameState.client.userType === globals.USER_TYPES.TEMPORARY_MODERATOR) {
this.removePlayerListEventListeners(false);
} else {
this.renderPlayersWithNoRoleInformationUnlessRevealed(false);
}
} }
}); });
@@ -301,6 +306,7 @@ export class InProgress {
socket = null socket = null
) { ) {
for (const player of people) { for (const player of people) {
console.log(player);
const playerEl = document.createElement('div'); const playerEl = document.createElement('div');
playerEl.classList.add('game-player'); playerEl.classList.add('game-player');
@@ -478,6 +484,11 @@ function removeExistingPlayerElements (killPlayerHandlers, revealRoleHandlers) {
}); });
} }
function displayCurrentModerator(moderator) {
document.getElementById("current-moderator-name").innerText = moderator.name;
document.getElementById("current-moderator-type").innerText = moderator.userType + globals.USER_TYPE_ICONS[moderator.userType];
}
function createEndGamePromptComponent (socket, stateBucket) { function createEndGamePromptComponent (socket, stateBucket) {
if (document.querySelector('#game-control-prompt') === null) { if (document.querySelector('#game-control-prompt') === null) {
const div = document.createElement('div'); const div = document.createElement('div');

View File

@@ -1,4 +1,4 @@
.lobby-player, #moderator, .spectator, .potential-moderator { .lobby-player, #moderator, .spectator, .potential-moderator, #current-moderator {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
@@ -14,7 +14,16 @@
} }
.moderator { .moderator {
border: 2px solid #c58f13; border: 2px solid #c58f13 !important;
}
#current-moderator {
border-radius: 5px;
color: #d7d7d7;
background-color: #16141e;
width: fit-content;
padding: 0 20px;
margin-bottom: 0.5em;
} }
.potential-moderator { .potential-moderator {
@@ -51,7 +60,7 @@
border: 2px solid #21ba45; border: 2px solid #21ba45;
} }
.lobby-player div:nth-child(2), .spectator div:nth-child(2), .potential-moderator div:nth-child(2) { .lobby-player div:nth-child(2), .spectator div:nth-child(2), .potential-moderator div:nth-child(2), #current-moderator div:nth-child(2) {
color: #21ba45; color: #21ba45;
} }
@@ -648,7 +657,7 @@ canvas {
justify-content: flex-end; justify-content: flex-end;
} }
.game-player-name, .lobby-player-name, .spectator-name, .potential-mod-name { .game-player-name, .lobby-player-name, .spectator-name, .potential-mod-name, #current-moderator-name {
position: relative; position: relative;
min-width: 6em; min-width: 6em;
max-width: 10em; max-width: 10em;

View File

@@ -15,7 +15,7 @@ module.exports = {
filename: "[name]-bundle.js", filename: "[name]-bundle.js",
}, },
plugins: [new CompressionPlugin({ plugins: [new CompressionPlugin({
exclude: [/.map$/, /521-bundle.js$/] exclude: [/.map$/, /Timer_js-bundle.js$/]
})], })],
mode: "development", mode: "development",
node: false, node: false,

View File

@@ -96,7 +96,7 @@ const Events = [
communicate: async (game, socketArgs, vars) => { communicate: async (game, socketArgs, vars) => {
const person = game.people.find((person) => person.id === socketArgs.personId); const person = game.people.find((person) => person.id === socketArgs.personId);
if (person) { if (person) {
vars.gameManager.namespace.in(game.accessCode).emit(globals.EVENT_IDS.KILL_PLAYER, person.id); vars.gameManager.namespace.in(game.accessCode).emit(globals.EVENT_IDS.KILL_PLAYER, person);
} }
} }
}, },
@@ -189,9 +189,9 @@ const Events = [
const moderatorSocket = vars.gameManager.namespace.sockets.get(moderator?.socketId); const moderatorSocket = vars.gameManager.namespace.sockets.get(moderator?.socketId);
if (moderator && moderatorSocket) { if (moderator && moderatorSocket) {
vars.gameManager.namespace.to(moderator.socketId).emit(globals.EVENTS.SYNC_GAME_STATE); vars.gameManager.namespace.to(moderator.socketId).emit(globals.EVENTS.SYNC_GAME_STATE);
moderatorSocket.to(game.accessCode).emit(globals.EVENT_IDS.KILL_PLAYER, game.currentModeratorId); moderatorSocket.to(game.accessCode).emit(globals.EVENT_IDS.KILL_PLAYER, moderator);
} else { } else {
vars.gameManager.namespace.in(game.accessCode).emit(globals.EVENT_IDS.KILL_PLAYER, game.currentModeratorId); vars.gameManager.namespace.in(game.accessCode).emit(globals.EVENT_IDS.KILL_PLAYER, moderator);
} }
const previousModerator = vars.gameManager.findPersonByField(game, 'id', game.previousModeratorId); const previousModerator = vars.gameManager.findPersonByField(game, 'id', game.previousModeratorId);
if (previousModerator && previousModerator.id !== moderator.id && vars.gameManager.namespace.sockets.get(previousModerator.socketId)) { if (previousModerator && previousModerator.id !== moderator.id && vars.gameManager.namespace.sockets.get(previousModerator.socketId)) {

View File

@@ -140,7 +140,7 @@ const ServerBootstrapper = {
app.use('', router); app.use('', router);
app.use('/dist', (req, res, next) => { app.use('/dist', (req, res, next) => {
if (req.url !== '/521-bundle.js') { // this is the bundled web worker, which was introducing compatibility problems with webpack compression. if (req.url.includes('.js.gz')) {
res.set('Content-Encoding', 'gzip'); res.set('Content-Encoding', 'gzip');
} }
next(); next();

View File

@@ -393,6 +393,7 @@ async function addSpectator (game, name, logger, namespace, eventManager, instan
name, name,
globals.USER_TYPES.SPECTATOR globals.USER_TYPES.SPECTATOR
); );
spectator.assigned = true;
logger.trace('new spectator: ' + spectator.name); logger.trace('new spectator: ' + spectator.name);
game.people.push(spectator); game.people.push(spectator);
await refreshGame(game); await refreshGame(game);

View File

@@ -240,7 +240,14 @@ describe('game page', () => {
mockGames.moderatorGame.accessCode, mockGames.moderatorGame.accessCode,
{ personId: 'pTtVXDJaxtXcrlbG8B43Wom67snoeO24RNEkO6eB2BaIftTdvpnfe1QR65DVj9A6I3VOoKZkYQW' } { personId: 'pTtVXDJaxtXcrlbG8B43Wom67snoeO24RNEkO6eB2BaIftTdvpnfe1QR65DVj9A6I3VOoKZkYQW' }
); );
mockSocket.eventHandlers.killPlayer('pTtVXDJaxtXcrlbG8B43Wom67snoeO24RNEkO6eB2BaIftTdvpnfe1QR65DVj9A6I3VOoKZkYQW'); mockSocket.eventHandlers.killPlayer({
id: 'pTtVXDJaxtXcrlbG8B43Wom67snoeO24RNEkO6eB2BaIftTdvpnfe1QR65DVj9A6I3VOoKZkYQW',
userType: globals.USER_TYPES.KILLED_PLAYER,
out: true,
killed: true,
revealed: false,
alignment: 'good'
});
expect(document.querySelector('div[data-pointer="pTtVXDJaxtXcrlbG8B43Wom67snoeO24RNEkO6eB2BaIftTdvpnfe1QR65DVj9A6I3VOoKZkYQW"].game-player.killed') expect(document.querySelector('div[data-pointer="pTtVXDJaxtXcrlbG8B43Wom67snoeO24RNEkO6eB2BaIftTdvpnfe1QR65DVj9A6I3VOoKZkYQW"].game-player.killed')
).not.toBeNull(); ).not.toBeNull();
}); });