From a26b405ffab4d651d7779460fa955a2d5fc5bdea Mon Sep 17 00:00:00 2001 From: AlecM33 Date: Sat, 1 Apr 2023 23:49:21 -0400 Subject: [PATCH 1/3] display current moderator, fix assignment of spectator --- .../front_end_components/HTMLFragments.js | 12 ++++ .../modules/game_state/states/InProgress.js | 61 +++++++++++-------- client/src/styles/game.css | 17 ++++-- client/webpack/webpack-dev.config.js | 2 +- server/modules/Events.js | 6 +- server/modules/ServerBootstrapper.js | 2 +- server/modules/singletons/GameManager.js | 1 + spec/e2e/game_spec.js | 9 ++- 8 files changed, 75 insertions(+), 35 deletions(-) diff --git a/client/src/modules/front_end_components/HTMLFragments.js b/client/src/modules/front_end_components/HTMLFragments.js index cbd7242..51ef1ba 100644 --- a/client/src/modules/front_end_components/HTMLFragments.js +++ b/client/src/modules/front_end_components/HTMLFragments.js @@ -88,6 +88,10 @@ export const HTMLFragments = {

(Double-click here again to hide)

+
+
+
+
@@ -118,6 +122,10 @@ export const HTMLFragments = {
+
+
+
+
@@ -294,6 +302,10 @@ export const HTMLFragments = {
+
+
+
+
`, diff --git a/client/src/modules/game_state/states/InProgress.js b/client/src/modules/game_state/states/InProgress.js index ed4f3aa..e53ec25 100644 --- a/client/src/modules/game_state/states/InProgress.js +++ b/client/src/modules/game_state/states/InProgress.js @@ -88,6 +88,9 @@ export class InProgress { } } 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); } @@ -162,38 +165,40 @@ export class InProgress { } renderSpectatorView () { + displayCurrentModerator(this.stateBucket.currentGameState.people + .find((person) => person.userType === globals.USER_TYPES.MODERATOR + || person.userType === globals.USER_TYPES.TEMPORARY_MODERATOR)); this.renderPlayersWithNoRoleInformationUnlessRevealed(); } setSocketHandlers () { - this.socket.on(globals.EVENT_IDS.KILL_PLAYER, (id) => { - const killedPerson = this.stateBucket.currentGameState.people.find((person) => person.id === id); - if (killedPerson) { - killedPerson.out = true; - killedPerson.killed = true; - killedPerson.userType = killedPerson.userType === globals.USER_TYPES.BOT - ? globals.USER_TYPES.KILLED_BOT - : globals.USER_TYPES.KILLED_PLAYER; - if (this.stateBucket.currentGameState.client.userType === globals.USER_TYPES.MODERATOR) { - toast(killedPerson.name + ' killed.', 'success', true, true, 'medium'); - this.renderPlayersWithRoleAndAlignmentInfo(this.stateBucket.currentGameState.status === globals.STATUS.ENDED); + this.socket.on(globals.EVENT_IDS.KILL_PLAYER, (killedPlayer) => { + this.stateBucket.currentGameState.people = this.stateBucket.currentGameState.people + .map(person => person.id === killedPlayer.id ? killedPlayer : person); + console.log(this.stateBucket.currentGameState.people); + if (this.stateBucket.currentGameState.client.userType === globals.USER_TYPES.MODERATOR) { + toast(killedPlayer.name + ' killed.', 'success', true, true, 'medium'); + this.renderPlayersWithRoleAndAlignmentInfo(this.stateBucket.currentGameState.status === globals.STATUS.ENDED); + } else { + console.log(killedPlayer); + if (killedPlayer.id === this.stateBucket.currentGameState.client.id) { + 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 { - if (killedPerson.id === this.stateBucket.currentGameState.client.id) { - 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 { - 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); + toast(killedPlayer.name + ' was killed!', 'warning', true, true, 'medium'); + if (killedPlayer.userType === globals.USER_TYPES.MODERATOR) { + displayCurrentModerator(killedPlayer); } } + 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 ) { for (const player of people) { + console.log(player); const playerEl = document.createElement('div'); 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) { if (document.querySelector('#game-control-prompt') === null) { const div = document.createElement('div'); diff --git a/client/src/styles/game.css b/client/src/styles/game.css index c0fb561..f02acb1 100644 --- a/client/src/styles/game.css +++ b/client/src/styles/game.css @@ -1,4 +1,4 @@ -.lobby-player, #moderator, .spectator, .potential-moderator { +.lobby-player, #moderator, .spectator, .potential-moderator, #current-moderator { display: flex; flex-wrap: wrap; align-items: center; @@ -14,7 +14,16 @@ } .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 { @@ -51,7 +60,7 @@ 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; } @@ -648,7 +657,7 @@ canvas { 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; min-width: 6em; max-width: 10em; diff --git a/client/webpack/webpack-dev.config.js b/client/webpack/webpack-dev.config.js index 5442f3d..8471daa 100644 --- a/client/webpack/webpack-dev.config.js +++ b/client/webpack/webpack-dev.config.js @@ -15,7 +15,7 @@ module.exports = { filename: "[name]-bundle.js", }, plugins: [new CompressionPlugin({ - exclude: [/.map$/, /521-bundle.js$/] + exclude: [/.map$/, /Timer_js-bundle.js$/] })], mode: "development", node: false, diff --git a/server/modules/Events.js b/server/modules/Events.js index 2254097..7770357 100644 --- a/server/modules/Events.js +++ b/server/modules/Events.js @@ -96,7 +96,7 @@ const Events = [ communicate: async (game, socketArgs, vars) => { const person = game.people.find((person) => person.id === socketArgs.personId); 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); if (moderator && moderatorSocket) { 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 { - 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); if (previousModerator && previousModerator.id !== moderator.id && vars.gameManager.namespace.sockets.get(previousModerator.socketId)) { diff --git a/server/modules/ServerBootstrapper.js b/server/modules/ServerBootstrapper.js index ac83fc2..85a3f69 100644 --- a/server/modules/ServerBootstrapper.js +++ b/server/modules/ServerBootstrapper.js @@ -140,7 +140,7 @@ const ServerBootstrapper = { app.use('', router); 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'); } next(); diff --git a/server/modules/singletons/GameManager.js b/server/modules/singletons/GameManager.js index 0299e91..aed5e58 100644 --- a/server/modules/singletons/GameManager.js +++ b/server/modules/singletons/GameManager.js @@ -393,6 +393,7 @@ async function addSpectator (game, name, logger, namespace, eventManager, instan name, globals.USER_TYPES.SPECTATOR ); + spectator.assigned = true; logger.trace('new spectator: ' + spectator.name); game.people.push(spectator); await refreshGame(game); diff --git a/spec/e2e/game_spec.js b/spec/e2e/game_spec.js index ce43646..bd82775 100644 --- a/spec/e2e/game_spec.js +++ b/spec/e2e/game_spec.js @@ -240,7 +240,14 @@ describe('game page', () => { mockGames.moderatorGame.accessCode, { 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') ).not.toBeNull(); }); From 9761b97f68ef80ed29cb518258501500299782c7 Mon Sep 17 00:00:00 2001 From: AlecM33 Date: Sat, 1 Apr 2023 23:51:27 -0400 Subject: [PATCH 2/3] remove logs --- client/src/modules/game_state/states/InProgress.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/client/src/modules/game_state/states/InProgress.js b/client/src/modules/game_state/states/InProgress.js index e53ec25..de790b6 100644 --- a/client/src/modules/game_state/states/InProgress.js +++ b/client/src/modules/game_state/states/InProgress.js @@ -175,12 +175,10 @@ export class InProgress { this.socket.on(globals.EVENT_IDS.KILL_PLAYER, (killedPlayer) => { this.stateBucket.currentGameState.people = this.stateBucket.currentGameState.people .map(person => person.id === killedPlayer.id ? killedPlayer : person); - console.log(this.stateBucket.currentGameState.people); if (this.stateBucket.currentGameState.client.userType === globals.USER_TYPES.MODERATOR) { toast(killedPlayer.name + ' killed.', 'success', true, true, 'medium'); this.renderPlayersWithRoleAndAlignmentInfo(this.stateBucket.currentGameState.status === globals.STATUS.ENDED); } else { - console.log(killedPlayer); if (killedPlayer.id === this.stateBucket.currentGameState.client.id) { const clientUserType = document.getElementById('client-user-type'); if (clientUserType) { @@ -306,7 +304,6 @@ export class InProgress { socket = null ) { for (const player of people) { - console.log(player); const playerEl = document.createElement('div'); playerEl.classList.add('game-player'); From dd0c0c091724cddca0517932580208c82f409361 Mon Sep 17 00:00:00 2001 From: AlecM33 Date: Sun, 2 Apr 2023 00:00:33 -0400 Subject: [PATCH 3/3] fix specs, lint --- client/src/modules/game_state/states/InProgress.js | 6 +++--- spec/unit/server/modules/Events_Spec.js | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/client/src/modules/game_state/states/InProgress.js b/client/src/modules/game_state/states/InProgress.js index de790b6..437ed63 100644 --- a/client/src/modules/game_state/states/InProgress.js +++ b/client/src/modules/game_state/states/InProgress.js @@ -481,9 +481,9 @@ 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 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) { diff --git a/spec/unit/server/modules/Events_Spec.js b/spec/unit/server/modules/Events_Spec.js index 8f2a835..d8e910a 100644 --- a/spec/unit/server/modules/Events_Spec.js +++ b/spec/unit/server/modules/Events_Spec.js @@ -263,7 +263,7 @@ describe('Events', () => { expect(namespace.in).toHaveBeenCalledWith(game.accessCode); expect(namespace.in().emit).toHaveBeenCalledWith( EVENT_IDS.KILL_PLAYER, - 'b' + game.people.find(p => p.id === 'b') ); }); }); @@ -433,7 +433,7 @@ describe('Events', () => { expect(namespace.to().emit).toHaveBeenCalledWith(EVENT_IDS.SYNC_GAME_STATE); // verify the "kill player" event is sent to everyone but the sender expect(mockSocket.to).toHaveBeenCalledWith(game.accessCode); - expect(socketToObj.emit).toHaveBeenCalledWith(EVENT_IDS.KILL_PLAYER, 'a'); + expect(socketToObj.emit).toHaveBeenCalledWith(EVENT_IDS.KILL_PLAYER, game.people.find(p => p.id === 'a')); }); it('should not communicate to the current or previous mod if their sockets are not found', async () => { game.currentModeratorId = 'a'; @@ -461,7 +461,7 @@ describe('Events', () => { expect(namespace.to().emit).not.toHaveBeenCalled(); // verify the "kill player" event is sent to everyone in the room (as opposed to everyone but the sender) expect(namespace.in).toHaveBeenCalledWith(game.accessCode); - expect(namespace.in().emit).toHaveBeenCalledWith(EVENT_IDS.KILL_PLAYER, 'a'); + expect(namespace.in().emit).toHaveBeenCalledWith(EVENT_IDS.KILL_PLAYER, game.people.find(p => p.id === 'a')); }); }); });