windowed UI take 2
This commit is contained in:
parent
8836d10d88
commit
3d16e7eb9d
3 changed files with 97 additions and 45 deletions
|
|
@ -135,7 +135,7 @@ async function doLogin() {
|
|||
if (adminUsrInput && adminPassInput) {
|
||||
adminToken = await getAdminToken(adminUsrInput.value, adminPassInput.value);
|
||||
if (adminToken) {
|
||||
adminWrapper.style.display="block";
|
||||
adminWrapper.style.display="inline";
|
||||
getTables();
|
||||
adminZone.style.display = "block";
|
||||
} else {
|
||||
|
|
@ -144,13 +144,6 @@ async function doLogin() {
|
|||
}
|
||||
}
|
||||
|
||||
function showAdminModal(show) {
|
||||
const modal = document.getElementById("admin_modal")
|
||||
if (modal) {
|
||||
modal.style.display = show ? "block" : "none";
|
||||
}
|
||||
}
|
||||
|
||||
async function getAdminToken(user, pass) {
|
||||
const headers = new Headers();
|
||||
headers.set('Authorization', 'Basic ' + btoa(user + ":" + pass));
|
||||
|
|
|
|||
|
|
@ -7,23 +7,25 @@
|
|||
<link href="./style.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<div id="errWrapper" style='display:none'><button id="closeErr" onclick="closeErr()">x</button><div id="errDiv"></div></div>
|
||||
<nav>
|
||||
<section id="user_section">
|
||||
<details class="ui_win"><summary>identity</summary>
|
||||
<label for="name_entry">username</label>
|
||||
<input id="name_entry" onblur="saveName()">
|
||||
<button id="goto_table" onclick="showAdminModal(false);showTableModal(true)">Join Table</button>
|
||||
<button id="admin_login" onclick="showTableModal(false);showAdminModal(true)">Admin Login</button>
|
||||
</nav>
|
||||
<form id="table_modal" onsubmit="return false" style="display:none;">
|
||||
</details><br/>
|
||||
|
||||
<details class="ui_win"><summary>goto</summary>
|
||||
<form id="table_modal" onsubmit="return false">
|
||||
<label>table.name<br><input id="input_table_name"></label><br>
|
||||
<label>table.passcode<br><input id="input_table_pass"></label><br>
|
||||
<button type="submit" id="table_join" onclick="dial();showTableModal(false);">Join</button>
|
||||
<button type="submit" id="table_join" onclick="dial();">Join</button>
|
||||
</form>
|
||||
<form id="admin_modal" onsubmit="return false" style="display:none;">
|
||||
<label>pass<input type="password" id="input_admin_pass"></label>
|
||||
<button type="submit" id="admin_login" onclick="doLogin();showAdminModal(false)">login</button>
|
||||
</form>
|
||||
<main id="tabletop" style="display:none;">
|
||||
</details><br/>
|
||||
|
||||
|
||||
<details class="ui_win"><summary>dice</summary>
|
||||
<select id="num_dice">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
|
|
@ -57,10 +59,19 @@
|
|||
</select>
|
||||
<input id="dice_note"><button id="dice_submit" onclick="rollDice()">Roll</button>
|
||||
<div id="dice_log"></div>
|
||||
<div id="aux"></div>
|
||||
<div id="map"></div>
|
||||
</main>
|
||||
<details id="adminWrapper" style="display:none;"><summary>admin</summary>
|
||||
</details><br/>
|
||||
|
||||
<details class="ui_win"><summary>status</summary><pre id="aux"></pre></details><br/>
|
||||
</section>
|
||||
<section id="admin_section">
|
||||
<details class="ui_win admin_win"><summary>admin</summary>
|
||||
<form id="admin_modal" onsubmit="return false">
|
||||
<label>pass<input type="password" id="input_admin_pass"></label>
|
||||
<button type="submit" id="admin_login" onclick="doLogin();">login</button>
|
||||
</form>
|
||||
</details>
|
||||
<br/>
|
||||
<details id="adminWrapper" class="ui_win admin_win" style="display:none;"><summary>table</summary>
|
||||
<button onclick="setTableCreateFormVisible(true)">New Table</button>
|
||||
<form onsubmit="return false" id="createTableForm" style="display:none;">
|
||||
<input id="newTableName"/>
|
||||
|
|
@ -70,7 +81,9 @@
|
|||
</form>
|
||||
</div>
|
||||
<div id="adminZone"></div>
|
||||
</details>
|
||||
</details><br/>
|
||||
</section>
|
||||
</nav>
|
||||
</body>
|
||||
<script src="./util.js" type="text/javascript"></script>
|
||||
<script src="./socket.js" type="text/javascript"></script>
|
||||
|
|
|
|||
|
|
@ -11,12 +11,6 @@ body {
|
|||
background-repeat: repeat;
|
||||
}
|
||||
|
||||
nav, #table_modal, #admin_modal {
|
||||
color: #fff;
|
||||
background: #000;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
|
@ -32,6 +26,10 @@ input:active, input:focus, select:active, select:focus {
|
|||
border: solid 1px cyan;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 2em;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0.5ch;
|
||||
background: #000;
|
||||
|
|
@ -80,23 +78,71 @@ button:hover {
|
|||
}
|
||||
|
||||
#aux {
|
||||
display: block;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
height: auto;
|
||||
width: auto;
|
||||
border: solid 1px dimgray;
|
||||
|
||||
}
|
||||
|
||||
pre {
|
||||
font-size: 125%;
|
||||
background: #222;
|
||||
color: #93a1a1;
|
||||
}
|
||||
|
||||
#auxMsgZone {
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
background: #002b36;
|
||||
padding:0.2em;
|
||||
}
|
||||
|
||||
#adminWrapper {
|
||||
position: fixed;
|
||||
top: 2em;
|
||||
right: 0;
|
||||
padding: 1em;
|
||||
border: solid 1px #fff;
|
||||
background: rgba(0,0,0,0.8);
|
||||
color: #fff;
|
||||
box-sizing: border-box;
|
||||
max-height: calc(100vh - 4em);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.ui_win {
|
||||
text-align: left;
|
||||
position: relative;
|
||||
margin: 2em;
|
||||
background: rgba(0,0,0,0.7);
|
||||
color: #eee;
|
||||
display: inline;
|
||||
height: min-content;
|
||||
z-index:1;
|
||||
padding: 0.25em;
|
||||
border: 2px solid dimgray;;
|
||||
}
|
||||
|
||||
.ui_win:hover, .ui_win:active {
|
||||
border: 2px solid #1f9b92;
|
||||
}
|
||||
|
||||
.ui_win * {
|
||||
margin: 0.25em;
|
||||
}
|
||||
|
||||
.ui_win a {
|
||||
color: #1f9b92;
|
||||
}
|
||||
|
||||
.ui_win a:hover, ui_win a:active {
|
||||
color: #ff;
|
||||
}
|
||||
|
||||
.admin_section {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.admin_win {
|
||||
float:right;
|
||||
}
|
||||
|
||||
|
||||
#map {
|
||||
position:fixed;
|
||||
width:100%;
|
||||
height: 100%;
|
||||
z-index:0;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
Loading…
Reference in a new issue