/* global React */
const { useState, useEffect, useRef } = React;
/* ---------- tiny icon set ---------- */
const Icon = {
copy: (p) => (),
check: (p) => (),
play: (p) => (),
yt: (p) => (),
tt: (p) => (),
bolt: (p) => (),
arrow: (p) => (),
};
/* skull mark: simple geometric, used as the brand glyph */
function Skull({ size = 30, ...p }) {
return (
);
}
/* ---------- scroll reveal ---------- */
function useReveal() {
useEffect(() => {
const els = document.querySelectorAll('.reveal');
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
}, { threshold: 0.15 });
els.forEach((el) => io.observe(el));
return () => io.disconnect();
});
}
/* ---------- count-up ---------- */
function CountUp({ value, suffix = '', dur = 1400 }) {
const [n, setN] = useState(0);
const ref = useRef(null);
const done = useRef(false);
useEffect(() => {
const el = ref.current;
const io = new IntersectionObserver((ents) => {
ents.forEach((e) => {
if (e.isIntersecting && !done.current) {
done.current = true;
const start = performance.now();
const tick = (t) => {
const p = Math.min((t - start) / dur, 1);
const eased = 1 - Math.pow(1 - p, 3);
setN(value * eased);
if (p < 1) requestAnimationFrame(tick);
};
requestAnimationFrame(tick);
}
});
}, { threshold: 0.4 });
if (el) io.observe(el);
return () => io.disconnect();
}, [value]);
const fmt = (x) => {
if (value >= 1e6) return (x / 1e6).toFixed(x >= 9.95e5 ? 0 : 1).replace(/\.0$/, '') + 'M';
if (value >= 1000) return (x / 1000).toFixed(x >= 999.5 ? 2 : 1).replace(/\.0$/, '') + 'K';
return Math.round(x).toString();
};
return {fmt(n)}{suffix};
}
/* ---------- in-view, driven by React state so re-renders keep it ---------- */
function useInView(threshold = 0.15) {
const ref = useRef(null);
const [inView, setInView] = useState(false);
useEffect(() => {
const el = ref.current;
if (!el || inView) return;
const io = new IntersectionObserver(([e]) => {
if (e.isIntersecting) { setInView(true); io.disconnect(); }
}, { threshold });
io.observe(el);
return () => io.disconnect();
}, []);
return [ref, inView];
}
/* ---------- live viewers counter ---------- */
/* Pings /api/heartbeat every 10s and shows how many people are viewing right now. */
function LiveViewers() {
const [count, setCount] = useState(null);
useEffect(() => {
// One stable id per browser tab so we count people, not pings.
let id;
try {
id = sessionStorage.getItem('testol-vid');
if (!id) {
id = 'v-' + Date.now().toString(36) + '-' + Math.random().toString(36).slice(2, 9);
sessionStorage.setItem('testol-vid', id);
}
} catch (e) {
id = 'v-' + Math.random().toString(36).slice(2, 9);
}
let alive = true;
const ping = async () => {
try {
const r = await fetch('/api/heartbeat?id=' + encodeURIComponent(id), { cache: 'no-store' });
const d = await r.json();
if (!alive) return;
setCount(typeof d.count === 'number' ? d.count : null);
} catch (e) {
if (alive) setCount(null);
}
};
ping();
const iv = setInterval(ping, 10000);
const onVis = () => { if (document.visibilityState === 'visible') ping(); };
document.addEventListener('visibilitychange', onVis);
return () => {
alive = false;
clearInterval(iv);
document.removeEventListener('visibilitychange', onVis);
};
}, []);
// Hide entirely until the counter is live (e.g. before the DB is connected).
if (count === null) return null;
return (
{count.toLocaleString()} watching
);
}
/* ============================================================ NAV */
function Nav() {
return (
);
}
/* ============================================================ HERO */
function Hero() {
return (
MM2 Based Content ยท 100% Keyless
TESTOL HUBfree MM2 scripts. copy & run.
Welcome to my hub. Every script from my channel lives here: item spawners, dupes, autofarm and more.
No keys, no checkpoints, no nonsense. Paste it into your executor and go.