From 230cf732070b49844e06976a2c88534c36e5fae8 Mon Sep 17 00:00:00 2001
From: Alec Maier <Maier.144@osu.edu>
Date: Sun, 19 Apr 2020 15:59:37 -0400
Subject: [PATCH] Added faq page, indicator for wolf roles

---
 server.js              |  4 ++++
 static/cards.js        |  2 +-
 static/setup.js        |  3 ++-
 static/styles.css      | 49 +++++++++++++++++++++++++++++++++++++-----
 views/create_game.html | 16 +++++++++-----
 views/faq.html         | 26 ++++++++++++++++++++++
 views/index.html       |  3 +++
 7 files changed, 91 insertions(+), 12 deletions(-)
 create mode 100644 views/faq.html

diff --git a/server.js b/server.js
index bd01f36..786d8f1 100644
--- a/server.js
+++ b/server.js
@@ -41,6 +41,10 @@ app.get('/learn', function(request, response) {
     response.sendFile(__dirname + '/views/learn.html');
 });
 
+app.get('/faq', function(request, response) {
+    response.sendFile(__dirname + '/views/faq.html');
+});
+
 app.get('/create', function(request, response) {
     response.sendFile(__dirname + '/views/create_game.html');
 });
diff --git a/static/cards.js b/static/cards.js
index 7c07a31..0f64861 100644
--- a/static/cards.js
+++ b/static/cards.js
@@ -14,7 +14,7 @@ export let cards = [
     {
         role: "Dream Wolf",
         team: "evil",
-        description: "If a Werewolf dies, you become a Werewolf. You do not wake up with the Werewolves until this happens.",
+        description: "If a Werewolf dies, you become a Werewolf. You do not wake up with the Werewolves until this happens. You count for parity only after converting to a wolf.",
         isTypeOfWerewolf: false
     },
     {
diff --git a/static/setup.js b/static/setup.js
index b64b64d..c28238a 100644
--- a/static/setup.js
+++ b/static/setup.js
@@ -90,7 +90,8 @@ function renderAvailableCards() {
 
         const quantityClass = cards[i].team === "good" ? "card-quantity quantity-village" : "card-quantity quantity-wolf";
 
-        cardContainer.setAttribute("class", "card");
+        let cardClass = newCard.isTypeOfWerewolf ? "card card-werewolf" : "card";
+        cardContainer.setAttribute("class", cardClass);
         cardContainer.setAttribute("id", "card-" + i);
         cardContainer.innerHTML =
             "<div class='card-top'>" +
diff --git a/static/styles.css b/static/styles.css
index 3ba451d..b4b224c 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -67,7 +67,7 @@
         margin-right: 2em;
     }
 
-    #learn-container {
+    #learn-container, #faq-container {
         margin: 3em 1em;
     }
 
@@ -170,7 +170,7 @@
         width: 80%;
     }
 
-    #learn-container {
+    #learn-container, #faq-container {
         margin: 3em;
     }
 
@@ -255,6 +255,16 @@
 
 }
 
+@media(max-width: 850px) {
+    #card-select-header span:nth-child(2) {
+        flex-direction: column;
+    }
+
+    #card-select-header span:nth-child(2) > div {
+        margin: 0.5em 0;
+    }
+}
+
 @media(max-width: 1225px) and (min-width: 750.01px) {
     #custom-card-modal .modal-content, #edit-custom-roles-modal .modal-content {
         width: 75%;
@@ -478,6 +488,10 @@ button {
     user-select: none;
 }
 
+.card-werewolf {
+    border: 1px solid red;
+}
+
 .custom-card {
     border: 1px dashed whitesmoke;
     background-color: transparent;
@@ -645,6 +659,12 @@ button {
     animation-delay: 0.2s;
 }
 
+#main-buttons a:nth-child(4) {
+    animation: fadein 0.3s ease-in;
+    animation-fill-mode: backwards;
+    animation-delay: 0.3s;
+}
+
 #main-buttons button {
     width: 100%;
     padding: 1.2em;
@@ -662,10 +682,21 @@ button {
     display: flex;
     width: 100%;
     justify-content: center;
-    margin-bottom: 1em;
+    align-items: flex-start;
+    margin-bottom: 0.5em;
     flex-direction: column;
 }
 
+#card-select-header a {
+    text-decoration: underline;
+    color: #b8c4ff;
+}
+
+#card-select-header span > div  {
+    display: flex;
+    align-items: center;
+}
+
 #card-select-header h3 {
     margin: 0;
     font-size: 1.2em;
@@ -750,6 +781,14 @@ button {
     animation: slide-fade 0.5s;
 }
 
+#create-game-container #werewolf-key {
+    width: 25px;
+    height: 25px;
+    border: 1px solid red;
+    border-radius: 3px;
+    margin-right: 10px;
+}
+
 
 #join-game-container {
     display: flex;
@@ -1262,13 +1301,13 @@ label {
     color: #bd2a2a;
 }
 
-#learn-container h2 {
+#learn-container h2, #faq-container h2 {
     font-family: 'diavlo', sans-serif;
     color: #bd2a2a;
     font-size: 40px;
 }
 
-#learn-container button {
+#learn-container button, #faq-container button {
     margin-top: 1em;
 }
 
diff --git a/views/create_game.html b/views/create_game.html
index e3b5bb7..7b434aa 100644
--- a/views/create_game.html
+++ b/views/create_game.html
@@ -48,7 +48,7 @@
                     </select>
                     <div class="checkbox">
                         <input type="checkbox" id="custom-role-wolf">
-                        <label for="custom-role-wolf">Is this role a type of Werewolf?</label>
+                        <label for="custom-role-wolf">Werewolf role (counts for parity)</label>
                     </div>
                     <div class="checkbox">
                         <input type="checkbox" id="custom-role-remember">
@@ -80,10 +80,16 @@
                         <button id="role-btn" class="app-btn">View Role Info</button>
                     </span>
                     <span>
-                        <h3 id="game-size">0 Players</h3>
-                        <button id="edit-role-btn" class="app-btn-secondary">Manage Custom Roles
-                            <img src="../assets/images/pencil.svg"/>
-                        </button>
+                        <div>
+                            <h3 id="game-size">0 Players</h3>
+                            <button id="edit-role-btn" class="app-btn-secondary">Manage Custom Roles
+                                <img src="../assets/images/pencil.svg"/>
+                            </button>
+                        </div>
+                        <div>
+                            <div id="werewolf-key"></div>
+                            <div> = Werewolf role (counts for <a href="/faq">parity</a>)</div>
+                        </div>
                         <p id="size-error"></p>
                     </span>
                 </div>
diff --git a/views/faq.html b/views/faq.html
new file mode 100644
index 0000000..9e861dd
--- /dev/null
+++ b/views/faq.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel = "stylesheet" type = "text/css" href = "../static/styles.css" />
+    <link rel="shortcut icon" type="image/png" href="../assets/images/favicon.ico"/>
+</head>
+<body>
+<div id="faq-container">
+    <a href="/"><button class="app-btn">Back</button></a>
+    <h2>FAQ</h2>
+    <div class="faq-question">
+        <h3 class="faq-header" id="parity">What is Parity?</h3>
+        <p class="faq-answer"><i>Parity</i> means equal, and in the context of the game, this refers to an equal number of wolves and villagers.
+            This is a victory condition for the wolves, because if at any time during the day parity is reached, it is certain that the wolves
+            will be able to kill all the remaining villagers. Thus, if a standard or custom role is marked as a Werewolf, it will be considered
+            when the game determines if parity has been reached.
+        </p>
+    </div>
+</div>
+</body>
+</html>
+
diff --git a/views/index.html b/views/index.html
index 348d391..e2ddd0a 100644
--- a/views/index.html
+++ b/views/index.html
@@ -24,6 +24,9 @@
                 <a href="/learn">
                     <button class="app-btn">Learn the Game</button>
                 </a>
+                <a href="/faq">
+                    <button class="app-btn">FAQ</button>
+                </a>
             </div>
         </div>
         <footer id="footer">