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

4-step game creation

Browse Source
This commit is contained in:
Alec
2021-11-13 19:50:06 -05:00
parent 0c6203dec5
commit c1cb58bb05
8 changed files with 700 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
client/scripts/create.js
View File

@@ -1,16 +1,16 @@
import { toast } from "../modules/Toast.js";
import { ModalManager } from "../modules/ModalManager.js";
import { defaultCards } from "../config/defaultCards.js";
import { customCards } from "../config/customCards.js";
import { DeckStateManager } from "../modules/DeckStateManager.js";
import { XHRUtility } from "../modules/XHRUtility.js";
import { Game } from "../model/Game.js";
import { GameCreationStepManager } from "../modules/GameCreationStepManager.js";
export const create = () => {
let deckManager = new DeckStateManager();
let gameCreationStepManager = new GameCreationStepManager(deckManager);
loadDefaultCards(deckManager);
loadCustomCards(deckManager);
initializeRemainingEventListeners(deckManager);
loadCustomRoles(deckManager);
gameCreationStepManager.renderStep("creation-step-container", 1);
}
// Display a widget for each default card that allows copies of it to be added/removed. Set initial deck state.
@@ -22,8 +22,6 @@ function loadDefaultCards(deckManager) {
for (let i = 0; i < defaultCards.length; i ++) { // each dropdown should include every
let card = defaultCards[i];
card.quantity = 0;
let cardEl = constructCompactDeckBuilderElement(defaultCards[i], deckManager);
document.getElementById("deck").appendChild(cardEl);
deck.push(card);
}
deckManager.deck = deck;
@@ -31,138 +29,13 @@ function loadDefaultCards(deckManager) {
/* Display a dropdown containing all the custom roles. Adding one will add it to the game deck and
create a widget for it */
function loadCustomCards(deckManager) {
let form = document.getElementById("add-card-to-deck-form");
function loadCustomRoles(deckManager) {
customCards.sort((a, b) => {
return a.role.localeCompare(b.role);
});
let selectEl = document.createElement("select");
selectEl.setAttribute("id", "deck-select");
selectEl.setAttribute("class", "ui search dropdown");
addOptionsToList(customCards, selectEl);
form.appendChild(selectEl);
let submitBtn = document.createElement("input");
submitBtn.setAttribute("type", "submit");
submitBtn.setAttribute("value", "Include Role");
submitBtn.addEventListener('click', (e) => {
e.preventDefault();
if (selectEl.value && selectEl.value.length > 0) {
deckManager.addToDeck(selectEl.value);
let cardEl = constructCompactDeckBuilderElement(deckManager.getCard(selectEl.value), deckManager);
updateCustomRoleOptionsList(deckManager, selectEl);
document.getElementById("deck").appendChild(cardEl);
document.querySelector("#add-card-to-deck-form .text").innerText = "";
}
})
form.appendChild(submitBtn);
$('.ui.dropdown')
.dropdown();
deckManager.customRoleOptions = customCards;
}
function initializeRemainingEventListeners(deckManager) {
document.getElementById("game-form").onsubmit = (e) => {
e.preventDefault();
let timerBool = hasTimer();
let timerParams = timerBool
? {
hours: document.getElementById("game-hours").value,
minutes: document.getElementById("game-minutes").value
}
: null;
if (deckManager.getDeckSize() >= 5) {
createGameForHosting(
deckManager.getCurrentDeck().filter((card) => card.quantity > 0),
timerBool,
document.getElementById("mod-name").value,
timerParams
);
} else {
toast("You must include enough cards for 5 players.", "error", true);
}
}
document.getElementById("add-role-form").onsubmit = (e) => {
e.preventDefault();
let name = document.getElementById("role-name").value.trim();
let description = document.getElementById("role-description").value.trim();
if (!deckManager.getCustomRoleOption(name)) { // confirm there is no existing custom role with the same name
deckManager.addToCustomRoleOptions({role: name, description: description});
updateCustomRoleOptionsList(deckManager, document.getElementById("deck-select"))
ModalManager.dispelModal("add-role-modal", "add-role-modal-background");
toast("Role Added", "success", true);
} else {
toast("There is already a custom role with this name.", "error", true);
}
}
document.getElementById("custom-role-btn").addEventListener(
"click", () => {
ModalManager.displayModal(
"add-role-modal",
"add-role-modal-background",
"close-modal-button"
)
}
)
}
function updateCustomRoleOptionsList(deckManager, selectEl) {
document.querySelectorAll('#deck-select option').forEach(e => e.remove());
addOptionsToList(deckManager.customRoleOptions, selectEl);
}
function addOptionsToList(options, selectEl) {
for (let i = 0; i < options.length; i ++) {
let optionEl = document.createElement("option");
optionEl.setAttribute("value", customCards[i].role);
optionEl.innerText = customCards[i].role;
selectEl.appendChild(optionEl);
}
}
function constructCompactDeckBuilderElement(card, deckManager) {
const cardContainer = document.createElement("div");
cardContainer.setAttribute("class", "compact-card");
cardContainer.setAttribute("id", "card-" + card.role.replaceAll(' ', '-'));
cardContainer.innerHTML =
"<div class='compact-card-left'>" +
"<p>-</p>" +
"</div>" +
"<div class='compact-card-header'>" +
"<p class='card-role'></p>" +
"<div class='card-quantity'>0</div>" +
"</div>" +
"<div class='compact-card-right'>" +
"<p>+</p>" +
"</div>";
cardContainer.querySelector('.card-role').innerText = card.role;
cardContainer.querySelector('.compact-card-right').addEventListener('click', () => {
deckManager.addCopyOfCard(card.role);
cardContainer.querySelector('.card-quantity').innerText = deckManager.getCard(card.role).quantity;
document.querySelector('label[for="deck"]').innerText = 'Game Deck: ' + deckManager.getDeckSize() + ' Players';
if (deckManager.getCard(card.role).quantity > 0) {
document.getElementById('card-' + card.role.replaceAll(' ', '-')).classList.add('selected-card')
}
});
cardContainer.querySelector('.compact-card-left').addEventListener('click', () => {
deckManager.removeCopyOfCard(card.role);
cardContainer.querySelector('.card-quantity').innerText = deckManager.getCard(card.role).quantity;
document.querySelector('label[for="deck"]').innerText = 'Game Deck: ' + deckManager.getDeckSize() + ' Players';
if (deckManager.getCard(card.role).quantity === 0) {
document.getElementById('card-' + card.role.replaceAll(' ', '-')).classList.remove('selected-card')
}
});
return cardContainer;
}
function hasTimer() {
return document.getElementById("game-hours").value.length > 0 || document.getElementById("game-minutes").value.length > 0
}
function createGameForHosting(deck, hasTimer, modName, timerParams) {
XHRUtility.xhr(
'/api/games/create',