mirror of
https://github.com/AlecM33/Werewolf.git
synced 2025-12-26 15:57:50 +01:00
Merge pull request #55 from AlecM33/setup-page-usability
gallery/list views for setup page
This commit is contained in:
Alec Maier
GitHub
90
assets/images/gallery.svg
Normal file
90
assets/images/gallery.svg
Normal file
@@ -0,0 +1,90 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="123.22025mm"
|
||||
height="123.59821mm"
|
||||
viewBox="0 0 123.22025 123.59821"
|
||||
version="1.1"
|
||||
id="svg8"
|
||||
inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
|
||||
sodipodi:docname="gallery.svg">
|
||||
<defs
|
||||
id="defs2" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="0.35"
|
||||
inkscape:cx="-228.27896"
|
||||
inkscape:cy="141.42857"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1027"
|
||||
inkscape:window-x="-8"
|
||||
inkscape:window-y="-8"
|
||||
inkscape:window-maximized="1" />
|
||||
<metadata
|
||||
id="metadata5">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-43.389879,-62.654773)">
|
||||
<g
|
||||
id="g848"
|
||||
transform="translate(8.2381001,13.607143)"
|
||||
style="stroke:none">
|
||||
<rect
|
||||
y="49.04763"
|
||||
x="35.151779"
|
||||
height="53.672619"
|
||||
width="53.672619"
|
||||
id="rect815"
|
||||
style="opacity:0.95999995;fill:whitesmoke;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" />
|
||||
<rect
|
||||
y="49.04763"
|
||||
x="104.6994"
|
||||
height="53.672619"
|
||||
width="53.672619"
|
||||
id="rect815-7"
|
||||
style="opacity:0.95999995;fill:whitesmoke;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" />
|
||||
<rect
|
||||
y="118.97321"
|
||||
x="35.151779"
|
||||
height="53.672619"
|
||||
width="53.672619"
|
||||
id="rect815-1"
|
||||
style="opacity:0.95999995;fill:whitesmoke;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" />
|
||||
<rect
|
||||
y="118.97321"
|
||||
x="104.6994"
|
||||
height="53.672619"
|
||||
width="53.672619"
|
||||
id="rect815-5"
|
||||
style="opacity:0.95999995;fill:whitesmoke;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
109
assets/images/list.svg
Normal file
109
assets/images/list.svg
Normal file
@@ -0,0 +1,109 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="123.22025mm"
|
||||
height="123.59821mm"
|
||||
viewBox="0 0 123.22025 123.59821"
|
||||
version="1.1"
|
||||
id="svg8"
|
||||
inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
|
||||
sodipodi:docname="list.svg">
|
||||
<defs
|
||||
id="defs2" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="0.35"
|
||||
inkscape:cx="-228.27896"
|
||||
inkscape:cy="141.42857"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1027"
|
||||
inkscape:window-x="-8"
|
||||
inkscape:window-y="-8"
|
||||
inkscape:window-maximized="1" />
|
||||
<metadata
|
||||
id="metadata5">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-43.389879,-62.654773)">
|
||||
<circle
|
||||
style="opacity:0.95999995;fill:whitesmoke;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
|
||||
id="path875"
|
||||
cx="58.697918"
|
||||
cy="82.385117"
|
||||
r="5.2916665" />
|
||||
<circle
|
||||
style="opacity:0.95999995;fill:whitesmoke;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
|
||||
id="path875-4"
|
||||
cx="58.697918"
|
||||
cy="111.11131"
|
||||
r="5.2916665" />
|
||||
<circle
|
||||
style="opacity:0.95999995;fill:whitesmoke;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
|
||||
id="path875-8"
|
||||
cx="58.697918"
|
||||
cy="139.23279"
|
||||
r="5.2916665" />
|
||||
<circle
|
||||
style="opacity:0.95999995;fill:whitesmoke;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
|
||||
id="path875-6"
|
||||
cx="58.697918"
|
||||
cy="166.52264"
|
||||
r="5.2916665" />
|
||||
<rect
|
||||
style="opacity:0.95999995;fill:whitesmoke;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
|
||||
id="rect904"
|
||||
width="85.422623"
|
||||
height="10.583333"
|
||||
x="71.171135"
|
||||
y="77.093452" />
|
||||
<rect
|
||||
style="opacity:0.95999995;fill:whitesmoke;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
|
||||
id="rect904-4"
|
||||
width="85.422623"
|
||||
height="10.583333"
|
||||
x="71.171135"
|
||||
y="161.23097" />
|
||||
<rect
|
||||
style="opacity:0.95999995;fill:whitesmoke;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
|
||||
id="rect904-43"
|
||||
width="85.422623"
|
||||
height="10.583333"
|
||||
x="71.171135"
|
||||
y="133.94112" />
|
||||
<rect
|
||||
style="opacity:0.95999995;fill:whitesmoke;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
|
||||
id="rect904-3"
|
||||
width="85.422623"
|
||||
height="10.583333"
|
||||
x="71.171135"
|
||||
y="105.81964" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
@@ -39,7 +39,11 @@ export class CardManager {
|
||||
|
||||
let cardClass = card.isTypeOfWerewolf ? "card card-werewolf" : "card";
|
||||
cardContainer.setAttribute("class", cardClass);
|
||||
if (card.team === "good") {
|
||||
cardContainer.setAttribute("id", "card-" + index);
|
||||
} else {
|
||||
cardContainer.setAttribute("id", "card-" + index);
|
||||
}
|
||||
cardContainer.innerHTML =
|
||||
"<div class='card-top'>" +
|
||||
"<div class='card-header'>" +
|
||||
@@ -61,10 +65,45 @@ export class CardManager {
|
||||
return cardContainer;
|
||||
}
|
||||
|
||||
static constructCustomCardIndicator() {
|
||||
static constructCompactDeckBuilderElement(card, index) {
|
||||
const cardContainer = document.createElement("div");
|
||||
|
||||
const quantityClass = card.team === "good" ? "card-quantity quantity-village" : "card-quantity quantity-wolf";
|
||||
|
||||
let cardClass = card.isTypeOfWerewolf ? "compact-card card-werewolf" : "compact-card";
|
||||
cardContainer.setAttribute("class", cardClass);
|
||||
if (card.team === "good") {
|
||||
cardContainer.setAttribute("id", "card-" + index);
|
||||
} else {
|
||||
cardContainer.setAttribute("id", "card-" + index);
|
||||
}
|
||||
cardContainer.innerHTML =
|
||||
"<div class='compact-card-left'>" +
|
||||
"<p>-</p>" +
|
||||
"</div>" +
|
||||
"<div class='compact-card-header'>" +
|
||||
"<p class='card-role'>" + card.role + "</p>" +
|
||||
"<div class='" + quantityClass + "'>" + card.quantity + "</div>" +
|
||||
"</div>" +
|
||||
"<div class='compact-card-right'>" +
|
||||
"<p>+</p>" +
|
||||
"</div>";
|
||||
return cardContainer;
|
||||
}
|
||||
|
||||
static constructCustomCardIndicator(isCondensed, team) {
|
||||
let customCard = document.createElement("div");
|
||||
if (isCondensed) {
|
||||
customCard.classList.add("compact-card", "custom-card");
|
||||
} else {
|
||||
customCard.classList.add("card", "custom-card");
|
||||
customCard.setAttribute("id", "custom");
|
||||
}
|
||||
|
||||
if (team === "good") {
|
||||
customCard.setAttribute("id", "custom-good");
|
||||
} else {
|
||||
customCard.setAttribute("id", "custom-evil");
|
||||
}
|
||||
|
||||
let cardHeader = document.createElement("h1");
|
||||
cardHeader.innerText = "Add Custom Role";
|
||||
|
||||
162
static/setup.js
162
static/setup.js
@@ -21,12 +21,13 @@ const fullDeck = [];
|
||||
let gameSize = 0;
|
||||
let atLeastOnePlayer = false;
|
||||
|
||||
|
||||
// register event listeners on buttons
|
||||
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("role-view-changer-gallery").addEventListener("click", function() { toggleViewChanger(false) });
|
||||
document.getElementById("role-view-changer-list").addEventListener("click", function() { toggleViewChanger(true) });
|
||||
document.getElementById("role-btn").addEventListener("click", function() { displayModal("role-modal", undefined) });
|
||||
document.getElementById("edit-role-btn").addEventListener("click", function() { displayModal("edit-custom-roles-modal", undefined) });
|
||||
document.getElementById("custom-role-form").addEventListener("submit", function(e) {
|
||||
addCustomCardToRoles(e);
|
||||
});
|
||||
@@ -37,48 +38,106 @@ Array.from(document.getElementsByClassName("close")).forEach(function(element) {
|
||||
// render all of the available cards to the user
|
||||
window.onload = function() {
|
||||
readInUserCustomRoles();
|
||||
renderAvailableCards();
|
||||
renderAvailableCards(false);
|
||||
};
|
||||
|
||||
function renderAvailableCards() {
|
||||
function renderAvailableCards(isCondensed) {
|
||||
cards.sort(function(a, b) {
|
||||
return a.role.toUpperCase().localeCompare(b.role);
|
||||
});
|
||||
document.getElementById("card-select").innerHTML = "";
|
||||
document.getElementById("card-select-good").innerHTML = "";
|
||||
document.getElementById("card-select-evil").innerHTML = "";
|
||||
document.getElementById("roles").innerHTML = "";
|
||||
document.getElementById("custom-roles").innerHTML = "";
|
||||
|
||||
for (let i = 0; i < cards.length; i ++) {
|
||||
const card = CardManager.createCard(cards[i]);
|
||||
if (card.custom) {
|
||||
renderCustomRoleInModal(cards[i], i);
|
||||
}
|
||||
fullDeck.push(card);
|
||||
|
||||
document.getElementById("roles").appendChild(CardManager.constructModalRoleElement(card));
|
||||
document.getElementById("card-select").appendChild(CardManager.constructDeckBuilderElement(card, i));
|
||||
|
||||
// Add event listeners to the top and bottom halves of the card to change the quantity.
|
||||
let cardTop = document.getElementById("card-" + i).getElementsByClassName("card-top")[0];
|
||||
let cardQuantity = document.getElementById("card-" + i).getElementsByClassName("card-quantity")[0];
|
||||
let cardBottom = document.getElementById("card-" + i).getElementsByClassName("card-bottom")[0];
|
||||
cardTop.addEventListener("click", incrementCardQuantity, false);
|
||||
cardBottom.addEventListener("click", decrementCardQuantity, false);
|
||||
cardTop.card = card;
|
||||
cardTop.quantityEl = cardQuantity;
|
||||
cardBottom.card = card;
|
||||
cardBottom.quantityEl = cardQuantity;
|
||||
|
||||
cards[i].team === "good"
|
||||
? renderGoodRole(cards[i], i, isCondensed)
|
||||
: renderEvilRole(cards[i], i, isCondensed);
|
||||
}
|
||||
|
||||
if (document.getElementById("custom-roles").getElementsByClassName("custom-role-edit").length === 0) {
|
||||
document.getElementById("custom-roles").innerHTML = "<h2>You haven't added any custom cards.</h2>";
|
||||
}
|
||||
|
||||
let customCardElement = CardManager.constructCustomCardIndicator();
|
||||
document.getElementById("card-select").appendChild(customCardElement);
|
||||
customCardElement.addEventListener("click", function() {
|
||||
displayModal("custom-card-modal");
|
||||
let customCardGood = CardManager.constructCustomCardIndicator(isCondensed, "good");
|
||||
let customCardEvil = CardManager.constructCustomCardIndicator(isCondensed, "evil");
|
||||
document.getElementById("card-select-good").appendChild(customCardGood);
|
||||
document.getElementById("card-select-evil").appendChild(customCardEvil);
|
||||
customCardGood.addEventListener("click", function() {
|
||||
displayModal("custom-card-modal", "Good");
|
||||
});
|
||||
customCardEvil.addEventListener("click", function() {
|
||||
displayModal("custom-card-modal", "Evil");
|
||||
});
|
||||
}
|
||||
|
||||
function renderGoodRole(cardInfo, i, isCondensed) {
|
||||
const card = CardManager.createCard(cardInfo);
|
||||
if (card.custom) {
|
||||
renderCustomRoleInModal(card, i);
|
||||
}
|
||||
fullDeck.push(card);
|
||||
|
||||
document.getElementById("roles").appendChild(CardManager.constructModalRoleElement(card));
|
||||
if (isCondensed) {
|
||||
document.getElementById("card-select-good").appendChild(CardManager.constructCompactDeckBuilderElement(card, i));
|
||||
let cardLeft = document.getElementById("card-" + i).getElementsByClassName("compact-card-left")[0];
|
||||
let cardQuantity = document.getElementById("card-" + i).getElementsByClassName("card-quantity")[0];
|
||||
let cardRight = document.getElementById("card-" + i).getElementsByClassName("compact-card-right")[0];
|
||||
cardRight.addEventListener("click", function() { incrementCardQuantity(cardRight) }, true);
|
||||
cardLeft.addEventListener("click", function() { decrementCardQuantity(cardLeft) }, true);
|
||||
cardRight.card = card;
|
||||
cardRight.quantityEl = cardQuantity;
|
||||
cardLeft.card = card;
|
||||
cardLeft.quantityEl = cardQuantity;
|
||||
} else {
|
||||
document.getElementById("card-select-good").appendChild(CardManager.constructDeckBuilderElement(card, i));
|
||||
// Add event listeners to the top and bottom halves of the card to change the quantity.
|
||||
let cardTop = document.getElementById("card-" + i).getElementsByClassName("card-top")[0];
|
||||
let cardQuantity = document.getElementById("card-" + i).getElementsByClassName("card-quantity")[0];
|
||||
let cardBottom = document.getElementById("card-" + i).getElementsByClassName("card-bottom")[0];
|
||||
cardTop.addEventListener("click", function() { incrementCardQuantity(cardTop) }, false);
|
||||
cardBottom.addEventListener("click", function() { decrementCardQuantity(cardBottom) }, false);
|
||||
cardTop.card = card;
|
||||
cardTop.quantityEl = cardQuantity;
|
||||
cardBottom.card = card;
|
||||
cardBottom.quantityEl = cardQuantity;
|
||||
}
|
||||
}
|
||||
|
||||
function renderEvilRole(cardInfo, i, isCondensed) {
|
||||
const card = CardManager.createCard(cardInfo);
|
||||
if (card.custom) {
|
||||
renderCustomRoleInModal(card, i);
|
||||
}
|
||||
fullDeck.push(card);
|
||||
|
||||
document.getElementById("roles").appendChild(CardManager.constructModalRoleElement(card));
|
||||
if (isCondensed) {
|
||||
document.getElementById("card-select-evil").appendChild(CardManager.constructCompactDeckBuilderElement(card, i));
|
||||
let cardLeft = document.getElementById("card-" + i).getElementsByClassName("compact-card-left")[0];
|
||||
let cardQuantity = document.getElementById("card-" + i).getElementsByClassName("card-quantity")[0];
|
||||
let cardRight = document.getElementById("card-" + i).getElementsByClassName("compact-card-right")[0];
|
||||
cardRight.addEventListener("click", function() { incrementCardQuantity(cardRight) }, false);
|
||||
cardLeft.addEventListener("click", function() { decrementCardQuantity(cardLeft) }, false);
|
||||
cardRight.card = card;
|
||||
cardRight.quantityEl = cardQuantity;
|
||||
cardLeft.card = card;
|
||||
cardLeft.quantityEl = cardQuantity;
|
||||
} else {
|
||||
document.getElementById("card-select-evil").appendChild(CardManager.constructDeckBuilderElement(card, i));
|
||||
// Add event listeners to the top and bottom halves of the card to change the quantity.
|
||||
let cardTop = document.getElementById("card-" + i).getElementsByClassName("card-top")[0];
|
||||
let cardQuantity = document.getElementById("card-" + i).getElementsByClassName("card-quantity")[0];
|
||||
let cardBottom = document.getElementById("card-" + i).getElementsByClassName("card-bottom")[0];
|
||||
cardTop.addEventListener("click", function() { incrementCardQuantity(cardTop) }, false);
|
||||
cardBottom.addEventListener("click", function() { decrementCardQuantity(cardBottom) }, false);
|
||||
cardTop.card = card;
|
||||
cardTop.quantityEl = cardQuantity;
|
||||
cardBottom.card = card;
|
||||
cardBottom.quantityEl = cardQuantity;
|
||||
}
|
||||
}
|
||||
|
||||
function addCustomCardToRoles(e) {
|
||||
@@ -93,7 +152,7 @@ function addCustomCardToRoles(e) {
|
||||
saved: document.getElementById("custom-role-remember").checked
|
||||
};
|
||||
cards.push(newCard);
|
||||
renderAvailableCards();
|
||||
renderAvailableCards(document.getElementById("role-view-changer-list").classList.contains("selected"));
|
||||
|
||||
if (newCard.saved === true) {
|
||||
let existingRoles = localStorage.getItem("play-werewolf-custom-roles");
|
||||
@@ -148,7 +207,6 @@ function renderCustomRoleInModal(card, index) {
|
||||
let edit = document.createElement("img");
|
||||
let editForm = buildRoleEditForm(index);
|
||||
|
||||
// TODO: add edit functionality
|
||||
roleName.innerText = card.role;
|
||||
remove.setAttribute("src", "../assets/images/delete.svg");
|
||||
remove.setAttribute("title", "Delete");
|
||||
@@ -183,6 +241,18 @@ function toggleEditForm(event, index) {
|
||||
}
|
||||
}
|
||||
|
||||
function toggleViewChanger(isCondensed) {
|
||||
|
||||
if (isCondensed) {
|
||||
document.getElementById("role-view-changer-gallery").classList.remove("selected");
|
||||
document.getElementById("role-view-changer-list").classList.add("selected");
|
||||
} else {
|
||||
document.getElementById("role-view-changer-gallery").classList.add("selected");
|
||||
document.getElementById("role-view-changer-list").classList.remove("selected");
|
||||
}
|
||||
renderAvailableCards(isCondensed);
|
||||
}
|
||||
|
||||
function buildRoleEditForm(index) {
|
||||
let infoForm = document.createElement("div");
|
||||
infoForm.style.display = "none";
|
||||
@@ -230,7 +300,7 @@ function removeCustomRole(name) {
|
||||
localStorage.setItem("play-werewolf-custom-roles", JSON.stringify(userCustomRoles));
|
||||
}
|
||||
updateCustomRoleModal();
|
||||
renderAvailableCards();
|
||||
renderAvailableCards(document.getElementById("role-view-changer-list").classList.contains("selected"));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -245,7 +315,7 @@ function updateCustomRole(event, index) {
|
||||
|
||||
removeOrAddSavedRoleIfNeeded(cardToUpdate);
|
||||
toggleEditForm(event, index);
|
||||
renderAvailableCards();
|
||||
renderAvailableCards(document.getElementById("role-view-changer-list").classList.contains("selected"));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -273,18 +343,18 @@ function removeOrAddSavedRoleIfNeeded(card) {
|
||||
|
||||
|
||||
function incrementCardQuantity(e) {
|
||||
if(e.target.card.quantity < 25) {
|
||||
e.target.card.quantity += 1;
|
||||
if(e.card.quantity < 25) {
|
||||
e.card.quantity += 1;
|
||||
}
|
||||
e.target.quantityEl.innerHTML = e.target.card.quantity;
|
||||
e.quantityEl.innerHTML = e.card.quantity;
|
||||
updateGameSize();
|
||||
}
|
||||
|
||||
function decrementCardQuantity(e) {
|
||||
if(e.target.card.quantity > 0) {
|
||||
e.target.card.quantity -= 1;
|
||||
if(e.card.quantity > 0) {
|
||||
e.card.quantity -= 1;
|
||||
}
|
||||
e.target.quantityEl.innerHTML = e.target.card.quantity;
|
||||
e.quantityEl.innerHTML = e.card.quantity;
|
||||
updateGameSize();
|
||||
}
|
||||
|
||||
@@ -308,7 +378,15 @@ function resetCardQuantities() {
|
||||
});
|
||||
}
|
||||
|
||||
function displayModal(modalId) {
|
||||
function displayModal(modalId, teamForCustomRole) {
|
||||
if (teamForCustomRole === "Good") {
|
||||
document.getElementById("option-evil").removeAttribute("selected");
|
||||
document.getElementById("option-good").setAttribute("selected", "selected");
|
||||
}
|
||||
if (teamForCustomRole === "Evil") {
|
||||
document.getElementById("option-good").removeAttribute("selected");
|
||||
document.getElementById("option-evil").setAttribute("selected", "selected");
|
||||
}
|
||||
document.getElementById(modalId).classList.remove("hidden");
|
||||
document.getElementById("app-content").classList.add("hidden");
|
||||
}
|
||||
@@ -366,10 +444,8 @@ function createGame() {
|
||||
document.getElementById("some-error").innerText = "There are problems with your above setup.";
|
||||
if (!atLeastOnePlayer) {
|
||||
document.getElementById("game-size").classList.add("error");
|
||||
document.getElementById("size-error").innerText = "Add at least one card";
|
||||
} else {
|
||||
document.getElementById("game-size").classList.remove("error");
|
||||
document.getElementById("size-error").innerText = "";
|
||||
}
|
||||
document.getElementById("name").classList.add("error");
|
||||
document.getElementById("name-error").innerText = "Name is required.";
|
||||
|
||||
@@ -18,6 +18,10 @@
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#game-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
@@ -33,6 +37,22 @@
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.custom-role-edit {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.compact-card, .compact-card-header {
|
||||
width: 9em;
|
||||
}
|
||||
|
||||
#card-select-header #role-view-changer img {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
#role-view-changer div {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.card-header > p {
|
||||
right: 7px;
|
||||
top: 19px;
|
||||
@@ -136,11 +156,19 @@
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
#card-select-header #role-view-changer img {
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
.card-header > p {
|
||||
right: 17px;
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
#game-container #card-container {
|
||||
min-width: 25em;
|
||||
}
|
||||
@@ -158,6 +186,14 @@
|
||||
margin: 0.5em;
|
||||
}
|
||||
|
||||
.compact-card, .compact-card-header {
|
||||
width: 11em;
|
||||
}
|
||||
|
||||
.custom-role-edit {
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.disclaimer, .custom-card h1 {
|
||||
font-size: 18px;
|
||||
}
|
||||
@@ -288,8 +324,6 @@
|
||||
|
||||
html, body {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #bfb8b8;
|
||||
font-family: 'sitewide-sans-serif', sans-serif;
|
||||
background-color: #23282b !important;
|
||||
@@ -454,7 +488,6 @@ button {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
font-size: 19px;
|
||||
align-items: center;
|
||||
background-color: black;
|
||||
border-radius: 5px;
|
||||
@@ -499,7 +532,7 @@ button {
|
||||
filter: brightness(70%);
|
||||
}
|
||||
|
||||
.card {
|
||||
.card, .compact-card {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
@@ -511,6 +544,63 @@ button {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.compact-card {
|
||||
display: flex;
|
||||
height: max-content;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.compact-card h1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
margin: 0 10px 0 10px;
|
||||
}
|
||||
|
||||
.compact-card .card-role {
|
||||
color: #bfb8b8;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 8em;
|
||||
}
|
||||
|
||||
.compact-card-right p {
|
||||
font-size: 40px;
|
||||
margin: 0 10px 0 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.compact-card-left p {
|
||||
font-size: 40px;
|
||||
margin: 0 0 0 10px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.compact-card-left, .compact-card-right {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.compact-card .card-quantity {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.compact-card-header {
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
top: 0;
|
||||
right: 0;
|
||||
pointer-events: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card-werewolf {
|
||||
border: 1px solid red;
|
||||
}
|
||||
@@ -523,13 +613,14 @@ button {
|
||||
.custom-card div {
|
||||
font-size: 40px;
|
||||
color: whitesmoke;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.custom-card h1 {
|
||||
color: whitesmoke;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
.card:hover, .compact-card:hover {
|
||||
background-color: #55565c;
|
||||
}
|
||||
|
||||
@@ -615,12 +706,24 @@ button {
|
||||
}
|
||||
|
||||
#card-select {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
#card-select-good, #card-select-evil {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
-webkit-flex-wrap: wrap;
|
||||
margin-bottom: 3em;
|
||||
}
|
||||
|
||||
#card-select > h2:nth-child(1) {
|
||||
color: #4a6bff;
|
||||
}
|
||||
|
||||
#card-select > h2:nth-child(3) {
|
||||
color: #bd2a2a;
|
||||
}
|
||||
|
||||
|
||||
.app-btn-secondary {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
@@ -690,8 +793,8 @@ button {
|
||||
|
||||
#main-buttons button {
|
||||
width: 100%;
|
||||
padding: 1.2em;
|
||||
font-size: 1em;
|
||||
padding: 1em;
|
||||
font-size: 0.9em;
|
||||
box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.4);
|
||||
background-color: #992626;
|
||||
color: #bfb8b8;
|
||||
@@ -720,6 +823,36 @@ button {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#card-select-header #role-view-changer img {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
#role-view-changer div {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: max-content;
|
||||
margin: 0 15px 0 0;
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.selected {
|
||||
background: #494f52;
|
||||
}
|
||||
|
||||
#role-view-changer div:hover {
|
||||
cursor: pointer;
|
||||
background-color: #494f52;
|
||||
}
|
||||
|
||||
#role-view-changer {
|
||||
margin: 15px 0 0 0;
|
||||
}
|
||||
|
||||
#role-view-changer p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#card-select-header h3 {
|
||||
margin: 0;
|
||||
font-size: 1.2em;
|
||||
@@ -729,7 +862,7 @@ button {
|
||||
#create-game-container button {
|
||||
padding: 0.8em;
|
||||
height: 3em;
|
||||
width: fit-content;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
#edit-role-btn > img {
|
||||
@@ -848,7 +981,6 @@ textarea {
|
||||
color: gray;
|
||||
padding: 0.9em;
|
||||
border-radius: 5px;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.checkbox label::before{
|
||||
|
||||
@@ -38,13 +38,13 @@
|
||||
<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/>
|
||||
<input id="custom-role-name" type="text" autocomplete="off" required/>
|
||||
<label for="custom-role-desc">Description</label>
|
||||
<textarea rows="3" id="custom-role-desc" required></textarea>
|
||||
<label for="custom-role-team">Team</label>
|
||||
<select id="custom-role-team">
|
||||
<option value="good">Good</option>
|
||||
<option value="evil">Evil</option>
|
||||
<option id="option-good" value="good">Good</option>
|
||||
<option id="option-evil" value="evil">Evil</option>
|
||||
</select>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" id="custom-role-wolf">
|
||||
@@ -66,13 +66,13 @@
|
||||
<label>
|
||||
Your Name
|
||||
<span>
|
||||
<input id="name" type="text"/>
|
||||
<input id="name" type="text" autocomplete="off"/>
|
||||
<p id="name-error"></p>
|
||||
</span>
|
||||
</label>
|
||||
<label>
|
||||
Time (Minutes, Optional)
|
||||
<input id="time" type="number"/>
|
||||
<input id="time" type="number" autocomplete="off"/>
|
||||
</label>
|
||||
<div id="card-select-header">
|
||||
<span>
|
||||
@@ -90,11 +90,23 @@
|
||||
<div id="werewolf-key"></div>
|
||||
<div> = Werewolf role (counts for <a href="/faq">parity</a>)</div>
|
||||
</div>
|
||||
<p id="size-error"></p>
|
||||
</span>
|
||||
<span id="role-view-changer">
|
||||
<div id="role-view-changer-gallery" class="selected">
|
||||
<p>Gallery View</p>
|
||||
<img src="../assets/images/gallery.svg"/>
|
||||
</div>
|
||||
<div id="role-view-changer-list">
|
||||
<p>Condensed View</p>
|
||||
<img src="../assets/images/list.svg"/>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div id="card-select">
|
||||
|
||||
<h2>Good Roles</h2>
|
||||
<div id="card-select-good"></div>
|
||||
<h2>Evil Roles</h2>
|
||||
<div id="card-select-evil"></div>
|
||||
</div>
|
||||
<div id="game-start">
|
||||
<a href="/">
|
||||
|
||||
@@ -9,11 +9,9 @@
|
||||
</head>
|
||||
<body>
|
||||
<div id="landing-container">
|
||||
<a href="/">
|
||||
<div class="app-title">
|
||||
<img src="../assets/images/Wolf_Logo.gif" alt="Where Are the Wolves?" />
|
||||
</div>
|
||||
</a>
|
||||
<div id="main-buttons">
|
||||
<a href="/create">
|
||||
<button class="app-btn">Create Game</button>
|
||||
|
||||
@@ -16,14 +16,14 @@
|
||||
<label>
|
||||
Your Name
|
||||
<span>
|
||||
<input id="name" type="text"/>
|
||||
<input id="name" type="text" autocomplete="off"/>
|
||||
<p id="name-error"></p>
|
||||
</span>
|
||||
</label>
|
||||
<label>
|
||||
Access Code
|
||||
<span>
|
||||
<input id="code" type="text"/>
|
||||
<input id="code" type="text" autocomplete="off"/>
|
||||
<p id="join-error"></p>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
Reference in New Issue
Block a user