mirror of
https://hacklab.nilfm.cc/felt
synced 2024-10-22 14:31:48 +00:00
add style, implement dicelog
This commit is contained in:
parent
b8994d80a9
commit
81876f9f36
GPG key ID:
3B7FBC22144E6398
4 changed files with 122 additions and 4 deletions
BIN
static/bg.png
Normal file
BIN
static/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 603 B |
|
|
@ -9,20 +9,21 @@
|
|||
<body>
|
||||
<div id="errWrapper" style='display:none'><button id="closeErr" onclick="closeErr()">x</button><div id="errDiv"></div></div>
|
||||
<nav>
|
||||
<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;">
|
||||
<label>Table Name<input id="input_table_name"></label>
|
||||
<label>Table Passcode<input id="input_table_pass"></label>
|
||||
<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>
|
||||
</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>
|
||||
<div id="dice_log"></div>
|
||||
<main id="tabletop" style="display:none;">
|
||||
<select id="num_dice">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
|
|
@ -55,6 +56,7 @@
|
|||
<option>20</option>
|
||||
</select>
|
||||
<input id="dice_note"><button id="dice_submit" onclick="rollDice()">Roll</button>
|
||||
<div id="dice_log"></div>
|
||||
<div id="map"></div>
|
||||
<div id="adminWrapper" style="display:none;">
|
||||
<div id="adminCtrl">
|
||||
|
|
@ -68,6 +70,7 @@
|
|||
</div>
|
||||
<div id="adminZone"></div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
<script src="./util.js" type="text/javascript"></script>
|
||||
<script src="./socket.js" type="text/javascript"></script>
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
// get tableKey from UI
|
||||
const tblNameInput = document.getElementById("input_table_name");
|
||||
|
|
@ -27,12 +52,27 @@ function dial() {
|
|||
if (e.code !== 1001) {
|
||||
// TODO: add message to let user know they are reconnecting
|
||||
setTimeout(dial, 1000)
|
||||
} else {
|
||||
tabletop = document.getElementById("tabletop");
|
||||
if (tabletop) {
|
||||
tabletop.style.display = "none";
|
||||
}
|
||||
table = null;
|
||||
}
|
||||
});
|
||||
conn.addEventListener("open", e => {
|
||||
// TODO: add message to let user know they are at the table
|
||||
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 => {
|
||||
const data = JSON.parse(e.data);
|
||||
if (table == null) {
|
||||
|
|
@ -41,8 +81,11 @@ function dial() {
|
|||
r.roll = Uint8Array.from(atob(r.roll), c => c.charCodeAt(0))
|
||||
})
|
||||
table = data;
|
||||
makeUpToDate(table);
|
||||
} else {
|
||||
// UPDATE THE TABLE!
|
||||
if (data.diceRoll) {
|
||||
logDice(data.diceRoll);
|
||||
}
|
||||
}
|
||||
console.log(data);
|
||||
});
|
||||
|
|
|
|||
72
static/style.css
Normal file
72
static/style.css
Normal 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;
|
||||
}
|
||||
Loading…
Reference in a new issue