\n \n \n \n",[18,95],"c0bcb61e-e576-11f0-8d1d-42dde27851f2",["D",1767095865036],"\n",[18,101],"c0bcb3e4-e576-11f0-8d1d-42dde27851f2",["D",1767095865036],[18,106],"pulls","branches","forks","envVars",{"_102":26,"_233":26},"connections",{"_102":26,"_232":26},"unfilledCount","emptyCount",{"_33":194,"_13":18,"_75":108,"_43":-5,"_35":36,"_195":40,"_196":24,"_37":280,"_39":26,"_78":107,"_198":-5,"_79":30,"_199":-5,"_248":281,"_17":282},{"_33":222,"_13":106,"_75":105,"_43":108,"_35":36,"_195":40,"_196":24,"_37":277,"_39":26,"_78":107,"_198":-5,"_79":30,"_199":-5,"_248":278,"_17":279},{"_33":270,"_13":271,"_75":272,"_43":105,"_35":36,"_195":144,"_196":24,"_37":273,"_39":103,"_78":89,"_198":274,"_79":30,"_199":-5,"_248":275,"_17":276},{"_33":218,"_13":101,"_75":100,"_43":108,"_35":36,"_195":40,"_196":24,"_37":267,"_39":26,"_78":21,"_198":220,"_79":30,"_199":-5,"_248":268,"_17":269},{"_33":214,"_13":95,"_75":94,"_43":108,"_35":36,"_195":40,"_196":24,"_37":264,"_39":26,"_78":21,"_198":216,"_79":30,"_199":-5,"_248":265,"_17":266},{"_33":210,"_13":88,"_75":87,"_43":108,"_35":36,"_195":40,"_196":24,"_37":261,"_39":26,"_78":89,"_198":212,"_79":30,"_199":-5,"_248":262,"_17":263},{"_33":206,"_13":77,"_75":76,"_43":108,"_35":36,"_195":40,"_196":24,"_37":258,"_39":26,"_78":21,"_198":208,"_79":30,"_199":-5,"_248":259,"_17":260},{"_33":251,"_13":252,"_75":253,"_43":-5,"_35":36,"_195":40,"_196":24,"_37":254,"_39":26,"_78":21,"_198":255,"_79":30,"_199":-5,"_248":256,"_17":257},{"_33":243,"_13":244,"_75":120,"_43":-5,"_35":36,"_195":40,"_196":24,"_37":245,"_39":26,"_78":246,"_198":247,"_79":30,"_199":-5,"_248":249,"_17":250},"c0bcd400-e576-11f0-8d1d-42dde27851f2","index.ts",["D",1767095865036],"http","import { serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;","children",[],[244],"c0bccb36-e576-11f0-8d1d-42dde27851f2","README.md","019b6f1f-0f00-7290-9c3e-4d71d94dee0a",["D",1767095865036],"# React Hono Starter\n\nThis app is a starter template for client-side React and server-side Hono.\n\n## Getting started\n\nGet a copy of this starter template by clicking the **Remix** button in the\ntop-right.\n\n## How it works\n\n- The **entrypoint** is [`index.ts`](index.ts). That's the backend HTTP server,\n which also serves the all the frontend assets.\n\n- The **client-side entrypoint** is\n [`/frontend/index.html`](/frontend/index.html)\n - which in turn imports [`/frontend/index.tsx`](/frontend/index.tsx)\n - which in turn imports the React app from\n [`/frontend/components/App.tsx`](/frontend/components/App.tsx).\n\nSo if you wanted to get a sense of how this app comes together, we suggest\nreading the files in this order:\n\n[`index.ts`](index.ts) -> [`/frontend/index.html`](/frontend/index.html) ->\n[`/frontend/index.tsx`](/frontend/index.tsx) ->\n[`/frontend/components/App.tsx`](/frontend/components/App.tsx)\n\n## Further resources\n\n- [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a\n bigger example project, with a SQLite database table, queries, client-side\n CSS, a favicon, and shared code that runs on both client and server.",[],[252],["D",1767095865036],[],[18,77],["D",1767095865036],[],[18,88],["D",1767095865036],[],[18,95],["D",1767095865036],[],[18,101],"bc954dc0-e577-11f0-be68-42dde27851f2","App.tsx","019b6f1f-0f00-7290-9c3e-3372a9d33052",["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}",[],[18,106,271],["D",1767095865036],[236],[18,106],["D",1767095865036],[235,237,238,239,240],[18],["D",1767095865036],{"_11":12,"_160":82},{"_11":12,"_156":-5,"_81":82,"_31":80,"_157":158,"_159":30},{"_39":144,"_13":16,"_33":36,"_145":110,"_146":72,"_147":148,"_149":114,"_150":151,"_152":153,"_154":14,"_155":12},"ctx",{"_52":-5,"_181":320,"_321":322,"_323":324,"_325":30,"_326":30,"_327":30,"_328":24,"_329":-5,"_330":-7,"_331":-7,"_332":26,"_333":30,"_334":30,"_335":-5,"_336":30,"_337":30,"_338":30,"_339":-5},"ENV",{"_291":292,"_293":294,"_295":16,"_296":297,"_298":299,"_300":301,"_302":303,"_304":305,"_306":307,"_308":309,"_310":311,"_312":313,"_314":315,"_316":317,"_318":319},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","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"]

History · frontend