diff --git a/UI/css.css b/UI/css.css
index 4deb599..442565e 100644
--- a/UI/css.css
+++ b/UI/css.css
@@ -61,10 +61,12 @@ body {
display: flex;
flex-direction: column;
justify-content: start;
- align-items: center;
+ align-items: stretch;
list-style: none;
width: 100%;
height: auto;
+ padding-left: 5vw;
+ padding-right: 5vw;
}
#hand {
@@ -135,7 +137,7 @@ body {
padding: 5px;
}
-.deck, .pool, .card {
+.card {
height: 3in;
width: 2in;
display: inline-block;
@@ -149,8 +151,10 @@ body {
background: rgb(216, 206, 184);
}
-.hand {
- margin-top:5px
+.deck, .pool, .hand {
+ position: relative;
+ margin-top:5px;
+ min-height:10vh;
}
.username {
@@ -158,5 +162,14 @@ body {
}
.selected {
- background-color:rgba(255,0,0,0.5);
+ background-color:rgba(0,150,0,0.5);
+}
+
+.deck_button, .hand_button, .pool_button, .card_button {
+}
+
+.controls {
+ position:absolute;
+ top:0;
+ right:0;
}
diff --git a/UI/index.html b/UI/index.html
index a5adfd7..36161f4 100644
--- a/UI/index.html
+++ b/UI/index.html
@@ -30,8 +30,10 @@ function updateEvent() {
myKeys.forEach(function (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].innerText = deck.name+":"+deck.size;
- buttonAdd("#Deck_"+deck.name,null,"Add Cards", function () {
+ 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.innerHTML = '
'+deck.size+'
';
+ buttonAdd("#Deck_controls_"+deck.name,null,"Add Cards", function () {
popupDialog("deckLoader","Select DDF (Deck Definition File)",true,inputDialog,{"inputType":"file"},function (f) {
var myFile = new FileReader();
myFile.onload = function (file) {
@@ -44,13 +46,13 @@ function updateEvent() {
myFile.readAsText(f[0]);
});
},"deck_button add_cards","div");
- buttonAdd("#Deck_"+deck.name,null,"Shuffle", function () {
+ buttonAdd("#Deck_controls_"+deck.name,null,"Shuffle", function () {
window.gameSession.send('{"action":"shuffle", "deck":"'+deckID+'"}');
}, "deck_button shuffle","div");
- buttonAdd("#Deck_"+deck.name,null,"Draw", function () {
+ buttonAdd("#Deck_controls_"+deck.name,null,"Draw", function () {
window.gameSession.send('{"action":"draw","deck":"'+deckID+'","hand":"'+window.gameState.active.hand+'"}'); // Will need to be updated when I figure out selection
}, "deck_button draw","div");
- buttonAdd("#Deck_"+deck.name,null,"X", function () {
+ buttonAdd("#Deck_controls_"+deck.name,null,"X", function () {
window.gameSession.send('{"action":"del","type":"deck","id":"'+deckID+'"}');
}, "deck_button delete", "div");
window.UI.display[deckID].onclick = function () {
@@ -79,8 +81,8 @@ function updateEvent() {
myHands.forEach(function (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].innerHTML = "
"+hand.name+"
";
window.UI.display[handID].controls = elementPlace("#Hand_"+hand.name,"Hand_controls_"+hand.name,"controls","div");
- window.UI.display[handID].controls.innerHTML = "
"+hand.name+"
";
buttonAdd("#Hand_controls_"+hand.name,null,"Muligan",function () {
window.gameSession.send('{"action":"muligan","hand":"'+handID+'","deck":"'+window.gameState.active.deck+'"}');
}, "hand_button muligan", "div");
@@ -89,8 +91,10 @@ function updateEvent() {
}, "hand_button delete", "div");
window.UI.display[handID].cards = elementPlace("#Hand_"+hand.name,hand.name+"_cards",null,"ol");
hand.cards.forEach(function (card,index) {
- window.UI.display[handID].cards[index] = elementPlace("#"+hand.name+"_cards",null,"card","li");
- window.UI.display[handID].cards[index].innerHTML = card+'
';
+ 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].innerHTML = card;
+ window.UI.display[handID].cards[index].controls = elementPlace("#card"+hand.name+index,"card"+hand.name+index+"_controls","controls","div");
buttonAdd("#card"+handID+index+"_controls",null,"Play Card", function () {
window.gameSession.send('{"action":"play","hand":"'+handID+'","cardID":"'+index+'","pool":"'+window.gameState.active.pool+'"}');
}, "card_button play", "div");
@@ -114,7 +118,8 @@ function updateEvent() {
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].innerHTML = pool.name+":"+pool.top;
- buttonAdd("#Pool_"+pool.name,null,"X",function () {
+ window.UI.display[poolID].controls = elementPlace("#Pool_"+pool.name,"Pool_controls_"+pool.name, "controls","div");
+ buttonAdd("#Pool_controls_"+pool.name,null,"X",function () {
window.gameSession.send('{"action":"del","type":"pool","id":"'+poolID+'","deck":"'+window.gameState.active.deck+'"}');
},"pool_button delete","div");
window.UI.display[poolID].onclick = function () {