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 approach

Browse Source
This commit is contained in:
AlecM33
2023-06-27 10:16:16 -04:00
parent d1850e5ef2
commit e4669ba690
4 changed files with 36 additions and 25 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,
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) {

17
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();
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(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) + ')';
toast(toastContent, 'neutral', true, true, 'short', true);
return toastEl;
});
this.removeCopyOfCard(sortedDeck[i].role);
this.updateDeckStatus();

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

@@ -204,15 +204,17 @@ export class RoleBox {
} else {
this.deckManager.addCopyOfCard(name);
}
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);
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();
}

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 {