nilix/felt
1
0
Fork 0
mirror of https://hacklab.nilfm.cc/felt synced 2024-10-22 14:31:48 +00:00
Code Issues 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) {
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));

43
static/index.html
View file

@ -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>

90
static/style.css
View file

@ -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;
}