diff --git a/UI/css.css b/UI/css.css index 442565e..d924c13 100644 --- a/UI/css.css +++ b/UI/css.css @@ -78,6 +78,16 @@ body { 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 { background: rgba(200,200,200,1); text-align:left; @@ -152,9 +162,16 @@ body { } .deck, .pool, .hand { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; position: relative; margin-top:5px; min-height:10vh; + max-width:90vw; + border-radius: 5px; + border: 1px solid rgba(0,0,0,1); } .username { @@ -163,9 +180,20 @@ body { .selected { background-color:rgba(0,150,0,0.5); + border-color:rgba(250,230,0,1); } .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 { @@ -173,3 +201,23 @@ body { top: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; +} diff --git a/UI/index.html b/UI/index.html index 36161f4..69e8c0c 100644 --- a/UI/index.html +++ b/UI/index.html @@ -1,6 +1,9 @@ Deckard + Company + + + @@ -30,9 +33,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].innerHTML = '
'+deck.name+"
"; 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+'
'; + 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(); @@ -81,15 +85,16 @@ 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].innerHTML = '
'+hand.name+"
"; 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 () { window.gameSession.send('{"action":"muligan","hand":"'+handID+'","deck":"'+window.gameState.active.deck+'"}'); }, "hand_button muligan", "div"); buttonAdd("#Hand_controls_"+hand.name,null,"X",function () { window.gameSession.send('{"action":"del","type":"hand","id":"'+handID+'"}'); }, "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) { 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"; @@ -117,8 +122,10 @@ function updateEvent() { myPools.forEach(function (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].innerHTML = pool.name+":"+pool.top; + window.UI.display[poolID].innerHTML = '
'+pool.name+"
"; 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 += '
'+pool.top+"
"; 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");