\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}","deleted","label",[179,180,162],"frontend","components","permalink","https://www.val.town/x/neverstew/chessdotcomexplorer/code/frontend/components/App.tsx","extension","actionData","errors"]