Git_Mirror/Werewolf
1
0
Fork 0
mirror of https://github.com/AlecM33/Werewolf.git synced 2025-12-26 15:57:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

display current moderator, fix assignment of spectator

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

12
client/src/modules/front_end_components/HTMLFragments.js
View File

@@ -88,6 +88,10 @@ export const HTMLFragments = {
<p>(Double-click here again to hide)</p>
</div>
<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>
<div id="spectator-count" tabindex="0"></div>
<div id='game-player-list'></div>
@@ -118,6 +122,10 @@ export const HTMLFragments = {
</div>
</div>
<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>
<div id="spectator-count" tabindex="0"></div>
<div id='game-player-list'></div>
@@ -294,6 +302,10 @@ export const HTMLFragments = {
</div>
</div>
<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>
<div id='game-player-list'></div>
</div>`,

61
client/src/modules/game_state/states/InProgress.js
View File

@@ -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');

17
client/src/styles/game.css
View File

@@ -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;

2
client/webpack/webpack-dev.config.js
View File

@@ -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,