Git_Mirror/Werewolf
1
0
Fork 0
mirror of https://github.com/AlecM33/Werewolf.git synced 2025-12-29 17:27:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

gcloud, crude killing players functionality

Browse Source
This commit is contained in:
Alec
2021-12-07 01:49:16 -05:00
parent 2debf7be35
commit bad4e3dfc4
12 changed files with 187 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
client/modules/GameStateRenderer.js
View File

@@ -3,8 +3,10 @@ import { toast } from "./Toast.js";
import {templates} from "./Templates.js";
export class GameStateRenderer {
constructor(gameState) {
constructor(gameState, socket) {
this.gameState = gameState;
this.socket = socket;
this.killPlayerHandlers = {};
this.cardFlipped = false;
}
@@ -61,38 +63,26 @@ export class GameStateRenderer {
// document.getElementById("game-title").appendChild(title);
}
renderPlayerRole() {
let name = document.querySelector('#role-name');
name.innerText = this.gameState.client.gameRole;
if (this.gameState.client.alignment === globals.ALIGNMENT.GOOD) {
name.classList.add('good');
} else {
name.classList.add('evil');
}
name.setAttribute("title", this.gameState.client.gameRole);
document.querySelector('#role-description').innerText = this.gameState.client.gameRoleDescription;
document.getElementById("role-image").setAttribute(
'src',
'../images/roles/' + this.gameState.client.gameRole.replaceAll(' ', '') + '.png'
);
document.getElementById("game-role-back").addEventListener('click', () => {
document.getElementById("game-role").style.display = 'flex';
document.getElementById("game-role-back").style.display = 'none';
});
document.getElementById("game-role").addEventListener('click', () => {
document.getElementById("game-role-back").style.display = 'flex';
document.getElementById("game-role").style.display = 'none';
});
}
renderModeratorView() {
let div = document.createElement("div");
div.innerHTML = templates.END_GAME_PROMPT;
document.body.appendChild(div);
renderModeratorPlayers(this.gameState.people);
renderPlayersWithRoleAndAlignmentInfo(this.gameState.people, this.socket, this.gameState.accessCode, this.killPlayerHandlers);
}
renderPlayerView() {
renderPlayerRole(this.gameState);
renderPlayersWithNoRoleInformation(this.gameState.people, this.killPlayerHandlers);
}
refreshPlayerList(isModerator) {
if (isModerator) {
renderPlayersWithRoleAndAlignmentInfo(this.gameState.people, this.socket, this.gameState.accessCode, this.killPlayerHandlers)
} else {
renderPlayersWithNoRoleInformation(this.gameState.people, this.killPlayerHandlers);
}
}
}
function renderLobbyPerson(name, userType) {
@@ -125,27 +115,95 @@ function removeExistingTitle() {
}
}
function renderModeratorPlayers(people) {
people.sort();
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);
renderGroupOfPlayersFromTeam(teamEvil, globals.ALIGNMENT.EVIL);
renderGroupOfPlayersFromTeam(teamGood, globals.ALIGNMENT.GOOD);
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 renderGroupOfPlayersFromTeam(players, alignment) {
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");
container.classList.add('moderator-player');
container.innerHTML = templates.MODERATOR_PLAYER;
container.querySelector('.moderator-player-name').innerText = player.name;
let roleElement = container.querySelector('.moderator-player-role')
roleElement.innerText = player.gameRole;
roleElement.classList.add(alignment);
container.classList.add('game-player');
container.dataset.pointer = player.id;
if (alignment) {
container.innerHTML = templates.MODERATOR_PLAYER;
} else {
container.innerHTML = templates.GAME_PLAYER;
}
container.querySelector('.game-player-name').innerText = player.name;
let roleElement = container.querySelector('.game-player-role')
document.getElementById("player-list-moderator-team-" + alignment).appendChild(container);
if (alignment) {
roleElement.classList.add(alignment);
roleElement.innerText = player.gameRole;
document.getElementById("player-list-moderator-team-" + alignment).appendChild(container);
} else {
roleElement.innerText = "Unknown"
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');
container.querySelector('.kill-player-button').remove();
} else {
container.querySelector('.kill-player-button').addEventListener('click', handlers[player.id]);
}
}
}
}
function renderPlayerRole(gameState) {
let name = document.querySelector('#role-name');
name.innerText = gameState.client.gameRole;
if (gameState.client.alignment === globals.ALIGNMENT.GOOD) {
name.classList.add('good');
} else {
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'
);
document.getElementById("game-role-back").addEventListener('click', () => {
document.getElementById("game-role").style.display = 'flex';
document.getElementById("game-role-back").style.display = 'none';
});
document.getElementById("game-role").addEventListener('click', () => {
document.getElementById("game-role-back").style.display = 'flex';
document.getElementById("game-role").style.display = 'none';
});
}