// Shared components: Router, Header, Footer, Doodle primitives const { useState, useEffect, useRef, useMemo, useCallback, createContext, useContext } = React; // ============ Router (file-based) ============ // Each route is a real .html file (about.html, games.html, etc.). The current // page is read from window.__page (set by each HTML file). go(route) navigates // to that file. Hash links still work as fallback. const ROUTE_FILES = { home: "index.html", about: "about.html", games: "games.html", cafe: "cafe.html", pricing: "pricing.html", faq: "faq.html", contact: "contact.html", booking: "booking.html", }; const RouterCtx = createContext({ path: "home", go: () => {} }); function RouterProvider({ children }) { const initial = window.__page || (location.hash.replace("#/", "") || "home"); const [path, setPath] = useState(initial); useEffect(() => { const onHash = () => { const p = location.hash.replace("#/", ""); if (p && p !== path) setPath(p); }; window.addEventListener("hashchange", onHash); return () => window.removeEventListener("hashchange", onHash); }, [path]); const go = useCallback((p) => { const file = ROUTE_FILES[p]; if (file) { window.location.href = file; } else { location.hash = "#/" + p; window.scrollTo({ top: 0, behavior: "smooth" }); } }, []); return {children}; } const useRouter = () => useContext(RouterCtx); // ============ Language / Tweaks bridge ============ // Read tweaks from global window.__pixelTweaks set by the Tweaks panel. // Default values are duplicated here so pages work even before tweaks mount. const TweaksCtx = createContext({ lang: "en", palette: "sunshine", aesthetic: "crayon" }); function useT() { const ctx = useContext(TweaksCtx); const lang = ctx.lang === "th" ? "th" : "en"; return { ...ctx, lang, L: window.I18N[lang], OTHER: window.I18N[lang === "th" ? "en" : "th"] }; } // ============ Doodle SVG defs ============ // One in the body with global defs (wobble filters, markers). function DoodleDefs() { return ( ); } // ============ Doodle primitives ============ function Star({ size = 40, color = "var(--red)", style }) { return ( ); } function Squiggle({ width = 200, color = "var(--ink)", strokeWidth = 4, style }) { return ( ); } function Underline({ width = 200, color = "var(--red)", style }) { return ( ); } function ArrowDoodle({ width = 100, color = "var(--ink)", style, dir = "right" }) { const transform = dir === "right" ? undefined : dir === "left" ? "scale(-1,1) translate(-100,0)" : "rotate(90, 50, 30)"; return ( ); } function Burst({ size = 90, color = "var(--green)", style }) { return ( ); } function Sparkle({ size = 22, color = "var(--orange)", style }) { return ( ); } function Cloud({ size = 80, color = "var(--paper)", style }) { return ( ); } function Tape({ width = 100, rotation = -3, color = "rgba(255,59,107,0.5)", style }) { return (
); } // Placeholder for a kid's drawing (intentionally chunky/cute) function KidDoodle({ kind = "blob", color = "var(--red)", size = 100, style }) { const shapes = { blob: ( ), monster: ( ), rocket: ( ), star: ( ), cat: ( ), food: ( ), }; return ( ); } // ============ Site Header ============ function SiteHeader() { const { path, go } = useRouter(); const { lang } = useT(); const L = window.I18N[lang]; const [mobileOpen, setMobileOpen] = useState(false); const links = [ ["home", L.nav.home], ["about", L.nav.about], ["games", L.nav.games], ["cafe", L.nav.cafe], ["pricing", L.nav.pricing], ["faq", L.nav.faq], ["contact", L.nav.contact], ]; const fileFor = (k) => ROUTE_FILES[k] || "index.html"; return (
{ e.preventDefault(); go("home"); }}>
); } function LanguageToggle() { const { lang } = useT(); const setLang = (l) => { window.dispatchEvent(new CustomEvent("pixelcraft:setTweak", { detail: { key: "language", value: l } })); }; return (
); } // ============ Site Footer ============ function SiteFooter() { const { go } = useRouter(); const { lang } = useT(); const L = window.I18N[lang]; return ( ); } // ============ Marquee strip ============ function FunMarquee() { const { lang } = useT(); const items = lang === "th" ? ["สนุก!", "★", "ไม่ต้องเขียนโค้ด", "★", "เกมจริง", "★", "เล่นได้จริง", "★", "แชร์ได้", "★", "อายุ 6–10"] : ["FUN!", "★", "NO CODE", "★", "REAL GAMES", "★", "REALLY PLAYS", "★", "SHAREABLE", "★", "AGES 6–10"]; const row = ( {items.map((it, i) => {it})} ); return ( ); } // Export to global so other Babel scripts can use them Object.assign(window, { ROUTE_FILES, RouterProvider, RouterCtx, useRouter, TweaksCtx, useT, DoodleDefs, Star, Squiggle, Underline, ArrowDoodle, Burst, Sparkle, Cloud, Tape, KidDoodle, SiteHeader, SiteFooter, FunMarquee, });