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

make quantity of added roles green

Browse Source
This commit is contained in:
AlecM33
2023-03-07 20:54:35 -05:00
parent 1da6fadd10
commit 6a0626e490
4 changed files with 70 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -139,7 +139,6 @@ export class DeckStateManager {
document.getElementById('deck-list').appendChild(placeholder); document.getElementById('deck-list').appendChild(placeholder);
}; };
// TODO: refactor
updateDeckStatus = () => { updateDeckStatus = () => {
document.getElementById('deck-count').innerText = this.getDeckSize() + ' Players'; document.getElementById('deck-count').innerText = this.getDeckSize() + ' Players';
if (this.deck.length > 0) { if (this.deck.length > 0) {
@@ -156,58 +155,9 @@ export class DeckStateManager {
const existingCardEl = document.querySelector('#deck-list [data-role-id="' + sortedDeck[i].id + '"]'); const existingCardEl = document.querySelector('#deck-list [data-role-id="' + sortedDeck[i].id + '"]');
if (sortedDeck[i].quantity > 0) { if (sortedDeck[i].quantity > 0) {
if (existingCardEl) { if (existingCardEl) {
existingCardEl.querySelector('.role-name').innerText = sortedDeck[i].quantity + 'x ' + sortedDeck[i].role; populateRoleElementInfo(existingCardEl, sortedDeck, i);
} else { } else {
const roleEl = document.createElement('div'); this.addNewRoleElementToDeckList(sortedDeck, i);
roleEl.dataset.roleId = sortedDeck[i].id;
roleEl.classList.add('added-role');
roleEl.innerHTML = HTMLFragments.DECK_SELECT_ROLE_ADDED_TO_DECK;
// roleEl.classList.add('deck-role');
if (sortedDeck[i].team === globals.ALIGNMENT.GOOD) {
roleEl.classList.add(globals.ALIGNMENT.GOOD);
} else {
roleEl.classList.add(globals.ALIGNMENT.EVIL);
}
roleEl.querySelector('.role-name').innerText = sortedDeck[i].quantity + 'x ' + sortedDeck[i].role;
document.getElementById('deck-list').appendChild(roleEl);
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();
}
};
roleEl.querySelector('.role-remove').addEventListener('click', minusOneHandler);
roleEl.querySelector('.role-remove').addEventListener('keyup', minusOneHandler);
const infoHandler = (e) => {
if (e.type === 'click' || e.code === 'Enter') {
const alignmentEl = document.getElementById('custom-role-info-modal-alignment');
const nameEl = document.getElementById('custom-role-info-modal-name');
alignmentEl.classList.remove(globals.ALIGNMENT.GOOD);
alignmentEl.classList.remove(globals.ALIGNMENT.EVIL);
nameEl.classList.remove(globals.ALIGNMENT.GOOD);
nameEl.classList.remove(globals.ALIGNMENT.EVIL);
e.preventDefault();
nameEl.innerText = sortedDeck[i].role;
nameEl.classList.add(sortedDeck[i].team);
alignmentEl.classList.add(sortedDeck[i].team);
document.getElementById('custom-role-info-modal-description').innerText = sortedDeck[i].description;
alignmentEl.innerText = sortedDeck[i].team;
ModalManager.displayModal('custom-role-info-modal', 'modal-background', 'close-custom-role-info-modal-button');
}
};
roleEl.querySelector('.role-info').addEventListener('click', infoHandler);
roleEl.querySelector('.role-info').addEventListener('keyup', infoHandler);
} }
} else { } else {
sortedDeck[i].markedForRemoval = true; sortedDeck[i].markedForRemoval = true;
@@ -231,4 +181,64 @@ export class DeckStateManager {
this.displayDeckPlaceHolder(); this.displayDeckPlaceHolder();
} }
}; };
addNewRoleElementToDeckList = (sortedDeck, i) => {
const roleEl = document.createElement('div');
roleEl.dataset.roleId = sortedDeck[i].id;
roleEl.classList.add('added-role');
roleEl.innerHTML = HTMLFragments.DECK_SELECT_ROLE_ADDED_TO_DECK;
if (sortedDeck[i].team === globals.ALIGNMENT.GOOD) {
roleEl.classList.add(globals.ALIGNMENT.GOOD);
} else {
roleEl.classList.add(globals.ALIGNMENT.EVIL);
}
populateRoleElementInfo(roleEl, sortedDeck, i);
document.getElementById('deck-list').appendChild(roleEl);
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();
}
};
roleEl.querySelector('.role-remove').addEventListener('click', minusOneHandler);
roleEl.querySelector('.role-remove').addEventListener('keyup', minusOneHandler);
const infoHandler = (e) => {
if (e.type === 'click' || e.code === 'Enter') {
const alignmentEl = document.getElementById('custom-role-info-modal-alignment');
const nameEl = document.getElementById('custom-role-info-modal-name');
alignmentEl.classList.remove(globals.ALIGNMENT.GOOD);
alignmentEl.classList.remove(globals.ALIGNMENT.EVIL);
nameEl.classList.remove(globals.ALIGNMENT.GOOD);
nameEl.classList.remove(globals.ALIGNMENT.EVIL);
e.preventDefault();
nameEl.innerText = sortedDeck[i].role;
nameEl.classList.add(sortedDeck[i].team);
alignmentEl.classList.add(sortedDeck[i].team);
document.getElementById('custom-role-info-modal-description').innerText = sortedDeck[i].description;
alignmentEl.innerText = sortedDeck[i].team;
ModalManager.displayModal('custom-role-info-modal', 'modal-background', 'close-custom-role-info-modal-button');
}
};
roleEl.querySelector('.role-info').addEventListener('click', infoHandler);
roleEl.querySelector('.role-info').addEventListener('keyup', infoHandler);
};
}
function populateRoleElementInfo (roleEl, sortedDeck, i) {
roleEl.querySelector('.role-name').innerHTML =
`<span class="role-quantity"></span>
<span class="name"></span>`;
roleEl.querySelector('.role-name .role-quantity').innerText = sortedDeck[i].quantity + 'x';
roleEl.querySelector('.role-name .name').innerText = sortedDeck[i].role;
} }

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

@@ -319,7 +319,7 @@ export class RoleBox {
function createRandomId () { function createRandomId () {
let id = ''; let id = '';
for (let i = 0; i < 25; i ++) { for (let i = 0; i < 50; i ++) {
id += globals.CHAR_POOL[Math.floor(Math.random() * globals.CHAR_POOL.length)]; id += globals.CHAR_POOL[Math.floor(Math.random() * globals.CHAR_POOL.length)];
} }
return id; return id;

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

@@ -92,8 +92,8 @@ textarea {
} }
.toast-neutral { .toast-neutral {
background-color: #dbdbdb; background-color: #e9e9e9;
border: 3px solid #c4c4c4; border: 3px solid #b7b7b7;
} }
.toast-dispel-automatically { .toast-dispel-automatically {

6
client/src/styles/create.css
View File

@@ -466,7 +466,7 @@ input[type="number"] {
background-color: black; background-color: black;
align-items: center; align-items: center;
padding: 5px; padding: 5px;
margin: 0.25em 0; margin: 0.25em 0.25em 0 0;
border-radius: 5px; border-radius: 5px;
border: 1px solid transparent; border: 1px solid transparent;
font-size: 16px; font-size: 16px;
@@ -478,6 +478,10 @@ input[type="number"] {
white-space: nowrap white-space: nowrap
} }
.role-quantity {
color: #00a718;
}
.default-role:hover, .custom-role:hover, .added-role:hover { .default-role:hover, .custom-role:hover, .added-role:hover {
border: 1px solid #d7d7d7; border: 1px solid #d7d7d7;
} }