From 1d1e2c85260b7f2fcfe2b8a563be79b2031577ec Mon Sep 17 00:00:00 2001 From: AlecM33 Date: Mon, 26 Jun 2023 22:08:36 -0400 Subject: [PATCH 1/5] change increment/decrement role quantity toast messages, map custom roles more explicitly when loaded --- .../src/modules/front_end_components/Toast.js | 6 +-- .../modules/game_creation/DeckStateManager.js | 19 +++++---- client/src/modules/game_creation/RoleBox.js | 41 +++++++++++-------- 3 files changed, 38 insertions(+), 28 deletions(-) diff --git a/client/src/modules/front_end_components/Toast.js b/client/src/modules/front_end_components/Toast.js index 62554d3..d19844a 100644 --- a/client/src/modules/front_end_components/Toast.js +++ b/client/src/modules/front_end_components/Toast.js @@ -10,7 +10,7 @@ export const toast = ( } }; -function buildAndInsertMessageElement (message, type, positionAtTop, dispelAutomatically, duration, innerHTML) { +function buildAndInsertMessageElement (message, type, positionAtTop, dispelAutomatically, duration, domChild) { cancelCurrentToast(); const messageEl = document.createElement('div'); messageEl.classList.add('info-message'); @@ -56,8 +56,8 @@ function buildAndInsertMessageElement (message, type, positionAtTop, dispelAutom } messageEl.setAttribute('id', 'current-info-message'); - if (innerHTML) { - messageEl.innerHTML = message; + if (domChild) { + messageEl.appendChild(message); } else { messageEl.innerText = message; } diff --git a/client/src/modules/game_creation/DeckStateManager.js b/client/src/modules/game_creation/DeckStateManager.js index ef222f2..66f626e 100644 --- a/client/src/modules/game_creation/DeckStateManager.js +++ b/client/src/modules/game_creation/DeckStateManager.js @@ -197,15 +197,16 @@ export class DeckStateManager { 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 - ); + const toastContent = document.createElement("span") + toastContent.innerHTML = + `-1 + + ()` + toastContent.querySelector('#toast-minus-one-name').innerText = sortedDeck[i].role; + toastContent.querySelector('.toast-minus-role-quantity').innerText = sortedDeck[i].quantity - 1; + + toast(toastContent, 'neutral', true, true, 'short', true); + this.removeCopyOfCard(sortedDeck[i].role); this.updateDeckStatus(); } diff --git a/client/src/modules/game_creation/RoleBox.js b/client/src/modules/game_creation/RoleBox.js index 3f0b13f..b20261b 100644 --- a/client/src/modules/game_creation/RoleBox.js +++ b/client/src/modules/game_creation/RoleBox.js @@ -44,9 +44,13 @@ export class RoleBox { loadCustomRolesFromCookies () { const customRoles = localStorage.getItem('play-werewolf-custom-roles'); if (customRoles !== null && validateCustomRoleCookie(customRoles)) { - this.customRoles = JSON.parse(customRoles).map((role) => { - role.id = createRandomId(); - return role; + this.customRoles = JSON.parse(customRoles).map((roleObj) => { + return { + id: createRandomId(), + role: roleObj.role, + team: roleObj.team, + description: roleObj.description + }; }); // we know it is valid JSON from the validate function } } @@ -64,9 +68,13 @@ export class RoleBox { string = e.target.result; } if (validateCustomRoleCookie(string)) { - this.customRoles = JSON.parse(string).map((role) => { - role.id = createRandomId(); - return role; + this.customRoles = JSON.parse(string).map((roleObj) => { + return { + id: createRandomId(), + role: roleObj.role, + team: roleObj.team, + description: roleObj.description + }; }); // we know it is valid JSON from the validate function const initialLength = this.customRoles.length; // If any imported roles match a default role, exclude them. @@ -182,6 +190,7 @@ export class RoleBox { ? document.querySelectorAll('#role-select .custom-role') : document.querySelectorAll('#role-select .default-role'); elements.forEach((role) => { + const name = role.querySelector('.role-name').innerText; if (addOne) { const plusOneHandler = (e) => { if (e.type === 'click' || e.code === 'Enter') { @@ -195,22 +204,22 @@ export class RoleBox { } else { this.deckManager.addCopyOfCard(name); } - toast( - '+1 ' + - name + ' (' + this.deckManager.getQuantityOfRole(name) + ')', - 'neutral', - true, - true, - 'short', - true - ); + const toastContent = document.createElement("span") + toastContent.innerHTML = + `+1 + + ()` + toastContent.querySelector('#toast-plus-one-name').innerText = name; + toastContent.querySelector('.toast-plus-role-quantity').innerText = this.deckManager.getQuantityOfRole(name); + + toast(toastContent, 'neutral', true, true, 'short', true); + this.deckManager.updateDeckStatus(); } }; role.querySelector('.role-include').addEventListener('click', plusOneHandler); role.querySelector('.role-include').addEventListener('keyup', plusOneHandler); } - const name = role.querySelector('.role-name').innerText; if (remove) { const removeHandler = (e) => { From 032901dd6b2bcb48acd67273a30201faa7b52650 Mon Sep 17 00:00:00 2001 From: AlecM33 Date: Mon, 26 Jun 2023 22:12:16 -0400 Subject: [PATCH 2/5] lint --- client/src/modules/game_creation/DeckStateManager.js | 4 ++-- client/src/modules/game_creation/RoleBox.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/client/src/modules/game_creation/DeckStateManager.js b/client/src/modules/game_creation/DeckStateManager.js index 66f626e..018bac2 100644 --- a/client/src/modules/game_creation/DeckStateManager.js +++ b/client/src/modules/game_creation/DeckStateManager.js @@ -197,11 +197,11 @@ export class DeckStateManager { const minusOneHandler = (e) => { if (e.type === 'click' || e.code === 'Enter') { e.preventDefault(); - const toastContent = document.createElement("span") + const toastContent = document.createElement('span'); toastContent.innerHTML = `-1 - ()` + ()`; toastContent.querySelector('#toast-minus-one-name').innerText = sortedDeck[i].role; toastContent.querySelector('.toast-minus-role-quantity').innerText = sortedDeck[i].quantity - 1; diff --git a/client/src/modules/game_creation/RoleBox.js b/client/src/modules/game_creation/RoleBox.js index b20261b..de9aacd 100644 --- a/client/src/modules/game_creation/RoleBox.js +++ b/client/src/modules/game_creation/RoleBox.js @@ -204,11 +204,11 @@ export class RoleBox { } else { this.deckManager.addCopyOfCard(name); } - const toastContent = document.createElement("span") + const toastContent = document.createElement('span'); toastContent.innerHTML = `+1 - ()` + ()`; toastContent.querySelector('#toast-plus-one-name').innerText = name; toastContent.querySelector('.toast-plus-role-quantity').innerText = this.deckManager.getQuantityOfRole(name); From b341b008c28c1f5cd701ef7600da3060f298e361 Mon Sep 17 00:00:00 2001 From: AlecM33 Date: Mon, 26 Jun 2023 22:16:23 -0400 Subject: [PATCH 3/5] default arg --- client/src/modules/front_end_components/Toast.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/modules/front_end_components/Toast.js b/client/src/modules/front_end_components/Toast.js index d19844a..4404108 100644 --- a/client/src/modules/front_end_components/Toast.js +++ b/client/src/modules/front_end_components/Toast.js @@ -10,7 +10,7 @@ export const toast = ( } }; -function buildAndInsertMessageElement (message, type, positionAtTop, dispelAutomatically, duration, domChild) { +function buildAndInsertMessageElement (message, type, positionAtTop, dispelAutomatically, duration, domChild = false) { cancelCurrentToast(); const messageEl = document.createElement('div'); messageEl.classList.add('info-message'); From d1850e5ef216120f96dc0d060655bcbe4d064659 Mon Sep 17 00:00:00 2001 From: AlecM33 Date: Mon, 26 Jun 2023 22:17:26 -0400 Subject: [PATCH 4/5] change arg name --- client/src/modules/front_end_components/Toast.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/src/modules/front_end_components/Toast.js b/client/src/modules/front_end_components/Toast.js index 4404108..7e4c897 100644 --- a/client/src/modules/front_end_components/Toast.js +++ b/client/src/modules/front_end_components/Toast.js @@ -3,14 +3,14 @@ export const toast = ( type, positionAtTop = true, dispelAutomatically = true, duration = null, - innerHTML = false + domChild = false ) => { if (message && type) { - buildAndInsertMessageElement(message, type, positionAtTop, dispelAutomatically, duration, innerHTML); + buildAndInsertMessageElement(message, type, positionAtTop, dispelAutomatically, duration, domChild); } }; -function buildAndInsertMessageElement (message, type, positionAtTop, dispelAutomatically, duration, domChild = false) { +function buildAndInsertMessageElement (message, type, positionAtTop, dispelAutomatically, duration, domChild) { cancelCurrentToast(); const messageEl = document.createElement('div'); messageEl.classList.add('info-message'); From e4669ba69099339a87dc810ce78d1499446b25bc Mon Sep 17 00:00:00 2001 From: AlecM33 Date: Tue, 27 Jun 2023 10:16:16 -0400 Subject: [PATCH 5/5] change approach --- .../src/modules/front_end_components/Toast.js | 24 ++++++++++++------- .../modules/game_creation/DeckStateManager.js | 17 ++++++------- client/src/modules/game_creation/RoleBox.js | 18 +++++++------- client/src/styles/GLOBAL.css | 2 ++ 4 files changed, 36 insertions(+), 25 deletions(-) diff --git a/client/src/modules/front_end_components/Toast.js b/client/src/modules/front_end_components/Toast.js index 7e4c897..2d77213 100644 --- a/client/src/modules/front_end_components/Toast.js +++ b/client/src/modules/front_end_components/Toast.js @@ -3,16 +3,16 @@ export const toast = ( type, positionAtTop = true, dispelAutomatically = true, duration = null, - domChild = false + elementBuilder = null // this is meant to be a function that returns a DOM Node ) => { if (message && type) { - buildAndInsertMessageElement(message, type, positionAtTop, dispelAutomatically, duration, domChild); + buildAndInsertMessageElement(message, type, positionAtTop, dispelAutomatically, duration, elementBuilder); } }; -function buildAndInsertMessageElement (message, type, positionAtTop, dispelAutomatically, duration, domChild) { +function buildAndInsertMessageElement (message, type, positionAtTop, dispelAutomatically, duration, elementBuilder) { cancelCurrentToast(); - const messageEl = document.createElement('div'); + const messageEl = elementBuilder ? elementBuilder() : buildDefaultMessageElement(); messageEl.classList.add('info-message'); const positionClass = positionAtTop ? 'toast-top' : 'toast-bottom'; messageEl.classList.add(positionClass); @@ -56,15 +56,21 @@ function buildAndInsertMessageElement (message, type, positionAtTop, dispelAutom } messageEl.setAttribute('id', 'current-info-message'); - if (domChild) { - messageEl.appendChild(message); - } else { - messageEl.innerText = message; - } + + messageEl.querySelector('#toast-content').innerText = message; document.body.prepend(messageEl); } +function buildDefaultMessageElement () { + const messageEl = document.createElement('div'); + const content = document.createElement('span'); + content.setAttribute('id', 'toast-content'); + messageEl.appendChild(content); + + return messageEl; +} + export function cancelCurrentToast () { const currentMessage = document.getElementById('current-info-message'); if (currentMessage !== null) { diff --git a/client/src/modules/game_creation/DeckStateManager.js b/client/src/modules/game_creation/DeckStateManager.js index 018bac2..0cdc68e 100644 --- a/client/src/modules/game_creation/DeckStateManager.js +++ b/client/src/modules/game_creation/DeckStateManager.js @@ -197,15 +197,16 @@ export class DeckStateManager { const minusOneHandler = (e) => { if (e.type === 'click' || e.code === 'Enter') { e.preventDefault(); - const toastContent = document.createElement('span'); - toastContent.innerHTML = - `-1 - - ()`; - toastContent.querySelector('#toast-minus-one-name').innerText = sortedDeck[i].role; - toastContent.querySelector('.toast-minus-role-quantity').innerText = sortedDeck[i].quantity - 1; + toast(sortedDeck[i].role + ' ', 'neutral', true, true, 'short', () => { + const toastEl = document.createElement('span'); + toastEl.innerHTML = + `-1 + + `; + toastEl.querySelector('.toast-minus-role-quantity').innerText = '(' + (sortedDeck[i].quantity - 1) + ')'; - toast(toastContent, 'neutral', true, true, 'short', true); + return toastEl; + }); this.removeCopyOfCard(sortedDeck[i].role); this.updateDeckStatus(); diff --git a/client/src/modules/game_creation/RoleBox.js b/client/src/modules/game_creation/RoleBox.js index de9aacd..0e1e290 100644 --- a/client/src/modules/game_creation/RoleBox.js +++ b/client/src/modules/game_creation/RoleBox.js @@ -204,15 +204,17 @@ export class RoleBox { } else { this.deckManager.addCopyOfCard(name); } - const toastContent = document.createElement('span'); - toastContent.innerHTML = - `+1 - - ()`; - toastContent.querySelector('#toast-plus-one-name').innerText = name; - toastContent.querySelector('.toast-plus-role-quantity').innerText = this.deckManager.getQuantityOfRole(name); - toast(toastContent, 'neutral', true, true, 'short', true); + toast(name + ' ', 'neutral', true, true, 'short', () => { + const toastEl = document.createElement('span'); + toastEl.innerHTML = + `+1 + + `; + toastEl.querySelector('.toast-plus-role-quantity').innerText = ' (' + this.deckManager.getQuantityOfRole(name) + ')'; + + return toastEl; + }); this.deckManager.updateDeckStatus(); } diff --git a/client/src/styles/GLOBAL.css b/client/src/styles/GLOBAL.css index 2b9b2f3..61da69d 100644 --- a/client/src/styles/GLOBAL.css +++ b/client/src/styles/GLOBAL.css @@ -133,11 +133,13 @@ textarea { .toast-plus-role-quantity { color: #1c8a36; font-weight: bold; + margin-left: 10px; } .toast-minus-role-quantity { color: #e73333; font-weight: bold; + margin-left: 10px; } #footer {