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

lint, add spec, add info button to added roles

Browse Source
This commit is contained in:
AlecM33
2022-06-19 16:24:47 -04:00
parent 99a5455713
commit c86e106060
6 changed files with 64 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,43 +1,43 @@
import { globals } from '../config/globals.js';
import { HTMLFragments } from './HTMLFragments.js';
import { toast } from './Toast.js';
import {ModalManager} from "./ModalManager.js";
import { ModalManager } from './ModalManager.js';
export class DeckStateManager {
constructor () {
this.deck = [];
this.templates = {
'5 Players': {
'Villager': 1,
'Werewolf': 1,
'Sorceress': 1,
Villager: 1,
Werewolf: 1,
Sorceress: 1,
'Parity Hunter': 1,
'Seer': 1
Seer: 1
},
'7 Players': {
'Villager': 6,
'Werewolf': 1
Villager: 6,
Werewolf: 1
},
'9 Players': {
'Villager': 7,
'Werewolf': 2
Villager: 7,
Werewolf: 2
},
'11 Players': {
'Villager': 8,
'Werewolf': 2,
'Seer': 1
Villager: 8,
Werewolf: 2,
Seer: 1
},
'13 Players': {
'Villager': 10,
'Werewolf': 2,
'Seer': 1
Villager: 10,
Werewolf: 2,
Seer: 1
},
'15 Players': {
'Villager': 12,
'Werewolf': 2,
'Seer': 1
Villager: 12,
Werewolf: 2,
Seer: 1
}
}
};
}
addToDeck (role) {
@@ -89,14 +89,14 @@ export class DeckStateManager {
loadDeckTemplates = (roleBox) => {
if (document.querySelectorAll('.template-option').length === 0) {
for (let templateName of Object.keys(this.templates)) {
let templateOption = document.createElement('div');
for (const templateName of Object.keys(this.templates)) {
const templateOption = document.createElement('div');
templateOption.classList.add('template-option');
templateOption.innerHTML = HTMLFragments.DECK_TEMPLATE;
templateOption.querySelector('.template-option-name').innerText = templateName;
for (let i = 0; i < Object.keys(this.templates[templateName]).length; i++) {
let role = Object.keys(this.templates[templateName])[i];
let roleEl = document.createElement('span');
for (let i = 0; i < Object.keys(this.templates[templateName]).length; i ++) {
const role = Object.keys(this.templates[templateName])[i];
const roleEl = document.createElement('span');
roleEl.innerText = this.templates[templateName][role] + ' ' + role;
if (i < Object.keys(this.templates[templateName]).length - 1) { // construct comma-delimited list
roleEl.innerText += ', ';
@@ -106,15 +106,15 @@ export class DeckStateManager {
}
templateOption.addEventListener('click', (e) => {
e.preventDefault();
for (let card of this.deck) {
for (const card of this.deck) {
card.quantity = 0;
}
for (let role of Object.keys(this.templates[templateName])) {
let roleObj = roleBox.getDefaultRole(role);
for (const role of Object.keys(this.templates[templateName])) {
const roleObj = roleBox.getDefaultRole(role);
if (!this.hasRole(roleObj.role)) {
this.addToDeck(roleObj);
}
for (let i = roleObj.quantity; i < this.templates[templateName][role]; i++) {
for (let i = roleObj.quantity; i < this.templates[templateName][role]; i ++) {
this.addCopyOfCard(roleObj.role);
}
}
@@ -125,7 +125,7 @@ export class DeckStateManager {
document.getElementById('deck-template-container').appendChild(templateOption);
}
}
}
};
displayDeckPlaceHolder = () => {
const placeholder = document.createElement('div');
@@ -182,6 +182,22 @@ export class DeckStateManager {
};
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');
alignmentEl.classList.remove(globals.ALIGNMENT.GOOD);
alignmentEl.classList.remove(globals.ALIGNMENT.EVIL);
e.preventDefault();
document.getElementById('custom-role-info-modal-name').innerText = sortedDeck[i].role;
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 {
sortedDeck[i].markedForRemoval = true;

2
client/src/modules/GameCreationStepManager.js
View File

@@ -198,7 +198,6 @@ export class GameCreationStepManager {
}
renderRoleSelectionStep = (game, containerId, step, deckManager) => {
const stepContainer = document.createElement('div');
setAttributes(stepContainer, { id: 'step-' + step, class: 'flex-row-container-left-align step' });
@@ -208,6 +207,7 @@ export class GameCreationStepManager {
document.getElementById(containerId).appendChild(stepContainer);
this.roleBox = new RoleBox(stepContainer, deckManager);
deckManager.roleBox = this.roleBox;
this.roleBox.loadDefaultRoles();
this.roleBox.loadCustomRolesFromCookies();
this.roleBox.displayDefaultRoles(document.getElementById('role-select'));

13
client/src/modules/GameStateRenderer.js
View File

@@ -345,19 +345,6 @@ function renderLobbyPerson (name, userType) {
return el;
}
function sortPeopleByStatus (people) {
people.sort((a, b) => {
if (a.out !== b.out) {
return a.out ? 1 : -1;
} else {
if (a.revealed !== b.revealed) {
return a.revealed ? -1 : 1;
}
return a.name >= b.name ? 1 : -1;
}
});
}
function getGameSize (cards) {
let quantity = 0;
for (const card of cards) {

1
client/src/modules/HTMLFragments.js
View File

@@ -286,5 +286,6 @@ export const HTMLFragments = {
`<div class="role-name"></div>
<div class="role-options">
<img tabindex="0" class="role-remove" src="images/remove.svg" title="remove one" alt="remove one"/>
<img tabindex="0" class="role-info" src="images/info.svg" title="info" alt="info"/>
</div>`
};

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

@@ -119,8 +119,9 @@
#deck-template-container {
margin: 1em 0;
max-height: 30em;
max-height: 64vh;
overflow-y: auto;
padding: 0 0.5em;
}
.template-option-name {