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