added UI css

This commit is contained in:
bluesaxman 2020-05-20 11:11:45 -06:00
parent 49eedf8442
commit d95ad90560
3 changed files with 48 additions and 7 deletions

42
css.css
View File

@ -24,6 +24,34 @@ body {
width:100%;
}
#display {
display: flex;
justify-content: space-around;
align-items: stretch;
height: 80vh;
width: 100%;
}
#deck, #deckDisp {
display: flex;
justify-content: center;
align-items: center;
}
#deck {
width: 50%;
max-width: 50%;
}
#hand {
display: flex;
width: 50%;
max-width: 50%;
overflow: auto;
justify-content: left;
align-items: center;
}
.library {
background: rgba(200,200,200,1);
text-align:left;
@ -82,3 +110,17 @@ body {
.dialog_content {
padding: 5px;
}
.card {
height: 3in;
width: 2in;
display: inline-block;
border: 1px rgba(0,0,0,1) solid;
border-radius: 5px;
min-height: 3in;
min-width: 2in;
max-height:3in;
max-width:5in;
overflow: auto;
background: rgb(216, 206, 184);
}

View File

@ -5,7 +5,7 @@
<script src="https://labs.murkfall.net/bluesaxman/blue.js/raw/master/libs/bluecore.js"></script>
</head>
<body>
Welcome to Deckcard
<h1>Welcome to Deckcard<h1>
</body>
<script>
@ -15,7 +15,7 @@ window.hand = [];
function updateEvent() {
window.UI.deck.innerHTML = "";
window.UI.hand.innerHTML = "";
var theDeck = elementPlace("#deck","deckDisp",null,"div");
var theDeck = elementPlace("#deck","deckDisp","card","div");
theDeck.innerHTML = "<div>"+window.deck.length+"</div>";
window.hand.forEach(function (card) {
var currentCard = elementPlace("#hand",null,"card","li");

View File

@ -13,10 +13,9 @@
"Q",
"K"],
"shape":[
"round",
"sharp"],
"color":[
"red",
"black"
"♥",
"♣",
"♠",
"♦"
]}