diff --git a/create_game.html b/create_game.html index 86a6f9b..805af0e 100644 --- a/create_game.html +++ b/create_game.html @@ -16,12 +16,20 @@ +

Add cards to the deck.

+
+ +

0 Players

+
+
+ +
- + - + diff --git a/static/cards.js b/static/cards.js new file mode 100644 index 0000000..3d59298 --- /dev/null +++ b/static/cards.js @@ -0,0 +1,32 @@ +export const cards = [ + { + role: "Villager", + team: "village", + description: "During the day, find the wolves and kill them.", + powerRole: false + }, + { + role: "Seer", + team: "village", + description: "During the night, choose one person. The moderator will tell you whether that player is evil.", + powerRole: true + }, + { + role: "Hunter", + team: "village", + description: "If you are alive with a wolf at the end of the game, the village wins.", + powerRole: true + }, + { + role: "Werewolf", + team: "wolf", + description: "During the night, choose a villager to kill. Don't get killed.", + powerRole: false + }, + { + role: "Minion", + team: "wolf", + description: "You are villager, but you know who the wolves are - and want them to win.", + powerRole: true + } +]; diff --git a/static/cards.json b/static/cards.json deleted file mode 100644 index c708e83..0000000 --- a/static/cards.json +++ /dev/null @@ -1,29 +0,0 @@ -{ - "cards": { - "1": { - "role": "Villager", - "team": "village", - "description": "During the day, find the wolves and kill them." - }, - "2": { - "role": "Seer", - "team": "village", - "description": "During the night, choose one person. The moderator will tell you whether that player is evil." - }, - "3": { - "role": "Hunter", - "team": "village", - "description": "If you are alive with a wolf at the end of the game, the village wins." - }, - "4": { - "role": "Werewolf", - "team": "wolf", - "description": "During the night, choose a villager to kill. Don't get killed." - }, - "5": { - "role": "Minion", - "team": "wolf", - "description": "You are villager, but you know who the wolves are - and want them to win." - } - } -} diff --git a/static/setup.js b/static/setup.js index 0dfd11c..767e9cc 100644 --- a/static/setup.js +++ b/static/setup.js @@ -1,11 +1,65 @@ +import {cards} from './cards.js' + +// important declarations class Card { - constructor(name, team, description) { - this.name = name; + constructor(role, team, description, powerRole) { + this.role = role; this.team = team; this.description = description; + this.quantity = 0; + this.powerRole = powerRole; } } +var deck = []; + + +// register event listeners on buttons +document.getElementById("reset-btn").addEventListener("click", resetCardQuantities); +document.getElementById("create-btn").addEventListener("click", generateAccessCode); + +// render all of the available cards to the user +window.onload = function() { + for (const card of cards) { + const newCard = new Card(card.role, card.team, card.description, card.powerRole); + const cardContainer = document.createElement("div"); + + deck.push(newCard); + + cardContainer.setAttribute("class", "card"); + cardContainer.innerHTML = "

" + newCard.role + "


" + newCard.quantity + "

"; + + cardContainer.addEventListener("click", function() { + if(!newCard.powerRole || (newCard.powerRole && newCard.quantity === 0)) { + newCard.quantity += 1; + } + console.log(newCard); + cardContainer.getElementsByClassName("card-quantity")[0].innerHTML = newCard.quantity; + updateGameSize(); + }); + + document.getElementById("card-select").appendChild(cardContainer) + } +}; + +function updateGameSize() { + let totalQuantity = 0; + for (let card of deck) { + totalQuantity += card.quantity; + } + document.getElementById("game-size").innerText = totalQuantity + " Players"; +} + +function resetCardQuantities() { + for (let card of deck) { + card.quantity = 0; + } + updateGameSize(); + Array.prototype.filter.call(document.getElementsByClassName("card-quantity"), function(quantities){ + return quantities.innerHTML = 0; + }); +} + function generateAccessCode() { let code = ""; let charPool = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; diff --git a/static/styles.css b/static/styles.css index d04c689..f866b31 100644 --- a/static/styles.css +++ b/static/styles.css @@ -1,3 +1,23 @@ +@media(max-width: 750px) { + .app-header { + font-size: 35px; + } + + h3 { + font-size: 20px; + } +} + +@media(min-width: 750.01px) { + .app-header { + font-size: 50px; + } + + h3 { + font-size: 30px; + } +} + body { margin: 0 auto; width: 100vw; @@ -13,9 +33,11 @@ body { .app-header { color: #7d0b0b; letter-spacing: 0.1em; - font-size: 50px; } +h3 { + color: gray; +} .app-btn { background-color: #7d0b0b; color: white; @@ -25,6 +47,43 @@ body { margin-bottom: 1em; } +.card { + text-align: center; + height: 8em; + cursor: pointer; + width: 4.5em; + color: gray; + border: 1px solid #7d0b0b; + box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); + border-radius: 3px; + padding: 1em; + margin: 0.5em; + user-select: none; +} + +.card:hover { + background-color: rgba(0, 0, 0, 0.05); +} + +.card-quantity { + font-weight: bold; + color: #7d0b0b; + font-size: 2.5em; + margin: 0; +} + +.card-role { + color: gray; + font-size: 1.1em; + margin: 0; +} + +#card-select { + display: flex; + flex-wrap: wrap; + margin-bottom: 3em; +} + .app-btn-secondary { background-color: transparent; color: #7d0b0b; @@ -51,6 +110,27 @@ body { justify-content: center; } +#card-select-header { + display: flex; + align-items: center; + margin-bottom: 1em; +} + +#card-select-header h3 { + margin: 0; + font-size: 1.2em; + color: #7d0b0b; +} + +#reset-btn { + background-color: transparent; + color: #7d0b0b; + border: 1px solid #7d0b0b; + width: 8em; + padding: 0.5em; + margin: 0 1em 0 0; +} + #create-game-container { display: inline-block; text-align: left;