Git_Mirror/Werewolf
1
0
Fork 0
mirror of https://github.com/AlecM33/Werewolf.git synced 2026-01-02 01:03:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

flesh out killing players, display 0 on timerand remove play/pause button

Browse Source
This commit is contained in:
Alec
2021-12-08 00:13:13 -05:00
parent bad4e3dfc4
commit a66bc7b413
14 changed files with 157 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
client/modules/GameStateRenderer.js
View File

@@ -27,7 +27,7 @@ export class GameStateRenderer {
playerCount += 1;
}
document.querySelector("label[for='lobby-players']").innerText =
"Other People (" + playerCount + "/" + getGameSize(this.gameState.deck) + " Players)";
"People (" + playerCount + "/" + getGameSize(this.gameState.deck) + " Players)";
}
renderLobbyHeader() {
@@ -67,22 +67,53 @@ export class GameStateRenderer {
let div = document.createElement("div");
div.innerHTML = templates.END_GAME_PROMPT;
document.body.appendChild(div);
renderPlayersWithRoleAndAlignmentInfo(this.gameState.people, this.socket, this.gameState.accessCode, this.killPlayerHandlers);
this.renderPlayersWithRoleAndAlignmentInfo();
}
renderPlayerView() {
renderPlayerRole(this.gameState);
renderPlayersWithNoRoleInformation(this.gameState.people, this.killPlayerHandlers);
this.renderPlayersWithNoRoleInformation();
}
refreshPlayerList(isModerator) {
if (isModerator) {
renderPlayersWithRoleAndAlignmentInfo(this.gameState.people, this.socket, this.gameState.accessCode, this.killPlayerHandlers)
this.renderPlayersWithRoleAndAlignmentInfo()
} else {
renderPlayersWithNoRoleInformation(this.gameState.people, this.killPlayerHandlers);
this.renderPlayersWithNoRoleInformation();
}
}
renderPlayersWithRoleAndAlignmentInfo() {
document.querySelectorAll('.game-player').forEach((el) => {
let pointer = el.dataset.pointer;
if (pointer && this.killPlayerHandlers[pointer]) {
el.removeEventListener('click', this.killPlayerHandlers[pointer])
}
el.remove();
});
this.gameState.people.sort((a, b) => {
return a.name >= b.name ? 1 : -1;
});
let teamGood = this.gameState.people.filter((person) => person.alignment === globals.ALIGNMENT.GOOD);
let teamEvil = this.gameState.people.filter((person) => person.alignment === globals.ALIGNMENT.EVIL);
renderGroupOfPlayers(teamEvil, this.killPlayerHandlers, this.gameState.accessCode, globals.ALIGNMENT.EVIL, true, this.socket);
renderGroupOfPlayers(teamGood, this.killPlayerHandlers, this.gameState.accessCode, globals.ALIGNMENT.GOOD, true, this.socket);
document.getElementById("players-alive-label").innerText =
'Players: ' + this.gameState.people.filter((person) => !person.out).length + ' / ' + this.gameState.people.length + ' Alive';
}
renderPlayersWithNoRoleInformation() {
document.querySelectorAll('.game-player').forEach((el) => el.remove());
this.gameState.people.sort((a, b) => {
return a.name >= b.name ? 1 : -1;
});
renderGroupOfPlayers(this.gameState.people, this.killPlayerHandlers);
document.getElementById("players-alive-label").innerText =
'Players: ' + this.gameState.people.filter((person) => !person.out).length + ' / ' + this.gameState.people.length + ' Alive';
}
}
function renderLobbyPerson(name, userType) {
@@ -115,37 +146,6 @@ function removeExistingTitle() {
}
}
function renderPlayersWithRoleAndAlignmentInfo(people, socket, accessCode, handlers) {
document.querySelectorAll('.game-player').forEach((el) => {
let pointer = el.dataset.pointer;
if (pointer && handlers[pointer]) {
el.removeEventListener('click', handlers[pointer])
}
el.remove();
});
people.sort((a, b) => {
return a.name >= b.name ? 1 : -1;
});
let teamGood = people.filter((person) => person.alignment === globals.ALIGNMENT.GOOD);
let teamEvil = people.filter((person) => person.alignment === globals.ALIGNMENT.EVIL);
renderGroupOfPlayers(teamEvil, handlers, accessCode, globals.ALIGNMENT.EVIL, true, socket);
renderGroupOfPlayers(teamGood, handlers, accessCode, globals.ALIGNMENT.GOOD, true, socket);
document.getElementById("players-alive-label").innerText =
'Players: ' + people.filter((person) => !person.out).length + ' / ' + people.length + ' Alive';
}
function renderPlayersWithNoRoleInformation(people, handlers) {
document.querySelectorAll('.game-player').forEach((el) => el.remove());
people.sort((a, b) => {
return a.name >= b.name ? 1 : -1;
});
renderGroupOfPlayers(people, handlers);
document.getElementById("players-alive-label").innerText =
'Players: ' + people.filter((person) => !person.out).length + ' / ' + people.length + ' Alive';
}
function renderGroupOfPlayers(players, handlers, accessCode=null, alignment=null, moderator=false, socket=null) {
for (let player of players) {
let container = document.createElement("div");
@@ -168,14 +168,18 @@ function renderGroupOfPlayers(players, handlers, accessCode=null, alignment=null
document.getElementById("game-player-list").appendChild(container);
}
if (moderator) {
handlers[player.id] = () => {
socket.emit(globals.COMMANDS.KILL_PLAYER, accessCode, player.id);
if (player.out) {
container.classList.add('killed');
if (moderator) {
container.querySelector('.kill-player-button')?.remove();
}
if (player.out) {
container.classList.add('killed');
container.querySelector('.kill-player-button').remove();
} else {
} else {
if (moderator) {
handlers[player.id] = () => {
if (confirm("KILL " + player.name + "?")) {
socket.emit(globals.COMMANDS.KILL_PLAYER, accessCode, player.id);
}
}
container.querySelector('.kill-player-button').addEventListener('click', handlers[player.id]);
}
}
@@ -191,11 +195,19 @@ function renderPlayerRole(gameState) {
name.classList.add('evil');
}
name.setAttribute("title", gameState.client.gameRole);
document.querySelector('#role-description').innerText = gameState.client.gameRoleDescription;
document.getElementById("role-image").setAttribute(
'src',
'../images/roles/' + gameState.client.gameRole.replaceAll(' ', '') + '.png'
);
if (gameState.client.out) {
document.querySelector('#role-description').innerText = "You have been killed.";
document.getElementById("role-image").setAttribute(
'src',
'../images/tombstone.png'
);
} else {
document.querySelector('#role-description').innerText = gameState.client.gameRoleDescription;
document.getElementById("role-image").setAttribute(
'src',
'../images/roles/' + gameState.client.gameRole.replaceAll(' ', '') + '.png'
);
}
document.getElementById("game-role-back").addEventListener('click', () => {
document.getElementById("game-role").style.display = 'flex';

24
client/modules/GameTimerManager.js
View File

@@ -28,15 +28,19 @@ export class GameTimerManager {
if (this.gameState.client.userType !== globals.USER_TYPES.PLAYER) {
this.swapToPauseButton();
}
let instance = this;
let timer = document.getElementById('game-timer');
timer.classList.remove('paused');
timer.innerText = totalTime < 60000
? returnHumanReadableTime(totalTime, true)
: returnHumanReadableTime(totalTime);
timerWorker.onmessage = function (e) {
if (e.data.hasOwnProperty('timeRemainingInMilliseconds') && e.data.timeRemainingInMilliseconds > 0) {
timer.innerText = e.data.displayTime;
if (e.data.hasOwnProperty('timeRemainingInMilliseconds') && e.data.timeRemainingInMilliseconds >= 0) {
if (e.data.timeRemainingInMilliseconds === 0) {
instance.displayExpiredTime();
} else {
timer.innerText = e.data.displayTime;
}
}
};
timerWorker.postMessage({ totalTime: totalTime, tickInterval: tickRate });
@@ -70,6 +74,18 @@ export class GameTimerManager {
timer.classList.add('paused');
}
displayExpiredTime() {
let currentBtn = document.querySelector('#play-pause img');
if (currentBtn) {
currentBtn.removeEventListener('click', this.pauseListener);
currentBtn.removeEventListener('click', this.playListener);
currentBtn.remove();
}
let timer = document.getElementById('game-timer');
timer.innerText = returnHumanReadableTime(0, true);
}
attachTimerSocketListeners(socket, timerWorker, gameStateRenderer) {
// if (!socket.hasListeners(globals.EVENTS.START_TIMER)) {
// socket.on(globals.EVENTS.START_TIMER, () => {
@@ -100,6 +116,8 @@ export class GameTimerManager {
console.log('received time remaining from server');
if (paused) {
this.displayPausedTime(timeRemaining);
} else if (timeRemaining === 0) {
this.displayExpiredTime();
} else {
this.resumeGameTimer(timeRemaining, globals.CLOCK_TICK_INTERVAL_MILLIS, null, timerWorker);
}

3
client/modules/Templates.js
View File

@@ -75,7 +75,8 @@ export const templates = {
"<div class='game-player-role'></div>" +
"</div>" +
"<div>" +
"<button class='moderator-player-button kill-player-button'>Kill \u2694</button>" +
"<button class='moderator-player-button kill-player-button'>Kill \uD83D\uDC80</button>" +
"<button class='moderator-player-button reveal-role-button'>Reveal Role <img src='../images/eye.svg'/></button>" +
"</div>",
GAME_PLAYER:
"<div>" +

4
client/modules/Timer.js
View File

@@ -30,6 +30,10 @@ onmessage = function (e) {
function stepFn (expected, interval, start, totalTime) {
const now = Date.now();
if (now - start >= totalTime) {
postMessage({
timeRemainingInMilliseconds: 0,
displayTime: returnHumanReadableTime(0, true)
});
return;
}
const delta = now - expected;