\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}","label","children",[96,97,78],"contentHash","c48fad30a3bc60a9f4bfa789e69889c198463022db6b9fb97a7d39f57bff0eb8","frontend","components","5cb7a1f2-f53e-11ef-937e-569c3dd06744","6e585892-f52b-11ef-a8e1-569c3dd06744","69ed66bc-f52b-11ef-9dac-569c3dd06744",27,["D",1740683366401],4,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function App() {\n const [clicked, setClicked] = useState(0);\n return (\n

Val Town React + Hono Starter

\n I've been clicked times\n

\n );\n}",[96,97,78],"572f45a0f0ec99935ff566c31d3bbf761edf962e408c2e2fb6df62cbb636a5c4",["D",1767095865036],"legacyEnvVars","httpPrivacy","description","Starter template with client-side React & Hono server","imageUrl","userId","8acb974a-4b91-4d4a-b000-6f28827b7e16","pinnedFileId","019b6f1f-0f00-7290-9c3e-536edb9a25ee","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"b74060f0-0f1d-44f1-bee2-bdb9c9cf72e4","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_147":143},"org",{"_11":12,"_141":-5,"_142":143,"_113":114,"_144":145,"_146":48},"branch","displayName","avatar","https://secure.gravatar.com/avatar/109fa713caf4e083c57622b7c6dad365.jpg?s=200&d=identicon","tier","free","canRestrictVals","profileImageUrl","","adoptOrgId",{"_32":59,"_13":14,"_34":260,"_46":-5,"_108":48,"_49":50,"_109":50,"_110":111,"_112":-5,"_113":114,"_115":116,"_117":26,"_118":-5,"_119":-5,"_120":121,"_53":122,"_123":-5,"_124":-5,"_125":-5,"_126":-5,"_127":128,"_129":128,"_130":131,"_132":131,"_133":131,"_134":128,"_135":128,"_136":261,"_138":262,"_140":263,"_47":48},"tree",[208,215,216],"files",[208,209,210,211,212,213,214,215,216],"counts",{"_198":121,"_199":182,"_200":121,"_201":202,"_203":204},"contents",[177,178,179],"file","upstreamProject",{"_32":39,"_13":56,"_110":111,"_112":174,"_49":50,"_136":175},"upstreamBranch",{"_32":33,"_34":172,"_36":173,"_13":16,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],["D",1785420707976],"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789585199&sig=1baafecf11cec877edc88f123efd7f687a508ecc290c26f9eecfc4b3e272df79",{"_11":52,"_147":176},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789585199&sig=e0ad9b96a0e58967744de3785adb3e9a68085da5b0c135b58439da2ef923cdc0",{"_32":193,"_13":96,"_79":194,"_81":-5,"_83":58,"_84":182,"_85":26,"_34":195,"_40":121,"_87":196,"_89":-5,"_66":48,"_91":-5,"_71":197},{"_32":187,"_13":188,"_79":189,"_81":-5,"_83":58,"_84":182,"_85":26,"_34":190,"_40":121,"_87":159,"_89":191,"_66":48,"_91":-5,"_71":192},{"_32":180,"_13":181,"_79":116,"_81":-5,"_83":58,"_84":182,"_85":26,"_34":183,"_40":121,"_87":184,"_89":185,"_66":48,"_91":-5,"_71":186},"c0bcd400-e576-11f0-8d1d-42dde27851f2","index.ts",1,["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;",[181],"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.",[188],"c0bcc8b6-e576-11f0-8d1d-42dde27851f2","019b6f1f-0f00-7290-9c3e-4bceedcbefe8",["D",1767095865036],"directory",[96],"pulls","branches","forks","envVars",{"_205":121,"_207":121},"connections",{"_205":121,"_206":121},"count","unfilledCount","emptyCount",{"_32":193,"_13":96,"_79":194,"_81":-5,"_83":58,"_84":182,"_85":26,"_34":257,"_40":121,"_87":196,"_89":-5,"_66":48,"_91":-5,"_92":258,"_71":259},{"_32":253,"_13":97,"_79":82,"_81":194,"_83":58,"_84":182,"_85":26,"_34":254,"_40":121,"_87":196,"_89":-5,"_66":48,"_91":-5,"_92":255,"_71":256},{"_32":77,"_13":78,"_79":80,"_81":82,"_83":58,"_84":57,"_85":26,"_34":86,"_40":20,"_87":88,"_89":90,"_66":48,"_91":-5,"_92":251,"_71":252},{"_32":244,"_13":245,"_79":246,"_81":194,"_83":58,"_84":182,"_85":26,"_34":247,"_40":121,"_87":159,"_89":248,"_66":48,"_91":-5,"_92":249,"_71":250},{"_32":237,"_13":238,"_79":239,"_81":194,"_83":58,"_84":182,"_85":26,"_34":240,"_40":121,"_87":159,"_89":241,"_66":48,"_91":-5,"_92":242,"_71":243},{"_32":230,"_13":231,"_79":232,"_81":194,"_83":58,"_84":182,"_85":26,"_34":233,"_40":121,"_87":88,"_89":234,"_66":48,"_91":-5,"_92":235,"_71":236},{"_32":223,"_13":224,"_79":225,"_81":194,"_83":58,"_84":182,"_85":26,"_34":226,"_40":121,"_87":159,"_89":227,"_66":48,"_91":-5,"_92":228,"_71":229},{"_32":187,"_13":188,"_79":189,"_81":-5,"_83":58,"_84":182,"_85":26,"_34":220,"_40":121,"_87":159,"_89":191,"_66":48,"_91":-5,"_92":221,"_71":222},{"_32":180,"_13":181,"_79":116,"_81":-5,"_83":58,"_84":182,"_85":26,"_34":217,"_40":121,"_87":184,"_89":185,"_66":48,"_91":-5,"_92":218,"_71":219},["D",1767095865036],[],[181],["D",1767095865036],[],[188],"c0bcc4ce-e576-11f0-8d1d-42dde27851f2","style.css","019b6f1f-0f00-7290-9c3e-45d9fe37a584",["D",1767095865036],"body {\n font-family: -apple-system, Arial, sans-serif;\n color: #333;\n padding: 20px;\n}\n\nbutton {\n background-color: #4a90e2;\n color: white;\n border: none;\n padding: 8px 16px;\n border-radius: 4px;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #357ae8;\n}",[],[96,224],"c0bcc0be-e576-11f0-8d1d-42dde27851f2","index.tsx","019b6f1f-0f00-7290-9c3e-414b337a8d3a",["D",1767095865036],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[96,231],"c0bcbca4-e576-11f0-8d1d-42dde27851f2","index.html","019b6f1f-0f00-7290-9c3e-3cd5167d3e82",["D",1767095865036],"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[],[96,238],"c0bcb61e-e576-11f0-8d1d-42dde27851f2","favicon.svg","019b6f1f-0f00-7290-9c3e-394cafce5c5a",["D",1767095865036],"\n",[],[96,245],[],[96,97,78],"c0bcb3e4-e576-11f0-8d1d-42dde27851f2",["D",1767095865036],[210],[96,97],["D",1767095865036],[209,211,212,213,214],[96],["D",1767095865036],{"_11":12,"_147":143},{"_11":12,"_141":-5,"_142":143,"_113":114,"_144":145,"_146":48},{"_40":57,"_13":16,"_32":58,"_38":59,"_42":33,"_43":60,"_61":50,"_62":39,"_63":54,"_55":14,"_51":12},"ctx",{"_136":-5,"_169":297,"_298":299,"_300":301,"_302":48,"_303":48,"_304":48,"_305":26,"_306":-5,"_307":-7,"_308":-7,"_309":121,"_310":48,"_311":48,"_312":-5,"_313":48,"_314":48,"_315":48,"_316":-5},"ENV",{"_268":269,"_270":271,"_272":16,"_273":274,"_275":276,"_277":278,"_279":280,"_281":282,"_283":284,"_285":286,"_287":288,"_289":290,"_291":292,"_293":294,"_295":296},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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"]

Compare

Mergeneverstew/mainintotemplates/main

frontend/components/App.tsx+558-5