2023-02-12 15:15:44 +00:00
|
|
|
let tableKey = {
|
|
|
|
name: "",
|
|
|
|
passcode: ""
|
|
|
|
}
|
|
|
|
|
|
|
|
let table = null;
|
|
|
|
|
|
|
|
let conn = null;
|
|
|
|
|
2023-02-19 03:37:50 +00:00
|
|
|
function showTableModal(show) {
|
|
|
|
const modal = document.getElementById("table_modal");
|
|
|
|
if (modal) {
|
|
|
|
modal.style.display = show ? "block" : "none";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-07-06 04:27:38 +00:00
|
|
|
function fmtLeading(n) {
|
|
|
|
return n < 10 ? "0" + n : String(n);
|
|
|
|
}
|
|
|
|
|
2023-02-20 17:40:25 +00:00
|
|
|
function formatDice(r) {
|
|
|
|
const date = new Date(r.timestamp)
|
2023-02-22 05:27:54 +00:00
|
|
|
const p = document.createElement("p");
|
2023-07-08 05:56:41 +00:00
|
|
|
|
2023-07-06 04:27:38 +00:00
|
|
|
const month = date.getMonth() + 1;
|
|
|
|
const day = date.getDate();
|
|
|
|
const hours = date.getHours();
|
|
|
|
const minutes = date.getMinutes();
|
|
|
|
const seconds = date.getSeconds();
|
2023-07-08 05:56:41 +00:00
|
|
|
|
2023-07-06 04:27:38 +00:00
|
|
|
p.innerHTML = `${date.getFullYear()}-${fmtLeading(month)}-${fmtLeading(day)} ${fmtLeading(hours)}:${fmtLeading(minutes)}:${fmtLeading(seconds)} ${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)})`;
|
2023-07-08 05:56:41 +00:00
|
|
|
|
2023-02-22 05:27:54 +00:00
|
|
|
return p;
|
2023-02-20 17:40:25 +00:00
|
|
|
}
|
|
|
|
|
2023-07-09 06:48:19 +00:00
|
|
|
function logDice(dice) {
|
2023-02-20 17:40:25 +00:00
|
|
|
const diceLog = document.getElementById("dice_log");
|
2023-07-09 06:48:19 +00:00
|
|
|
if (!Array.isArray(dice)) {
|
2023-02-22 05:27:54 +00:00
|
|
|
dice = [ dice ];
|
|
|
|
} else {
|
|
|
|
if (diceLog) {
|
|
|
|
diceLog.innerHTML = "";
|
|
|
|
}
|
|
|
|
}
|
2023-02-20 17:40:25 +00:00
|
|
|
if (diceLog) {
|
|
|
|
for(const r of dice) {
|
2023-02-22 05:27:54 +00:00
|
|
|
const p = formatDice(r);
|
|
|
|
diceLog.append(p);
|
|
|
|
p.scrollIntoView();
|
2023-02-20 17:40:25 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-05-13 04:33:14 +00:00
|
|
|
function setAuxMsg(msg) {
|
|
|
|
const auxDiv = document.getElementById("aux");
|
|
|
|
if (auxDiv) {
|
|
|
|
auxDiv.innerText = msg;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-07-09 06:48:19 +00:00
|
|
|
function updateTokens(tokens) {
|
|
|
|
// update internal token array and map
|
|
|
|
processTokens(tokens);
|
|
|
|
// update token select window
|
|
|
|
renderTokenSelect();
|
|
|
|
// if admin, update token master list
|
|
|
|
renderTokenMasterList();
|
|
|
|
}
|
|
|
|
|
|
|
|
function renderTokenSelect() {
|
|
|
|
const tokenSelect = document.getElementById("token_select");
|
|
|
|
let tokenSelectHTML = "<ul class='single_btn_list'>";
|
|
|
|
for (const t of tokens) {
|
|
|
|
tokenSelectHTML += `<li><a target="_blank" href="${t.t.sprite}">${t.t.name}</a><button onclick="toggleActive('${t.t.id}')">${(t.t.active ? "Deactivate" : "Activate")}</button></li>\n`;
|
|
|
|
}
|
|
|
|
tokenSelectHTML += "</ul>";
|
|
|
|
tokenSelect.innerHTML = tokenSelectHTML;
|
|
|
|
}
|
|
|
|
|
2023-02-20 17:40:25 +00:00
|
|
|
function makeUpToDate(table) {
|
2023-04-04 05:15:17 +00:00
|
|
|
if (table) {
|
2023-07-09 06:48:19 +00:00
|
|
|
// map image has to be set before tokens can be handled!
|
2023-05-13 04:33:14 +00:00
|
|
|
if (table.mapImg) {
|
|
|
|
setMapImg(table.mapImg);
|
|
|
|
}
|
|
|
|
if (table.auxMsg) {
|
|
|
|
setAuxMsg(table.auxMsg);
|
2023-04-04 05:15:17 +00:00
|
|
|
}
|
2023-07-09 06:48:19 +00:00
|
|
|
if (table.diceRolls) {
|
|
|
|
logDice(table.diceRolls);
|
|
|
|
} else if (table.diceRoll) {
|
|
|
|
logDice([table.diceRoll]);
|
|
|
|
}
|
|
|
|
if (table.tokens) {
|
|
|
|
updateTokens(table.tokens);
|
|
|
|
} else if (table.token) {
|
|
|
|
updateTokens([table.token]);
|
|
|
|
}
|
|
|
|
|
2023-02-20 17:40:25 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-04-04 05:15:17 +00:00
|
|
|
function setMapImg(url) {
|
2023-07-03 05:10:58 +00:00
|
|
|
initializeMap(url);
|
2023-04-04 05:15:17 +00:00
|
|
|
}
|
|
|
|
|
2023-07-06 04:27:38 +00:00
|
|
|
function isTableKeyValid(name, passcode) {
|
|
|
|
const r = /^[a-zA-Z0-9_]+$/;
|
|
|
|
return r.test(name) && r.test(passcode);
|
|
|
|
}
|
|
|
|
|
2023-02-12 15:15:44 +00:00
|
|
|
function dial() {
|
|
|
|
// get tableKey from UI
|
|
|
|
const tblNameInput = document.getElementById("input_table_name");
|
|
|
|
const tblPassInput = document.getElementById("input_table_pass");
|
|
|
|
if (tblNameInput && tblPassInput && tblNameInput.value && tblPassInput.value) {
|
2023-07-06 04:27:38 +00:00
|
|
|
if (isTableKeyValid(tblNameInput.value, tblPassInput.value)) {
|
|
|
|
tableKey.name = tblNameInput.value;
|
|
|
|
tableKey.passcode = tblPassInput.value;
|
|
|
|
|
|
|
|
if (conn) {
|
|
|
|
conn.close(1000);
|
|
|
|
}
|
|
|
|
conn = new WebSocket(`ws://${location.host}/subscribe`, `${tableKey.name}.${tableKey.passcode}`);
|
|
|
|
conn.addEventListener("close", e => {
|
|
|
|
if (e.code == 1006) {
|
|
|
|
setErr("Table not found - check the name and passcode are correct");
|
|
|
|
} else if (e.code > 1001) {
|
|
|
|
// TODO: add message to let user know they are reconnecting
|
|
|
|
setErr("Websocket error: trying to reconnect");
|
|
|
|
setTimeout(dial, 1000)
|
|
|
|
} else {
|
|
|
|
tabletop = document.getElementById("tabletop");
|
|
|
|
if (tabletop) {
|
|
|
|
tabletop.style.display = "none";
|
|
|
|
}
|
|
|
|
table = null;
|
2023-07-09 06:48:19 +00:00
|
|
|
while (tokens.some(t=>t)) {
|
|
|
|
tokens[0].m.removeFrom(map);
|
|
|
|
tokens.shift();
|
|
|
|
}
|
2023-07-06 04:27:38 +00:00
|
|
|
}
|
|
|
|
});
|
|
|
|
conn.addEventListener("open", e => {
|
|
|
|
// TODO: add message to let user know they are at the table
|
2023-02-20 17:40:25 +00:00
|
|
|
tabletop = document.getElementById("tabletop");
|
|
|
|
if (tabletop) {
|
2023-07-06 04:27:38 +00:00
|
|
|
tabletop.style.display = "block";
|
2023-02-20 17:40:25 +00:00
|
|
|
}
|
2023-07-06 04:27:38 +00:00
|
|
|
});
|
|
|
|
conn.addEventListener("error", e => {
|
|
|
|
setErr(`${e.name}: ${e.message}`);
|
|
|
|
conn.close(3000);
|
|
|
|
})
|
2023-05-13 04:33:14 +00:00
|
|
|
|
2023-07-06 04:27:38 +00:00
|
|
|
conn.addEventListener("message", e => {
|
|
|
|
const data = JSON.parse(e.data);
|
|
|
|
if (table == null) {
|
2023-07-09 06:48:19 +00:00
|
|
|
// dicerolls are treated as a byte array when marshalling to json, so we have to decode them
|
2023-07-06 04:27:38 +00:00
|
|
|
data.diceRolls.forEach(r=>{
|
|
|
|
r.roll = Uint8Array.from(atob(r.roll), c => c.charCodeAt(0))
|
|
|
|
})
|
|
|
|
table = data;
|
|
|
|
makeUpToDate(table);
|
|
|
|
} else {
|
2023-07-06 08:20:30 +00:00
|
|
|
if (data.diceRoll) {
|
|
|
|
data.diceRoll.roll = Uint8Array.from(atob(data.diceRoll.roll), c => c.charCodeAt(0));
|
|
|
|
}
|
2023-07-06 04:27:38 +00:00
|
|
|
makeUpToDate(data);
|
|
|
|
}
|
|
|
|
|
|
|
|
console.log(data);
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
setErr("Table name and passcode can only be alphanumeric and underscores");
|
|
|
|
}
|
|
|
|
}else {
|
|
|
|
setErr("Table name and passcode required");
|
2023-02-12 15:15:44 +00:00
|
|
|
}
|
2023-02-13 04:25:14 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
async function publish(msg) {
|
|
|
|
msg.key = tableKey;
|
|
|
|
const res = await fetch('/publish', {
|
|
|
|
method: 'POST',
|
|
|
|
body: JSON.stringify(msg)
|
|
|
|
});
|
|
|
|
if (!res.ok) {
|
|
|
|
setErr("Failed to publish message");
|
|
|
|
}
|
2023-07-06 04:27:38 +00:00
|
|
|
}
|