Various styling improvements, altered roles, verified win conditions

server.js

@@ -57,10 +57,10 @@ function teamWon(game) {
     let villagersAlive = 0;
     let hunterAlive = false;
     for (const player of game.players) {
-        if (player.card.team === "village" && !player.dead) {
+        if (player.card.team === "good" && !player.dead) {
             villagersAlive++;
         }
-        if (player.card.team === "wolf" && !player.dead) {
+        if (player.card.role === "Werewolf" && !player.dead) {
             wolvesAlive++;
         }
         if (player.card.role === "Hunter" && !player.dead) {
@@ -68,12 +68,12 @@ function teamWon(game) {
         }
     }
     console.log("wolves: " + wolvesAlive + " villagers: " + villagersAlive);
-    if ((wolvesAlive === villagersAlive) && (wolvesAlive + villagersAlive !== 2)) {
-        return "wolf";
-    }
     if (wolvesAlive === 0) {
         return "village"
     }
+    if ((wolvesAlive === villagersAlive) && (wolvesAlive + villagersAlive !== 2)) {
+        return "wolf";
+    }
     if (wolvesAlive + villagersAlive === 2) {
         return hunterAlive ? "village" : "wolf"
     }

static/cards.js

@@ -1,50 +1,51 @@
 export const cards = [
     {
-      role: "Villager",
-      team: "village",
-      description: "During the day, find the wolves and kill them.",
-      powerRole: false
+        role: "Villager",
+        team: "good",
+        description: "During the day, find the wolves and kill them.",
+        powerRole: false
     },
     {
         role: "Werewolf",
-        team: "wolf",
+        team: "evil",
         description: "During the night, choose a villager to kill. Don't get killed.",
         powerRole: false
     },
     {
-        role: "Minion",
-        team: "wolf",
+        role: "Sycophant",
+        team: "evil",
         description: "You are an evil villager - you know who the wolves are, and you want them to win.",
         powerRole: true
     },
     {
-        role: "Wolf Cub",
-        team: "wolf",
-        description: "If a wolf dies, you then become a wolf. Until then, you do not wake up with the other wolves.",
+        role: "Seer",
+        team: "good",
+        description: "During each night, choose one person. The moderator will tell you whether that player is a wolf.",
         powerRole: true
     },
     {
-      role: "Seer",
-      team: "village",
-      description: "During the night, choose one person. The moderator will tell you whether that player is a wolf.",
-      powerRole: true
+        role: "Shadow",
+        team: "evil",
+        description: "If the Seer checks you, the Seer dies that night instead of whoever the wolves chose to kill. You" +
+            " do not know who the wolves are.",
+        powerRole: true
     },
     {
-      role: "Hunter",
-      team: "village",
-      description: "If you are alive with a wolf at the end of the game, you best the wolf, and the village wins.",
-      powerRole: true
+        role: "Hunter",
+        team: "good",
+        description: "If you are alive with a wolf at the end of the game, you best the wolf, and the village wins.",
+        powerRole: true
     },
     {
         role: "Sorcerer",
-        team: "village",
+        team: "good",
         description: "Once a game, change who the wolves are going to kill to someone else, including yourself. You will" +
             " see who is going to die each night until you use this power.",
         powerRole: true
     },
     {
-        role: "Prince",
-        team: "village",
+        role: "Martyr",
+        team: "good",
         description: "If you die, take someone else with you.",
         powerRole: true
     }

static/game.js

@@ -129,7 +129,7 @@ function renderGame() {
 
 function renderPlayerCard(player) {
     const card = player.card;
-    const cardClass = player.card.team === "village" ? "game-card-inner village" : "game-card-inner wolf";
+    const cardClass = player.card.team === "good" ? "game-card-inner village" : "game-card-inner wolf";
     const playerCard = document.createElement("div");
     playerCard.setAttribute("id", "game-card");
     playerCard.setAttribute("class", getFlipState());

static/setup.js

@@ -46,9 +46,9 @@ window.onload = function() {
         // put card info in the informational role description modal
         const modalRole = document.createElement("div");
         modalRole.setAttribute("class", "modal-role");
-        modalRole.innerHTML = card.team === "village" ?
-            "<h2 class='role-village'>" + card.role + "</h2><p>" + card.description + "</p>"
-            : "<h2 class='role-wolf'>" + card.role + "</h2><p>" + card.description + "</p>";
+        modalRole.innerHTML = card.team === "good" ?
+            "<h2 class='role-village'>" + card.role + "</h2><p>" + card.team + "</p><p>" + card.description + "</p>"
+            : "<h2 class='role-wolf'>" + card.role + "</h2><p>" + card.team + "</p><p>" + card.description + "</p>";
         document.getElementById("roles").appendChild(modalRole);
 
         fullDeck.push(newCard);

static/styles.css

@@ -121,19 +121,62 @@ html, body {
 @keyframes fadein {
     from {
         opacity: 0;
-        left: -200px;
 
     }
     to {
         opacity: 1;
-        left: 0;
     }
 }
+
+@keyframes slide-fade {
+    from {
+        opacity: 0;
+        margin-right: 0.5em;
+
+    }
+    to {
+        opacity: 1;
+        margin-right: 0;
+    }
+}
+
 .app-content {
     text-align: center;
     margin: 0 auto;
 }
 
+.app-title .app-header {
+    width: 6em;
+    display: flex;
+}
+
+.app-title {
+    margin-top: 5em;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    line-height: 0.95;
+}
+
+.app-title h1:nth-child(1) {
+    margin: 0;
+    animation: slide-fade 0.7s ease-in-out;
+    animation-fill-mode: backwards;
+    animation-direction: normal;
+}
+
+.app-title h1:nth-child(2) {
+    margin: 0 0 0 1.5em;
+    animation: slide-fade 0.7s ease-in-out;
+    animation-delay: 0.4s;
+    animation-fill-mode: backwards;
+    animation-direction: normal;
+}
+
+.app-title .title-question-mark {
+    color: #171469;
+}
+
 #footer {
     position: absolute;
     bottom: 0;
@@ -199,7 +242,7 @@ button {
 
 .app-btn {
     background-color: #f8f8f8;
-    color: #bd2a2a;
+    color: #171469;
     border: 1px solid #d3d3d3;
     width: 10em;
     padding: 1em;
@@ -383,14 +426,18 @@ label {
 .lobby-player {
     color: #7d0b0b;
     border-radius: 3px;
-    font-size: 1.2em;
+    font-size: 1em;
     background-color: rgba(23, 20, 105, 0.1);
-    padding: 0.5em;
+    padding: 0.3em;
     margin: 0.5em 0;
     text-align: left;
     box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.3);
 }
 
+#game-code {
+    font-family: "Courier New", serif;
+}
+
 .highlighted {
     border: 2px solid #7d0b0b;
 }
@@ -646,6 +693,15 @@ label {
     width: 22em;
 }
 
+.modal-role p:first-of-type {
+    margin-top: 0;
+    color: gray;
+}
+
+.modal-role h2 {
+    margin-bottom: 0;
+}
+
 .modal {
     position: fixed;
     z-index: 1;
@@ -707,7 +763,7 @@ label {
 
 .close {
     margin-top: 0.2em;
-    color: #aaa;
+    color: black;
     float: right;
     font-size: 46px;
     height: 1em;

views/index.html

@@ -9,7 +9,10 @@
     <body>
         <div class="app-content">
             <a href="/">
-                <h1 class="app-header">Werewolf</h1>
+                <div class="app-title">
+                    <h1 class="app-header">Where are</h1>
+                    <h1 class="app-header">the Wolves<span class="title-question-mark">?</span></h1>
+                </div>
             </a>
         </div>
         <div id="main-buttons">