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

Merge pull request #160 from AlecM33/toast-edits

Browse Source 
alter Toast message logic, more explicitly map custom roles
This commit is contained in:
Alec
2023-06-27 10:41:26 -04:00
committed by GitHub
parent 662aae67d6 e4669ba690
commit 4035061a81
4 changed files with 55 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,16 +3,16 @@ export const toast = (
type, positionAtTop = true,
dispelAutomatically = true,
duration = null,
innerHTML = false
elementBuilder = null // this is meant to be a function that returns a DOM Node
) => {
if (message && type) {
buildAndInsertMessageElement(message, type, positionAtTop, dispelAutomatically, duration, innerHTML);
buildAndInsertMessageElement(message, type, positionAtTop, dispelAutomatically, duration, elementBuilder);
}
};
function buildAndInsertMessageElement (message, type, positionAtTop, dispelAutomatically, duration, innerHTML) {
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 (innerHTML) {
messageEl.innerHTML = 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) {

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

@@ -197,15 +197,17 @@ 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
);
toast(sortedDeck[i].role + ' ', 'neutral', true, true, 'short', () => {
const toastEl = document.createElement('span');
toastEl.innerHTML =
`<span class="toast-minus-one">-1 </span>
<span id="toast-content"></span>
<span class="toast-minus-role-quantity"></span>`;
toastEl.querySelector('.toast-minus-role-quantity').innerText = '(' + (sortedDeck[i].quantity - 1) + ')';
return toastEl;
});
this.removeCopyOfCard(sortedDeck[i].role);
this.updateDeckStatus();
}

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

2
client/src/styles/GLOBAL.css
View File

@@ -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 {