Added modal for role descriptions, learning page, fixed cron job

static/cards.js

@@ -5,28 +5,47 @@ export const cards = [
       description: "During the day, find the wolves and kill them.",
       powerRole: false
     },
-   {
+    {
+        role: "Werewolf",
+        team: "wolf",
+        description: "During the night, choose a villager to kill. Don't get killed.",
+        powerRole: false
+    },
+    {
+        role: "Minion",
+        team: "wolf",
+        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.",
+        powerRole: true
+    },
+    {
       role: "Seer",
       team: "village",
-      description: "During the night, choose one person. The moderator will tell you whether that player is evil.",
+      description: "During the night, choose one person. The moderator will tell you whether that player is a wolf.",
       powerRole: true
     },
     {
       role: "Hunter",
       team: "village",
-      description: "If you are alive with a wolf at the end of the game, the village wins.",
+      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: "Werewolf",
-      team: "wolf",
-      description: "During the night, choose a villager to kill. Don't get killed.",
-      powerRole: false
+        role: "Sorcerer",
+        team: "village",
+        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: "Minion",
-      team: "wolf",
-      description: "You are villager, but you know who the wolves are - and want them to win.",
-      powerRole: true
+        role: "Prince",
+        team: "village",
+        description: "If you die, take someone else with you.",
+        powerRole: true
     }
 ];

static/game.js

@@ -199,7 +199,6 @@ function renderClock() {
 
 function endGameDueToTimeExpired() {
     clearInterval(clock);
-    console.log("expired!");
     socket.emit("timerExpired", currentGame.accessCode);
 }
 

static/setup.js

@@ -36,15 +36,25 @@ var atLeastOnePlayer = false;
 // register event listeners on buttons
 document.getElementById("reset-btn").addEventListener("click", resetCardQuantities);
 document.getElementById("create-btn").addEventListener("click", createGame);
+document.getElementById("role-btn").addEventListener("click", displayRoleModal);
+document.getElementById("close").addEventListener("click", closeModal);
 
 // render all of the available cards to the user
 window.onload = function() {
     for (const card of cards) {
         const newCard = new Card(card.role, card.team, card.description, card.powerRole);
-        const cardContainer = document.createElement("div");
+        // 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>";
+        document.getElementById("roles").appendChild(modalRole);
 
         fullDeck.push(newCard);
 
+        const cardContainer = document.createElement("div");
+
         cardContainer.setAttribute("class", "card");
         cardContainer.innerHTML = "<p class='card-role'>" + newCard.role + "</p><br><p class='card-quantity'>" + newCard.quantity + "</p>";
 
@@ -84,6 +94,14 @@ function resetCardQuantities() {
     });
 }
 
+function displayRoleModal() {
+    document.getElementById("role-modal").classList.remove("hidden");
+}
+
+function closeModal() {
+    document.getElementById("role-modal").classList.add("hidden");
+}
+
 function buildDeckFromQuantities() {
     let playerDeck = [];
     for (const card of fullDeck) {

static/styles.css

@@ -24,6 +24,30 @@
         font-size: 0.9em;
         margin: 0 0.7em 0.7em 0;
     }
+
+    .modal {
+        width: 92%;
+    }
+
+    .modal-content {
+        width: 90%;
+    }
+
+    .modal-body {
+        padding: 1em;
+    }
+
+    .modal-header {
+        padding: 0 1em;
+    }
+
+    .modal-role {
+        margin-right: 2em;
+    }
+
+    #learn-container {
+        margin: 3em 1em;
+    }
 }
 
 @media(min-width: 750.01px) {
@@ -52,6 +76,30 @@
     .app-content {
         width: 80%;
     }
+
+    #learn-container {
+        margin: 3em;
+    }
+
+    .modal-body {
+        padding: 2em 4em;
+    }
+
+    .modal {
+        width: 92%;
+    }
+
+    .modal-content {
+        width: 90%;
+    }
+
+    .modal-header {
+        padding: 0 3em;
+    }
+
+    .modal-role {
+        margin-right: 3em;
+    }
 }
 
 @font-face {
@@ -221,8 +269,9 @@ button {
 
 #card-select-header {
     display: flex;
-    align-items: center;
+    justify-content: center;
     margin-bottom: 1em;
+    flex-direction: column;
 }
 
 #card-select-header h3 {
@@ -233,6 +282,12 @@ button {
 
 #card-select-header button {
     margin-right: 1em;
+    padding: 0.5em;
+}
+
+#card-select-header span {
+    display: flex;
+    align-items: center;
 }
 
 #reset-btn {
@@ -571,3 +626,99 @@ label {
     font-family: 'diavlo', sans-serif;
     color: #7d0b0b;
 }
+
+#learn-container h2 {
+    font-family: 'diavlo', sans-serif;
+    color: #7d0b0b;
+    font-size: 40px;
+}
+
+#learn-container button {
+    margin-top: 1em;
+}
+
+#roles {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.modal-role {
+    width: 22em;
+}
+
+.modal {
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgb(0,0,0);
+    background-color: rgba(0,0,0,0.4);
+}
+
+.modal-header {
+    border-radius: 5px;
+    display: flex;
+    justify-content: space-between;
+    background-color: white;
+    color: gray;
+}
+
+.modal-header h2 {
+    margin-top: 2em;
+    margin-bottom: 0;
+    color: black;
+}
+
+.modal-footer {
+    padding: 1em;
+    background-color: white;
+    color: white;
+}
+
+.modal-content {
+    border-radius: 5px;
+    position: relative;
+    background-color: #fefefe;
+    margin: 1em auto;
+    padding: 0;
+    border: 1px solid #888;
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+    animation-name: animatetop;
+    animation-duration: 0.4s
+}
+
+.role-wolf {
+    color: #7d0b0b;
+    font-family: 'diavlo', sans-serif;
+}
+
+.role-village {
+    color: #171469;
+    font-family: 'diavlo', sans-serif;
+}
+
+@keyframes animatetop {
+    from {top: -300px; opacity: 0}
+    to {top: 0; opacity: 1}
+}
+
+.close {
+    margin-top: 0.2em;
+    color: #aaa;
+    float: right;
+    font-size: 46px;
+    height: 1em;
+    display: flex;
+    align-items: center;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+color: black;
+text-decoration: none;
+cursor: pointer;
+}