nilix/felt
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

windowed UI take 2

Browse source
This commit is contained in:
Iris Lightshard 2023-07-02 01:10:06 -06:00
parent 8836d10d88
commit 3d16e7eb9d
3 changed files with 97 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
static/admin.js
View file

@ -135,7 +135,7 @@ async function doLogin() {
if (adminUsrInput && adminPassInput) { if (adminUsrInput && adminPassInput) {
adminToken = await getAdminToken(adminUsrInput.value, adminPassInput.value); adminToken = await getAdminToken(adminUsrInput.value, adminPassInput.value);
if (adminToken) { if (adminToken) {
adminWrapper.style.display="block"; adminWrapper.style.display="inline";
getTables(); getTables();
adminZone.style.display = "block"; adminZone.style.display = "block";
} else { } 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) { async function getAdminToken(user, pass) {
const headers = new Headers(); const headers = new Headers();
headers.set('Authorization', 'Basic ' + btoa(user + ":" + pass)); headers.set('Authorization', 'Basic ' + btoa(user + ":" + pass));

43
static/index.html
View file

@ -7,23 +7,25 @@
<link href="./style.css" rel="stylesheet" /> <link href="./style.css" rel="stylesheet" />
</head> </head>
<body> <body>
<div id="map"></div>
<div id="errWrapper" style='display:none'><button id="closeErr" onclick="closeErr()">x</button><div id="errDiv"></div></div> <div id="errWrapper" style='display:none'><button id="closeErr" onclick="closeErr()">x</button><div id="errDiv"></div></div>
<nav> <nav>
<section id="user_section">
<details class="ui_win"><summary>identity</summary>
<label for="name_entry">username</label> <label for="name_entry">username</label>
<input id="name_entry" onblur="saveName()"> <input id="name_entry" onblur="saveName()">
<button id="goto_table" onclick="showAdminModal(false);showTableModal(true)">Join Table</button> </details><br/>
<button id="admin_login" onclick="showTableModal(false);showAdminModal(true)">Admin Login</button>
</nav> <details class="ui_win"><summary>goto</summary>
<form id="table_modal" onsubmit="return false" style="display:none;"> <form id="table_modal" onsubmit="return false">
<label>table.name<br><input id="input_table_name"></label><br> <label>table.name<br><input id="input_table_name"></label><br>
<label>table.passcode<br><input id="input_table_pass"></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>
<form id="admin_modal" onsubmit="return false" style="display:none;"> </details><br/>
<label>pass<input type="password" id="input_admin_pass"></label>
<button type="submit" id="admin_login" onclick="doLogin();showAdminModal(false)">login</button>
</form> <details class="ui_win"><summary>dice</summary>
<main id="tabletop" style="display:none;">
<select id="num_dice"> <select id="num_dice">
<option>1</option> <option>1</option>
<option>2</option> <option>2</option>
@ -57,10 +59,19 @@
</select> </select>
<input id="dice_note"><button id="dice_submit" onclick="rollDice()">Roll</button> <input id="dice_note"><button id="dice_submit" onclick="rollDice()">Roll</button>
<div id="dice_log"></div> <div id="dice_log"></div>
<div id="aux"></div> </details><br/>
<div id="map"></div>
</main> <details class="ui_win"><summary>status</summary><pre id="aux"></pre></details><br/>
<details id="adminWrapper" style="display:none;"><summary>admin</summary> </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> <button onclick="setTableCreateFormVisible(true)">New Table</button>
<form onsubmit="return false" id="createTableForm" style="display:none;"> <form onsubmit="return false" id="createTableForm" style="display:none;">
<input id="newTableName"/> <input id="newTableName"/>
@ -70,7 +81,9 @@
</form> </form>
</div> </div>
<div id="adminZone"></div> <div id="adminZone"></div>
</details> </details><br/>
</section>
</nav>
</body> </body>
<script src="./util.js" type="text/javascript"></script> <script src="./util.js" type="text/javascript"></script>
<script src="./socket.js" type="text/javascript"></script> <script src="./socket.js" type="text/javascript"></script>

90
static/style.css
View file

@ -11,12 +11,6 @@ body {
background-repeat: repeat; background-repeat: repeat;
} }
nav, #table_modal, #admin_modal {
color: #fff;
background: #000;
padding: 0.5em;
}
label { label {
font-size: 80%; font-size: 80%;
} }
@ -32,6 +26,10 @@ input:active, input:focus, select:active, select:focus {
border: solid 1px cyan; border: solid 1px cyan;
} }
ul {
margin: 2em;
}
button { button {
padding: 0.5ch; padding: 0.5ch;
background: #000; background: #000;
@ -80,23 +78,71 @@ button:hover {
} }
#aux { #aux {
display: block;
background: #fff; }
color: #000;
height: auto; pre {
width: auto; font-size: 125%;
border: solid 1px dimgray; background: #222;
color: #93a1a1;
}
#auxMsgZone {
width: 100%;
color: #fff;
background: #002b36;
padding:0.2em;
} }
#adminWrapper { #adminWrapper {
position: fixed; }
top: 2em;
right: 0; .ui_win {
padding: 1em; text-align: left;
border: solid 1px #fff; position: relative;
background: rgba(0,0,0,0.8); margin: 2em;
color: #fff; background: rgba(0,0,0,0.7);
box-sizing: border-box; color: #eee;
max-height: calc(100vh - 4em); display: inline;
overflow-y: auto; 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;
} }