From f17265cd9a8dbdeb2350d95e527f776ce21b4c47 Mon Sep 17 00:00:00 2001
From: Alec Maier <Maier.144@osu.edu>
Date: Fri, 6 Sep 2019 02:28:49 -0400
Subject: [PATCH] Trim whitespace everywhere the code is used, some browser
 compatability changes

---
 static/join.js    |  7 ++++---
 static/setup.js   | 19 +++++++------------
 static/styles.css | 15 ++++++++++++---
 3 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/static/join.js b/static/join.js
index eac3984..c271a6e 100644
--- a/static/join.js
+++ b/static/join.js
@@ -17,19 +17,20 @@ socket.on('success', function() {
     if (sessionStorage.getItem("host")) {
         sessionStorage.removeItem("host");
     }
-    window.location.replace('/' + document.getElementById("code").value);
+    window.location.replace('/' + document.getElementById("code").value.toString().trim());
 });
 
 document.getElementById("join-btn").addEventListener("click", function() {
     if (document.getElementById("name").value.length > 0) {
+        const code = document.getElementById("code").value.toString().trim();
         if (document.getElementById("name").classList.contains("error")) {
             document.getElementById("name").classList.remove("error");
             document.getElementById("name-error").innerText = "";
         }
-        sessionStorage.setItem("code", document.getElementById("code").value);
+        sessionStorage.setItem("code", code);
         let playerId = utility.generateID();
         sessionStorage.setItem("id", playerId);
-        const playerInfo = {name: document.getElementById("name").value, id: playerId, code: document.getElementById("code").value.toString().trim()};
+        const playerInfo = {name: document.getElementById("name").value, id: playerId, code: code};
         socket.emit('joinGame', playerInfo);
     } else {
         document.getElementById("name").classList.add("error");
diff --git a/static/setup.js b/static/setup.js
index 6959ab5..c04ad8f 100644
--- a/static/setup.js
+++ b/static/setup.js
@@ -2,7 +2,6 @@ import {cards} from './cards.js'
 import {utility} from './util.js'
 
 const socket = io();
-var games = [];
 
 // important declarations
 class Card {
@@ -28,9 +27,9 @@ class Game {
     }
 }
 
-var fullDeck = [];
-var gameSize = 0;
-var atLeastOnePlayer = false;
+const fullDeck = [];
+let gameSize = 0;
+let atLeastOnePlayer = false;
 
 
 // register event listeners on buttons
@@ -55,7 +54,7 @@ window.onload = function() {
 
         const cardContainer = document.createElement("div");
 
-        const quantityClass = cards[i].team === "good" ? "card-quantity quantity-village" : "card-quantity quantity-wolf"
+        const quantityClass = cards[i].team === "good" ? "card-quantity quantity-village" : "card-quantity quantity-wolf";
 
         cardContainer.setAttribute("class", "card");
         cardContainer.setAttribute("id", "card-" + i);
@@ -68,7 +67,7 @@ window.onload = function() {
             "<div class='card-bottom'>" +
                 "<p>-</p>" +
             "</div>";
-        document.getElementById("card-select").appendChild(cardContainer)
+        document.getElementById("card-select").appendChild(cardContainer);
         let cardTop = document.getElementById("card-" + i).getElementsByClassName("card-top")[0];
         let cardQuantity = document.getElementById("card-" + i).getElementsByClassName("card-quantity")[0];
         let cardBottom = document.getElementById("card-" + i).getElementsByClassName("card-bottom")[0];
@@ -104,11 +103,7 @@ function updateGameSize() {
         gameSize += card.quantity;
     }
     document.getElementById("game-size").innerText = gameSize + " Players";
-    if (gameSize > 0) {
-        atLeastOnePlayer = true;
-    } else {
-        atLeastOnePlayer = false;
-    }
+    atLeastOnePlayer = gameSize > 0;
     return gameSize;
 }
 
@@ -166,7 +161,7 @@ function createGame() {
             buildDeckFromQuantities(),
             Math.ceil(document.getElementById("time").value)
             );
-        socket.emit('newGame', game, function(data) {
+        socket.emit('newGame', game, function() {
             socket.emit('joinGame', playerInfo);
             sessionStorage.setItem('code', code);
             window.location.replace('/' + code);
diff --git a/static/styles.css b/static/styles.css
index e96d98a..9cfbd46 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -107,6 +107,11 @@
     src: url("../assets/fonts/Diavlo_LIGHT_II_37.otf") format("opentype");
 }
 
+@font-face {
+    font-family: 'diavlo-bold';
+    src: url("../assets/fonts/Diavlo_BOOK_II_37.otf") format("opentype");
+}
+
 @font-face {
     font-family: 'sitewide-sans-serif';
     src: url("../assets/fonts/manrope-light.otf") format("opentype");
@@ -148,7 +153,7 @@ html, body {
 .app-title .app-header {
     width: 6em;
     display: flex;
-    font-weight: bold;
+    font-family: diavlo-bold, sans-serif;
 }
 
 .app-title {
@@ -263,7 +268,7 @@ button {
 }
 
 .card:hover {
-    background-color: rgba(0, 0, 0, 0.05);
+    background-color: #e8e8e8;
 }
 
 .card-top {
@@ -314,6 +319,10 @@ button {
     margin-right: auto;
 }
 
+.card:hover .card-quantity, .card:active .card-quantity {
+    background-color: #e8e8e8;
+}
+
 .card-role {
     color: gray;
     margin: 0;
@@ -640,7 +649,7 @@ label {
     display: flex;
     margin: 0 auto;
     max-width: 35em;
-    justify-content: space-evenly;
+    justify-content: center;
 }
 
 #play-pause {