Various improvements - allow decrementing of individual cards, all lowercase access code, round decimal times to nearest minute, remove colored border from game cards

server.js

@@ -16,7 +16,7 @@ const CronJob = require('cron').CronJob;
 var activeGames = {};
 
 // cron job for periodically clearing finished games
-const job = new CronJob('0 0 */1 * * *', function() {
+const job = new CronJob('0 0 */2 * * *', function() {
     console.log(activeGames);
     for (const key in activeGames) {
         if (activeGames.hasOwnProperty(key) && (Math.abs((new Date()) - (new Date(activeGames[key].startTime))) / 36e5) >= 2) {

static/join.js

@@ -29,7 +29,7 @@ document.getElementById("join-btn").addEventListener("click", function() {
         sessionStorage.setItem("code", document.getElementById("code").value);
         let playerId = utility.generateID();
         sessionStorage.setItem("id", playerId);
-        const playerInfo = {name: document.getElementById("name").value, id: playerId, code: document.getElementById("code").value};
+        const playerInfo = {name: document.getElementById("name").value, id: playerId, code: document.getElementById("code").value.toString().trim()};
         socket.emit('joinGame', playerInfo);
     } else {
         document.getElementById("name").classList.add("error");

static/setup.js

@@ -41,35 +41,63 @@ 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);
+    for (let i = 0; i < cards.length; i ++) {
+        const newCard = new Card(cards[i].role, cards[i].team, cards[i].description, cards[i].powerRole);
         // put card info in the informational role description modal
         const modalRole = document.createElement("div");
         modalRole.setAttribute("class", "modal-role");
-        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>";
+        modalRole.innerHTML = cards[i].team === "good" ?
+            "<h2 class='role-village'>" + cards[i].role + "</h2><p>" + cards[i].team + "</p><p>" + cards[i].description + "</p>"
+            : "<h2 class='role-wolf'>" + cards[i].role + "</h2><p>" + cards[i].team + "</p><p>" + cards[i].description + "</p>";
         document.getElementById("roles").appendChild(modalRole);
 
         fullDeck.push(newCard);
 
         const cardContainer = document.createElement("div");
 
+        const quantityClass = cards[i].team === "good" ? "card-quantity quantity-village" : "card-quantity quantity-wolf"
+
         cardContainer.setAttribute("class", "card");
-        cardContainer.innerHTML = "<p class='card-role'>" + newCard.role + "</p><br><p class='card-quantity'>" + newCard.quantity + "</p>";
-
-        cardContainer.addEventListener("click", function() {
-            if(!newCard.powerRole || (newCard.powerRole && newCard.quantity === 0)) {
-                newCard.quantity += 1;
-            }
-            cardContainer.getElementsByClassName("card-quantity")[0].innerHTML = newCard.quantity;
-            updateGameSize();
-        });
-
+        cardContainer.setAttribute("id", "card-" + i);
+        cardContainer.innerHTML = 
+            "<div class='card-top'>" +
+                "<p class='card-role'>" + newCard.role + "</p>" +
+                "<p>+</p>" +
+            "</div>" +
+            "<div class='" + quantityClass + "'>" + newCard.quantity + "</div>" +
+            "<div class='card-bottom'>" +
+                "<p>-</p>" +
+            "</div>";
         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];
+        cardTop.addEventListener("click", incrementCardQuantity, false);
+        cardBottom.addEventListener("click", decrementCardQuantity, false);
+        cardTop.card = newCard;
+        cardTop.quantityEl = cardQuantity;
+        cardBottom.card = newCard;
+        cardBottom.quantityEl = cardQuantity;
     }
 };
 
+function incrementCardQuantity(e) {
+    console.log(e.target);
+    if(e.target.card.quantity < 25) {
+        e.target.card.quantity += 1;
+    }
+    e.target.quantityEl.innerHTML = e.target.card.quantity;
+    updateGameSize();
+}
+
+function decrementCardQuantity(e) {
+    if(e.target.card.quantity > 0) {
+        e.target.card.quantity -= 1;
+    }
+    e.target.quantityEl.innerHTML = e.target.card.quantity;
+    updateGameSize();
+}
+
 function updateGameSize() {
     gameSize = 0;
     for (let card of fullDeck) {
@@ -118,9 +146,9 @@ function createGame() {
     if (document.getElementById("name").value.length > 0 && atLeastOnePlayer) {
         // generate 6 digit access code
         let code = "";
-        let charPool = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
+        let charPool = "abcdefghijklmnopqrstuvwxyz0123456789";
         for (let i = 0; i < 6; i++) {
-            code += charPool[utility.getRandomInt(61)]
+            code += charPool[utility.getRandomInt(36)]
         }
 
         // generate unique player Id for session
@@ -136,7 +164,7 @@ function createGame() {
             code,
             gameSize,
             buildDeckFromQuantities(),
-            document.getElementById("time").value
+            Math.ceil(document.getElementById("time").value)
             );
         socket.emit('newGame', game, function(data) {
             socket.emit('joinGame', playerInfo);

static/styles.css

@@ -19,8 +19,8 @@
 
     .card {
         padding: 0.5em;
-        width: 5em;
-        height: 7.5em;
+        width: 7em;
+        height: 10.5em;
         font-size: 0.9em;
         margin: 0 0.7em 0.7em 0;
     }
@@ -62,8 +62,8 @@
     }
 
     .card {
-        height: 8.5em;
-        width: 5em;
+        width: 7em;
+        height: 10.5em;
         padding: 1em;
         font-size: 1.1em;
         margin: 0.5em;
@@ -148,6 +148,7 @@ html, body {
 .app-title .app-header {
     width: 6em;
     display: flex;
+    font-weight: bold;
 }
 
 .app-title {
@@ -253,8 +254,9 @@ button {
 .card {
     text-align: center;
     cursor: pointer;
+    position: relative;
     color: gray;
-    border: 1px solid #7d0b0b;
+    border: 1px solid black;
     box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
     border-radius: 3px;
     user-select: none;
@@ -264,11 +266,52 @@ button {
     background-color: rgba(0, 0, 0, 0.05);
 }
 
+.card-top {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    height: 50%;
+    border-bottom: 1px solid gray;
+}
+
+.card-bottom {
+    display: flex;
+    justify-content: flex-end;
+    height: 50%;
+    align-items: flex-start;
+}
+
+.card-top p {
+    margin: 0;
+    font-size: 2.5em;
+    pointer-events: none;
+}
+
+.card-top p.card-role {
+    font-size: 1em;
+    pointer-events: none;
+}
+
+.card-bottom p {
+    pointer-events: none;
+    font-size: 3em;
+    margin: 0;
+}
+
 .card-quantity {
+    pointer-events: none;
     font-weight: bold;
     color: #7d0b0b;
     font-size: 2.5em;
     margin: 0;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 32%;
+    width: 1.5em;
+    background-color: white;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 .card-role {
@@ -509,18 +552,10 @@ label {
     transform-style: preserve-3d;
 }
 
-.village {
-    border: 2px solid rgba(23, 20, 105, 0.5);
-}
-
 .village h2 {
     color: #171469;
 }
 
-.wolf {
-    border: 2px solid rgba(125, 11, 11, 0.5);
-}
-
 .wolf h2 {
     color: #7d0b0b;
 }
@@ -557,9 +592,7 @@ label {
     margin: auto auto;
     border-radius: 3px;
     text-align: center;
-}
-
-.game-card:hover {
+    border: 2px solid rgba(59, 59, 59, 0.5);
 }
 
 /* Position the front and back side */
@@ -760,6 +793,14 @@ label {
     font-family: 'diavlo', sans-serif;
 }
 
+.quantity-village {
+    color: #171469;
+}
+
+.quantity-wolf {
+    color: #7d0b0b;
+}
+
 @keyframes animatetop {
     from {top: -300px; opacity: 0}
     to {top: 0; opacity: 1}