283 lines
12 KiB
JavaScript
283 lines
12 KiB
JavaScript
/* ===================================================
|
|
JAESWIFT.XYZ — LEADERBOARDS FRONTEND
|
|
Fetches /api/leaderboards and renders 6 panels.
|
|
=================================================== */
|
|
(function () {
|
|
'use strict';
|
|
|
|
const REFRESH_MS = 60000;
|
|
const API_URL = '/api/leaderboards';
|
|
let visitorIpPrefix = null; // first octet of viewer IP for self-highlight
|
|
let lastFetchedAt = null;
|
|
|
|
// ─── Utils ─────────────────────────────────────
|
|
function $(sel, root) { return (root || document).querySelector(sel); }
|
|
function el(tag, attrs, children) {
|
|
const e = document.createElement(tag);
|
|
if (attrs) Object.keys(attrs).forEach(k => {
|
|
if (k === 'class') e.className = attrs[k];
|
|
else if (k === 'text') e.textContent = attrs[k];
|
|
else if (k === 'html') e.innerHTML = attrs[k];
|
|
else e.setAttribute(k, attrs[k]);
|
|
});
|
|
if (Array.isArray(children)) children.forEach(c => c && e.appendChild(c));
|
|
return e;
|
|
}
|
|
function rank(i) {
|
|
const n = String(i).padStart(2, '0');
|
|
let cls = 'lb-rank';
|
|
if (i === 1) cls += ' lb-rank-1';
|
|
else if (i === 2) cls += ' lb-rank-2';
|
|
else if (i === 3) cls += ' lb-rank-3';
|
|
return el('span', { class: cls, text: '#' + n });
|
|
}
|
|
function fmtNum(n) {
|
|
return (n || 0).toLocaleString('en-GB');
|
|
}
|
|
function ccToFlag(cc) {
|
|
if (!cc || cc.length !== 2) return '';
|
|
const base = 0x1F1E6;
|
|
const up = cc.toUpperCase();
|
|
const a = up.charCodeAt(0) - 65;
|
|
const b = up.charCodeAt(1) - 65;
|
|
if (a < 0 || a > 25 || b < 0 || b > 25) return '';
|
|
return String.fromCodePoint(base + a) + String.fromCodePoint(base + b);
|
|
}
|
|
function secondsAgo(iso) {
|
|
if (!iso) return '—';
|
|
const t = new Date(iso).getTime();
|
|
const s = Math.floor((Date.now() - t) / 1000);
|
|
if (s < 60) return s + 's ago';
|
|
if (s < 3600) return Math.floor(s / 60) + 'm ago';
|
|
if (s < 86400) return Math.floor(s / 3600) + 'h ago';
|
|
return Math.floor(s / 86400) + 'd ago';
|
|
}
|
|
|
|
// ─── Renderers ─────────────────────────────────
|
|
function renderBarRows(panelId, rows, opts) {
|
|
opts = opts || {};
|
|
const panel = document.getElementById(panelId);
|
|
if (!panel) return;
|
|
const body = panel.querySelector('.lb-panel-body');
|
|
body.innerHTML = '';
|
|
if (!rows || !rows.length) {
|
|
body.appendChild(el('div', { class: 'lb-loading', text: '(no data yet)' }));
|
|
return;
|
|
}
|
|
const max = Math.max.apply(null, rows.map(r => r.count || 0)) || 1;
|
|
rows.forEach((r, i) => {
|
|
const pct = Math.max(2, Math.round((r.count / max) * 100));
|
|
const row = el('div', { class: 'lb-row' + (r.isSelf ? ' lb-row-self' : '') });
|
|
row.appendChild(rank(i + 1));
|
|
|
|
const labelEl = el('div', { class: 'lb-label' });
|
|
if (opts.labelHTML) labelEl.innerHTML = opts.labelHTML(r);
|
|
else labelEl.textContent = r.label || '';
|
|
row.appendChild(labelEl);
|
|
|
|
const countEl = el('span', { class: 'lb-count', text: fmtNum(r.count) + (opts.countSuffix || '') });
|
|
row.appendChild(countEl);
|
|
|
|
const barWrap = el('div', { class: 'lb-bar-wrap' });
|
|
const bar = el('div', { class: 'lb-bar' });
|
|
barWrap.appendChild(bar);
|
|
row.appendChild(barWrap);
|
|
|
|
body.appendChild(row);
|
|
// animate width
|
|
requestAnimationFrame(() => { bar.style.width = pct + '%'; });
|
|
});
|
|
}
|
|
|
|
function renderCountries(list) {
|
|
const rows = (list || []).map(c => ({
|
|
label: (c.country_name || c.country_code || 'Unknown'),
|
|
country_code: c.country_code,
|
|
count: c.count,
|
|
}));
|
|
renderBarRows('panelCountries', rows.slice(0, 15), {
|
|
labelHTML: function (r) {
|
|
const flag = ccToFlag(r.country_code);
|
|
return '<span class="lb-flag">' + (flag || '🏳️') + '</span>' + escapeHtml(r.label) + ' <span class="lb-sub">' + (r.country_code || '—') + '</span>';
|
|
}
|
|
});
|
|
}
|
|
|
|
function renderPages(list) {
|
|
const rows = (list || []).slice(0, 20).map(p => ({
|
|
label: p.path || '/',
|
|
count: p.count,
|
|
}));
|
|
renderBarRows('panelPages', rows, {
|
|
labelHTML: function (r) {
|
|
return '<code style="color:var(--status-green,#00cc33)">' + escapeHtml(r.label) + '</code>';
|
|
}
|
|
});
|
|
}
|
|
|
|
function renderReferrers(list) {
|
|
const rows = (list || []).slice(0, 10).map(r => ({
|
|
label: (r.referrer || 'direct'),
|
|
count: r.count,
|
|
}));
|
|
if (!rows.length) {
|
|
const panel = document.getElementById('panelReferrers');
|
|
const body = panel.querySelector('.lb-panel-body');
|
|
body.innerHTML = '<div class="lb-loading">(mostly direct traffic — no referrers tracked yet)</div>';
|
|
return;
|
|
}
|
|
renderBarRows('panelReferrers', rows, {
|
|
labelHTML: function (r) {
|
|
const u = r.label;
|
|
return '<span title="' + escapeHtml(u) + '">' + escapeHtml(u.length > 48 ? u.slice(0, 48) + '…' : u) + '</span>';
|
|
}
|
|
});
|
|
}
|
|
|
|
function renderBrowsers(list) {
|
|
const rows = (list || []).slice(0, 10).map(b => ({
|
|
label: b.browser || 'Other',
|
|
count: b.count,
|
|
}));
|
|
renderBarRows('panelBrowsers', rows, {
|
|
labelHTML: function (r) {
|
|
const icons = { 'Chrome': '🟢', 'Firefox': '🦊', 'Safari': '🧭', 'Edge': '🌀', 'Opera': '🔴', 'Bot': '🤖' };
|
|
const ic = icons[r.label] || '💠';
|
|
return '<span class="lb-flag">' + ic + '</span>' + escapeHtml(r.label);
|
|
}
|
|
});
|
|
}
|
|
|
|
function renderPeakHours(hours) {
|
|
const panel = document.getElementById('panelHours');
|
|
const body = panel.querySelector('.lb-panel-body');
|
|
body.innerHTML = '';
|
|
if (!hours || !hours.length) {
|
|
body.appendChild(el('div', { class: 'lb-loading', text: '(no data yet)' }));
|
|
return;
|
|
}
|
|
// Normalise to 24-bucket array
|
|
const counts = new Array(24).fill(0);
|
|
hours.forEach(h => {
|
|
const idx = (typeof h.hour === 'number') ? h.hour : parseInt(h.hour, 10);
|
|
if (!isNaN(idx) && idx >= 0 && idx < 24) counts[idx] = h.count || 0;
|
|
});
|
|
const max = Math.max.apply(null, counts) || 1;
|
|
const peakIdx = counts.indexOf(max);
|
|
|
|
const chart = el('div', { class: 'lb-hours' });
|
|
counts.forEach((c, i) => {
|
|
const h = Math.max(2, Math.round((c / max) * 100));
|
|
const col = el('div', {
|
|
class: 'lb-hour-col',
|
|
'data-hour': String(i).padStart(2, '0'),
|
|
'data-showlabel': (i % 3 === 0) ? '1' : '0',
|
|
'data-peak': (i === peakIdx) ? '1' : '0',
|
|
title: String(i).padStart(2, '0') + ':00 UTC — ' + fmtNum(c) + ' requests'
|
|
});
|
|
col.style.height = h + '%';
|
|
chart.appendChild(col);
|
|
});
|
|
body.appendChild(chart);
|
|
const summary = el('div', {
|
|
class: 'lb-footer',
|
|
style: 'margin-top:10px; padding:8px 0; text-align:left; border:none;',
|
|
html: 'PEAK: <code>' + String(peakIdx).padStart(2, '0') + ':00 UTC</code> — ' + fmtNum(max) + ' req · Total: ' + fmtNum(counts.reduce((a,b)=>a+b,0)) + ' req/24h'
|
|
});
|
|
body.appendChild(summary);
|
|
}
|
|
|
|
function renderOperators(list) {
|
|
const panel = document.getElementById('panelOperators');
|
|
const body = panel.querySelector('.lb-panel-body');
|
|
body.innerHTML = '';
|
|
if (!list || !list.length) {
|
|
body.appendChild(el('div', { class: 'lb-loading', text: '(no data yet)' }));
|
|
return;
|
|
}
|
|
const max = Math.max.apply(null, list.map(o => o.count || 0)) || 1;
|
|
list.slice(0, 10).forEach((op, i) => {
|
|
const isSelf = visitorIpPrefix && op.ip_masked && op.ip_masked.startsWith(visitorIpPrefix + '.');
|
|
const row = el('div', { class: 'lb-row' + (isSelf ? ' lb-row-self' : '') });
|
|
row.appendChild(rank(i + 1));
|
|
const lbl = el('div', { class: 'lb-label' });
|
|
lbl.innerHTML = '<code style="color:var(--warning,#c9a227)">' + escapeHtml(op.ip_masked) + '</code>' +
|
|
(isSelf ? ' <span class="lb-sub" style="color:var(--warning,#c9a227)">(YOU)</span>' : '') +
|
|
' <span class="lb-sub">· last seen ' + escapeHtml(op.last_seen || '—') + '</span>';
|
|
row.appendChild(lbl);
|
|
row.appendChild(el('span', { class: 'lb-count', text: fmtNum(op.count) + ' req' }));
|
|
const barWrap = el('div', { class: 'lb-bar-wrap' });
|
|
const bar = el('div', { class: 'lb-bar' });
|
|
if (isSelf) bar.style.background = 'linear-gradient(90deg, var(--warning, #c9a227), var(--status-green, #00cc33))';
|
|
barWrap.appendChild(bar);
|
|
row.appendChild(barWrap);
|
|
body.appendChild(row);
|
|
const pct = Math.max(2, Math.round((op.count / max) * 100));
|
|
requestAnimationFrame(() => { bar.style.width = pct + '%'; });
|
|
});
|
|
}
|
|
|
|
function escapeHtml(s) {
|
|
return String(s || '').replace(/[&<>"']/g, function (c) {
|
|
return { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c];
|
|
});
|
|
}
|
|
|
|
// ─── Main fetch/update ──────────────────────────
|
|
async function loadSelfIp() {
|
|
try {
|
|
const r = await fetch('/api/visitor/scan');
|
|
if (!r.ok) return;
|
|
const d = await r.json();
|
|
if (d.ip_masked) {
|
|
visitorIpPrefix = d.ip_masked.split('.')[0]; // first octet
|
|
}
|
|
} catch (e) { /* ignore */ }
|
|
}
|
|
|
|
async function fetchAndRender() {
|
|
try {
|
|
const r = await fetch(API_URL, { cache: 'no-store' });
|
|
if (!r.ok) throw new Error('HTTP ' + r.status);
|
|
const d = await r.json();
|
|
lastFetchedAt = new Date();
|
|
|
|
document.getElementById('lbReqs24h').textContent = '24h REQUESTS: ' + fmtNum(d.total_requests_24h);
|
|
document.getElementById('lbReqs7d').textContent = '7d REQUESTS: ' + fmtNum(d.total_requests_7d);
|
|
|
|
renderCountries(d.top_countries);
|
|
renderPages(d.top_pages);
|
|
renderReferrers(d.top_referrers);
|
|
renderPeakHours(d.peak_hours);
|
|
renderBrowsers(d.browsers);
|
|
renderOperators(d.top_operators);
|
|
|
|
updateUpdatedLabel();
|
|
} catch (e) {
|
|
console.error('leaderboards fetch failed:', e);
|
|
document.getElementById('lbUpdated').textContent = '● FETCH ERROR — retrying...';
|
|
}
|
|
}
|
|
|
|
function updateUpdatedLabel() {
|
|
if (!lastFetchedAt) return;
|
|
const s = Math.floor((Date.now() - lastFetchedAt.getTime()) / 1000);
|
|
document.getElementById('lbUpdated').textContent =
|
|
'● LAST UPDATED ' + (s < 5 ? 'just now' : s + 's ago');
|
|
}
|
|
|
|
// ─── Init ──────────────────────────────────────
|
|
document.addEventListener('DOMContentLoaded', async function () {
|
|
await loadSelfIp();
|
|
await fetchAndRender();
|
|
setInterval(fetchAndRender, REFRESH_MS);
|
|
setInterval(updateUpdatedLabel, 1000);
|
|
const btn = document.getElementById('lbRefresh');
|
|
if (btn) btn.addEventListener('click', function () {
|
|
btn.disabled = true; btn.textContent = '↻ REFRESHING…';
|
|
fetchAndRender().then(() => {
|
|
setTimeout(() => { btn.disabled = false; btn.textContent = '↻ REFRESH'; }, 400);
|
|
});
|
|
});
|
|
});
|
|
})();
|