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

display toast when user adds/removes card

Browse Source
This commit is contained in:
AlecM33
2022-06-11 20:00:21 -04:00
parent f9b8542c92
commit dc22ebd309
5 changed files with 76 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
client/src/modules/DeckStateManager.js
View File

@@ -1,5 +1,6 @@
import { globals } from '../config/globals.js';
import { HTMLFragments } from './HTMLFragments.js';
import {toast} from "./Toast";
export class DeckStateManager {
constructor () {
@@ -39,6 +40,12 @@ export class DeckStateManager {
);
}
getQuantityOfRole(role) {
return this.deck.find(
(card) => card.role.toLowerCase().trim() === role.toLowerCase().trim()
)?.quantity;
}
getDeckSize () {
let total = 0;
for (const role of this.deck) {
@@ -80,6 +87,15 @@ 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
);
this.removeCopyOfCard(sortedDeck[i].role);
this.updateDeckStatus();
}

9
client/src/modules/RoleBox.js
View File

@@ -199,6 +199,15 @@ 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
);
this.deckManager.updateDeckStatus();
}
};

21
client/src/modules/Toast.js
View File

@@ -1,10 +1,16 @@
export const toast = (message, type, positionAtTop = true, dispelAutomatically = true, duration = null) => {
export const toast = (
message,
type, positionAtTop = true,
dispelAutomatically = true,
duration = null,
innerHTML = false
) => {
if (message && type) {
buildAndInsertMessageElement(message, type, positionAtTop, dispelAutomatically, duration);
buildAndInsertMessageElement(message, type, positionAtTop, dispelAutomatically, duration, innerHTML);
}
};
function buildAndInsertMessageElement (message, type, positionAtTop, dispelAutomatically, duration) {
function buildAndInsertMessageElement (message, type, positionAtTop, dispelAutomatically, duration, innerHTML) {
cancelCurrentToast();
const messageEl = document.createElement('div');
messageEl.classList.add('info-message');
@@ -20,6 +26,9 @@ function buildAndInsertMessageElement (message, type, positionAtTop, dispelAutom
case 'success':
messageEl.classList.add('toast-success');
break;
case 'neutral':
messageEl.classList.add('toast-neutral');
break;
}
switch (duration) {
@@ -47,7 +56,11 @@ function buildAndInsertMessageElement (message, type, positionAtTop, dispelAutom
}
messageEl.setAttribute('id', 'current-info-message');
messageEl.innerText = message;
if (innerHTML) {
messageEl.innerHTML = message;
} else {
messageEl.innerText = message;
}
document.body.prepend(messageEl);
}