// All page components — Home, GameDetail, Privacy, Terms, Contact const GAMES = [ { id: "slide-slam-unblock-puzzle", title: "Slide Slam: Unblock Puzzle", genre: "Puzzle", status: "In Development", tagline: "Slide, slam, and clear your way to freedom", description: "Slide Slam is a block-sliding puzzle game where your goal is to unblock a path and guide the key piece to the exit. Each level packs a fresh spatial challenge — shift pieces horizontally or vertically, find the sequence, and slam your way through. With hundreds of handcrafted puzzles and a satisfying snap mechanic, it's easy to pick up and hard to put down.", platforms: ["android"], hasDemo: true, demoFile: "exports/sliding_puzzle.html", icon: "assets/002/002_icon.png", screenshots: [ "assets/002/level_1_screenshot.png", "assets/002/level_2_screenshot.png", "assets/002/level_6_screenshot.png", ], }, ]; const ACCENT = "oklch(65% 0.22 285)"; const AMBER = "oklch(72% 0.18 65)"; // ─── HOME PAGE ─────────────────────────────────────────────────────────────── function HomePage({ navigate }) { const [hoveredGame, setHoveredGame] = React.useState(null); return (
{/* Hero */}
{/* Background grid */}
{/* Glow orbs */}
Independent Game Studio

We Build
Games Worth
Getting Lost In.

Hidden Lore is an independent mobile game studio obsessed with craft — from the first mechanic to the final frame. We make games for players who demand more.

); } function GameCard({ game, navigate }) { const [hovered, setHovered] = React.useState(false); const statusColor = game.status === "Available Now" ? "#22c55e" : game.status === "Coming Soon" ? AMBER : "rgba(255,255,255,0.4)"; return (
navigate("game", game.id)} onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)} style={{ background: hovered ? "oklch(16% 0.015 260)" : "oklch(13% 0.015 260)", border: `1px solid ${hovered ? "rgba(255,255,255,0.15)" : "rgba(255,255,255,0.07)"}`, borderRadius: 12, overflow: "hidden", cursor: "pointer", transition: "all 0.25s ease", transform: hovered ? "translateY(-4px)" : "translateY(0)", boxShadow: hovered ? "0 20px 60px rgba(0,0,0,0.4)" : "none", }} > {`${game.title}
{game.genre} {game.status}

{game.title}

{game.tagline}

View Game →
); } // ─── GAMES GALLERY ──────────────────────────────────────────────────────────── function GamesPage({ navigate }) { return (
Our Portfolio

All Games

Every title is a universe. Tap in.

{GAMES.map(game => )}
); } // ─── GAME DETAIL ────────────────────────────────────────────────────────────── function GameDetailPage({ gameId, navigate }) { const game = GAMES.find(g => g.id === gameId) || GAMES[0]; return (
{/* Hero */}
{`${game.title}
{game.genre}

{game.title}

"{game.tagline}"

{game.hasDemo && ( )} {game.platforms.map(p => )}
{game.status}
{/* Content */}
{/* Screenshots */}

Screenshots

{game.screenshots.map((src, i) => ( {`${game.title} ))}
{/* About */}

About the Game

{game.description}

); } // ─── GAME DEMO ──────────────────────────────────────────────────────────────── function GameDemoPage({ gameId, navigate }) { const game = GAMES.find(g => g.id === gameId) || GAMES[0]; const iframeRef = React.useRef(null); const [height, setHeight] = React.useState(() => typeof window !== "undefined" ? `${window.innerHeight - 68}px` : "calc(100vh - 68px)" ); React.useEffect(() => { const update = () => setHeight(`${window.innerHeight - 68}px`); update(); window.addEventListener("resize", update); window.addEventListener("orientationchange", update); return () => { window.removeEventListener("resize", update); window.removeEventListener("orientationchange", update); }; }, []); function handleLoad() { [100, 500, 1500, 3000].forEach(delay => { setTimeout(() => { try { iframeRef.current?.contentWindow?.dispatchEvent(new Event("resize")); } catch (_) {} }, delay); }); } return (