From 3bf9fa08dbc71f5af6c3c2b53e0924fa1394c6bb Mon Sep 17 00:00:00 2001
From: bluesaxman <bluesaxman@murkfall.net>
Date: Mon, 28 Sep 2020 21:36:31 +0000
Subject: [PATCH] UI polish

---
 UI/css.css    | 23 ++++++++++++++++++-----
 UI/index.html | 23 ++++++++++++++---------
 2 files changed, 32 insertions(+), 14 deletions(-)

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 = '<div class="object_name"'+deck.name+':</div><div class="deck_size">'+deck.size+'</div>';
+			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 = "<div>"+hand.name+"</div>";
 			window.UI.display[handID].controls = elementPlace("#Hand_"+hand.name,"Hand_controls_"+hand.name,"controls","div");
-			window.UI.display[handID].controls.innerHTML = "<div>"+hand.name+"</div>";
 			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+'<div id="card'+handID+index+'_controls"></div>';
+				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 () {