diff --git a/UI/css.css b/UI/css.css index 4d06970..4deb599 100644 --- a/UI/css.css +++ b/UI/css.css @@ -157,3 +157,6 @@ body { margin-top:5px; } +.selected { + background-color:rgba(255,0,0,0.5); +} diff --git a/UI/index.html b/UI/index.html index e13acf8..9136fe2 100644 --- a/UI/index.html +++ b/UI/index.html @@ -15,16 +15,20 @@ window.gameState.users = []; window.gameState.decks = []; window.gameState.pools = []; window.gameState.hands = []; +window.gameState.active = {}; function updateEvent() { window.UI.display.innerHTML = ""; + if (Object.keys(window.gameState.decks).length < 2) { window.gameState.active.deck = Object.keys(window.gameState.decks)[0]; } + if (Object.keys(window.gameState.hands).length < 2) { window.gameState.active.hand = Object.keys(window.gameState.hands)[0]; } + if (Object.keys(window.gameState.pools).length < 2) { window.gameState.active.pool = Object.keys(window.gameState.pools)[0]; } if (window.UI.menu.decks.button.checked) { elementPlace("#display","decks",null,"ol"); var myKeys = Object.keys(window.gameState.decks); myKeys.sort(); myKeys.forEach(function (deckID) { var deck = window.gameState.decks[deckID]; - window.UI.display[deckID] = elementPlace("#decks","Deck_"+deck.name,"deck","li"); + 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 () { popupDialog("deckLoader","Select DDF (Deck Definition File)",true,inputDialog,{"inputType":"file"},function (f) { @@ -43,11 +47,15 @@ function updateEvent() { window.gameSession.send('{"action":"shuffle", "deck":"'+deckID+'"}'); }, "deck_button shuffle","div"); buttonAdd("#Deck_"+deck.name,null,"Draw", function () { - window.gameSession.send('{"action":"draw","deck":"'+deckID+'","hand":"'+"default"+'"}'); // Will need to be updated when I figure out selection + 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 () { window.gameSession.send('{"action":"del","type":"deck","id":"'+deckID+'"}'); }, "deck_button delete", "div"); + window.UI.display[deckID].onclick = function () { + window.gameState.active.deck = deck.name; + updateEvent(); + }; }); buttonAdd("#decks",null,"+",function () { popupDialog("addDeck","Please name new deck",true, inputDialog,{"inputType":"text"},function (newDeckName) { @@ -69,7 +77,7 @@ function updateEvent() { myHands.sort(); myHands.forEach(function (handID) { var hand = window.gameState.hands[handID]; - window.UI.display[handID] = elementPlace("#hands","Hand_"+hand.name,"hand","li"); + window.UI.display[handID] = elementPlace("#hands","Hand_"+hand.name,"hand"+(hand.name == window.gameState.active.hand ? " selected" : ""),"li"); window.UI.display[handID].controls = elementPlace("#Hand_"+hand.name,null,"controls","div"); window.UI.display[handID].controls.innerHTML = "
"+hand.name+"
"; // Muligan Hand @@ -80,6 +88,10 @@ function updateEvent() { window.UI.display[handID].cards[index].innerHTML = card; // Play Card }); + window.UI.display[handID].onclick = function () { + window.gameState.active.hand = hand.name; + updateEvent(); + } }); // Add Hand } @@ -89,9 +101,13 @@ function updateEvent() { myPools.sort(); myPools.forEach(function (poolID) { var pool = window.gameState.pools[poolID]; - window.UI.display[poolID] = elementPlace("#pools","Pool_"+pool.name,"pool","li"); + window.UI.display[poolID] = elementPlace("#pools","Pool_"+pool.name,"pool"+(pool.name == window.gameState.active.pool ? " selected" : ""),"li"); window.UI.display[poolID].innerText = pool.name+":"+pool.top; // Delete Pool + window.UI.display[poolID].onclick = function () { + window.gameState.active.pool = pool.name; + updateEvent(); + } }); // Add Pool }