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

basic UI changes, rehash of UI menu

Browse Source
This commit is contained in:
bluesaxman 2020-09-14 13:58:06 -06:00
parent 9a2d6309b7
commit 6c17dd6c39
2 changed files with 99 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
UI/css.css
View File

@ -19,9 +19,28 @@ body {
#menu { #menu {
display:flex; display:flex;
justify-content: space-around; justify-content: stretch;
align-items: center; align-items: stretch;
width:100%; width:100%;
height:5vh;
}
.menu_button_input {
appearance: unset;
display: none;
}
.menu_button {
display: flex;
flex: 1;
background: #666;
text-align: center;
justify-content: center;
align-items: center;
}
.menu_button_input:checked + .menu_button {
background: #999;
} }
#display { #display {
@ -38,9 +57,14 @@ body {
align-items: center; align-items: center;
} }
#deck { #decks, #hands, #pools, #users {
width: 50%; display: flex;
max-width: 50%; flex-direction: column;
justify-content: space-around;
align-items: center;
list-style: none;
width: 100%;
height: auto;
} }
#hand { #hand {
@ -111,7 +135,7 @@ body {
padding: 5px; padding: 5px;
} }
.card { .deck, .pool, .card {
height: 3in; height: 3in;
width: 2in; width: 2in;
display: inline-block; display: inline-block;
@ -124,3 +148,12 @@ body {
overflow: auto; overflow: auto;
background: rgb(216, 206, 184); background: rgb(216, 206, 184);
} }
.hand {
margin-top:5px
}
.username {
margin-top:5px;
}

93
UI/index.html
View File

@ -17,35 +17,43 @@ window.gameState.pools = [];
window.gameState.hands = []; window.gameState.hands = [];
function updateEvent() { function updateEvent() {
window.UI.users.innerHTML = "<span>Users:</span>"; window.UI.display.innerHTML = "";
window.UI.decks.innerHTML = "<span>Decks:</span>"; if (window.UI.menu.decks.button.checked) {
window.UI.hands.innerHTML = "<span>Hands:</span>"; elementPlace("#display","decks",null,"ol");
window.UI.pools.innerHTML = "<span>Pools:</span>"; Object.keys(window.gameState.decks).forEach(function (deckID) {
window.gameState.users.forEach(function (user) { var deck = window.gameState.decks[deckID];
window.UI.users[user] = elementPlace("#users","User_"+user,"username","li"); window.UI.display[deckID] = elementPlace("#decks","Deck_"+deck.name,"deck","li");
window.UI.users[user].innerText = user; window.UI.display[deckID].innerText = deck.name+":"+deck.size;
});
Object.keys(window.gameState.decks).forEach(function (deckID) {
var deck = window.gameState.decks[deckID];
window.UI.decks[deckID] = elementPlace("#decks","Deck_"+deck.name,"deck","li");
window.UI.decks[deckID].innerText = deck.name+":"+deck.size;
});
Object.keys(window.gameState.hands).forEach(function (handID) {
var hand = window.gameState.hands[handID];
window.UI.hands[handID] = elementPlace("#hands","Hand_"+hand.name,"hand","li");
window.UI.hands[handID].innerText = hand.name;
window.UI.hands[handID].cards = elementPlace("#Hand_"+hand.name,hand.name+"_cards",null,"ol");
hand.cards.forEach(function (card,index) {
window.UI.hands[handID].cards[index] = elementPlace("#"+hand.name+"_cards",null,"card","li");
window.UI.hands[handID].cards[index].innerHTML = card;
}); });
}); }
Object.keys(window.gameState.pools).forEach(function (poolID) { if (window.UI.menu.users.button.checked) {
var pool = window.gameState.pools[poolID]; elementPlace("#display","users",null,"ol");
window.UI.pools[poolID] = elementPlace("#pools","Pool_"+pool.name,"pool","li"); window.gameState.users.forEach(function (user) {
window.UI.pools[poolID].innerText = pool.name+":"+pool.top; window.UI.display[user] = elementPlace("#users","User_"+user,"username","li");
}); window.UI.display[user].innerText = user;
});
}
if (window.UI.menu.hands.button.checked) {
elementPlace("#display","hands",null,"ol");
Object.keys(window.gameState.hands).forEach(function (handID) {
var hand = window.gameState.hands[handID];
window.UI.display[handID] = elementPlace("#hands","Hand_"+hand.name,"hand","li");
window.UI.display[handID].innerText = hand.name;
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;
});
});
}
if (window.UI.menu.pools.button.checked) {
elementPlace("#display","pools",null,"ol");
Object.keys(window.gameState.pools).forEach(function (poolID) {
var pool = window.gameState.pools[poolID];
window.UI.display[poolID] = elementPlace("#pools","Pool_"+pool.name,"pool","li");
window.UI.display[poolID].innerText = pool.name+":"+pool.top;
});
}
} }
function startGameSession() { function startGameSession() {
@ -121,12 +129,31 @@ function startGameSession() {
// sendGameState(); // sendGameState();
// } // }
//}, null, "div"); //}, null, "div");
elementPlace("body","display",null,"div");
window.document.body.innerHTML = "";
window.UI = {}; window.UI = {};
window.UI.users = elementPlace("#display","users",null,"ol");
window.UI.decks = elementPlace("#display","decks",null,"ol"); function menuButton(ParentID,name,group,checked) {
window.UI.hands = elementPlace("#display","hands",null,"ol"); var button = elementPlace(ParentID,name+"_handle", "menu_button_input", "input");
window.UI.pools = elementPlace("#display","pools",null,"ol"); var label = elementPlace(ParentID,null,"menu_button","label");
button.type = "radio";
button.name = group;
button.value = name;
button.checked = checked;
label.setAttribute("for", name+"_handle");
label.innerText = name;
button.onchange = updateEvent;
return {"label":label,"button":button};
}
window.UI.menu = elementPlace("body","menu",null,"div");
window.UI.menu.decks = menuButton("#menu","Decks","menu",true);
window.UI.menu.hands = menuButton("#menu","Hands","menu",false);
window.UI.menu.pools = menuButton("#menu","Pools","menu",false);
window.UI.menu.users = menuButton("#menu","Users","menu",false);
window.UI.menu.options = menuButton("#menu","Options","menu",false);
window.UI.display = elementPlace("body","display",null,"div");
var parms = new URLSearchParams(window.location.search); var parms = new URLSearchParams(window.location.search);
if (!parms.get("s")) { if (!parms.get("s")) {