// Prepend remote base URL for screenshots if hosted on Cloudflare R2 / S3 function getShotUrl(path) { if (!path) return ""; const base = window.SCREENSHOT_BASE_URL || ""; if (base) { const cleanBase = base.endsWith("/") ? base : base + "/"; return cleanBase + path.replace(/\\/g, "/"); } return path; } // Shared components: icons, sidebar, drawer, lightbox, toasts. function formatSize(bytes) { if (!bytes) return "—"; if (bytes < 1024) return bytes + " B"; if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB"; return (bytes / (1024 * 1024)).toFixed(1) + " MB"; } // ── Icons (line, 16px viewBox) ────────────────────────────────────────────── const ic = { archive: , grid: , list: , health: , folder: , terminal:, search: , x: , star: , flame: , sun: , moon: , download:, play: , broken: , check: , cam: , hdd: , trophy: , drag: , plus: , chevron: , arrow_l: , arrow_r: , ext: , refresh: , menu: , heart: , dice: , bulb: , link: , warning: , checkCircle: , mail: , log: , }; // Brand mark — slightly animated "archive" glyph function BrandMark() { return ( ); } // ── Sidebar ───────────────────────────────────────────────────────────────── function Sidebar({ view, onView, tweaks, setTweak, gameCount }) { const NAV = [ { k: 'explorer', label: 'Browse Games', icon: ic.archive, count: gameCount }, { k: 'donation', label: 'Donation & Support', icon: ic.heart, count: null }, { k: 'links', label: 'Community Links', icon: ic.ext, count: null }, { k: 'updates', label: 'Update Log', icon: ic.log, count: null }, { k: 'contact', label: 'About & Contact', icon: ic.mail, count: null } ]; return ( ); } // ── Toasts ───────────────────────────────────────────────────────────────── function Toasts({ items }) { return (
{items.map((t) => (
{t.title} {t.sub}
))}
); } // ── Lightbox ─────────────────────────────────────────────────────────────── function Lightbox({ shots, index, onClose, onPrev, onNext }) { React.useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') onClose(); else if (e.key === 'ArrowLeft') onPrev(); else if (e.key === 'ArrowRight') onNext(); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [onClose, onPrev, onNext]); if (!shots) return null; const cur = shots[index]; return (
e.stopPropagation()}> {shots.length > 1 && <> }
{index + 1} / {shots.length} · captured by {cur?.by} · esc to close · ←/→ to navigate
); } // ── Drawer (Game Detail) ─────────────────────────────────────────────────── function Drawer({ game, isRoll, onClose }) { const [openShot, setOpenShot] = React.useState(-1); const [comments, setComments] = React.useState([]); const [loadingComments, setLoadingComments] = React.useState(true); const [commentPage, setCommentPage] = React.useState(1); const shots = game ? (window.DATA.SCREENSHOTS[game.id] || []) : []; React.useEffect(() => { if (game === null) return; setLoadingComments(true); setCommentPage(1); fetch(`/api/comments?game_id=${game.id}`) .then(res => { if (res.ok === false) throw new Error("Failed to load comments."); return res.json(); }) .then(data => { setComments(data.comments || []); setLoadingComments(false); }) .catch(err => { console.error(err); setComments([]); setLoadingComments(false); }); }, [game.id]); if (game === null) return null; return ( <>
{openShot >= 0 && ( setOpenShot(-1)} onPrev={() => setOpenShot((openShot - 1 + shots.length) % shots.length)} onNext={() => setOpenShot((openShot + 1) % shots.length)} /> )} ); } // ── Shared copy icon (Donation) ───────────────────────────────────────────── const copyIc = ( ); // ── Donation & Support — Notion-style wallet table ────────────────────────── function DonationView() { const [copied, setCopied] = React.useState(null); const wallets = [ { coin: 'AFD', label: 'Afdian — Support the creator', addr: 'https://ifdian.net/a/kureist', color: '#946ce6', isLink: true }, { coin: 'BTC', label: 'Bitcoin', addr: 'bc1qdrkrrqrtquuwrwug4ps0djws47yndsc6k4mxdj', color: '#f7931a' }, { coin: 'ETH', label: 'Ethereum · ERC-20', addr: '0xe1F7768210Dd93F635553b2ba3F1B897ef7B795C', color: '#627eea' }, { coin: 'USDT', label: 'Tether USD · ERC-20', addr: '0xe1F7768210Dd93F635553b2ba3F1B897ef7B795C', color: '#26a17b' }, { coin: 'USDC', label: 'USD Coin · ERC-20', addr: '0xe1F7768210Dd93F635553b2ba3F1B897ef7B795C', color: '#2775ca' } ]; const handleCopy = (addr, coin) => { navigator.clipboard.writeText(addr); setCopied(coin); setTimeout(() => setCopied(null), 2000); }; return (
Library/Donation & Support

{ic.heart}Donation & Support

A community-driven archive of 17,000+ fangames and 618 GB of crawled content. Sponsorships go directly toward server hosting, bandwidth, and CDN distribution — thank you for keeping the archive alive.

Wallets & sponsorship {wallets.length}
{wallets.map((w) => (
{w.coin}
{w.label}
{w.addr}
{w.isLink ? ( {ic.ext} Sponsor ) : ( )}
))}
{ic.bulb}
Security notice. Double-check the wallet address and network before sending. ETH, USDT, and USDC addresses all use the ERC-20 network (Ethereum Mainnet).
); } // ── Community Links — Notion-style link rows ──────────────────────────────── function LinksView() { const links = [ { name: 'Delicious Fruit', desc: 'The historic flagship archive — the foundation of I Wanna cataloging and reviews for over a decade.', url: 'https://delicious-fruit.com/' }, { name: 'I Wanna Wiki', desc: 'A community-maintained encyclopedia of creator bios, detailed walkthroughs, and wiki listings.', url: 'https://www.iwannawiki.com/' }, { name: 'Dappermink Archive', desc: 'An exceptionally complete vault hosting hundreds of classic, modern, and obscure fangame binaries.', url: 'https://archive.dappermink.me/home' } ]; const hostOf = (u) => u.replace(/^https?:\/\//, '').replace(/\/.*$/, ''); return (
Library/Community Links

{ic.link}Community Links

Portals to the archives, wikis, and community platforms that together form the backbone of the global I Wanna fangame legacy.

Partner sites {links.length}
); } // ── About & Contact — Notion-style properties + tag groups ────────────────── function ContactView() { const techStack = { frontend: [ { name: 'React (Standalone)', url: 'https://react.dev/' }, { name: 'ES6+ JavaScript', url: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript' }, { name: 'Babel Standalone', url: 'https://babeljs.io/' }, { name: 'Vanilla CSS3', url: 'https://developer.mozilla.org/en-US/docs/Web/CSS' }, { name: 'SVG Vectors', url: 'https://developer.mozilla.org/en-US/docs/Web/SVG' } ], backend: [ { name: 'Python 3', url: 'https://www.python.org/' }, { name: 'Go (Golang)', url: 'https://go.dev/' }, { name: 'Node.js', url: 'https://nodejs.org/' }, { name: 'BeautifulSoup4', url: 'https://www.crummy.com/software/BeautifulSoup/bs4/doc/' }, { name: 'Ripgrep', url: 'https://github.com/BurntSushi/ripgrep' } ], database: [ { name: 'JSON Database (Chunked)', url: 'https://www.json.org/' }, { name: 'IndexedDB (Client Cache)', url: 'https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API' }, { name: 'Cloudflare R2', url: 'https://www.cloudflare.com/developer-platform/r2/' }, { name: 'AWS S3 SDK', url: 'https://aws.amazon.com/s3/' } ], infrastructure: [ { name: '7-Zip CLI', url: 'https://www.7-zip.org/' }, { name: 'PowerShell / CMD', url: 'https://learn.microsoft.com/en-us/powershell/' } ] }; const groups = [ ['Frontend core', techStack.frontend], ['Backend & crawlers', techStack.backend], ['Database & cloud storage', techStack.database], ['Infrastructure & utilities', techStack.infrastructure] ]; const contacts = [ ['Discord', 'kureist'], ['Email', 'kurath0307@gmail.com'], ['QQ', '865903566'] ]; return (
Library/About & Contact

{ic.mail}About & Contact

Catalog credits, the technical stack that powers the archive, and where to reach the maintainer.

Credits
Creator kureist
Special thanks Chance, Dappermink, null, Algosith
Technical stack
{groups.map(([label, items]) => (
{label}
{items.map((t) => ( {t.name} ))}
))}
Contact
{contacts.map(([k, v]) => (
{k} {v}
))}
Fangame Archive · Developer & Designer © Kureist 2026
); } // ── Update Log — Notion-style changelog timeline ──────────────────────────── function UpdateLogView() { const [releases, setReleases] = React.useState([]); const [loading, setLoading] = React.useState(true); React.useEffect(() => { let url = 'data/changelog.json'; if (window.location.pathname.includes('/origin/')) { url = '../data/changelog.json'; } const cacheBuster = window.APP_VERSION ? `?v=${window.APP_VERSION}` : ''; fetch(url + cacheBuster) .then(res => { if (!res.ok) throw new Error(`HTTP ${res.status}`); return res.json(); }) .then(data => { setReleases(data); setLoading(false); }) .catch(err => { console.error("Failed to load changelog:", err); setReleases([]); setLoading(false); }); }, []); const KIND = { Added: 'oklch(0.72 0.15 152)', Changed: 'oklch(0.66 0.13 248)', Fixed: 'oklch(0.75 0.14 70)', Removed: 'oklch(0.65 0.13 30)' }; if (loading) { return (
Library/Update Log

Loading update log...

); } return (
Library/Update Log

{ic.log}Update Log

A running record of database releases, new surfaces, and fixes shipped to the archive. The live database is currently on version {window.DATABASE_VERSION || '51'}. The application version is version {window.APP_VERSION || '2026.002'}.

{releases.map((r) => (
{r.ver} {r.note} {r.date}
{r.changes.map(([kind, text], i) => (
{kind}
{text}
))}
))}
{ic.refresh}
Auto-sync. The crawler re-indexes mirrors every 6 hours. New entries land here once a database version is published — your local cache updates incrementally on next visit.
Fangame Archive · Developer & Designer © Kureist 2026
); } Object.assign(window, { ic, Sidebar, Toasts, Lightbox, Drawer, BrandMark, DonationView, LinksView, ContactView, UpdateLogView });