cs2/simpleadmin-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Playtime records from pt_events; sticky top bar, page scroll locked under the drawer

Browse source 
Records: the most bomb plants, defuses, knife, Zeus and headshot kills for
the last 7 days, 30 days or all time, and each player's counts, when
PlaytimeHistory 0.2.0's pt_events is there. The public site's top bar now
sticks the whole way down, Playtime comes after Server, and only the
player drawer scrolls while it's open.
This commit is contained in:
Astra 2026-10-04 21:37:42 +01:00
parent 6d0fc6e463
commit 7004945d49
9 changed files with 296 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

48
internal/web/assets/playtime.js
View file

@ -22,7 +22,12 @@ const PT_REASONS = {
NETWORK_DISCONNECT_SHUTDOWN: "Server shut down",
};
const ptState = { period: "7d", staffPeriod: "7d" };
const ptState = { period: "7d", staffPeriod: "7d", records: "7d" };
// The Records categories, from PlaytimeHistory's pt_events (0.2.0+).
const PT_RECORDS = [
["plants", "Bomb plants"], ["defuses", "Bomb defuses"], ["knifeKills", "Knife kills"], ["zeusKills", "Zeus kills"], ["headshots", "Headshot kills"],
];
const ptH = (h) => (h >= 100 ? Math.round(h).toLocaleString() : (Math.round(h * 10) / 10).toFixed(1)) + " h";
const ptPct = (a, b) => Math.round((a / Math.max(b, 1)) * 100);
@ -146,9 +151,24 @@ function ptMapsPanel(o) {
</section>`;
}
function ptRecords(d) {
const r = d.records;
const since = r.since ? `Counted since ${ptDay(r.since.slice(0, 10), { day: "numeric", month: "short", year: "numeric" })}, not in warmup; kills of bots don't count.` : "Nothing counted yet.";
return `<section class="panel">
<div class="panel-head">
<div><h2>Records</h2><p>${since}</p></div>
${segmented("ptRecords", d.recordsPeriod, PT_PERIODS)}
</div>
<div class="pt-records">${PT_RECORDS.map(([key, label]) => `<div class="pt-record">
<h3>${label}</h3>
${r[key].length ? `<ol>${r[key].map((p) => `<li class="clickable" data-player="${esc(p.steamid)}"><span>${esc(p.name || p.steamid)}</span><b>${p.count.toLocaleString()}</b></li>`).join("")}</ol>` : '<p class="faint">None yet.</p>'}
</div>`).join("")}</div>
</section>`;
}
function ptPublicPanels(d) {
const o = d.overview;
return `${ptTiles(o.summary)}<div id="pt-leaders">${ptLeaders(d)}</div>
return `${ptTiles(o.summary)}<div id="pt-leaders">${ptLeaders(d)}</div>${d.records ? `<div id="pt-records">${ptRecords(d)}</div>` : ""}
<div class="pt-grid">${ptBusiest(o)}${ptDaily(o)}</div>${ptHeatmap(o)}${ptMapsPanel(o)}`;
}
@ -254,7 +274,7 @@ async function ptPage(me, isCurrent) {
}).catch((err) => { if (isCurrent()) $("#pt-staff").innerHTML = errorBox(err); }));
}
if (me?.playtime === "on") {
jobs.push(api(`/api/public/playtime${qs({ period: ptState.period, tz: PT_TZ })}`).then((d) => {
jobs.push(api(`/api/public/playtime${qs({ period: ptState.period, records: ptState.records, tz: PT_TZ })}`).then((d) => {
if (isCurrent()) $("#pt-public").innerHTML = ptPublicPanels(d);
}).catch((err) => { if (isCurrent()) $("#pt-public").innerHTML = errorBox(err); }));
}
@ -263,12 +283,12 @@ async function ptPage(me, isCurrent) {
// Switching a period redraws only that panel.
async function ptSwitch(key, value) {
if (key === "ptPeriod") {
ptState.period = value;
if (key === "ptPeriod" || key === "ptRecords") {
ptState[key === "ptPeriod" ? "period" : "records"] = value;
try {
const d = await api(`/api/public/playtime${qs({ period: value, tz: PT_TZ })}`);
const box = $("#pt-leaders");
if (box) box.innerHTML = ptLeaders(d);
const d = await api(`/api/public/playtime${qs({ period: ptState.period, records: ptState.records, tz: PT_TZ })}`);
const box = key === "ptPeriod" ? $("#pt-leaders") : $("#pt-records");
if (box) box.innerHTML = key === "ptPeriod" ? ptLeaders(d) : ptRecords(d);
} catch (err) { toast(err.message); }
} else if (key === "ptStaffPeriod") {
ptState.staffPeriod = value;
@ -319,6 +339,16 @@ function ptDrawer(pt, online) {
</div>
<p class="muted" style="margin:10px 0 0;font-size:14px">${st.kills.toLocaleString()} kills, ${st.deaths.toLocaleString()} deaths and ${st.assists.toLocaleString()} assists over ${st.rounds.toLocaleString()} rounds.</p>
</section>` : ""}
${p.events && Object.values(p.events).some((n) => n > 0) ? `<section>
<h3>Records</h3>
<div class="pt-stats">
<div><b>${p.events.plants.toLocaleString()}</b><small>Bomb plants</small></div>
<div><b>${p.events.defuses.toLocaleString()}</b><small>Bomb defuses</small></div>
<div><b>${p.events.knifeKills.toLocaleString()}</b><small>Knife kills</small></div>
<div><b>${p.events.zeusKills.toLocaleString()}</b><small>Zeus kills</small></div>
</div>
<p class="muted" style="margin:10px 0 0;font-size:14px">${p.events.headshots.toLocaleString()} headshot kills. Counted as they happen, not in warmup or on bots.</p>
</section>` : ""}
${p.maps.length ? `<section>
<h3>Favourite maps</h3>
<div class="pt-maps">${p.maps.map((m) => `<div><span>${esc(m.map)}</span>${ptBar(m.hours, maxMap, ptH(m.hours), "var(--t)")}</div>`).join("")}</div>
@ -358,7 +388,7 @@ function ptDrawer(pt, online) {
/* ---------- Events ---------- */
document.addEventListener("click", (e) => {
const seg = e.target.closest('[data-seg="ptPeriod"] button, [data-seg="ptStaffPeriod"] button');
const seg = e.target.closest('[data-seg="ptPeriod"] button, [data-seg="ptStaffPeriod"] button, [data-seg="ptRecords"] button');
if (!seg) return;
seg.parentElement.querySelectorAll("button").forEach((b) => b.setAttribute("aria-pressed", String(b === seg)));
ptSwitch(seg.parentElement.dataset.seg, seg.dataset.value);