Add images to cards in game setup

static/setup.js

@@ -72,13 +72,18 @@ window.onload = function() {
         cardContainer.setAttribute("id", "card-" + i);
         cardContainer.innerHTML = 
             "<div class='card-top'>" +
-                "<p class='card-role'>" + newCard.role + "</p>" +
-                "<p>+</p>" +
+                "<div class='card-header'>" +
+                    "<div>" +
+                        "<p class='card-role'>" + newCard.role + "</p>" +
+                        "<div class='" + quantityClass + "'>" + newCard.quantity + "</div>" +
+                    "</div>" +
+                    "<p>+</p>" +
+                "</div>" +
             "</div>" +
-            "<div class='" + quantityClass + "'>" + newCard.quantity + "</div>" +
+            "<img class='card-image' src='../assets/images/roles-small/" + newCard.role + ".png' alt='" + newCard.role + "'/>" + 
             "<div class='card-bottom'>" +
                 "<p>-</p>" +
-            "</div>";
+            "</div>"
         document.getElementById("card-select").appendChild(cardContainer);
         let cardTop = document.getElementById("card-" + i).getElementsByClassName("card-top")[0];
         let cardQuantity = document.getElementById("card-" + i).getElementsByClassName("card-quantity")[0];

static/styles.css

@@ -371,10 +371,10 @@ button {
 
 .card-top {
     display: flex;
+    flex-direction: column;
     align-items: flex-start;
     justify-content: space-between;
     height: 50%;
-    border-bottom: 1px solid gray;
 }
 
 .card-bottom {
@@ -382,13 +382,14 @@ button {
     display: -webkit-flex;
     justify-content: flex-end;
     height: 50%;
-    align-items: flex-start;
+    align-items: flex-end;
 }
 
 .card-top p {
     margin: 0;
     font-size: 2.5em;
     pointer-events: none;
+    line-height: 1;
 }
 
 .card-top p.card-role {
@@ -396,26 +397,36 @@ button {
     pointer-events: none;
 }
 
+.card-header {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: flex-start;
+    pointer-events: none;
+}
+
 .card-bottom p {
     pointer-events: none;
+    line-height: 1;
     font-size: 3em;
     margin: 0;
 }
 
+.card-image {
+    position: absolute;
+    pointer-events: none;
+    top: 21%;
+    left: 14%;
+}
+
 .card-quantity {
     pointer-events: none;
     font-weight: bold;
+    text-align: left;
     color: #7d0b0b;
-    font-size: 2.5em;
-    margin: 0;
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 32%;
+    font-size: 1.5em;
+    margin: 0 0 0 0.2em;
     width: 1.5em;
-    background-color: white;
-    margin-left: auto;
-    margin-right: auto;
 }
 
 .card:hover .card-quantity, .card:active .card-quantity {