From de03f4ef165950bbf27069f61494dc172f2db1f8 Mon Sep 17 00:00:00 2001
From: Alec Maier <Maier.144@osu.edu>
Date: Sun, 19 Apr 2020 18:47:02 -0400
Subject: [PATCH] good/evil indicator for list of roles during game

---
 static/game.js    | 12 ++++++++++--
 static/styles.css | 10 +++++++---
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/static/game.js b/static/game.js
index 7c063b8..20bf7d6 100644
--- a/static/game.js
+++ b/static/game.js
@@ -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");
diff --git a/static/styles.css b/static/styles.css
index b4b224c..d5d9f1d 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -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;