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

Playtime: average over the days recorded, full bars for leaders under an hour

Browse source 
Busiest hours and the heatmap averaged over 30 days (4 weeks) even when
recording began yesterday; they now use only the days since it began, and
say so. Bars capped their scale at 1, so a leader with 0.5 h got half a
bar. The hours tile keeps a decimal under 10, and K/D shows - with no
kills or deaths yet.
This commit is contained in:
Astra 2026-10-04 22:24:37 +01:00
parent f659859d66
commit c7fbff0e43
4 changed files with 57 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -30,8 +30,10 @@ const PT_RECORDS = [
];
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);
const ptKD = (k, d) => (k / Math.max(d, 1)).toFixed(2);
// a as a percentage of b. Works for hours under 1 too; nothing of nothing is 0.
const ptPct = (a, b) => (b > 0 ? Math.round((a / b) * 100) : 0);
// "–" until there's a kill or death to go on (session stats are saved when a session ends).
const ptKD = (k, d) => (k + d > 0 ? (k / Math.max(d, 1)).toFixed(2) : "–");
const ptPad = (h) => String(h).padStart(2, "0");
const ptDur = (s) => (s >= 3600 ? `${Math.floor(s / 3600)}h ${ptPad(Math.floor((s % 3600) / 60))}m` : `${Math.max(1, Math.round(s / 60))}m`);
const ptDay = (iso, opts = { weekday: "short", day: "numeric", month: "short" }) => new Date(`${iso}T12:00:00`).toLocaleDateString(undefined, opts);
@ -84,7 +86,7 @@ function ptTiles(s) {
const delta = (a, b) => (b ? `<span class="delta ${a >= b ? "up" : ""}">${a >= b ? "+" : ""}${ptPct(a - b, b)}% on the 7 days before</span>` : '<span class="delta">Nothing the 7 days before</span>');
return `<div class="pt-tiles">
<div class="pt-tile"><small>Players, last 7 days</small><b>${s.players}</b>${delta(s.players, s.playersPrev)}</div>
<div class="pt-tile"><small>Hours played, last 7 days</small><b>${Math.round(s.hours).toLocaleString()}</b>${delta(s.hours, s.hoursPrev)}</div>
<div class="pt-tile"><small>Hours played, last 7 days</small><b>${s.hours < 10 ? s.hours.toFixed(1) : Math.round(s.hours).toLocaleString()}</b>${delta(s.hours, s.hoursPrev)}</div>
<div class="pt-tile"><small>Most online at once</small><b>${s.peak}</b><span class="delta">${s.peakAt ? fmtDate(s.peakAt) : "No count yet"}</span></div>
<div class="pt-tile"><small>New players, last 7 days</small><b>${s.newPlayers}</b><span class="delta">First time on the server</span></div>
</div>`;
@ -110,11 +112,18 @@ function ptLeaders(d) {
</section>`;
}
// "the last 30 days", or how long the recording's been going when that's shorter.
function ptDaysText(n) {
if (n >= 30) return "the last 30 days";
if (n >= 28) return "the last 4 weeks";
return n > 1 ? `the ${n} days since recording began` : "today, the first day recorded";
}
function ptBusiest(o) {
const vals = o.byHour.map((v, h) => ({ v, tick: h % 3 === 0 ? ptPad(h) : "", tip: `${ptPad(h)}:00 · ${v} players on average` }));
const best = o.byHour.indexOf(Math.max(...o.byHour));
return `<section class="panel">
<div class="panel-head"><div><h2>Busiest hours</h2><p>Players on T or CT, averaged over the last 30 days, in your time zone.</p></div></div>
<div class="panel-head"><div><h2>Busiest hours</h2><p>Players on T or CT (bots don't count), averaged over ${ptDaysText(o.byHourDays)}, in your time zone.</p></div></div>
${ptColumns(vals, { note: o.byHour[best] ? `Busiest at <b>${ptPad(best)}:00</b>, with ${o.byHour[best]} players on average.` : "" })}
</section>`;
}
@ -131,7 +140,7 @@ function ptHeatmap(o) {
const max = Math.max(0.1, ...o.heat.flat());
const step = (v) => (v <= 0.05 ? 0 : Math.min(5, Math.ceil((v / max) * 5)));
return `<section class="panel">
<div class="panel-head"><div><h2>When people play</h2><p>Average players on T or CT by day and hour, last 4 weeks, in your time zone.</p></div></div>
<div class="panel-head"><div><h2>When people play</h2><p>Average players on T or CT by day and hour, over ${ptDaysText(o.heatDays)}, in your time zone.</p></div></div>
<div class="pt-heat"><table>
<thead><tr><th></th>${o.heat[0].map((_, h) => `<th>${h % 3 === 0 ? ptPad(h) : ""}</th>`).join("")}</tr></thead>
<tbody>${o.heat.map((row, wd) => `<tr><th scope="row">${PT_WEEKDAYS[wd]}</th>${row.map((v, h) => `<td><i style="background:var(--heat-${step(v)})" data-tip="${PT_WEEKDAYS[wd]} ${ptPad(h)}:00 · ${v} players"></i></td>`).join("")}</tr>`).join("")}</tbody>