bluesaxman/deckard-and-company
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more UI polishing

Browse Source
This commit is contained in:
bluesaxman 2020-09-29 21:23:47 +00:00
parent 3bf9fa08db
commit 2ae20af655
2 changed files with 59 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
UI/css.css
View File

@ -78,6 +78,16 @@ body {
align-items: center; align-items: center;
} }
.object_name {
position: absolute;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.8);
color: rgba(255,255,255,1);
border-radius: 5px 0;
padding: 2px;
}
.library { .library {
background: rgba(200,200,200,1); background: rgba(200,200,200,1);
text-align:left; text-align:left;
@ -152,9 +162,16 @@ body {
} }
.deck, .pool, .hand { .deck, .pool, .hand {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
position: relative; position: relative;
margin-top:5px; margin-top:5px;
min-height:10vh; min-height:10vh;
max-width:90vw;
border-radius: 5px;
border: 1px solid rgba(0,0,0,1);
} }
.username { .username {
@ -163,9 +180,20 @@ body {
.selected { .selected {
background-color:rgba(0,150,0,0.5); background-color:rgba(0,150,0,0.5);
border-color:rgba(250,230,0,1);
} }
.deck_button, .hand_button, .pool_button, .card_button { .deck_button, .hand_button, .pool_button, .card_button {
border-radius: unset;
margin:0;
}
.delete {
border-radius: 0 5px 0 0 ;
}
.delete:hover {
background-color: rgba(255,0,0,1);
} }
.controls { .controls {
@ -173,3 +201,23 @@ body {
top:0; top:0;
right:0; right:0;
} }
.content {
display: flex;
justify-content: start;
align-items: center;
overflow-y: hidden;
overflow-x: auto;
white-space: nowrap;
height: 4in;
max-width: 100%;
}
.add_button {
margin-top: 5px;
text-align: center;
}
.deck_size {
font-size:2in;
}

15
UI/index.html
View File

@ -1,6 +1,9 @@
<html> <html>
<head> <head>
<title>Deckard + Company</title> <title>Deckard + Company</title>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<link href="css.css" rel="stylesheet"> <link href="css.css" rel="stylesheet">
<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>
@ -30,9 +33,10 @@ function updateEvent() {
myKeys.forEach(function (deckID) { myKeys.forEach(function (deckID) {
var deck = window.gameState.decks[deckID]; var deck = window.gameState.decks[deckID];
window.UI.display[deckID] = elementPlace("#decks","Deck_"+deck.name,"deck"+(deck.name == window.gameState.active.deck ? " selected" : ""),"li"); window.UI.display[deckID] = elementPlace("#decks","Deck_"+deck.name,"deck"+(deck.name == window.gameState.active.deck ? " selected" : ""),"li");
window.UI.display[deckID].innerHTML = '<div class="object_name">'+deck.name+"</div>";
window.UI.display[deckID].controls = elementPlace("#Deck_"+deck.name,"Deck_controls_"+deck.name,"controls","div"); window.UI.display[deckID].controls = elementPlace("#Deck_"+deck.name,"Deck_controls_"+deck.name,"controls","div");
window.UI.display[deckID].content = elementPlace("#Deck_"+deck.name,null,"content","div"); window.UI.display[deckID].content = elementPlace("#Deck_"+deck.name,null,"content","div");
window.UI.display[deckID].content.innerHTML = '<div class="object_name"'+deck.name+':</div><div class="deck_size">'+deck.size+'</div>'; window.UI.display[deckID].content.innerHTML = '<div class="deck_size">'+deck.size+'</div>';
buttonAdd("#Deck_controls_"+deck.name,null,"Add Cards", function () { buttonAdd("#Deck_controls_"+deck.name,null,"Add Cards", function () {
popupDialog("deckLoader","Select DDF (Deck Definition File)",true,inputDialog,{"inputType":"file"},function (f) { popupDialog("deckLoader","Select DDF (Deck Definition File)",true,inputDialog,{"inputType":"file"},function (f) {
var myFile = new FileReader(); var myFile = new FileReader();
@ -81,15 +85,16 @@ function updateEvent() {
myHands.forEach(function (handID) { myHands.forEach(function (handID) {
var hand = window.gameState.hands[handID]; var hand = window.gameState.hands[handID];
window.UI.display[handID] = elementPlace("#hands","Hand_"+hand.name,"hand"+(hand.name == window.gameState.active.hand ? " selected" : ""),"li"); window.UI.display[handID] = elementPlace("#hands","Hand_"+hand.name,"hand"+(hand.name == window.gameState.active.hand ? " selected" : ""),"li");
window.UI.display[handID].innerHTML = "<div>"+hand.name+"</div>"; window.UI.display[handID].innerHTML = '<div class="object_name">'+hand.name+"</div>";
window.UI.display[handID].controls = elementPlace("#Hand_"+hand.name,"Hand_controls_"+hand.name,"controls","div"); window.UI.display[handID].controls = elementPlace("#Hand_"+hand.name,"Hand_controls_"+hand.name,"controls","div");
window.UI.display[handID].content = elementPlace("#Hand_"+hand.name,"Hand_content_"+hand.name,"content","div");
buttonAdd("#Hand_controls_"+hand.name,null,"Muligan",function () { buttonAdd("#Hand_controls_"+hand.name,null,"Muligan",function () {
window.gameSession.send('{"action":"muligan","hand":"'+handID+'","deck":"'+window.gameState.active.deck+'"}'); window.gameSession.send('{"action":"muligan","hand":"'+handID+'","deck":"'+window.gameState.active.deck+'"}');
}, "hand_button muligan", "div"); }, "hand_button muligan", "div");
buttonAdd("#Hand_controls_"+hand.name,null,"X",function () { buttonAdd("#Hand_controls_"+hand.name,null,"X",function () {
window.gameSession.send('{"action":"del","type":"hand","id":"'+handID+'"}'); window.gameSession.send('{"action":"del","type":"hand","id":"'+handID+'"}');
}, "hand_button delete", "div"); }, "hand_button delete", "div");
window.UI.display[handID].cards = elementPlace("#Hand_"+hand.name,hand.name+"_cards",null,"ol"); window.UI.display[handID].cards = elementPlace("#Hand_content_"+hand.name,hand.name+"_cards",null,"ol");
hand.cards.forEach(function (card,index) { hand.cards.forEach(function (card,index) {
window.UI.display[handID].cards[index] = elementPlace("#"+hand.name+"_cards","card"+hand.name+index,"card","li"); window.UI.display[handID].cards[index] = elementPlace("#"+hand.name+"_cards","card"+hand.name+index,"card","li");
window.UI.display[handID].cards[index].style.position = "relative"; window.UI.display[handID].cards[index].style.position = "relative";
@ -117,8 +122,10 @@ function updateEvent() {
myPools.forEach(function (poolID) { myPools.forEach(function (poolID) {
var pool = window.gameState.pools[poolID]; var pool = window.gameState.pools[poolID];
window.UI.display[poolID] = elementPlace("#pools","Pool_"+pool.name,"pool"+(pool.name == window.gameState.active.pool ? " selected" : ""),"li"); window.UI.display[poolID] = elementPlace("#pools","Pool_"+pool.name,"pool"+(pool.name == window.gameState.active.pool ? " selected" : ""),"li");
window.UI.display[poolID].innerHTML = pool.name+":"+pool.top; window.UI.display[poolID].innerHTML = '<div class="object_name">'+pool.name+"</div>";
window.UI.display[poolID].controls = elementPlace("#Pool_"+pool.name,"Pool_controls_"+pool.name, "controls","div"); window.UI.display[poolID].controls = elementPlace("#Pool_"+pool.name,"Pool_controls_"+pool.name, "controls","div");
window.UI.display[poolID].content = elementPlace("#Pool_"+pool.name,"Pool_content_"+pool.name, "content","div");
window.UI.display[poolID].content.innerHTML += '<div class="card">'+pool.top+"</div>";
buttonAdd("#Pool_controls_"+pool.name,null,"X",function () { buttonAdd("#Pool_controls_"+pool.name,null,"X",function () {
window.gameSession.send('{"action":"del","type":"pool","id":"'+poolID+'","deck":"'+window.gameState.active.deck+'"}'); window.gameSession.send('{"action":"del","type":"pool","id":"'+poolID+'","deck":"'+window.gameState.active.deck+'"}');
},"pool_button delete","div"); },"pool_button delete","div");