From bd863dd683b135b18f3a46c0218ae65844df9093 Mon Sep 17 00:00:00 2001
From: AlecM33 <leohfx@gmail.com>
Date: Tue, 4 Jan 2022 22:36:11 -0500
Subject: [PATCH] add  deck status module

---
 client/src/images/roles/ParityHunter.png      | Bin 0 -> 1875 bytes
 client/src/modules/GameCreationStepManager.js |  30 +++++++++++--
 client/src/modules/Templates.js               |   8 +++-
 client/src/styles/GLOBAL.css                  |   4 +-
 client/src/styles/create.css                  |  42 ++++++++++++++++--
 client/src/styles/game.css                    |   6 +--
 6 files changed, 75 insertions(+), 15 deletions(-)
 create mode 100644 client/src/images/roles/ParityHunter.png

diff --git a/client/src/images/roles/ParityHunter.png b/client/src/images/roles/ParityHunter.png
new file mode 100644
index 0000000000000000000000000000000000000000..c4251e3204003c7642b172cda4a5a867f4af3f22
GIT binary patch
literal 1875
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

literal 0
HcmV?d00001

diff --git a/client/src/modules/GameCreationStepManager.js b/client/src/modules/GameCreationStepManager.js
index 1a9f681..2ee447e 100644
--- a/client/src/modules/GameCreationStepManager.js
+++ b/client/src/modules/GameCreationStepManager.js
@@ -192,7 +192,8 @@ function renderRoleSelectionStep(game, containerId, step, deckManager) {
     const stepContainer = document.createElement("div");
     setAttributes(stepContainer, {'id': 'step-' + step, 'class': 'flex-row-container-left-align step'});
 
-    stepContainer.innerHTML =templates.CREATE_GAME_CUSTOM_ROLES;
+    stepContainer.innerHTML = templates.CREATE_GAME_CUSTOM_ROLES;
+    stepContainer.innerHTML += templates.CREATE_GAME_DECK_STATUS;
     stepContainer.innerHTML += templates.CREATE_GAME_DECK;
 
     document.getElementById(containerId).appendChild(stepContainer);
@@ -213,6 +214,7 @@ function renderRoleSelectionStep(game, containerId, step, deckManager) {
 
     loadCustomRoles(deckManager);
 
+    updateDeckStatus(deckManager);
 
     initializeRemainingEventListeners(deckManager);
 }
@@ -399,14 +401,14 @@ function constructCompactDeckBuilderElement(card, deckManager) {
 
     cardContainer.innerHTML =
         "<div class='compact-card-left'>" +
-        "<p>-</p>" +
+            "<p>-</p>" +
         "</div>" +
         "<div class='compact-card-header'>" +
-        "<p class='card-role'></p>" +
+            "<p class='card-role'></p>" +
         "<div class='card-quantity'></div>" +
         "</div>" +
         "<div class='compact-card-right'>" +
-        "<p>+</p>" +
+            "<p>+</p>" +
         "</div>";
 
     cardContainer.querySelector('.card-role').innerText = card.role;
@@ -419,6 +421,7 @@ function constructCompactDeckBuilderElement(card, deckManager) {
 
     cardContainer.querySelector('.compact-card-right').addEventListener('click', () => {
         deckManager.addCopyOfCard(card.role);
+        updateDeckStatus(deckManager);
         cardContainer.querySelector('.card-quantity').innerText = deckManager.getCard(card.role).quantity;
         if (deckManager.getCard(card.role).quantity > 0) {
             document.getElementById('card-' + card.role.replaceAll(' ', '-')).classList.add('selected-card')
@@ -426,6 +429,7 @@ function constructCompactDeckBuilderElement(card, deckManager) {
     });
     cardContainer.querySelector('.compact-card-left').addEventListener('click', () => {
         deckManager.removeCopyOfCard(card.role);
+        updateDeckStatus(deckManager);
         cardContainer.querySelector('.card-quantity').innerText = deckManager.getCard(card.role).quantity;
         if (deckManager.getCard(card.role).quantity === 0) {
             document.getElementById('card-' + card.role.replaceAll(' ', '-')).classList.remove('selected-card')
@@ -490,6 +494,24 @@ function addOptionsToList(options, selectEl) {
     }
 }
 
+function updateDeckStatus(deckManager) {
+    document.querySelectorAll('.deck-role').forEach((el) => el.remove());
+    document.getElementById("deck-count").innerText = deckManager.getDeckSize() + " Players";
+    for (let card of deckManager.getCurrentDeck()) {
+        if (card.quantity > 0) {
+            let roleEl = document.createElement("div");
+            roleEl.classList.add('deck-role');
+            if (card.team === globals.ALIGNMENT.GOOD) {
+                roleEl.classList.add(globals.ALIGNMENT.GOOD);
+            } else {
+                roleEl.classList.add(globals.ALIGNMENT.EVIL);
+            }
+            roleEl.innerText = card.quantity + 'x ' + card.role;
+            document.getElementById("deck-list").appendChild(roleEl);
+        }
+    }
+}
+
 function hasTimer(hours, minutes) {
     return (!isNaN(hours) || !isNaN(minutes));
 }
diff --git a/client/src/modules/Templates.js b/client/src/modules/Templates.js
index 2874ac4..c3b69b3 100644
--- a/client/src/modules/Templates.js
+++ b/client/src/modules/Templates.js
@@ -153,7 +153,7 @@ export const templates = {
         "</div>" +
         "<div class='player-action-buttons'>" +
             "<button class='moderator-player-button kill-player-button'>Kill \uD83D\uDC80</button>" +
-            "<button class='moderator-player-button reveal-role-button'>Reveal Role <img src='../images/eye.svg'/></button>" +
+            "<button class='moderator-player-button reveal-role-button'>Reveal <img src='../images/eye.svg'/></button>" +
         "</div>",
     GAME_PLAYER:
         "<div>" +
@@ -253,6 +253,12 @@ export const templates = {
                 '<input id="include-role" type=\"submit\" value=\"Include Role\">' +
             '</form>' +
             '<button id=\"custom-role-btn\" class=\"app-button\">+ Create Custom Role</button>' +
+        '</div>',
+    CREATE_GAME_DECK_STATUS:
+        '<div id="deck-status-container">' +
+            '<div id="deck-count">0 Players</div>' +
+            '<div id="deck-list">' +
+            '</div>' +
         '</div>'
 
 }
diff --git a/client/src/styles/GLOBAL.css b/client/src/styles/GLOBAL.css
index ebf29c6..d8537b0 100644
--- a/client/src/styles/GLOBAL.css
+++ b/client/src/styles/GLOBAL.css
@@ -395,11 +395,11 @@ input {
 }
 
 .good-players, #deck-good {
-    background-color: #1c1a36;
+    background-color: #26244a;
 }
 
 .evil-players, #deck-evil {
-    background-color: #361a1a;
+    background-color: #4a2424;
 }
 
 .evil, .compact-card.evil .card-role {
diff --git a/client/src/styles/create.css b/client/src/styles/create.css
index 5dbd0a1..67aa635 100644
--- a/client/src/styles/create.css
+++ b/client/src/styles/create.css
@@ -4,7 +4,7 @@
     cursor: pointer;
     position: relative;
     margin: 0.3em;
-    background-color: #393a40;
+    background-color: #191920;
     color: gray;
     box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
     border-radius: 3px;
@@ -83,8 +83,16 @@
     width: fit-content;
 }
 
-#custom-roles-container {
-    margin: 1em 0;
+.deck-role {
+    border-radius: 3px;
+    margin: 0.25em 0;
+    padding: 0 5px;
+    font-size: 18px;
+}
+
+#custom-roles-container, #deck-status-container {
+    color: #d7d7d7;
+    margin: 1em 0.5em;
     background-color: #191920;
     padding: 10px;
     border-radius: 3px;
@@ -92,6 +100,28 @@
     position: relative;
 }
 
+#deck-status-container {
+    min-width: 15em;
+    height: 13em;
+    overflow-y: auto;
+    position: relative;
+}
+
+#deck-count {
+    font-size: 30px;
+    position: sticky;
+    top: 0;
+    left: 5px;
+    background-color: #333243;
+    width: fit-content;
+    padding: 0 5px;
+    border-radius: 3px;
+}
+
+#deck-list {
+    margin-top: 0.5em;
+}
+
 #custom-role-hamburger .hamburger-inner, #custom-role-hamburger .hamburger-inner::before, #custom-role-hamburger .hamburger-inner::after {
     background-color: whitesmoke;
     width: 28px;
@@ -360,13 +390,17 @@ input[type="number"] {
     padding: 10px 20px;
 }
 
+#step-forward-button, #step-back-button {
+    background-color: #66666657 !important;
+}
+
 #step-forward-button, #create-game {
     right: 15%;
 }
 
 #step-back-button {
     left: 15%;
-    background-color: #762323 !important;
+    background-color: #762323;
 }
 
 #step-1 div {
diff --git a/client/src/styles/game.css b/client/src/styles/game.css
index f69fad6..f53a7ae 100644
--- a/client/src/styles/game.css
+++ b/client/src/styles/game.css
@@ -512,7 +512,6 @@ label[for='moderator'] {
 
 .kill-player-button, .reveal-role-button {
     font-family: 'signika-negative', sans-serif !important;
-    padding: 5px;
     border-radius: 3px;
     color: whitesmoke;
     font-size: 16px;
@@ -529,7 +528,6 @@ label[for='moderator'] {
 
 .placeholder-button {
     font-family: 'signika-negative', sans-serif !important;
-    padding: 5px;
     display: flex;
     justify-content: center;
     border-radius: 3px;
@@ -538,7 +536,7 @@ label[for='moderator'] {
     font-size: 16px;
     border: 2px solid transparent;
     text-shadow: 0 3px 4px rgb(0 0 0 / 55%);
-    margin: 5px 0 5px 25px;
+    margin: 5px 0 5px 35px;
     width: 103px;
 }
 
@@ -613,7 +611,7 @@ label[for='moderator'] {
 #game-player-list {
     overflow-y: auto;
     overflow-x: hidden;
-    padding: 0;
+    padding: 0 10px 10px 0;
     max-height: 37em;
 }