From b29b1312e2cb24f43d7e66865140c6f078cdcd59 Mon Sep 17 00:00:00 2001
From: Maier <maiera3@nationwide.com>
Date: Wed, 8 Jan 2020 15:38:53 -0500
Subject: [PATCH] DARK mode activated

---
 static/game.js         |   4 +-
 static/setup.js        |   1 +
 static/styles.css      | 133 +++++++++++++++++++++--------------------
 views/create_game.html |   2 +-
 4 files changed, 72 insertions(+), 68 deletions(-)

diff --git a/static/game.js b/static/game.js
index fb50f57..12882ad 100644
--- a/static/game.js
+++ b/static/game.js
@@ -105,7 +105,7 @@ function getLiveCount() {
 
 function renderEndSplash() {
     document.getElementById("game-container").classList.add("hidden");
-    document.getElementById("message-box").classList.add("hidden");
+    document.querySelector("#message-box").style.display = 'none';
     currentGame.winningTeam === "village"
     ? document.getElementById("end-container").innerHTML ="<div class='winner-header'><p class='winner-village'>Village</p> wins!</div>"
     : document.getElementById("end-container").innerHTML ="<div class='winner-header'><p class='winner-wolf'>Wolves</p>win!</div>";
@@ -124,6 +124,7 @@ function renderEndSplash() {
 }
 
 function renderGame() {
+    document.querySelector("#message-box").style.display = 'block';
     if (currentGame.killedRole && currentGame.lastKilled !== lastKilled) { // a new player has been killed
         lastKilled = currentGame.lastKilled;
         document.getElementById("killed-name").innerText = currentGame.killedPlayer + " was a " + currentGame.killedRole + "!";
@@ -266,6 +267,7 @@ function killPlayer() {
 }
 
 function renderLobby() {
+    document.querySelector("#message-box").style.display = 'none';
     // Render lobby header
     if (document.getElementsByClassName("lobby-player").length === 0) {
         let header = document.createElement("h2");
diff --git a/static/setup.js b/static/setup.js
index c5c53a3..89d9ca6 100644
--- a/static/setup.js
+++ b/static/setup.js
@@ -185,6 +185,7 @@ function createGame() {
             window.location.replace('/' + code);
         });
     } else {
+        document.getElementById("some-error").innerText = "There are problems with your above setup.";
         if (!atLeastOnePlayer) {
             document.getElementById("game-size").classList.add("error");
             document.getElementById("size-error").innerText = "Add at least one card";
diff --git a/static/styles.css b/static/styles.css
index fbee01e..f518cc2 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -50,6 +50,7 @@
 
     .app-title img {
         width: 100%;
+        filter: drop-shadow(45px -15px 100px rgba(255,255,255, 1));
     }
     
     #card-select-header, #game-start {
@@ -219,7 +220,9 @@
 html, body {
     margin: 0 auto;
     width: 100%;
+    color: #bfb8b8;
     font-family: 'sitewide-sans-serif', sans-serif;
+    background-color: #23282b !important;
 }
 
 @keyframes fadein {
@@ -294,12 +297,13 @@ html, body {
 }
 
 #footer a:hover {
-    color: rgba(23, 20, 105, 0.4);
+    color: #333243;
 }
 
 .app-header, .app-header-secondary {
     font-family: 'diavlo', sans-serif;
-    color: #7d0b0b;
+    filter: drop-shadow(2px 2px 4px black);
+    color: #992626;
 }
 
 h3 {
@@ -315,7 +319,7 @@ button {
     background-color: rgba(189, 42, 42, 0.1) !important;
 }
 
-#join-error, #name-error, #size-error {
+#join-error, #name-error, #size-error, #some-error {
     color: #bd2a2a;
     font-size: 0.9em;
     height: 2em;
@@ -344,9 +348,10 @@ button {
 }
 
 .app-btn {
-    background-color: #f8f8f8;
-    color: #171469;
-    border: 1px solid #d3d3d3;
+    background-color: #992626;
+    box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.4);
+    color: #bfb8b8;
+    border: none;
     width: 10em;
     padding: 1em;
     border-radius: 3px;
@@ -358,15 +363,15 @@ button {
     cursor: pointer;
     position: relative;
     margin: 0.3em;
+    background-color: #393a40;
     color: gray;
-    border: 1px solid black;
     box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
     border-radius: 3px;
     user-select: none;
 }
 
 .card:hover {
-    background-color: #e8e8e8;
+    background-color: #55565c;
 }
 
 .card-top {
@@ -390,6 +395,7 @@ button {
     font-size: 2.5em;
     pointer-events: none;
     line-height: 1;
+    color: #bfb8b8;
 }
 
 .card-top p.card-role {
@@ -410,6 +416,7 @@ button {
     line-height: 1;
     font-size: 3em;
     margin: 0;
+    color: #bfb8b8;
 }
 
 .card-image {
@@ -423,18 +430,14 @@ button {
     pointer-events: none;
     font-weight: bold;
     text-align: left;
-    color: #7d0b0b;
+    color: #bd2a2a;
     font-size: 1.5em;
     margin: 0 0 0 0.2em;
     width: 1.5em;
 }
 
-.card:hover .card-quantity, .card:active .card-quantity {
-    background-color: #e8e8e8;
-}
-
 .card-role {
-    color: gray;
+    color: #bfb8b8;
     margin: 0;
 }
 
@@ -448,8 +451,8 @@ button {
 .app-btn-secondary {
     background-color: white;
     border-radius: 3px;
-    color: #7d0b0b;
-    border: 1px solid #7d0b0b;
+    color: #bd2a2a;
+    border: 1px solid #bd2a2a;
     width: 10em;
     padding: 0.5em;
     margin-right: 1em;
@@ -462,13 +465,13 @@ button {
 
 .app-btn:hover, .app-btn:focus {
     cursor: pointer;
-    background-color: rgba(23, 20, 105, 0.15);
+    background-color: #333243;
 }
 
 #main-buttons .app-btn:hover, #main-buttons .app-btn:focus {
     box-shadow: none !important;
     cursor: pointer;
-    background-color: rgba(23, 20, 105, 0.15);
+    background-color: #333243;
     animation: press-down 0.2s;
     animation-fill-mode: forwards;
     animation-direction: normal;
@@ -508,7 +511,8 @@ button {
     padding: 1.2em;
     font-size: 1em;
     box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.4);
-    color: #7d0b0b;
+    background-color: #992626;
+    color: #bfb8b8;
 }
 
 #main-buttons a {
@@ -526,7 +530,7 @@ button {
 #card-select-header h3 {
     margin: 0;
     font-size: 1.2em;
-    color: #7d0b0b;
+    color: #bfb8b8;
 }
 
 #create-game-container button {
@@ -543,7 +547,6 @@ button {
 #game-start {
     display: flex;
     width: 100%;
-    margin-bottom: 2em;
 }
 
 #game-start a {
@@ -576,19 +579,15 @@ button {
 
 #reset-btn {
     /*background-color: transparent;*/
-    /*color: #7d0b0b;*/
+    /*color: #bd2a2a;*/
     /*border-radius: 5px;*/
-    /*border: 1px solid #7d0b0b;*/
+    /*border: 1px solid #bd2a2a;*/
     /*width: 8em;*/
     /*padding: 0.5em;*/
     /*margin: 0 1em 0 0;*/
     /*cursor: pointer;*/
 }
 
-#reset-btn:hover {
-    background-color: rgba(24, 9, 82, 0.15);
-}
-
 #create-game-container, #join-game-container {
     text-align: left;
     margin: 1em 0.5em 2em 0.5em;
@@ -622,7 +621,7 @@ a {
 
 input[type=text] {
     background-color: transparent;
-    border: 1px solid #171469;
+    border: 1px solid #464552;
     caret-color: gray;
     margin: 0.5em 0 1em 0;
     color: gray;
@@ -635,7 +634,7 @@ input[type=text] {
 
 input[type=number] {
     background-color: transparent;
-    border: 1px solid #171469;
+    border: 1px solid #464552;
     border-radius: 5px;
     caret-color: gray;
     margin: 0.5em 0 1em 0;
@@ -646,8 +645,8 @@ input[type=number] {
     font-size: 1.1em;
 }
 
-input[type=text]:hover {
-    background-color: rgba(23, 20, 105, 0.15);
+input[type=text]:hover, input[type=number]:hover {
+    background-color: rgba(51, 50, 67, 0.35);
 }
 
 label {
@@ -661,7 +660,7 @@ label {
     height: 2em;
     max-width: 25em;
     margin: 1em auto;
-    border-bottom: 1px solid #7d0b0b;
+    border-bottom: 1px solid #992626;
     padding: 0.5em;
 }
 
@@ -675,10 +674,10 @@ label {
 }
 
 .lobby-player {
-    color: #7d0b0b;
+    color: #bfb8b8;
     border-radius: 3px;
     font-size: 1em;
-    background-color: rgba(23, 20, 105, 0.1);
+    background-color: rgba(51, 50, 67, 0.35);
     padding: 0.3em;
     margin: 0.5em 0;
     text-align: left;
@@ -690,14 +689,14 @@ label {
 }
 
 .highlighted {
-    border: 2px solid #7d0b0b;
+    border: 2px solid #bd2a2a;
 }
 
 .disabled {
-    opacity: 0.7;
+    opacity: 0.5;
     color: gray;
     background-color: white;
-    border: 1px solid gray;
+    border: none;
     pointer-events: none;
 
 }
@@ -784,11 +783,11 @@ label {
 }
 
 .village h2 {
-    color: #171469;
+    color: #4a6bff;
 }
 
 .wolf h2 {
-    color: #7d0b0b;
+    color: #bd2a2a;
 }
 
 .flip-up {
@@ -816,7 +815,8 @@ label {
 
 #game-card p {
     padding: 0.5em;
-    font-size: 0.7em;
+    font-size: 0.8em;
+    color: #464552;
 }
 
 .game-container {
@@ -829,16 +829,17 @@ label {
     width: 95%;
     height: 97%;
     margin: auto auto;
-    border-radius: 3px;
+    border-radius: 5px;
     text-align: center;
-    border: 2px solid rgba(59, 59, 59, 0.5);
+    border: 3px solid #9c9c9c;
 }
 
 /* Position the front and back side */
 .game-card-front, .game-card-back {
-    background-color: #f0f0f0;
+    background-color: #dedede;
     position: absolute;
     display: flex;
+    border-radius: 3px;
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
@@ -870,7 +871,7 @@ label {
 
 #players-remaining {
     font-size: 1.5em;
-    color: gray;
+    color: #bfb8b8;
     width: 6em;
     margin-bottom: 0.5em;
 }
@@ -928,7 +929,7 @@ label {
 
 #end-container .evil-subheader {
     font-family: 'diavlo', sans-serif;
-    color: #7d0b0b;
+    color: #bd2a2a;
     margin: 0 0.3em;
     font-size: 1.5em;
 }
@@ -953,17 +954,17 @@ label {
 
 #end-container .winner-village {
     font-family: 'diavlo', sans-serif;
-    color: #171469;
+    color: #4a6bff;
 }
 
 #end-container .winner-wolf {
     font-family: 'diavlo', sans-serif;
-    color: #7d0b0b;
+    color: #bd2a2a;
 }
 
 #learn-container h2 {
     font-family: 'diavlo', sans-serif;
-    color: #7d0b0b;
+    color: #bd2a2a;
     font-size: 40px;
 }
 
@@ -979,7 +980,7 @@ label {
 .modal-role {
     width: 22em;
     position: relative;
-    border-bottom: 1px solid lightgray;
+    border-bottom: 1px solid #494f52;
     padding-bottom: 0.5em;
 }
 
@@ -997,7 +998,7 @@ label {
 
 .modal-role p:first-of-type {
     margin: 0;
-    color: gray;
+    color: #bfb8b8;
 }
 
 .modal-role h2 {
@@ -1020,51 +1021,51 @@ label {
 .modal-header {
     border-radius: 5px;
     display: flex;
-    justify-content: space-between;
-    background-color: white;
-    color: gray;
+    justify-content: flex-end;
+    background-color: #23282b;
+    color: #bfb8b8;
 }
 
 .modal-header h2 {
     margin-top: 2em;
     margin-bottom: 0;
-    color: black;
+    color: #bfb8b8;
 }
 
 .modal-footer {
     padding: 1em;
-    background-color: white;
-    color: white;
+    background-color: #23282b;
+    color: #bfb8b8;
 }
 
 .modal-content {
-    border-radius: 5px;
     position: relative;
-    background-color: #fefefe;
+    color: #bfb8b8;
+    background-color: #23282b;
     margin: 1em auto;
     padding: 0;
-    border: 1px solid #888;
+    border: none;
     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;
+    color: #bd2a2a;
     font-family: 'diavlo', sans-serif;
 }
 
 .role-village {
-    color: #171469;
+    color: #4a6bff;
     font-family: 'diavlo', sans-serif;
 }
 
 .quantity-village {
-    color: #171469;
+    color: #4a6bff;
 }
 
 .quantity-wolf {
-    color: #7d0b0b;
+    color: #bd2a2a;
 }
 
 #overlay {
@@ -1084,7 +1085,7 @@ label {
 
 #killed-name {
     display: none;
-    color: white;
+    color: #bfb8b8;
 }
 
 #killed-role {
@@ -1219,7 +1220,7 @@ label {
 
 .close {
     margin-top: 0.2em;
-    color: black;
+    color: #bfb8b8;
     float: right;
     font-size: 46px;
     height: 1em;
@@ -1230,7 +1231,7 @@ label {
 
 .close:hover,
 .close:focus {
-color: black;
+color: #333243;
 text-decoration: none;
 cursor: pointer;
 }
diff --git a/views/create_game.html b/views/create_game.html
index 9e8d22b..6050ece 100644
--- a/views/create_game.html
+++ b/views/create_game.html
@@ -11,7 +11,6 @@
     <div class="modal hidden" id="role-modal">
         <div class="modal-content">
             <div class="modal-header">
-                <h2>Role descriptions</h2>
                 <span id="close" class="close">&times;</span>
             </div>
             <div id="modal-body" class="modal-body">
@@ -52,6 +51,7 @@
                     </a>
                     <button id="create-btn" class="app-btn">Create</button>
                 </div>
+                <p id="some-error"></p>
             </div>
         </div>
         <script type="module" src="/static/setup.js"></script>