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;