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

basic game creation

Browse Source
This commit is contained in:
Alec
2021-11-09 22:54:44 -05:00
parent 226b0c25e2
commit 3dc2cca465
28 changed files with 4411 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
client/scripts/create.js
View File

@@ -3,6 +3,8 @@ 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";
export const create = () => {
let deckManager = new DeckStateManager();
@@ -10,6 +12,35 @@ export const create = () => {
loadCustomCards(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,
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", () => {
@@ -47,23 +78,25 @@ function loadCustomCards(deckManager) {
});
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", "Add Role to Deck");
submitBtn.setAttribute("value", "Add Role");
submitBtn.addEventListener('click', (e) => {
e.preventDefault();
if (selectEl.selectedIndex > 0) {
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;
}
@@ -73,12 +106,7 @@ function updateCustomRoleOptionsList(deckManager, selectEl) {
}
function addOptionsToList(options, selectEl) {
let noneSelected = document.createElement("option");
noneSelected.innerText = "None selected"
noneSelected.disabled = true;
noneSelected.selected = true;
selectEl.appendChild(noneSelected);
for (let i = 0; i < options.length; i ++) { // each dropdown should include every
for (let i = 0; i < options.length; i ++) {
let optionEl = document.createElement("option");
optionEl.setAttribute("value", customCards[i].role);
optionEl.innerText = customCards[i].role;
@@ -91,30 +119,61 @@ function constructCompactDeckBuilderElement(card, deckManager) {
cardContainer.setAttribute("class", "compact-card");
cardContainer.setAttribute("id", "card-" + card.role);
cardContainer.setAttribute("id", "card-" + card.role);
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'>" + card.role + "</p>" +
"<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, timerParams) {
XHRUtility.xhr(
'/api/games/create',
'POST',
null,
JSON.stringify(
new Game(deck, hasTimer, timerParams)
)
)
.then((res) => {
if (res
&& typeof res === 'object'
&& Object.prototype.hasOwnProperty.call(res, 'content')
&& typeof res.content === 'string'
) {
window.location = ('/games/' + res.content);
}
});
}