Git_Mirror/Werewolf
1
0
Fork 0
mirror of https://github.com/AlecM33/Werewolf.git synced 2025-12-26 15:57:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add images to cards in game setup

Browse Source
This commit is contained in:
Maier
2020-01-08 13:55:01 -05:00
parent 2e1bc33aec
commit 3d73891f12
2 changed files with 31 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
static/setup.js
View File

@@ -72,13 +72,18 @@ window.onload = function() {
cardContainer.setAttribute("id", "card-" + i); cardContainer.setAttribute("id", "card-" + i);
cardContainer.innerHTML = cardContainer.innerHTML =
"<div class='card-top'>" + "<div class='card-top'>" +
"<p class='card-role'>" + newCard.role + "</p>" + "<div class='card-header'>" +
"<p>+</p>" + "<div>" +
"<p class='card-role'>" + newCard.role + "</p>" +
"<div class='" + quantityClass + "'>" + newCard.quantity + "</div>" +
"</div>" +
"<p>+</p>" +
"</div>" +
"</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'>" + "<div class='card-bottom'>" +
"<p>-</p>" + "<p>-</p>" +
"</div>"; "</div>"
document.getElementById("card-select").appendChild(cardContainer); document.getElementById("card-select").appendChild(cardContainer);
let cardTop = document.getElementById("card-" + i).getElementsByClassName("card-top")[0]; let cardTop = document.getElementById("card-" + i).getElementsByClassName("card-top")[0];
let cardQuantity = document.getElementById("card-" + i).getElementsByClassName("card-quantity")[0]; let cardQuantity = document.getElementById("card-" + i).getElementsByClassName("card-quantity")[0];

33
static/styles.css
View File

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