// Akashic Record — Hub const { useState, useEffect, useMemo } = React; // ============ Icons (inline SVG) ============ const Icon = { Search: (p) => , Grid: (p) => , List: (p) => , Clock: (p) => , Note: (p) => , Tool: (p) => , Book: (p) => , External: (p) => , Star: (p) => , Arrow: (p) => , }; const STATUS_LABEL = { playing: "진행중", completed: "완료", waiting: "대기" }; // ============ Header ============ function Header({ search, setSearch, totalGames, activeGames }) { return (
Akashic Record
Personal Game Hub
setSearch(e.target.value)} /> ⌘K
{totalGames} games
{activeGames} active
); } // ============ Filter Bar ============ function FilterBar({ filters, setFilters, view, setView, sort, setSort, counts }) { const setStatus = (s) => setFilters({ ...filters, status: s }); const togglePlatform = (p) => { const cur = filters.platforms; setFilters({ ...filters, platforms: cur.includes(p) ? cur.filter(x => x !== p) : [...cur, p] }); }; return (
상태 {Object.entries(window.CATEGORIES).map(([key, c]) => ( ))}
플랫폼 {window.PLATFORMS.map(p => ( ))}
); } // ============ Card (Grid) ============ function Card({ game, onClick }) { const href = `games/${game.id}/`; return (
onClick(game)}>
{game.coverGlyph}
{game.platform} {STATUS_LABEL[game.status]}
{game.genre}

{game.title}

{game.subtitle &&
{game.subtitle}
} {game.progress != null && (
진행도 {Math.round(game.progress * 100)}%
)}
{window.fmtRelative(game.lastPlayed)}
{game.notes} {game.tools} {game.guides}
); } // ============ Row (List) ============ function Row({ game, onClick }) { const STATUS_DOT = { playing: "var(--neon)", completed: "var(--cyan-400)", waiting: "var(--ink-4)" }; return (
onClick(game)}>
{game.coverGlyph}
{game.title}
{game.genre} · {game.platform}
{STATUS_LABEL[game.status]}
{game.tags?.[0] ?? ""}
{game.progress != null ? ( <>
{Math.round(game.progress * 100)}% · {game.playtimeHours}h
) : (
— · {game.playtimeHours}h
)}
{window.fmtRelative(game.lastPlayed)}
notes {game.notes} · tools {game.tools}
); } // ============ Preview Panel ============ function Preview({ game, onClose }) { const open = !!game; const [lastGame, setLastGame] = useState(null); useEffect(() => { if (game) setLastGame(game); }, [game]); const g = game || lastGame; if (!g) return null; const resources = [ { type: "guide", title: "메인 스토리 공략", meta: `${g.guides}개 항목`, icon: }, { type: "tool", title: "빌드 / 시너지 계산기", meta: `${g.tools}개 도구`, icon: }, { type: "note", title: "개인 메모", meta: `${g.notes}개 메모`, icon: }, { type: "external", title: "외부 위키", meta: "외부 링크", icon: }, ]; const openGamePage = () => { if (g.id) window.location.href = `games/${g.id}/`; }; return ( <>
); } // ============ App ============ function App() { const [games, setGames] = useState([]); const [loading, setLoading] = useState(true); const [loadError, setLoadError] = useState(null); const [search, setSearch] = useState(""); const [view, setView] = useState("grid"); const [sort, setSort] = useState("recent"); const [filters, setFilters] = useState({ status: "all", platforms: [], genres: [] }); const [selected, setSelected] = useState(null); // 초기 로드 useEffect(() => { window.loadGames() .then((g) => { setGames(g); setLoading(false); }) .catch((err) => { setLoadError(err.message); setLoading(false); }); }, []); // Esc closes panel useEffect(() => { const h = (e) => { if (e.key === "Escape") setSelected(null); }; window.addEventListener("keydown", h); return () => window.removeEventListener("keydown", h); }, []); const filtered = useMemo(() => { let list = games; if (filters.status !== "all") list = list.filter(g => g.status === filters.status); if (filters.platforms.length) list = list.filter(g => filters.platforms.includes(g.platform)); if (filters.genres.length) list = list.filter(g => filters.genres.includes(g.genre)); if (search.trim()) { const q = search.toLowerCase(); list = list.filter(g => g.title.toLowerCase().includes(q) || g.genre.toLowerCase().includes(q) || (g.tags ?? []).some(t => t.toLowerCase().includes(q)) ); } const sorted = [...list]; if (sort === "recent") sorted.sort((a, b) => new Date(b.lastPlayed) - new Date(a.lastPlayed)); if (sort === "name") sorted.sort((a, b) => a.title.localeCompare(b.title)); if (sort === "playtime") sorted.sort((a, b) => b.playtimeHours - a.playtimeHours); if (sort === "progress") sorted.sort((a, b) => (b.progress ?? 0) - (a.progress ?? 0)); return sorted; }, [games, filters, search, sort]); const counts = useMemo(() => window.computeCounts(games), [games]); const activeGames = counts.playing ?? 0; if (loading) { return (
Loading…
); } if (loadError) { return (

games.json을 못 불러왔어 — {loadError}

); } return (
{filtered.length === 0 ? (
조건에 맞는 게임이 없어. 필터를 풀거나 새 게임을 추가해줘.
) : view === "grid" ? (
{filtered.map(g => )}
) : (
{filtered.map(g => )}
)} setSelected(null)} />
); } ReactDOM.createRoot(document.getElementById("app")).render();