Styling tweaks, import cards into setup

create_game.html

@@ -16,12 +16,16 @@
                         <input type="text"/>
                     </label>
                 </form>
+                <h3>Add cards to the deck.</h3>
+                <div id="card-select">
+
+                </div>
                 <a href="/">
                     <button class="app-btn-secondary">Cancel</button>
                 </a>
                 <button class="app-btn" onclick="generateAccessCode()">Create</button>
             </div>
         </div>
-        <script src="/static/setup.js"></script>
+        <script type="module" src="/static/setup.js"></script>
     </body>
 </html>

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."
     }
   }
-}
+};

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

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;