good/evil indicator for list of roles during game

This commit is contained in:
Alec Maier
2020-04-19 18:47:02 -04:00
parent 230cf73207
commit de03f4ef16
2 changed files with 17 additions and 5 deletions

View File

@@ -220,8 +220,12 @@ function renderDeadAndAliveInformation() {
killedHeader.innerText = "Killed Players";
killedContainer.appendChild(killedHeader);
deadPlayers.forEach((player) => {
let deadPlayerClass = player.card.team === "good" ? "dead-player-village" : "dead-player-evil";
if (player.card.isTypeOfWerewolf) {
deadPlayerClass += " dead-player-wolf";
}
const killedPlayer = document.createElement("div");
killedPlayer.setAttribute("class", "killed-player");
killedPlayer.setAttribute("class", "killed-player " + deadPlayerClass);
killedPlayer.innerText = player.name + ": " + player.card.role;
killedContainer.appendChild(killedPlayer);
});
@@ -232,8 +236,12 @@ function renderDeadAndAliveInformation() {
aliveContainer.appendChild(aliveHeader);
aliveHeader.innerText = "Roles Still Alive";
alivePlayers.forEach((player) => {
let alivePlayerClass = player.card.team === "good" ? "alive-player-village" : "alive-player-evil";
if (player.card.isTypeOfWerewolf) {
alivePlayerClass += " alive-player-wolf";
}
const alivePlayer = document.createElement("div");
alivePlayer.setAttribute("class", "alive-player");
alivePlayer.setAttribute("class", "alive-player " + alivePlayerClass);
alivePlayer.innerHTML = "<p>" + player.card.role + "</p><img src='../assets/images/info.svg'/>";
//Add hidden description span - RTM 4/18/2020
let playerCardInfo=document.createElement("span");

View File

@@ -1188,7 +1188,7 @@ label {
}
#game-container .killed-player, #game-container .alive-player {
background-color: #494f52;
background-color: black;
border-radius: 5px;
padding: 5px;
display: flex;
@@ -1399,14 +1399,18 @@ label {
font-family: 'diavlo', sans-serif;
}
.quantity-village {
.quantity-village, .alive-player-village, .dead-player-village {
color: #4a6bff;
}
.quantity-wolf {
.quantity-wolf, .alive-player-evil, .dead-player-evil {
color: #bd2a2a;
}
.alive-player-wolf, .dead-player-wolf {
border: 2px solid #bd2a2a;
}
#overlay {
position: fixed;
user-select: none;