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

Save cards and remove them later

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

2
static/cards.js
View File

@@ -1,4 +1,4 @@
export const cards = [
export let cards = [
{
role: "Villager",
team: "good",

77
static/setup.js
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");
}

92
static/styles.css
View File

@@ -24,9 +24,14 @@
font-size: 0.9em;
}
.card-header > p {
right: 7px;
top: 19px;
}
.card-image {
top: 21%;
left: 14%;
top: 25%;
left: 12%;;
}
.disclaimer, .custom-card h1 {
@@ -114,6 +119,11 @@
margin: 0.5em 0;
}
.card-header > p {
right: 17px;
top: 30px;
}
.app-header-secondary {
font-size: 70px;
margin: 0.3em 0;
@@ -155,7 +165,7 @@
width: 90%;
}
#custom-card-modal .modal-content {
#custom-card-modal .modal-content, #edit-custom-roles-modal .modal-content {
width: 50%;
}
@@ -218,7 +228,7 @@
}
@media(max-width: 1225px) and (min-width: 750.01px) {
#custom-card-modal .modal-content {
#custom-card-modal .modal-content, #edit-custom-roles-modal .modal-content {
width: 75%;
}
}
@@ -377,6 +387,9 @@ button {
}
.app-btn {
display: flex;
align-items: center;
justify-content: center;
background-color: #992626;
box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.4);
color: #bfb8b8;
@@ -387,6 +400,41 @@ button {
margin-bottom: 1em;
}
.app-btn img, .app-btn-secondary img {
width: 15px;
}
#custom-roles img {
width: 20px;
}
#custom-roles .custom-role-edit {
display: flex;
width: 100%;
justify-content: space-around;
font-size: 19px;
align-items: center;
background-color: black;
border-radius: 5px;
margin: 0.3em;
}
.custom-role-edit p {
text-overflow: ellipsis;
overflow-x: hidden;
white-space: nowrap;
max-width: 7em;
}
#custom-roles .custom-role-edit div > img {
margin: 0 1em;
cursor: pointer;
}
#custom-roles .custom-role-edit div > img:hover {
filter: brightness(70%);
}
.card {
text-align: center;
cursor: pointer;
@@ -443,7 +491,13 @@ button {
.card-top p.card-role {
font-size: 1em;
height: 1.2em;
pointer-events: none;
max-width: 7em;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
overflow-y: visible;
}
.card-header {
@@ -454,6 +508,10 @@ button {
pointer-events: none;
}
.card-header > p {
position: absolute;
}
.card-bottom p {
pointer-events: none;
line-height: 1;
@@ -496,10 +554,13 @@ button {
}
.app-btn-secondary {
background-color: white;
display: flex;
justify-content: space-around;
align-items: center;
background-color: lightgray;
border-radius: 3px;
color: #bd2a2a;
border: 1px solid #bd2a2a;
color: black;
border: none;
width: 10em;
padding: 0.5em;
margin-right: 1em;
@@ -512,7 +573,7 @@ button {
.app-btn:hover, .app-btn:focus {
cursor: pointer;
background-color: #333243;
background-color: #333243 !important;
}
#main-buttons .app-btn:hover, #main-buttons .app-btn:focus {
@@ -526,7 +587,7 @@ button {
.app-btn-secondary:hover, .app-btn-secondary:focus {
cursor: pointer;
background-color: rgba(0, 0, 0, 0.15);
filter: brightness(70%);
}
#main-buttons {
@@ -581,10 +642,13 @@ button {
}
#create-game-container button {
width: 50%;
padding: 0.8em;
height: 4em;
width: 12em;
height: 3em;
width: fit-content;
}
#edit-role-btn > img {
margin-left: 0.5em;
}
#game-start a button {
@@ -600,7 +664,9 @@ button {
margin-right: 0.3em;
}
#game-start button {
#game-start > button {
background-color: #8EA604;
color: black;
margin-left: 0.3em;
width: 12em;
}