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

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

14
assets/images/delete.svg Normal file
View File

@@ -0,0 +1,14 @@
<svg width="209" height="209" xmlns="http://www.w3.org/2000/svg">
<!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
<g>
<title>background</title>
<rect fill="none" id="canvas_background" height="211" width="211" y="-1" x="-1"/>
<g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
<rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
</g>
</g>
<g>
<title>Layer 1</title>
<path id="svg_1" d="m0.749996,50.93695l50.18695,-50.18695l53.312819,53.312382l53.312819,-53.312382l50.187422,50.18695l-53.312833,53.312819l53.312833,53.312819l-50.187422,50.187422l-53.312819,-53.312833l-53.312819,53.312833l-50.18695,-50.187422l53.312382,-53.312819l-53.312382,-53.312819z" stroke-width="1.5" stroke="none" fill="red"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 840 B

14
assets/images/pencil.svg Normal file
View File

@@ -0,0 +1,14 @@
<svg width="132" height="192" xmlns="http://www.w3.org/2000/svg">
<!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
<g>
<title>background</title>
<rect fill="none" id="canvas_background" height="194" width="134" y="-1" x="-1"/>
<g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
<rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
</g>
</g>
<g>
<title>Layer 1</title>
<path id="svg_2" d="m124.961908,17.099698l-20.881294,-13.124489c-5.268417,-3.308101 -12.210471,-1.715912 -15.530119,3.553603l-8.230499,13.1l39.946799,25.089697l8.23699,-13.093919c3.307049,-5.275788 1.728716,-12.224161 -3.541878,-15.524891l0,0zm-115.727379,116.707156l39.948976,25.089439l65.110209,-103.65022l-39.967994,-25.095989l-65.091198,103.656764l0.000007,0.000007zm-6.102198,31.877066l-0.88233,23.566079l20.849261,-11.027851l19.374887,-10.229887l-38.540057,-24.219893l-0.801755,21.911559l0,0l-0.000007,-0.000007z" stroke-width="4.5" stroke="none" fill="black"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

14
assets/images/pencil_green.svg Normal file
View File

@@ -0,0 +1,14 @@
<svg width="132" height="192" xmlns="http://www.w3.org/2000/svg">
<!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
<g>
<title>background</title>
<rect fill="none" id="canvas_background" height="194" width="134" y="-1" x="-1"/>
<g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
<rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
</g>
</g>
<g>
<title>Layer 1</title>
<path id="svg_2" d="m124.961908,17.099698l-20.881294,-13.124489c-5.268417,-3.308101 -12.210471,-1.715912 -15.530119,3.553603l-8.230499,13.1l39.946799,25.089697l8.23699,-13.093919c3.307049,-5.275788 1.728716,-12.224161 -3.541878,-15.524891l0,0zm-115.727379,116.707156l39.948976,25.089439l65.110209,-103.65022l-39.967994,-25.095989l-65.091198,103.656764l0.000007,0.000007zm-6.102198,31.877066l-0.88233,23.566079l20.849261,-11.027851l19.374887,-10.229887l-38.540057,-24.219893l-0.801755,21.911559l0,0l-0.000007,-0.000007z" stroke-width="4.5" stroke="none" fill="green"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

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;
}

17
views/create_game.html
View File

@@ -19,13 +19,23 @@
</div>
</div>
</div>
<div class="modal hidden" id="edit-custom-roles-modal">
<div class="modal-content">
<div class="modal-header">
<span class="close" class="close">&times;</span>
</div>
<div class="modal-body">
<div id="custom-roles"></div>
</div>
</div>
</div>
<div class="modal hidden" id="custom-card-modal">
<div class="modal-content">
<div class="modal-header">
<span class="close" class="close">&times;</span>
</div>
<div class="modal-body">
<h2>Add a role for this game only.</h2>
<h2>Add a Custom Role</h2>
<form id="custom-role-form">
<label for="custom-role-name">Name</label>
<input id="custom-role-name" type="text" required/>
@@ -42,7 +52,7 @@
</div>
<div class="checkbox">
<input type="checkbox" id="custom-role-remember">
<label for="custom-role-remember">Remember this role for later</label>
<label for="custom-role-remember">Remember this role for later (uses cookies)</label>
</div>
<br><br>
<input type="submit" class="app-btn" value="Add Role">
@@ -71,6 +81,9 @@
</span>
<span>
<h3 id="game-size">0 Players</h3>
<button id="edit-role-btn" class="app-btn-secondary">Manage Custom Roles
<img src="../assets/images/pencil.svg"/>
</button>
<p id="size-error"></p>
</span>
</div>