Git_Mirror/Werewolf
1
0
Fork 0
mirror of https://github.com/AlecM33/Werewolf.git synced 2025-12-26 15:57:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

change increment/decrement role quantity toast messages, map custom roles more explicitly when loaded

Browse Source
This commit is contained in:
AlecM33
2023-06-26 22:08:36 -04:00
parent 662aae67d6
commit 1d1e2c8526
3 changed files with 38 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/modules/front_end_components/Toast.js
View File

@@ -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;
}

19
client/src/modules/game_creation/DeckStateManager.js
View File

@@ -197,15 +197,16 @@ export class DeckStateManager {
const minusOneHandler = (e) => {
if (e.type === 'click' || e.code === 'Enter') {
e.preventDefault();
toast(
'<span class=\'toast-minus-one\'>-1</span>' +
sortedDeck[i].role + ' (<span class="toast-minus-role-quantity">' + (sortedDeck[i].quantity - 1).toString() + '</span>)',
'neutral',
true,
true,
'short',
true
);
const toastContent = document.createElement("span")
toastContent.innerHTML =
`<span class="toast-minus-one">-1 </span>
<span id="toast-minus-one-name"></span>
(<span class="toast-minus-role-quantity"></span>)`
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();
}

41
client/src/modules/game_creation/RoleBox.js
View File

@@ -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(
'<span class="toast-plus-one">+1 </span>' +
name + ' (<span class="toast-plus-role-quantity">' + this.deckManager.getQuantityOfRole(name) + '</span>)',
'neutral',
true,
true,
'short',
true
);
const toastContent = document.createElement("span")
toastContent.innerHTML =
`<span class="toast-plus-one">+1 </span>
<span id="toast-plus-one-name"></span>
(<span class="toast-plus-role-quantity"></span>)`
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) => {