mirror of
https://github.com/AlecM33/Werewolf.git
synced 2025-12-26 15:57:50 +01:00
display current moderator, fix assignment of spectator
This commit is contained in:
@@ -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>`,
|
||||||
|
|||||||
@@ -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');
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
@@ -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)) {
|
||||||
|
|||||||
@@ -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();
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
@@ -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();
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user