Initial commit
This commit is contained in:
Eric Meehan -X (ermeehan - ACTALENT SERVICES LLC at Cisco)
commit
fb7a34a95e
+273
@@ -0,0 +1,273 @@
|
||||
"use strict";
|
||||
|
||||
const TOKEN_KEY = "thebutton-token";
|
||||
const $ = (id) => document.getElementById(id);
|
||||
|
||||
let game = null; // latest /api/state payload
|
||||
let clockOffset = 0; // serverTime - clientTime
|
||||
let token = localStorage.getItem(TOKEN_KEY);
|
||||
let statsLoaded = false;
|
||||
let subscribed = false;
|
||||
|
||||
async function api(method, path, body) {
|
||||
const headers = { "Content-Type": "application/json" };
|
||||
if (token) headers.Authorization = `Bearer ${token}`;
|
||||
const res = await fetch(path, { method, headers, body: body ? JSON.stringify(body) : undefined });
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) throw Object.assign(new Error(data.error || res.statusText), { status: res.status });
|
||||
return data;
|
||||
}
|
||||
|
||||
function serverNow() {
|
||||
return Date.now() + clockOffset;
|
||||
}
|
||||
|
||||
function formatMs(ms) {
|
||||
ms = Math.max(0, ms);
|
||||
const h = Math.floor(ms / 3600000);
|
||||
const m = Math.floor((ms % 3600000) / 60000);
|
||||
const s = Math.floor((ms % 60000) / 1000);
|
||||
const cs = Math.floor((ms % 1000) / 10);
|
||||
const pad = (n) => String(n).padStart(2, "0");
|
||||
return `${pad(h)}:${pad(m)}:${pad(s)}.${pad(cs)}`;
|
||||
}
|
||||
|
||||
function formatPrecise(ms) {
|
||||
return `${formatMs(ms).slice(0, -3)}.${String(Math.max(0, ms) % 1000).padStart(3, "0")}`;
|
||||
}
|
||||
|
||||
function zoneFor(remaining) {
|
||||
return game.zones.find((z) => remaining > z.remaining_to_ms) ?? game.zones[game.zones.length - 1];
|
||||
}
|
||||
|
||||
function formatDuration(ms) {
|
||||
const totalMin = Math.round(ms / 60000);
|
||||
const h = Math.floor(totalMin / 60);
|
||||
const m = totalMin % 60;
|
||||
if (h && m) return `${h}h ${m}m`;
|
||||
if (h) return `${h}h`;
|
||||
if (m) return `${m}m`;
|
||||
return `${Math.round(ms / 1000)}s`;
|
||||
}
|
||||
|
||||
function setZoneClass(el, zoneName) {
|
||||
el.className = el.className.replace(/\bzone-\w+/g, "").trim();
|
||||
el.classList.add(`zone-${zoneName}`);
|
||||
}
|
||||
|
||||
function el(tag, text, className) {
|
||||
const e = document.createElement(tag);
|
||||
if (text !== undefined) e.textContent = text;
|
||||
if (className) e.className = className;
|
||||
return e;
|
||||
}
|
||||
|
||||
function fillTable(table, headers, rows) {
|
||||
table.replaceChildren();
|
||||
const head = table.createTHead().insertRow();
|
||||
headers.forEach((h) => head.appendChild(el("th", h)));
|
||||
const tbody = table.createTBody();
|
||||
rows.forEach((cells) => {
|
||||
const tr = tbody.insertRow();
|
||||
cells.forEach((c) => {
|
||||
const td = tr.insertCell();
|
||||
if (c instanceof Node) td.appendChild(c);
|
||||
else td.textContent = c;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function zoneSwatch(name) {
|
||||
return el("span", name, `swatch zone-${name}`);
|
||||
}
|
||||
|
||||
function zoneRows(counts) {
|
||||
return game.zones.map((z) => [zoneSwatch(z.name), z.points, counts[z.name] ?? 0]);
|
||||
}
|
||||
|
||||
function buildStaticUi() {
|
||||
const bar = $("zone-bar");
|
||||
game.zones.forEach((z) => {
|
||||
const seg = el("span", undefined, `zone-${z.name}`);
|
||||
seg.style.flexGrow = z.remaining_from_ms - z.remaining_to_ms;
|
||||
bar.insertBefore(seg, $("zone-marker"));
|
||||
});
|
||||
$("rules-zones").replaceChildren(...game.zones.map((z) => {
|
||||
const s = zoneSwatch(z.name);
|
||||
s.textContent = `${z.name} (${z.points} pt${z.points === 1 ? "" : "s"}, ${formatDuration(z.remaining_from_ms - z.remaining_to_ms)})`;
|
||||
return s;
|
||||
}));
|
||||
}
|
||||
|
||||
async function refreshState() {
|
||||
const t0 = Date.now();
|
||||
const s = await api("GET", "/api/state");
|
||||
const first = !game;
|
||||
clockOffset = s.now - (t0 + Date.now()) / 2;
|
||||
game = s;
|
||||
if (first) buildStaticUi();
|
||||
if (game.ended && !statsLoaded) loadStats();
|
||||
updateButton();
|
||||
}
|
||||
|
||||
function updateButton() {
|
||||
$("the-button").disabled = !token || !game || game.ended;
|
||||
$("register-section").hidden = !!token;
|
||||
$("mailing-list").hidden = !token || subscribed;
|
||||
$("my-subscribed").hidden = !token || !subscribed;
|
||||
}
|
||||
|
||||
function tick() {
|
||||
if (game) {
|
||||
const remaining = game.ended ? 0 : game.deadline - serverNow();
|
||||
const zone = zoneFor(remaining);
|
||||
const cd = $("countdown");
|
||||
cd.textContent = formatMs(remaining);
|
||||
setZoneClass(cd, zone.name);
|
||||
setZoneClass($("the-button"), zone.name);
|
||||
$("zone-label").textContent = game.ended ? "game over" : `${zone.name} zone \u00b7 ${zone.points} pt${zone.points === 1 ? "" : "s"}`;
|
||||
const pct = Math.min(100, Math.max(0, ((game.duration_ms - remaining) / game.duration_ms) * 100));
|
||||
$("zone-marker").style.left = `${pct}%`;
|
||||
if (!game.ended && remaining <= 0) refreshState().catch(() => {});
|
||||
}
|
||||
requestAnimationFrame(tick);
|
||||
}
|
||||
|
||||
async function loadMe() {
|
||||
if (!token) return;
|
||||
try {
|
||||
const me = await api("GET", "/api/me");
|
||||
$("me-section").hidden = false;
|
||||
$("my-name").textContent = me.name;
|
||||
$("my-points").textContent = me.total_points.toLocaleString();
|
||||
$("my-presses").textContent = me.press_count;
|
||||
subscribed = me.subscribed;
|
||||
updateButton();
|
||||
fillTable($("my-zones"), ["Zone", "Points each", "Your presses"], zoneRows(me.zone_counts));
|
||||
fillTable(
|
||||
$("my-history"),
|
||||
["When", "Remaining", "Zone", "Points"],
|
||||
me.presses.slice().reverse().map((p) => [
|
||||
new Date(p.at).toLocaleString(), formatPrecise(p.remaining_ms), zoneSwatch(p.zone), p.points,
|
||||
]),
|
||||
);
|
||||
} catch (e) {
|
||||
if (e.status === 401) {
|
||||
token = null;
|
||||
localStorage.removeItem(TOKEN_KEY);
|
||||
updateButton();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function loadStats() {
|
||||
try {
|
||||
const s = await api("GET", "/api/stats");
|
||||
statsLoaded = true;
|
||||
$("stats-section").hidden = false;
|
||||
const summary = $("stats-summary");
|
||||
summary.replaceChildren(
|
||||
el("p", `Lasted ${formatMs(s.ended_at - s.started_at)} \u00b7 ${s.total_players} players \u00b7 ${s.total_presses} presses`),
|
||||
);
|
||||
if (s.last_press) {
|
||||
summary.appendChild(el("p", `Last press: ${s.last_press.name} with ${formatPrecise(s.last_press.remaining_ms)} remaining`));
|
||||
}
|
||||
if (s.lowest_press) {
|
||||
summary.appendChild(el("p", `Closest call: ${s.lowest_press.name} with ${formatPrecise(s.lowest_press.remaining_ms)} remaining`));
|
||||
}
|
||||
fillTable($("stats-zones"), ["Zone", "Points each", "Presses"], zoneRows(s.zone_counts));
|
||||
fillTable(
|
||||
$("stats-leaderboard"),
|
||||
["#", "Player", "Points", "Presses", ...game.zones.map((z) => z.name), "Best remaining"],
|
||||
s.leaderboard.map((p, i) => [
|
||||
i + 1, p.name, p.total_points.toLocaleString(), p.press_count,
|
||||
...game.zones.map((z) => p.zone_counts[z.name]),
|
||||
p.best_remaining_ms == null ? "-" : formatPrecise(p.best_remaining_ms),
|
||||
]),
|
||||
);
|
||||
fillTable(
|
||||
$("stats-log"),
|
||||
["When", "Player", "Remaining", "Zone", "Points"],
|
||||
s.presses.map((p) => [
|
||||
new Date(p.at).toLocaleString(), p.name, formatPrecise(p.remaining_ms), zoneSwatch(p.zone), p.points,
|
||||
]),
|
||||
);
|
||||
} catch {
|
||||
// Not ended yet; ignore.
|
||||
}
|
||||
}
|
||||
|
||||
$("the-button").addEventListener("click", async () => {
|
||||
const btn = $("the-button");
|
||||
btn.disabled = true;
|
||||
try {
|
||||
const r = await api("POST", "/api/press");
|
||||
game.deadline = r.deadline;
|
||||
$("press-result").textContent =
|
||||
`You pressed in the ${r.press.zone} zone with ${formatPrecise(r.press.remaining_ms)} remaining: +${r.press.points} points`;
|
||||
await loadMe();
|
||||
} catch (e) {
|
||||
$("press-result").textContent = e.message;
|
||||
await refreshState().catch(() => {});
|
||||
} finally {
|
||||
updateButton();
|
||||
}
|
||||
});
|
||||
|
||||
$("register-form").addEventListener("submit", async (ev) => {
|
||||
ev.preventDefault();
|
||||
$("register-error").textContent = "";
|
||||
const action = ev.submitter?.value === "register" ? "register" : "login";
|
||||
try {
|
||||
const r = await api("POST", `/api/${action}`, {
|
||||
name: $("name-input").value,
|
||||
password: $("password-input").value,
|
||||
});
|
||||
token = r.token;
|
||||
localStorage.setItem(TOKEN_KEY, token);
|
||||
$("password-input").value = "";
|
||||
updateButton();
|
||||
await loadMe();
|
||||
} catch (e) {
|
||||
$("register-error").textContent = e.message;
|
||||
}
|
||||
});
|
||||
|
||||
$("logout-button").addEventListener("click", async () => {
|
||||
await api("POST", "/api/logout").catch(() => {});
|
||||
token = null;
|
||||
subscribed = false;
|
||||
localStorage.removeItem(TOKEN_KEY);
|
||||
$("me-section").hidden = true;
|
||||
$("press-result").textContent = "";
|
||||
$("subscribe-result").textContent = "";
|
||||
updateButton();
|
||||
});
|
||||
|
||||
$("subscribe-form").addEventListener("submit", async (ev) => {
|
||||
ev.preventDefault();
|
||||
const result = $("subscribe-result");
|
||||
result.className = "";
|
||||
try {
|
||||
await api("POST", "/api/subscribe", {
|
||||
first_name: $("sub-first").value,
|
||||
last_name: $("sub-last").value,
|
||||
email: $("sub-email").value,
|
||||
phone: $("sub-phone").value,
|
||||
});
|
||||
ev.target.reset();
|
||||
result.textContent = "";
|
||||
subscribed = true;
|
||||
updateButton();
|
||||
} catch (e) {
|
||||
result.className = "error";
|
||||
result.textContent = e.message;
|
||||
}
|
||||
});
|
||||
|
||||
(async function init() {
|
||||
await refreshState();
|
||||
await loadMe();
|
||||
requestAnimationFrame(tick);
|
||||
setInterval(() => refreshState().catch(() => {}), 5000);
|
||||
})();
|
||||
Reference in New Issue
Block a user