diff --git a/client/src/modules/DeckStateManager.js b/client/src/modules/DeckStateManager.js index dede3bc..5eed73b 100644 --- a/client/src/modules/DeckStateManager.js +++ b/client/src/modules/DeckStateManager.js @@ -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; diff --git a/client/src/modules/GameCreationStepManager.js b/client/src/modules/GameCreationStepManager.js index 1eb9399..b6fdfa9 100644 --- a/client/src/modules/GameCreationStepManager.js +++ b/client/src/modules/GameCreationStepManager.js @@ -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')); diff --git a/client/src/modules/GameStateRenderer.js b/client/src/modules/GameStateRenderer.js index 4538989..97b560d 100644 --- a/client/src/modules/GameStateRenderer.js +++ b/client/src/modules/GameStateRenderer.js @@ -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) { diff --git a/client/src/modules/HTMLFragments.js b/client/src/modules/HTMLFragments.js index 604d6ac..d2517be 100644 --- a/client/src/modules/HTMLFragments.js +++ b/client/src/modules/HTMLFragments.js @@ -286,5 +286,6 @@ export const HTMLFragments = { `
remove one + info
` }; diff --git a/client/src/styles/create.css b/client/src/styles/create.css index 02902e5..f55c90a 100644 --- a/client/src/styles/create.css +++ b/client/src/styles/create.css @@ -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 { diff --git a/spec/e2e/create_spec.js b/spec/e2e/create_spec.js index f1c6884..0c04938 100644 --- a/spec/e2e/create_spec.js +++ b/spec/e2e/create_spec.js @@ -104,5 +104,20 @@ describe('Create page', function () { expect(gameCreationStepManager.deckManager.deck.length).toEqual(5); expect(document.querySelectorAll('.added-role').length).toEqual(5); }); + + it('clear existing added cards and leave only what roles are part of the template', () => { + document.getElementById('role-category-default').click(); + const roles = document.querySelectorAll('.default-role'); + roles.forEach((el) => { + const plusElement = el.querySelector('.role-include'); + plusElement.click(); + }); + + document.getElementById('deck-template-button').click(); + document.querySelectorAll('.template-option')[0].click(); + + expect(gameCreationStepManager.deckManager.deck.length).toEqual(5); + expect(document.querySelectorAll('.added-role').length).toEqual(5); + }); }); });