diff --git a/assets/images/delete.svg b/assets/images/delete.svg new file mode 100644 index 0000000..304e9e1 --- /dev/null +++ b/assets/images/delete.svg @@ -0,0 +1,14 @@ + + + + background + + + + + + + Layer 1 + + + diff --git a/assets/images/pencil.svg b/assets/images/pencil.svg new file mode 100644 index 0000000..584c54e --- /dev/null +++ b/assets/images/pencil.svg @@ -0,0 +1,14 @@ + + + + background + + + + + + + Layer 1 + + + diff --git a/assets/images/pencil_green.svg b/assets/images/pencil_green.svg new file mode 100644 index 0000000..4eabe39 --- /dev/null +++ b/assets/images/pencil_green.svg @@ -0,0 +1,14 @@ + + + + background + + + + + + + Layer 1 + + + diff --git a/static/cards.js b/static/cards.js index 8a3fa4d..c34d2f3 100644 --- a/static/cards.js +++ b/static/cards.js @@ -1,4 +1,4 @@ -export const cards = [ +export let cards = [ { role: "Villager", team: "good", diff --git a/static/setup.js b/static/setup.js index bfb71c0..0c3d27f 100644 --- a/static/setup.js +++ b/static/setup.js @@ -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 = "

You haven't added any custom roles.

"; + } +} + +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"); } diff --git a/static/styles.css b/static/styles.css index 7fc62ae..a410819 100644 --- a/static/styles.css +++ b/static/styles.css @@ -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; } diff --git a/views/create_game.html b/views/create_game.html index 9a05ca1..e3b5bb7 100644 --- a/views/create_game.html +++ b/views/create_game.html @@ -19,13 +19,23 @@ +