Save cards and remove them later

This commit is contained in:
Alec Maier
2020-04-12 16:24:40 -04:00
parent 6cf749b0a2
commit abd4b0b9a4
7 changed files with 198 additions and 32 deletions

View File

@@ -37,6 +37,7 @@ let atLeastOnePlayer = false;
document.getElementById("reset-btn").addEventListener("click", resetCardQuantities);
document.getElementById("create-btn").addEventListener("click", createGame);
document.getElementById("role-btn").addEventListener("click", function() { displayModal("role-modal") });
document.getElementById("edit-role-btn").addEventListener("click", function() { displayModal("edit-custom-roles-modal") });
document.getElementById("custom-role-form").addEventListener("submit", function(e) {
addCustomCardToRoles(e);
});
@@ -51,6 +52,8 @@ window.onload = function() {
};
function renderAvailableCards() {
document.getElementById("card-select").innerHTML = "";
document.getElementById("roles").innerHTML = "";
for (let i = 0; i < cards.length; i ++) {
const newCard = new Card(cards[i].role, cards[i].team, cards[i].description, cards[i].isTypeOfWerewolf);
// put card info in the informational role description modal
@@ -113,21 +116,11 @@ function renderAvailableCards() {
cardBottom.card = newCard;
cardBottom.quantityEl = cardQuantity;
if (cards[i].custom) {
addRemoveButtonToCustomCard(i);
}
}
renderCustomCard();
resetCardQuantities();
}
function addRemoveButtonToCustomCard(i) {
let button = document.createElement("button");
button.setAttribute("class", "removal-btn");
button.innerText = "Remove";
document.getElementById("card-" + i).appendChild(button);
}
function renderCustomCard() {
let customCard = document.createElement("div");
customCard.classList.add("card", "custom-card");
@@ -155,14 +148,13 @@ function addCustomCardToRoles(e) {
team: document.getElementById("custom-role-team").value,
description: document.getElementById("custom-role-desc").value,
isTypeOfWerewolf: document.getElementById("custom-role-wolf").checked,
custom: true
custom: true,
saved: document.getElementById("custom-role-remember").checked
};
cards.push(newCard);
document.getElementById("card-select").innerHTML = "";
document.getElementById("roles").innerHTML = "";
renderAvailableCards();
if (document.getElementById("custom-role-remember").checked) {
if (newCard.saved === true) {
let existingRoles = localStorage.getItem("play-werewolf-custom-roles");
if (existingRoles !== null) {
let rolesArray;
@@ -179,10 +171,17 @@ function addCustomCardToRoles(e) {
localStorage.setItem("play-werewolf-custom-roles", JSON.stringify(new Array(newCard)));
}
}
readInUserCustomRoles();
closeModal();
}
function readInUserCustomRoles() {
document.getElementById("custom-roles").innerHTML = "";
cards.forEach((card) => {
if (card.custom && !card.saved) {
renderCustomRoleInModal(card);
}
});
let existingRoles = localStorage.getItem("play-werewolf-custom-roles");
if (existingRoles !== null) {
let rolesArray;
@@ -192,11 +191,56 @@ function readInUserCustomRoles() {
console.error(e.message);
}
if (rolesArray) {
rolesArray.forEach((role) => {
cards.push(role);
rolesArray.forEach((card) => {
renderCustomRoleInModal(card)
})
}
}
if (document.getElementById("custom-roles").getElementsByClassName("custom-role-edit").length === 0) {
document.getElementById("custom-roles").innerHTML = "<h2>You haven't added any custom roles.</h2>";
}
}
function renderCustomRoleInModal(card) {
cards.push(card);
let roleElement = document.createElement("div");
let editRemoveContainer = document.createElement("div");
let roleName = document.createElement("p");
let remove = document.createElement("img");
// TODO: add edit functionality
roleName.innerText = card.role;
remove.setAttribute("src", "../assets/images/delete.svg");
remove.setAttribute("title", "Delete");
remove.addEventListener("click", function() { removeCustomRole(card.role) });
roleElement.setAttribute("class", "custom-role-edit");
editRemoveContainer.appendChild(remove);
roleElement.appendChild(roleName);
roleElement.appendChild(editRemoveContainer);
document.getElementById("custom-roles").appendChild(roleElement);
}
function removeCustomRole(name) {
let matchingCards = cards.filter((card) => card.role === name);
matchingCards.forEach((card) => {
cards.splice(cards.indexOf(card), 1);
});
let existingRoles = localStorage.getItem("play-werewolf-custom-roles");
if (existingRoles !== null) {
let rolesArray;
try {
rolesArray = JSON.parse(existingRoles);
} catch (e) {
console.error(e.message);
}
if (rolesArray) {
rolesArray = rolesArray.filter((card) => card.role !== name);
}
localStorage.setItem("play-werewolf-custom-roles", JSON.stringify(rolesArray));
}
renderAvailableCards();
readInUserCustomRoles();
}
@@ -244,6 +288,7 @@ function displayModal(modalId) {
function closeModal() {
document.getElementById("role-modal").classList.add("hidden");
document.getElementById("custom-card-modal").classList.add("hidden");
document.getElementById("edit-custom-roles-modal").classList.add("hidden");
document.getElementById("app-content").classList.remove("hidden");
}