Git_Mirror/Werewolf
1
0
Fork 0
mirror of https://github.com/AlecM33/Werewolf.git synced 2026-01-02 01:03:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

Deck templates

Browse Source
This commit is contained in:
AlecM33
2022-06-19 15:32:12 -04:00
parent a805d8b576
commit 99a5455713
11 changed files with 182 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,10 +1,43 @@
import { globals } from '../config/globals.js';
import { HTMLFragments } from './HTMLFragments.js';
import { toast } from './Toast.js';
import {ModalManager} from "./ModalManager.js";
export class DeckStateManager {
constructor () {
this.deck = [];
this.templates = {
'5 Players': {
'Villager': 1,
'Werewolf': 1,
'Sorceress': 1,
'Parity Hunter': 1,
'Seer': 1
},
'7 Players': {
'Villager': 6,
'Werewolf': 1
},
'9 Players': {
'Villager': 7,
'Werewolf': 2
},
'11 Players': {
'Villager': 8,
'Werewolf': 2,
'Seer': 1
},
'13 Players': {
'Villager': 10,
'Werewolf': 2,
'Seer': 1
},
'15 Players': {
'Villager': 12,
'Werewolf': 2,
'Seer': 1
}
}
}
addToDeck (role) {
@@ -54,6 +87,46 @@ export class DeckStateManager {
return total;
}
loadDeckTemplates = (roleBox) => {
if (document.querySelectorAll('.template-option').length === 0) {
for (let templateName of Object.keys(this.templates)) {
let 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');
roleEl.innerText = this.templates[templateName][role] + ' ' + role;
if (i < Object.keys(this.templates[templateName]).length - 1) { // construct comma-delimited list
roleEl.innerText += ', ';
}
roleEl.classList.add(roleBox.defaultRoles.find((entry) => entry.role === role).team);
templateOption.querySelector('.template-option-roles').appendChild(roleEl);
}
templateOption.addEventListener('click', (e) => {
e.preventDefault();
for (let card of this.deck) {
card.quantity = 0;
}
for (let role of Object.keys(this.templates[templateName])) {
let roleObj = roleBox.getDefaultRole(role);
if (!this.hasRole(roleObj.role)) {
this.addToDeck(roleObj);
}
for (let i = roleObj.quantity; i < this.templates[templateName][role]; i++) {
this.addCopyOfCard(roleObj.role);
}
}
this.updateDeckStatus();
ModalManager.dispelModal('deck-template-modal', 'modal-background');
toast('Template loaded', 'success', true, true, 'short');
});
document.getElementById('deck-template-container').appendChild(templateOption);
}
}
}
displayDeckPlaceHolder = () => {
const placeholder = document.createElement('div');
placeholder.setAttribute('id', 'deck-list-placeholder');
@@ -69,7 +142,7 @@ export class DeckStateManager {
}
const sortedDeck = this.deck.sort((a, b) => {
if (a.team !== b.team) {
return a.team === globals.ALIGNMENT.GOOD ? 1 : -1;
return a.team === globals.ALIGNMENT.GOOD ? -1 : 1;
}
return a.role.localeCompare(b.role);
});

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

@@ -198,6 +198,7 @@ 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' });
@@ -205,11 +206,14 @@ export class GameCreationStepManager {
stepContainer.innerHTML += HTMLFragments.CREATE_GAME_DECK_STATUS;
document.getElementById(containerId).appendChild(stepContainer);
this.roleBox = new RoleBox(stepContainer, deckManager);
this.roleBox.loadDefaultRoles();
this.roleBox.loadCustomRolesFromCookies();
this.roleBox.displayDefaultRoles(document.getElementById('role-select'));
deckManager.loadDeckTemplates(this.roleBox);
const exportHandler = (e) => {
if (e.type === 'click' || e.code === 'Enter') {
e.preventDefault();
@@ -502,6 +506,13 @@ function initializeRemainingEventListeners (deckManager, roleBox) {
}
}
};
document.getElementById('deck-template-button').addEventListener('click', () => {
ModalManager.displayModal(
'deck-template-modal',
'modal-background',
'close-deck-template-modal-button'
);
});
document.getElementById('custom-role-btn').addEventListener(
'click', () => {
const createBtn = document.getElementById('create-role-button');

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

@@ -234,7 +234,9 @@ export class GameStateRenderer {
});
}
document.querySelectorAll('.game-player').forEach((el) => el.remove());
sortPeopleByStatus(this.stateBucket.currentGameState.people);
/* TODO: UX issue - it's easier to parse visually when players are sorted this way,
but shifting players around when they are killed or revealed is bad UX for the moderator. */
// sortPeopleByStatus(this.stateBucket.currentGameState.people);
const modType = tempMod ? this.stateBucket.currentGameState.moderator.userType : null;
renderGroupOfPlayers(
this.stateBucket.currentGameState.people,

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

@@ -100,7 +100,7 @@ export const HTMLFragments = {
<div id="play-pause-placeholder"></div>
</div>
</div>
<button id='mod-transfer-button' class='moderator-player-button make-mod-button'>Transfer Mod Powers \uD83D\uDD00</button>
<button id='mod-transfer-button' class='moderator-player-button make-mod-button app-button'>Transfer Mod Powers \uD83D\uDD00</button>
<div>
<button id='role-info-button' class='app-button'>Roles in This Game <img src='/images/info.svg'/></button>
</div>
@@ -238,6 +238,9 @@ export const HTMLFragments = {
<div id='deck-evil'></div>
</div>
</div>`,
DECK_TEMPLATE:
`<div class='template-option-name'></div>
<div class='template-option-roles'></div>`,
CREATE_GAME_CUSTOM_ROLES:
`<div id="custom-roles-container">
<button id="custom-role-hamburger" class="hamburger hamburger--collapse" type="button">
@@ -259,7 +262,10 @@ export const HTMLFragments = {
</div>`,
CREATE_GAME_DECK_STATUS:
`<div id="deck-status-container">
<div id="deck-count">0 Players</div>
<div id="deck-status-header">
<div id="deck-count">0 Players</div>
<button id="deck-template-button" class="app-button">Use Template</button>
</div>
<div id="deck-list"></div>
</div>`,
DECK_SELECT_ROLE:

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

@@ -11,7 +11,6 @@ export class RoleBox {
this.category = 'default';
this.deckManager = deckManager;
this.defaultRoles = [];
console.log('hi');
this.customRoles = [];
container.innerHTML += HTMLFragments.CREATE_GAME_CUSTOM_ROLES;
this.defaultButton = document.getElementById('role-category-default');
@@ -36,7 +35,7 @@ export class RoleBox {
loadDefaultRoles = () => {
this.defaultRoles = defaultRoles.sort((a, b) => {
if (a.team !== b.team) {
return a.team === globals.ALIGNMENT.GOOD ? 1 : -1;
return a.team === globals.ALIGNMENT.GOOD ? -1 : 1;
}
return a.role.localeCompare(b.role);
}).map((role) => {
@@ -162,7 +161,7 @@ export class RoleBox {
this.categoryTransition.play();
this.customRoles.sort((a, b) => {
if (a.team !== b.team) {
return a.team === globals.ALIGNMENT.GOOD ? 1 : -1;
return a.team === globals.ALIGNMENT.GOOD ? -1 : 1;
}
return a.role.localeCompare(b.role);
});