From 469009feaa3382fd4bae5b8d0911a0bf1bcc0dd7 Mon Sep 17 00:00:00 2001 From: Alec Maier Date: Thu, 29 Aug 2019 22:41:12 -0400 Subject: [PATCH 1/2] Styling tweaks, import cards into setup --- create_game.html | 6 +++++- static/{cards.json => cards.js} | 4 ++-- static/setup.js | 8 ++++++++ static/styles.css | 24 +++++++++++++++++++++++- 4 files changed, 38 insertions(+), 4 deletions(-) rename static/{cards.json => cards.js} (96%) diff --git a/create_game.html b/create_game.html index 86a6f9b..e0aa669 100644 --- a/create_game.html +++ b/create_game.html @@ -16,12 +16,16 @@ +

Add cards to the deck.

+
+ +
- + diff --git a/static/cards.json b/static/cards.js similarity index 96% rename from static/cards.json rename to static/cards.js index c708e83..a19f03b 100644 --- a/static/cards.json +++ b/static/cards.js @@ -1,4 +1,4 @@ -{ +export const cards = { "cards": { "1": { "role": "Villager", @@ -26,4 +26,4 @@ "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..0123ade 100644 --- a/static/setup.js +++ b/static/setup.js @@ -1,3 +1,5 @@ +import {cards} from './cards.js' + class Card { constructor(name, team, description) { this.name = name; @@ -6,6 +8,12 @@ class Card { } } +console.log(cards); + +document.getElementById("card-select").onload = function() { + let jsonCards = JSON.parse('') +} + function generateAccessCode() { let code = ""; let charPool = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; diff --git a/static/styles.css b/static/styles.css index d04c689..6171b76 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; From b141e33919b75bcf22a24bbdfdad1221e04c4dff Mon Sep 17 00:00:00 2001 From: Alec Maier Date: Thu, 29 Aug 2019 23:53:19 -0400 Subject: [PATCH 2/2] Clicking cards to add them to game deck, and increment player number --- create_game.html | 6 ++++- static/cards.js | 51 +++++++++++++++++++++-------------------- static/setup.js | 56 +++++++++++++++++++++++++++++++++++++++++---- static/styles.css | 58 +++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 141 insertions(+), 30 deletions(-) diff --git a/create_game.html b/create_game.html index e0aa669..805af0e 100644 --- a/create_game.html +++ b/create_game.html @@ -17,13 +17,17 @@

Add cards to the deck.

+
+ +

0 Players

+
- + diff --git a/static/cards.js b/static/cards.js index a19f03b..3d59298 100644 --- a/static/cards.js +++ b/static/cards.js @@ -1,29 +1,32 @@ -export const cards = { - "cards": { - "1": { - "role": "Villager", - "team": "village", - "description": "During the day, find the wolves and kill them." +export const cards = [ + { + role: "Villager", + team: "village", + description: "During the day, find the wolves and kill them.", + powerRole: false }, - "2": { - "role": "Seer", - "team": "village", - "description": "During the night, choose one person. The moderator will tell you whether that player is evil." + { + role: "Seer", + team: "village", + description: "During the night, choose one person. The moderator will tell you whether that player is evil.", + powerRole: true }, - "3": { - "role": "Hunter", - "team": "village", - "description": "If you are alive with a wolf at the end of the game, the village wins." + { + role: "Hunter", + team: "village", + description: "If you are alive with a wolf at the end of the game, the village wins.", + powerRole: true }, - "4": { - "role": "Werewolf", - "team": "wolf", - "description": "During the night, choose a villager to kill. Don't get killed." + { + role: "Werewolf", + team: "wolf", + description: "During the night, choose a villager to kill. Don't get killed.", + powerRole: false }, - "5": { - "role": "Minion", - "team": "wolf", - "description": "You are villager, but you know who the wolves are - and want them to win." + { + 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/setup.js b/static/setup.js index 0123ade..767e9cc 100644 --- a/static/setup.js +++ b/static/setup.js @@ -1,17 +1,63 @@ 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; } } -console.log(cards); +var deck = []; -document.getElementById("card-select").onload = function() { - let jsonCards = JSON.parse('') + +// 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() { diff --git a/static/styles.css b/static/styles.css index 6171b76..f866b31 100644 --- a/static/styles.css +++ b/static/styles.css @@ -47,6 +47,43 @@ h3 { 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; @@ -73,6 +110,27 @@ h3 { 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;