// OXIDE v3 — ABI-inspired fullpage layout
// Single-file React app. Loaded after copy.js + tweaks-panel.jsx
const { useState, useEffect, useRef, useMemo, useCallback } = React;
// ============== ICONS ==============
const Icon = {
pc: (p) => ,
steam: (p) => ,
epic: (p) => ,
apple: (p) => ,
google: (p) => ,
bs: (p) => ,
arrow: (p) => ,
arrowL: (p) => ,
triR: (p) => ,
scrollDown: (p) => ,
yt: (p) => ,
x: (p) => ,
discord: (p) => ,
tt: (p) => ,
telegram: (p) => ,
vk: (p) => ,
reddit: (p) => ,
twitch: (p) => ,
instagram: (p) => ,
cart: (p) => ,
globe: (p) => ,
user: (p) => ,
};
function fmt(n) { return n.toLocaleString("ru-RU").replace(/,/g, " "); }
// Live stats poller — polls the public API every 5s, with graceful fallback.
const STATS_API = "https://api.oxidesurvival.com/public/stats";
const STATS_FALLBACK = { totalOnline: 39241, totalServers: 1660, nextWipe: "2026-06-12T13:00:00" };
function useLiveStats() {
const [stats, setStats] = useState(STATS_FALLBACK);
useEffect(() => {
let alive = true;
const load = async () => {
try {
const r = await fetch(STATS_API, { cache: "no-store" });
if (!r.ok) { console.warn("[OXIDE stats] HTTP", r.status); return; }
const d = await r.json();
if (!alive || !d) return;
setStats((prev) => ({
totalOnline: typeof d.totalOnline === "number" ? d.totalOnline : prev.totalOnline,
totalServers: typeof d.totalServers === "number" ? d.totalServers : prev.totalServers,
nextWipe: d.nextWipe || prev.nextWipe,
}));
} catch (e) { console.warn("[OXIDE stats] fetch failed:", e && e.message); }
};
load();
const id = setInterval(load, 5000);
return () => { alive = false; clearInterval(id); };
}, []);
return stats;
}
function OnlineWidget({ t, online }) {
// Light drift between 5s polls so the number feels alive
const [display, setDisplay] = useState(online);
useEffect(() => { setDisplay(online); }, [online]);
useEffect(() => {
const id = setInterval(() => {
setDisplay((v) => {
const delta = Math.floor(Math.random() * 21) - 10; // -10..+10
const drifted = v + delta;
// never wander more than ~40 from the real value
if (Math.abs(drifted - online) > 40) return online + (Math.random() < 0.5 ? -1 : 1) * Math.floor(Math.random() * 20);
return drifted;
});
}, 1600);
return () => clearInterval(id);
}, [online]);
return (
{display.toLocaleString("ru-RU").replace(/,/g, " ")}
{t.online_lbl}
);
}
function nextWipeDate(now = new Date()) {
// Fallback only — anchor 15 May 2026 (Friday), every 4 weeks.
const base = new Date(Date.UTC(2026, 4, 15));
const ms28 = 28 * 24 * 60 * 60 * 1000;
let d = new Date(base);
while (d.getTime() <= now.getTime()) d = new Date(d.getTime() + ms28);
return d;
}
function fmtWipe(d, lang) {
// Use the visitor's own system locale → native date format for their region.
try {
const loc = (navigator.languages && navigator.languages[0]) || navigator.language;
return new Intl.DateTimeFormat(loc || undefined, {
day: "2-digit", month: "2-digit", year: "numeric"
}).format(d);
} catch (e) {
const dd = String(d.getUTCDate()).padStart(2, "0");
const mm = String(d.getUTCMonth() + 1).padStart(2, "0");
return `${dd}.${mm}.${d.getUTCFullYear()}`;
}
}
function WipeWidget({ t, lang, nextWipe }) {
const parsed = nextWipe ? new Date(nextWipe) : null;
const date = parsed && !isNaN(parsed.getTime()) ? parsed : nextWipeDate();
return (
{fmtWipe(date, lang)}
{(t.hero_stat_wipe || "WIPE").toUpperCase()}
);
}
function ServersWidget({ t, servers }) {
return (
{servers.toLocaleString("ru-RU").replace(/,/g, " ")}
{t.servers_lbl}
);
}
// ============== TOP NAV ==============
function TopNav({ lang, setLang, t, activePage, onJump, stats }) {
const items = [
{ key: "about", label: t.nav_about, plus: true, page: 1 },
{ key: "shop", label: t.nav_shop_menu, plus: true, page: 2, accent: true },
{ key: "creators", label: t.nav_creator, plus: true, page: 3 },
{ key: "devices", label: t.nav_devices, plus: true, page: 4 },
{ key: "support", label: t.nav_support, plus: true, href: "https://support.playoxide.com/", activeOnPage: 5 },
{ key: "fankit", label: t.nav_fankit, plus: true, href: "https://art.playoxide.com/", shimmer: true },
];
return (
);
}
// ============== RIGHT RAIL ==============
function RightRail({ activePage, total, onJump }) {
return (
{Array.from({ length: total }).map((_, i) => (
onJump(i)}>
{String(i + 1).padStart(2, "0")}
))}
{t.hero_headline}
{t.hero_sub &&
{t.hero_sub}
}
{t.hero_tagline}
{t.hero_promo_eye}
{t.hero_promo_title}
{t.scroll}
);
}
// ============== FEATURE SLIDER (page 2) ==============
function FeaturesPage({ t, lang }) {
const slides = useMemo(() => [
{ bg: "media/pillar-01-craft.jpg", ttl: t.f01.title, sub: t.f01.sub, body: t.f01.body },
{ bg: "media/pillar-02-bases.png", ttl: t.f02.title, sub: t.f02.sub, body: t.f02.body },
{ bg: "media/pillar-03-pvp.jpg", ttl: t.f03.title, sub: t.f03.sub, body: t.f03.body },
{ bg: "media/pillar-04-clans.png", ttl: t.f04.title, sub: t.f04.sub, body: t.f04.body },
{ bg: "media/media-gameplay.png", ttl: t.f05.title, sub: t.f05.sub, body: t.f05.body },
{ bg: "media/feat-06-wipes.png", ttl: t.f06.title, sub: t.f06.sub, body: t.f06.body },
], [t]);
const DURATION = 10000; // 10s per slide
const [i, setI] = useState(0);
const [progress, setProgress] = useState(0); // 0..1 for current slide
const [inView, setInView] = useState(false);
const sectionRef = useRef(null);
const max = slides.length;
// Observe visibility — only tick when section is the active page
useEffect(() => {
const el = sectionRef.current;
if (!el) return;
const io = new IntersectionObserver(
(entries) => entries.forEach((e) => setInView(e.intersectionRatio >= 0.5)),
{ threshold: [0, 0.5, 1] }
);
io.observe(el);
return () => io.disconnect();
}, []);
// Drive progress with rAF; advance when full
useEffect(() => {
if (!inView) return;
let raf, start = performance.now() - progress * DURATION;
const tick = (now) => {
const p = Math.min(1, (now - start) / DURATION);
setProgress(p);
if (p >= 1) {
setI((v) => (v + 1) % max);
setProgress(0);
start = performance.now();
}
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
// eslint-disable-next-line
}, [inView, i, max]);
const goTo = (idx) => { setI(idx); setProgress(0); };
const prev = () => { setI((v) => (v - 1 + max) % max); setProgress(0); };
const next = () => { setI((v) => (v + 1) % max); setProgress(0); };
const cur = slides[i];
return (
{slides.map((s, idx) => (
))}
{slides.map((s, idx) => {
const fill = idx < i ? 1 : idx === i ? progress : 0;
return (
goTo(idx)}>
{String(idx + 1).padStart(2, "0")}
);
})}
);
}
// ============== SNEAK PEEK (page 3) ==============
function PeekPage({ t, lang }) {
const [tab, setTab] = useState(0);
const tabs = t.peek_tabs;
const cur = tabs[tab];
return (
{t.peek_title}
{t.peek_subtitle}
{tabs.map((tt, idx) => (
))}
{String(tab + 1).padStart(2, "0")} / {String(tabs.length).padStart(2, "0")} · {cur.tabLbl}
{cur.modeTitle}
{cur.caption}
{tabs.map((tt, i) => (
))}
);
}
// ============== NEWS + COMMUNITY (page 4) ==============
function NewsPage({ t, lang }) {
const [active, setActive] = useState(0);
const items = t.news_items;
const cur = items[active];
return (
{/* NEWS BLOCK */}
{t.news_title}
{t.news_subtitle}
{/* LIST (left) */}
{t.news_update_head}
{items.map((r, i) => (
))}
{/* PREVIEW (right) */}
{items.map((r, idx) => (
))}
{cur.headlinePre}{cur.headlineAcc}{cur.headlinePost}
{(t.news_tags && t.news_tags[cur.tag]) || cur.tag}
{cur.date}
{cur.body}
{/* COMMUNITY BLOCK */}
{t.shop_title}
{t.shop_subtitle}
{t.shop_body}
{t.shop_bullets.map((b, i) => - {b}
)}
🛒 {t.shop_cta}
);
}
// ============== COMMUNITY (new dedicated page) ==============
function CommunityPage({ t, lang }) {
return (
);
}
// ============== INCLUSIVE PLATFORMS (campfire) ==============
function PlatformsPage({ t, lang }) {
return (
{t.platforms_title}
{t.platforms_subtitle}
{t.platforms_body}
{t.platforms_tested}
{t.platforms_bullets.map((b,i) => - {b}
)}
);
}
// ============== ANTI-CHEAT + FOOTER (page 5) ==============
function AntiCheatPage({ t, lang }) {
return (
);
}
// ============== COOKIE BANNER ==============
function Cookie({ t, onClose }) {
return (
{t.ck_title}
{t.ck_body}
);
}
// ============== APP ==============
function App() {
const [lang, setLang] = useState(() => {
// RU only for users from RU/KZ/UZ/BY/TM — detected via browser timezone.
if (typeof Intl !== "undefined") {
try {
const tz = Intl.DateTimeFormat().resolvedOptions().timeZone || "";
const ruZones = [
"Europe/Moscow","Europe/Kaliningrad","Europe/Samara","Europe/Simferopol","Europe/Volgograd","Europe/Saratov","Europe/Astrakhan","Europe/Kirov","Europe/Ulyanovsk",
"Asia/Yekaterinburg","Asia/Omsk","Asia/Novosibirsk","Asia/Novokuznetsk","Asia/Krasnoyarsk","Asia/Irkutsk","Asia/Yakutsk","Asia/Vladivostok","Asia/Khandyga","Asia/Sakhalin","Asia/Ust-Nera","Asia/Magadan","Asia/Srednekolymsk","Asia/Kamchatka","Asia/Anadyr","Asia/Chita","Asia/Tomsk","Asia/Barnaul",
"Asia/Almaty","Asia/Aqtau","Asia/Aqtobe","Asia/Atyrau","Asia/Oral","Asia/Qostanay","Asia/Qyzylorda",
"Asia/Tashkent","Asia/Samarkand",
"Europe/Minsk",
"Asia/Ashgabat"
];
if (ruZones.indexOf(tz) !== -1) return "ru";
} catch (e) {}
}
return "en";
});
const [activePage, setActivePage] = useState(0);
const [cookieOpen, setCookieOpen] = useState(true);
const stageRef = useRef(null);
const TOTAL = 6;
const t = window.OXIDE_COPY_V3[lang];
const stats = useLiveStats();
// active page tracking via scroll
useEffect(() => {
const stage = stageRef.current;
if (!stage) return;
const onScroll = () => {
const h = window.innerHeight;
const idx = Math.round(stage.scrollTop / h);
setActivePage(Math.min(TOTAL - 1, Math.max(0, idx)));
};
stage.addEventListener("scroll", onScroll, { passive: true });
return () => stage.removeEventListener("scroll", onScroll);
}, []);
const jump = useCallback((i) => {
const stage = stageRef.current;
if (!stage) return;
stage.scrollTo({ top: i * window.innerHeight, behavior: "smooth" });
}, []);
// keyboard nav
useEffect(() => {
const onKey = (e) => {
if (e.key === "ArrowDown" || e.key === "PageDown") {
e.preventDefault(); jump(Math.min(TOTAL - 1, activePage + 1));
} else if (e.key === "ArrowUp" || e.key === "PageUp") {
e.preventDefault(); jump(Math.max(0, activePage - 1));
}
};
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [activePage, jump]);
return (
<>
{cookieOpen && setCookieOpen(false)}/>}
);
}
ReactDOM.createRoot(document.getElementById("root")).render();
