added UI css
This commit is contained in:
parent
49eedf8442
commit
d95ad90560
42
css.css
42
css.css
@ -24,6 +24,34 @@ body {
|
|||||||
width:100%;
|
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 {
|
.library {
|
||||||
background: rgba(200,200,200,1);
|
background: rgba(200,200,200,1);
|
||||||
text-align:left;
|
text-align:left;
|
||||||
@ -82,3 +110,17 @@ body {
|
|||||||
.dialog_content {
|
.dialog_content {
|
||||||
padding: 5px;
|
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);
|
||||||
|
}
|
||||||
|
@ -5,7 +5,7 @@
|
|||||||
<script src="https://labs.murkfall.net/bluesaxman/blue.js/raw/master/libs/bluecore.js"></script>
|
<script src="https://labs.murkfall.net/bluesaxman/blue.js/raw/master/libs/bluecore.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
Welcome to Deckcard
|
<h1>Welcome to Deckcard<h1>
|
||||||
</body>
|
</body>
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
@ -15,7 +15,7 @@ window.hand = [];
|
|||||||
function updateEvent() {
|
function updateEvent() {
|
||||||
window.UI.deck.innerHTML = "";
|
window.UI.deck.innerHTML = "";
|
||||||
window.UI.hand.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>";
|
theDeck.innerHTML = "<div>"+window.deck.length+"</div>";
|
||||||
window.hand.forEach(function (card) {
|
window.hand.forEach(function (card) {
|
||||||
var currentCard = elementPlace("#hand",null,"card","li");
|
var currentCard = elementPlace("#hand",null,"card","li");
|
||||||
|
@ -13,10 +13,9 @@
|
|||||||
"Q",
|
"Q",
|
||||||
"K"],
|
"K"],
|
||||||
"shape":[
|
"shape":[
|
||||||
"round",
|
"♥",
|
||||||
"sharp"],
|
"♣",
|
||||||
"color":[
|
"♠",
|
||||||
"red",
|
"♦"
|
||||||
"black"
|
|
||||||
]}
|
]}
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user