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

add style, implement dicelog

Browse source
This commit is contained in:
Iris Lightshard 2023-02-20 10:40:25 -07:00
parent b8994d80a9
commit 81876f9f36
Signed by: Iris Lightshard
GPG key ID: 3B7FBC22144E6398
4 changed files with 122 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
static/bg.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 603 B

9
static/index.html
View file

@ -9,20 +9,21 @@
<body> <body>
<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>
<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> <button id="goto_table" onclick="showAdminModal(false);showTableModal(true)">Join Table</button>
<button id="admin_login" onclick="showTableModal(false);showAdminModal(true)">Admin Login</button> <button id="admin_login" onclick="showTableModal(false);showAdminModal(true)">Admin Login</button>
</nav> </nav>
<form id="table_modal" onsubmit="return false" style="display:none;"> <form id="table_modal" onsubmit="return false" style="display:none;">
<label>Table Name<input id="input_table_name"></label> <label>table.name<br><input id="input_table_name"></label><br>
<label>Table Passcode<input id="input_table_pass"></label> <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();showTableModal(false);">Join</button>
</form> </form>
<form id="admin_modal" onsubmit="return false" style="display:none;"> <form id="admin_modal" onsubmit="return false" style="display:none;">
<label>pass<input type="password" id="input_admin_pass"></label> <label>pass<input type="password" id="input_admin_pass"></label>
<button type="submit" id="admin_login" onclick="doLogin();showAdminModal(false)">login</button> <button type="submit" id="admin_login" onclick="doLogin();showAdminModal(false)">login</button>
</form> </form>
<div id="dice_log"></div> <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>
@ -55,6 +56,7 @@
<option>20</option> <option>20</option>
</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="map"></div> <div id="map"></div>
<div id="adminWrapper" style="display:none;"> <div id="adminWrapper" style="display:none;">
<div id="adminCtrl"> <div id="adminCtrl">
@ -68,6 +70,7 @@
</div> </div>
<div id="adminZone"></div> <div id="adminZone"></div>
</div> </div>
</main>
</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>

45
static/socket.js
View file

@ -14,6 +14,31 @@ function showTableModal(show) {
} }
} }
function formatDice(r) {
const date = new Date(r.timestamp)
return `<p>${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()} ${r.player} rolled ${r.roll.length}d${r.faces} ${(r.note ? "(" + r.note + ")" : "")}<br>[${r.roll}] (total ${r.roll.reduce((a,c)=>a+c,0)})</p>`
}
function logDice(dice, many) {
const diceLog = document.getElementById("dice_log");
if (diceLog) {
if (many) {
for(const r of dice) {
diceLog.innerHTML += formatDice(r);
}
} else {
diceLog.innerHTML += formatDice(dice);
}
}
}
function makeUpToDate(table) {
if (table && table.diceRolls) {
logDice(table.diceRolls, true);
}
}
function dial() { function dial() {
// get tableKey from UI // get tableKey from UI
const tblNameInput = document.getElementById("input_table_name"); const tblNameInput = document.getElementById("input_table_name");
@ -27,12 +52,27 @@ function dial() {
if (e.code !== 1001) { if (e.code !== 1001) {
// TODO: add message to let user know they are reconnecting // TODO: add message to let user know they are reconnecting
setTimeout(dial, 1000) setTimeout(dial, 1000)
} else {
tabletop = document.getElementById("tabletop");
if (tabletop) {
tabletop.style.display = "none";
}
table = null;
} }
}); });
conn.addEventListener("open", e => { conn.addEventListener("open", e => {
// TODO: add message to let user know they are at the table // TODO: add message to let user know they are at the table
console.info("socket connected"); console.info("socket connected");
tabletop = document.getElementById("tabletop");
if (tabletop) {
tabletop.style.display = "block";
}
}); });
conn.addEventListener("error", e => {
setErr(JSON.stringify(e));
conn.close();
})
conn.addEventListener("message", e => { conn.addEventListener("message", e => {
const data = JSON.parse(e.data); const data = JSON.parse(e.data);
if (table == null) { if (table == null) {
@ -41,8 +81,11 @@ function dial() {
r.roll = Uint8Array.from(atob(r.roll), c => c.charCodeAt(0)) r.roll = Uint8Array.from(atob(r.roll), c => c.charCodeAt(0))
}) })
table = data; table = data;
makeUpToDate(table);
} else { } else {
// UPDATE THE TABLE! if (data.diceRoll) {
logDice(data.diceRoll);
}
} }
console.log(data); console.log(data);
}); });

72
static/style.css Normal file
View file

@ -0,0 +1,72 @@
* {
box-sizing: border-box;
padding: 0;
margin: 0;
appearance: none;
outline: none;
}
body {
background: url('./bg.png');
background-repeat: repeat;
}
nav, #table_modal, #admin_modal {
color: #fff;
background: #000;
padding: 0.5em;
}
label {
font-size: 80%;
}
input, select {
background: #fff;
color: #000;
border: solid 1px gray;
margin-right: 1ch;
}
input:active, input:focus, select:active, select:focus {
border: solid 1px cyan;
}
button {
padding: 0.5ch;
background: #000;
color: #fff;
border: solid 2px lightseagreen;
margin-right: 1ch;
}
button:hover {
color: #000;
background: lightseagreen;
}
#errWrapper {
color: #fff;
background: crimson;
padding: 1em;
}
#closeErr {
display: inline;
border: dotted 1px #fff;
color: #fff;
background: crimson;
padding: 0 1ch;
margin-right: 1ch;
}
#errDiv {
display: inline;
}
#dice_log {
background: #fff;
color: #000;
}
#dice_log p {
margin: 0.5ch;
}