Added art for villager and werwolf cards, updated footer

static/game.js

@@ -1,6 +1,7 @@
 import {utility} from './util.js'
 
 const socket = io();
+const finishedArtArray = ["Villager", "Werewolf"];
 let clock;
 let currentGame = null;
 let cardFlippedOver = false;
@@ -129,6 +130,9 @@ function renderGame() {
 
 function renderPlayerCard(player) {
     const card = player.card;
+    const cardArt = finishedArtArray.includes(card.role) ?
+        "<img alt='" + card.role + "' src='../assets/images/roles/" + card.role + ".png' />"
+        : "<div class='placeholder'></div>";
     const cardClass = player.card.team === "good" ? "game-card-inner village" : "game-card-inner wolf";
     const playerCard = document.createElement("div");
     playerCard.setAttribute("id", "game-card");
@@ -137,6 +141,7 @@ function renderPlayerCard(player) {
         "<div class='" + cardClass + "'>" +
             "<div class='game-card-front'>" +
                 "<h2>" + card.role + "</h2>" +
+                cardArt +
                 "<p>" + card.description + "</p>" +
                 "<p id='flip-instruction'>Click to flip</p>" +
             "</div>" +

static/styles.css

@@ -191,20 +191,32 @@ html, body {
 #footer {
     position: absolute;
     bottom: 0;
+    margin: 0 0 1.5em 0;
     width: 100%;
     height: 5rem;
+    font-size: 0.75em;
     text-align: center;
     align-items: center;
     display: flex;
+    flex-direction: column;
     justify-content: center;
 }
 
+#footer div {
+    display: flex;
+    align-items: center;
+}
+
+#footer p {
+    margin: 0 0 0 1em;
+    color: gray;
+}
+
 #footer a {
-    font-size: 0.9em;
     color: #bd2a2a;
     text-decoration: #bd2a2a;
     cursor: pointer;
-    margin-left: 1em;
+    margin: 0 0 0 1em;
 }
 
 #footer a:hover {
@@ -412,7 +424,11 @@ button {
 #create-game-container, #join-game-container {
     display: inline-block;
     text-align: left;
-    margin: 3em 1em;
+    margin: 3em 0.5em;
+}
+
+#create-game-container button {
+    margin-right: 1em;
 }
 
 #game-size {
@@ -570,6 +586,15 @@ label {
     transform-style: preserve-3d;
 }
 
+#game-card img {
+    width: 160px;
+}
+
+.placeholder {
+    width: 160px;
+    height: 160px;
+}
+
 .village h2 {
     color: #171469;
 }
@@ -590,12 +615,14 @@ label {
 }
 
 #game-card h2 {
-    font-size: 2em;
+    font-size: 1.7em;
     font-family: 'diavlo', sans-serif;
+    margin: 0.3em;
 }
 
 #game-card p {
     padding: 0.5em;
+    font-size: 0.7em;
 }
 
 .game-container {
@@ -630,6 +657,12 @@ label {
     transform: rotateY(180deg);
 }
 
+.game-card-front p:first-of-type {
+    margin: 0.7em;
+    border: 1px solid gray;
+    border-radius: 3px;
+}
+
 .killed-btn {
     border-radius: 5px;
     width: 13em;
@@ -652,6 +685,7 @@ label {
 
 #flip-instruction {
     color: gray;
+    margin: 0;
 }
 
 #game-header {

views/index.html

@@ -27,8 +27,14 @@
             </a>
         </div>
         <footer id="footer">
-            <img src="../assets/images/vanilla_js.png">
-            <a href="https://github.com/AlecM33/Werewolf">Github</a>
+            <div>
+                <img src="../assets/images/vanilla_js.png">
+                <p>Created by Alec M.</p>
+                <a href="https://github.com/AlecM33/Werewolf">Github</a>
+            </div>
+            <div>
+                <p>Werewolf created by Andrew Plotkin</p>
+            </div>
         </footer>
     </body>
 </html>