// components.jsx — shared UI building blocks // ── Icons (12-16px line icons) ───────────────────────────────────── const Icon = ({ d, size = 14, fill, stroke = "currentColor", sw = 1.6, ...rest }) => ( {typeof d === 'string' ? : d} ); const I = { dash: , term: , logs: , users: , map: , sliders:, code: , plug: , clock: , shield: , search: , chev: , plus: , x: , trash: , pause: , play: , reload: , power: , lock: , unlock: , upload: , download: , out: , git: , user: , check: , alert: , flag: , cpu: , ram: , pulse: , bolt: , folder: , file: , star: , caret: , more: , cog: , filter: , sun: , link: , copy: , workshop: , }; // ── Flag — text-rendered, mono ───────────────────────────────────── const FLAG_BG = { SE: 'linear-gradient(180deg,#005d9e 0 41%,#fecb00 41% 59%,#005d9e 59%)', DE: 'linear-gradient(180deg,#000 0 33%,#d00 33% 66%,#fc0 66%)', PL: 'linear-gradient(180deg,#fff 0 50%,#dc143c 50%)', JP: 'radial-gradient(circle at 50% 50%,#bc002d 0 28%,#fff 28%)', FR: 'linear-gradient(90deg,#002395 0 33%,#fff 33% 66%,#ed2939 66%)', LT: 'linear-gradient(180deg,#fdb913 0 33%,#006a44 33% 66%,#c1272d 66%)', FI: 'linear-gradient(180deg,#fff 40%,#003580 40% 60%,#fff 60%),linear-gradient(90deg,#fff 30%,#003580 30% 42%,#fff 42%)', BR: 'radial-gradient(ellipse at 50% 50%,#ffdf00 0 50%,#009c3b 50%)', US: 'linear-gradient(180deg,#bf0a30 0 14%,#fff 14% 28%,#bf0a30 28% 42%,#fff 42% 56%,#bf0a30 56% 70%,#fff 70% 84%,#bf0a30 84%)', GB: 'linear-gradient(45deg,#012169 0 40%,#fff 40% 60%,#012169 60%)', }; const Flag = ({ c }) => ( ); // ── Sparkline ────────────────────────────────────────────────────── function Spark({ data, color = "currentColor", fill = true, height = 32, w = 200 }) { const max = Math.max(...data), min = Math.min(...data); const rng = max - min || 1; const pts = data.map((v, i) => { const x = (i / (data.length - 1)) * w; const y = height - ((v - min) / rng) * (height - 4) - 2; return `${x.toFixed(1)},${y.toFixed(1)}`; }); const dLine = `M ${pts.join(' L ')}`; const dArea = `${dLine} L ${w},${height} L 0,${height} Z`; const gid = React.useId(); return ( {fill && ( <> )} ); } // ── Map thumb (procedural placeholder; varies per map) ───────────── function MapThumb({ id }) { // Deterministic pseudo "radar" pattern keyed off the map id. const seed = [...id].reduce((a, c) => a + c.charCodeAt(0), 0); const rand = (n) => ((seed * (n + 1) * 9301 + 49297) % 233280) / 233280; const tone = id.startsWith('de_') ? '#3a342a' : id.startsWith('cs_') ? '#2c2e3a' : '#2a3a32'; const rects = Array.from({ length: 9 }, (_, i) => ({ x: 8 + rand(i) * 60, y: 6 + rand(i + 9) * 40, w: 12 + rand(i + 18) * 30, h: 8 + rand(i + 27) * 22, r: rand(i + 36) > 0.6 ? 2 : 0, o: 0.16 + rand(i + 45) * 0.35, })); const lines = Array.from({ length: 4 }, (_, i) => ({ x1: 4 + rand(i + 60) * 90, y1: 4 + rand(i + 65) * 50, x2: 4 + rand(i + 70) * 90, y2: 4 + rand(i + 75) * 50, })); return ( {rects.map((r, i) => ( ))} {lines.map((l, i) => ( ))} {/* bombsites */} A B ); } // ── Server switcher dropdown ─────────────────────────────────────── function ServerSwitcher({ current, servers, onPick, onRemove, onAdd }) { const [open, setOpen] = React.useState(false); const [form, setForm] = React.useState({ name: '', addr: '', pass: '' }); const ref = React.useRef(null); React.useEffect(() => { if (!open) return; const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener('mousedown', onDoc); return () => document.removeEventListener('mousedown', onDoc); }, [open]); const cur = servers.find((s) => s.id === current) || servers[0]; return (
{open && (
Servers
{servers.map((s) => (
{ onPick(s.id); setOpen(false); }}>
{s.name}
{s.addr} · {s.region}
{s.players}
))}
Add server
setForm({ ...form, name: e.target.value })} /> setForm({ ...form, addr: e.target.value })} />
setForm({ ...form, pass: e.target.value })} />
)}
); } // ── Compact components ───────────────────────────────────────────── const Stat = ({ label, value, unit, delta, foot, color }) => (
{label}
{value} {unit && {unit}} {delta && {delta}}
{foot &&
{foot}
}
); const SectionTitle = ({ children, right }) => (
{children} {right && {right}}
); // flag toggle pill const Pill = ({ on, children, onClick, color }) => ( ); // ── Generic Sparkline for dashboard ──────────────────────────────── function genSeries(seed, n = 36, base = 10, amp = 4) { const out = []; let v = base; for (let i = 0; i < n; i++) { seed = (seed * 9301 + 49297) % 233280; v += (seed / 233280 - 0.5) * amp; v = Math.max(0, v); out.push(v); } return out; } Object.assign(window, { Icon, I, Flag, Spark, MapThumb, ServerSwitcher, Stat, SectionTitle, Pill, genSeries, });