\n \n \n \n",[],[89,128],"c0bcb61e-e576-11f0-8d1d-42dde27851f2","favicon.svg","019b6f1f-0f00-7290-9c3e-394cafce5c5a",["D",1767095865036],"\n",[],[89,135],"c0bcb3e4-e576-11f0-8d1d-42dde27851f2","components","019b6f1f-0f00-7290-9c3e-35a788932477",["D",1767095865036],[147],[89,142],{"_35":148,"_13":149,"_64":150,"_66":143,"_67":68,"_69":151,"_71":72,"_37":152,"_17":31,"_75":123,"_77":153,"_79":50,"_80":-5,"_98":154,"_18":155},"bc954dc0-e577-11f0-be68-42dde27851f2","App.tsx","019b6f1f-0f00-7290-9c3e-3372a9d33052",6,["D",1767096287617],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useMemo, useState } from \"https://esm.sh/react@18.2.0\";\nimport {\n Calendar,\n ChevronDown,\n ChevronUp,\n Clock,\n ExternalLink,\n Filter,\n Search,\n Trophy,\n User,\n X,\n} from \"https://esm.sh/lucide-react@0.562.0\";\n\nexport function App() {\n const [username, setUsername] = useState(\"\");\n const [games, setGames] = useState([]);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(\"\");\n const [sortConfig, setSortConfig] = useState({\n key: \"end_time\",\n direction: \"desc\",\n });\n const [filters, setFilters] = useState({\n result: \"all\",\n timeClass: \"all\",\n color: \"all\",\n searchOpponent: \"\",\n });\n const [expandedGame, setExpandedGame] = useState(null);\n\n const fetchGames = async () => {\n if (!username.trim()) {\n setError(\"Please enter a username\");\n return;\n }\n\n setLoading(true);\n setError(\"\");\n setGames([]);\n\n try {\n // Try to fetch games from the current month\n const currentDate = new Date();\n const year = currentDate.getFullYear();\n const month = String(currentDate.getMonth() + 1).padStart(2, \"0\");\n\n // Note: Due to CORS restrictions, we need to use a proxy\n // This may not work in all environments due to CSP policies\n const apiUrl =\n `https://api.chess.com/pub/player/${username.toLowerCase()}/games/${year}/${month}`;\n\n let response;\n try {\n // Try direct fetch first (will work if CSP allows)\n response = await fetch(apiUrl);\n } catch (corsError) {\n // If direct fetch fails, inform user\n setError(\n \"Unable to fetch data due to browser security restrictions. This tool works best when copied to your own environment or when chess.com allows direct API access.\",\n );\n setLoading(false);\n return;\n }\n\n if (!response.ok) {\n throw new Error(\n response.status === 404 ? \"User not found\" : \"Failed to fetch games\",\n );\n }\n\n const data = await response.json();\n\n if (!data.games || data.games.length === 0) {\n setError(\"No games found for this month\");\n setLoading(false);\n return;\n }\n\n const processedGames = data.games.map((game, idx) => {\n const isWhite =\n game.white.username.toLowerCase() === username.toLowerCase();\n const userColor = isWhite ? \"white\" : \"black\";\n const opponent = isWhite ? game.black : game.white;\n\n let result = \"draw\";\n if (game[userColor].result === \"win\") result = \"win\";\n else if (\n game[userColor].result !== \"agreed\" &&\n game[userColor].result !== \"repetition\" &&\n game[userColor].result !== \"stalemate\" &&\n game[userColor].result !== \"insufficient\"\n ) {\n result = \"loss\";\n }\n\n return {\n id: idx,\n url: game.url,\n pgn: game.pgn,\n time_control: game.time_control,\n end_time: game.end_time,\n rated: game.rated,\n time_class: game.time_class,\n rules: game.rules,\n white: game.white,\n black: game.black,\n userColor,\n opponent: opponent.username,\n opponentRating: opponent.rating,\n userRating: game[userColor].rating,\n result,\n resultDetail: game[userColor].result,\n };\n });\n\n setGames(processedGames);\n } catch (err) {\n setError(err.message);\n } finally {\n setLoading(false);\n }\n };\n\n const handleSort = (key) => {\n setSortConfig((prev) => ({\n key,\n direction: prev.key === key && prev.direction === \"asc\" ? \"desc\" : \"asc\",\n }));\n };\n\n const filteredAndSortedGames = useMemo(() => {\n let filtered = [...games];\n\n if (filters.result !== \"all\") {\n filtered = filtered.filter((g) => g.result === filters.result);\n }\n if (filters.timeClass !== \"all\") {\n filtered = filtered.filter((g) => g.time_class === filters.timeClass);\n }\n if (filters.color !== \"all\") {\n filtered = filtered.filter((g) => g.userColor === filters.color);\n }\n if (filters.searchOpponent) {\n filtered = filtered.filter((g) =>\n g.opponent.toLowerCase().includes(filters.searchOpponent.toLowerCase())\n );\n }\n\n filtered.sort((a, b) => {\n let aVal = a[sortConfig.key];\n let bVal = b[sortConfig.key];\n\n if (sortConfig.key === \"end_time\") {\n aVal = new Date(aVal * 1000);\n bVal = new Date(bVal * 1000);\n }\n\n if (aVal < bVal) return sortConfig.direction === \"asc\" ? -1 : 1;\n if (aVal > bVal) return sortConfig.direction === \"asc\" ? 1 : -1;\n return 0;\n });\n\n return filtered;\n }, [games, filters, sortConfig]);\n\n const stats = useMemo(() => {\n const wins = games.filter((g) => g.result === \"win\").length;\n const losses = games.filter((g) => g.result === \"loss\").length;\n const draws = games.filter((g) => g.result === \"draw\").length;\n\n return { wins, losses, draws, total: games.length };\n }, [games]);\n\n const SortIcon = ({ column }) => {\n if (sortConfig.key !== column) {\n return ;\n }\n return sortConfig.direction === \"asc\"\n ? \n : ;\n };\n\n const getResultColor = (result) => {\n if (result === \"win\") return \"text-green-600 bg-green-50\";\n if (result === \"loss\") return \"text-red-600 bg-red-50\";\n return \"text-gray-600 bg-gray-50\";\n };\n\n const formatDate = (timestamp) => {\n return new Date(timestamp * 1000).toLocaleString();\n };\n\n const formatTimeControl = (tc) => {\n if (!tc) return \"Unknown\";\n const parts = tc.split(\"+\");\n if (parts.length === 2) {\n return `${Math.floor(parts[0] / 60)}+${parts[1]}`;\n }\n return tc;\n };\n\n return (\n

\n {/* Header */}\n

\n \n Chess.com Game Explorer\n

\n Analyze your chess.com game history with interactive filtering and\n sorting\n

\n\n {/* Search Section */}\n

\n \n setUsername(e.target.value)}\n onKeyPress={(e) => e.key === \"Enter\" && fetchGames()}\n placeholder=\"Enter chess.com username...\"\n className=\"w-full pl-12 pr-4 py-4 border-2 border-slate-200 rounded-xl focus:outline-none focus:border-slate-600 text-lg\"\n />\n

\n \n \n {loading ? \"Loading...\" : \"Search\"}\n \n

\n {error && (\n

\n {error}\n

\n )}\n

\n\n {games.length > 0 && (\n <>\n {/* Stats */}\n

\n {stats.total}\n

\n Total Games\n

\n {stats.wins}\n

Wins

\n {stats.losses}\n

Losses

\n {stats.draws}\n

Draws

\n\n {/* Filters */}\n

\n \n

Filters

\n \n Result\n \n \n setFilters((prev) => ({\n ...prev,\n result: e.target.value,\n }))}\n className=\"w-full px-3 py-2 border border-slate-300 rounded-lg focus:outline-none focus:border-slate-600\"\n >\n \n \n \n \n \n

\n \n Time Class\n \n \n setFilters((prev) => ({\n ...prev,\n timeClass: e.target.value,\n }))}\n className=\"w-full px-3 py-2 border border-slate-300 rounded-lg focus:outline-none focus:border-slate-600\"\n >\n \n \n \n \n \n \n

\n \n Color\n \n \n setFilters((prev) => ({\n ...prev,\n color: e.target.value,\n }))}\n className=\"w-full px-3 py-2 border border-slate-300 rounded-lg focus:outline-none focus:border-slate-600\"\n >\n \n \n \n \n

\n \n Opponent\n \n \n setFilters((prev) => ({\n ...prev,\n searchOpponent: e.target.value,\n }))}\n placeholder=\"Search opponent...\"\n className=\"w-full px-3 py-2 border border-slate-300 rounded-lg focus:outline-none focus:border-slate-600\"\n />\n

\n {(filters.result !== \"all\" || filters.timeClass !== \"all\" ||\n filters.color !== \"all\" || filters.searchOpponent) && (\n \n setFilters({\n result: \"all\",\n timeClass: \"all\",\n color: \"all\",\n searchOpponent: \"\",\n })}\n className=\"mt-4 text-sm text-slate-600 hover:text-slate-800 flex items-center gap-2\"\n >\n \n Clear all filters\n \n )}\n

\n\n {/* Table */}\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n {filteredAndSortedGames.map((game) => (\n \n \n setExpandedGame(\n expandedGame === game.id ? null : game.id,\n )}\n >\n \n \n \n \n \n \n \n \n {expandedGame === game.id && (\n \n \n \n )}\n \n ))}\n \n

\n handleSort(\"end_time\")}\n className=\"flex items-center gap-2 font-semibold text-slate-700 hover:text-slate-900\"\n >\n \n Date\n \n \n	\n handleSort(\"result\")}\n className=\"flex items-center gap-2 font-semibold text-slate-700 hover:text-slate-900\"\n >\n Result\n \n \n	\n handleSort(\"userColor\")}\n className=\"flex items-center gap-2 font-semibold text-slate-700 hover:text-slate-900\"\n >\n Color\n \n \n	\n handleSort(\"opponent\")}\n className=\"flex items-center gap-2 font-semibold text-slate-700 hover:text-slate-900\"\n >\n Opponent\n \n \n	\n handleSort(\"userRating\")}\n className=\"flex items-center gap-2 font-semibold text-slate-700 hover:text-slate-900\"\n >\n Rating\n \n \n	\n handleSort(\"time_class\")}\n className=\"flex items-center gap-2 font-semibold text-slate-700 hover:text-slate-900\"\n >\n \n Time\n \n \n	\n Link\n
\n {formatDate(game.end_time)}\n	\n \n {game.result.toUpperCase()}\n \n	\n \n {game.userColor === \"white\"\n ? \"⚪ White\"\n : \"⚫ Black\"}\n \n	\n {game.opponent}\n	\n {game.userRating} vs {game.opponentRating}\n	\n \n \n {game.time_class}\n \n \n {formatTimeControl(game.time_control)}\n \n \n	\n \n e.stopPropagation()}\n className=\"text-slate-600 hover:text-slate-800\"\n >\n \n \n
\n \n \n \n Result Detail:\n {\" \"}\n {game.resultDetail}\n \n \n Rules:\n {\" \"}\n {game.rules}\n \n \n Rated:\n {\" \"}\n {game.rated ? \"Yes\" : \"No\"}\n \n \n PGN:\n \n {game.pgn}\n \n \n \n

\n {filteredAndSortedGames.length === 0 && (\n

\n No games match your filters\n

\n )}\n

\n\n {/* Footer */}\n

\n Showing {filteredAndSortedGames.length} of {games.length}{\" \"}\n games from current month\n

\n \n )}\n

\n );\n}",[],[89,142,149],"c0b82ffe-e576-11f0-8d1d-42dde27851f2",["D",1767095865036],"legacyEnvVars","httpPrivacy","description","Starter template with client-side React & Hono server","imageUrl","userId","8acb974a-4b91-4d4a-b000-6f28827b7e16","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","b74060f0-0f1d-44f1-bee2-bdb9c9cf72e4","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_200":196},"org",{"_11":12,"_194":-5,"_195":196,"_163":164,"_197":198,"_199":50},"branch",{"_17":151,"_13":16,"_35":68,"_41":156,"_44":36,"_45":190,"_191":52,"_192":42,"_193":56,"_57":14,"_53":12},72,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","avatar","https://secure.gravatar.com/avatar/109fa713caf4e083c57622b7c6dad365.jpg?s=200&d=identicon","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":156,"_13":14,"_37":268,"_48":-5,"_158":50,"_51":52,"_159":52,"_160":161,"_162":-5,"_163":164,"_165":65,"_166":72,"_167":-5,"_168":-5,"_169":74,"_55":170,"_171":-5,"_172":-5,"_173":-5,"_174":-5,"_175":176,"_177":176,"_178":179,"_180":179,"_181":179,"_182":176,"_183":176,"_184":269,"_186":270,"_188":271,"_49":50},[241,248,249],"files",[241,242,243,244,245,246,247,248,249],"counts",{"_232":74,"_233":70,"_234":74,"_34":235,"_236":237},[226,227,228],"upstreamProject",{"_35":42,"_13":58,"_160":161,"_162":223,"_51":52,"_184":224},"upstreamBranch",{"_35":36,"_37":221,"_39":222,"_13":16,"_41":42,"_17":43,"_44":-5,"_45":-5,"_46":47,"_48":-5,"_49":50,"_51":52,"_53":54,"_55":56,"_57":58},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],["D",1785420707976],"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789574399&sig=a8d51a028376b0f18dea863670f2a5f39dc2eca62054b0c7661bee5c0457fba4",{"_11":54,"_200":225},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789574399&sig=3d6a0be010e77940e58f104bd06b986c1fe4f3a57bc9d85e134d5d62fe89a483",{"_35":88,"_13":89,"_64":90,"_66":-5,"_67":68,"_69":70,"_71":72,"_37":91,"_17":74,"_75":92,"_77":-5,"_79":50,"_80":-5,"_18":231},{"_35":82,"_13":83,"_64":84,"_66":-5,"_67":68,"_69":70,"_71":72,"_37":85,"_17":74,"_75":24,"_77":86,"_79":50,"_80":-5,"_18":230},{"_35":62,"_13":63,"_64":65,"_66":-5,"_67":68,"_69":70,"_71":72,"_37":73,"_17":74,"_75":76,"_77":78,"_79":50,"_80":-5,"_18":229},[63],[83],[89],"pulls","branches","forks",{"_238":74,"_240":74},"connections",{"_238":74,"_239":74},"count","unfilledCount","emptyCount",{"_35":88,"_13":89,"_64":90,"_66":-5,"_67":68,"_69":70,"_71":72,"_37":104,"_17":74,"_75":92,"_77":-5,"_79":50,"_80":-5,"_98":266,"_18":267},{"_35":141,"_13":142,"_64":143,"_66":90,"_67":68,"_69":70,"_71":72,"_37":144,"_17":74,"_75":92,"_77":-5,"_79":50,"_80":-5,"_98":264,"_18":265},{"_35":148,"_13":149,"_64":150,"_66":143,"_67":68,"_69":151,"_71":72,"_37":152,"_17":31,"_75":123,"_77":153,"_79":50,"_80":-5,"_98":262,"_18":263},{"_35":134,"_13":135,"_64":136,"_66":90,"_67":68,"_69":70,"_71":72,"_37":137,"_17":74,"_75":24,"_77":138,"_79":50,"_80":-5,"_98":260,"_18":261},{"_35":127,"_13":128,"_64":129,"_66":90,"_67":68,"_69":70,"_71":72,"_37":130,"_17":74,"_75":24,"_77":131,"_79":50,"_80":-5,"_98":258,"_18":259},{"_35":119,"_13":120,"_64":121,"_66":90,"_67":68,"_69":70,"_71":72,"_37":122,"_17":74,"_75":123,"_77":124,"_79":50,"_80":-5,"_98":256,"_18":257},{"_35":112,"_13":113,"_64":114,"_66":90,"_67":68,"_69":70,"_71":72,"_37":115,"_17":74,"_75":24,"_77":116,"_79":50,"_80":-5,"_98":254,"_18":255},{"_35":82,"_13":83,"_64":84,"_66":-5,"_67":68,"_69":70,"_71":72,"_37":101,"_17":74,"_75":24,"_77":86,"_79":50,"_80":-5,"_98":252,"_18":253},{"_35":62,"_13":63,"_64":65,"_66":-5,"_67":68,"_69":70,"_71":72,"_37":97,"_17":74,"_75":76,"_77":78,"_79":50,"_80":-5,"_98":250,"_18":251},[],[63],[],[83],[],[89,113],[],[89,120],[],[89,128],[],[89,135],[],[89,142,149],[243],[89,142],[242,244,245,246,247],[89],["D",1767095865036],{"_11":12,"_200":196},{"_11":12,"_194":-5,"_195":196,"_163":164,"_197":198,"_199":50},{"_17":151,"_13":16,"_35":68,"_41":156,"_44":36,"_45":190,"_191":52,"_192":42,"_193":56,"_57":14,"_53":12},"ctx",{"_184":-5,"_218":305,"_306":307,"_308":309,"_310":50,"_311":50,"_312":50,"_313":72,"_314":-5,"_315":-7,"_316":-7,"_317":74,"_318":50,"_319":50,"_320":-5,"_321":50,"_322":50,"_323":50,"_324":-5},"ENV",{"_276":277,"_278":279,"_280":16,"_281":282,"_283":284,"_285":286,"_287":288,"_289":290,"_291":292,"_293":294,"_295":296,"_297":298,"_299":300,"_301":302,"_303":304},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Code