From 6a0626e490a46217182f8ec03a93804f3d4d5016 Mon Sep 17 00:00:00 2001 From: AlecM33 Date: Tue, 7 Mar 2023 20:54:35 -0500 Subject: [PATCH] make quantity of added roles green --- .../modules/game_creation/DeckStateManager.js | 114 ++++++++++-------- client/src/modules/game_creation/RoleBox.js | 2 +- client/src/styles/GLOBAL.css | 4 +- client/src/styles/create.css | 6 +- 4 files changed, 70 insertions(+), 56 deletions(-) diff --git a/client/src/modules/game_creation/DeckStateManager.js b/client/src/modules/game_creation/DeckStateManager.js index 20cf186..ef222f2 100644 --- a/client/src/modules/game_creation/DeckStateManager.js +++ b/client/src/modules/game_creation/DeckStateManager.js @@ -139,7 +139,6 @@ export class DeckStateManager { document.getElementById('deck-list').appendChild(placeholder); }; - // TODO: refactor updateDeckStatus = () => { document.getElementById('deck-count').innerText = this.getDeckSize() + ' Players'; if (this.deck.length > 0) { @@ -156,58 +155,9 @@ export class DeckStateManager { const existingCardEl = document.querySelector('#deck-list [data-role-id="' + sortedDeck[i].id + '"]'); if (sortedDeck[i].quantity > 0) { if (existingCardEl) { - existingCardEl.querySelector('.role-name').innerText = sortedDeck[i].quantity + 'x ' + sortedDeck[i].role; + populateRoleElementInfo(existingCardEl, sortedDeck, i); } else { - const roleEl = document.createElement('div'); - roleEl.dataset.roleId = sortedDeck[i].id; - roleEl.classList.add('added-role'); - roleEl.innerHTML = HTMLFragments.DECK_SELECT_ROLE_ADDED_TO_DECK; - // roleEl.classList.add('deck-role'); - if (sortedDeck[i].team === globals.ALIGNMENT.GOOD) { - roleEl.classList.add(globals.ALIGNMENT.GOOD); - } else { - roleEl.classList.add(globals.ALIGNMENT.EVIL); - } - roleEl.querySelector('.role-name').innerText = sortedDeck[i].quantity + 'x ' + sortedDeck[i].role; - document.getElementById('deck-list').appendChild(roleEl); - const minusOneHandler = (e) => { - if (e.type === 'click' || e.code === 'Enter') { - e.preventDefault(); - toast( - '-1' + - sortedDeck[i].role + ' (' + (sortedDeck[i].quantity - 1).toString() + ')', - 'neutral', - true, - true, - 'short', - true - ); - this.removeCopyOfCard(sortedDeck[i].role); - this.updateDeckStatus(); - } - }; - roleEl.querySelector('.role-remove').addEventListener('click', minusOneHandler); - roleEl.querySelector('.role-remove').addEventListener('keyup', minusOneHandler); - - const infoHandler = (e) => { - if (e.type === 'click' || e.code === 'Enter') { - const alignmentEl = document.getElementById('custom-role-info-modal-alignment'); - const nameEl = document.getElementById('custom-role-info-modal-name'); - alignmentEl.classList.remove(globals.ALIGNMENT.GOOD); - alignmentEl.classList.remove(globals.ALIGNMENT.EVIL); - nameEl.classList.remove(globals.ALIGNMENT.GOOD); - nameEl.classList.remove(globals.ALIGNMENT.EVIL); - e.preventDefault(); - nameEl.innerText = sortedDeck[i].role; - nameEl.classList.add(sortedDeck[i].team); - alignmentEl.classList.add(sortedDeck[i].team); - document.getElementById('custom-role-info-modal-description').innerText = sortedDeck[i].description; - alignmentEl.innerText = sortedDeck[i].team; - ModalManager.displayModal('custom-role-info-modal', 'modal-background', 'close-custom-role-info-modal-button'); - } - }; - roleEl.querySelector('.role-info').addEventListener('click', infoHandler); - roleEl.querySelector('.role-info').addEventListener('keyup', infoHandler); + this.addNewRoleElementToDeckList(sortedDeck, i); } } else { sortedDeck[i].markedForRemoval = true; @@ -231,4 +181,64 @@ export class DeckStateManager { this.displayDeckPlaceHolder(); } }; + + addNewRoleElementToDeckList = (sortedDeck, i) => { + const roleEl = document.createElement('div'); + roleEl.dataset.roleId = sortedDeck[i].id; + roleEl.classList.add('added-role'); + roleEl.innerHTML = HTMLFragments.DECK_SELECT_ROLE_ADDED_TO_DECK; + if (sortedDeck[i].team === globals.ALIGNMENT.GOOD) { + roleEl.classList.add(globals.ALIGNMENT.GOOD); + } else { + roleEl.classList.add(globals.ALIGNMENT.EVIL); + } + populateRoleElementInfo(roleEl, sortedDeck, i); + document.getElementById('deck-list').appendChild(roleEl); + const minusOneHandler = (e) => { + if (e.type === 'click' || e.code === 'Enter') { + e.preventDefault(); + toast( + '-1' + + sortedDeck[i].role + ' (' + (sortedDeck[i].quantity - 1).toString() + ')', + 'neutral', + true, + true, + 'short', + true + ); + this.removeCopyOfCard(sortedDeck[i].role); + this.updateDeckStatus(); + } + }; + roleEl.querySelector('.role-remove').addEventListener('click', minusOneHandler); + roleEl.querySelector('.role-remove').addEventListener('keyup', minusOneHandler); + + const infoHandler = (e) => { + if (e.type === 'click' || e.code === 'Enter') { + const alignmentEl = document.getElementById('custom-role-info-modal-alignment'); + const nameEl = document.getElementById('custom-role-info-modal-name'); + alignmentEl.classList.remove(globals.ALIGNMENT.GOOD); + alignmentEl.classList.remove(globals.ALIGNMENT.EVIL); + nameEl.classList.remove(globals.ALIGNMENT.GOOD); + nameEl.classList.remove(globals.ALIGNMENT.EVIL); + e.preventDefault(); + nameEl.innerText = sortedDeck[i].role; + nameEl.classList.add(sortedDeck[i].team); + alignmentEl.classList.add(sortedDeck[i].team); + document.getElementById('custom-role-info-modal-description').innerText = sortedDeck[i].description; + alignmentEl.innerText = sortedDeck[i].team; + ModalManager.displayModal('custom-role-info-modal', 'modal-background', 'close-custom-role-info-modal-button'); + } + }; + roleEl.querySelector('.role-info').addEventListener('click', infoHandler); + roleEl.querySelector('.role-info').addEventListener('keyup', infoHandler); + }; +} + +function populateRoleElementInfo (roleEl, sortedDeck, i) { + roleEl.querySelector('.role-name').innerHTML = + ` + `; + roleEl.querySelector('.role-name .role-quantity').innerText = sortedDeck[i].quantity + 'x'; + roleEl.querySelector('.role-name .name').innerText = sortedDeck[i].role; } diff --git a/client/src/modules/game_creation/RoleBox.js b/client/src/modules/game_creation/RoleBox.js index dfac0a9..8a12cc9 100644 --- a/client/src/modules/game_creation/RoleBox.js +++ b/client/src/modules/game_creation/RoleBox.js @@ -319,7 +319,7 @@ export class RoleBox { function createRandomId () { let id = ''; - for (let i = 0; i < 25; i ++) { + for (let i = 0; i < 50; i ++) { id += globals.CHAR_POOL[Math.floor(Math.random() * globals.CHAR_POOL.length)]; } return id; diff --git a/client/src/styles/GLOBAL.css b/client/src/styles/GLOBAL.css index 438887e..458e03e 100644 --- a/client/src/styles/GLOBAL.css +++ b/client/src/styles/GLOBAL.css @@ -92,8 +92,8 @@ textarea { } .toast-neutral { - background-color: #dbdbdb; - border: 3px solid #c4c4c4; + background-color: #e9e9e9; + border: 3px solid #b7b7b7; } .toast-dispel-automatically { diff --git a/client/src/styles/create.css b/client/src/styles/create.css index ea4ab93..627dbbd 100644 --- a/client/src/styles/create.css +++ b/client/src/styles/create.css @@ -466,7 +466,7 @@ input[type="number"] { background-color: black; align-items: center; padding: 5px; - margin: 0.25em 0; + margin: 0.25em 0.25em 0 0; border-radius: 5px; border: 1px solid transparent; font-size: 16px; @@ -478,6 +478,10 @@ input[type="number"] { white-space: nowrap } +.role-quantity { + color: #00a718; +} + .default-role:hover, .custom-role:hover, .added-role:hover { border: 1px solid #d7d7d7; }