\n onNavigate(\"#/\")}\n className=\"text-xl font-bold text-gray-900 hover:text-blue-600\"\n >\n 🔗 Rate Connections\n \n \n

\n);\n\nconst PuzzleCard: React.FC<{ puzzle: Puzzle; onNavigate: (route: string) => void }> = ({ puzzle, onNavigate }) => {\n const today = new Date().toISOString().split(\"T\")[0];\n const isToday = puzzle.date === today;\n\n const categoryColors = [\n \"bg-yellow-100 text-yellow-800 border-yellow-200\", // Level 0 - Yellow\n \"bg-green-100 text-green-800 border-green-200\", // Level 1 - Green\n \"bg-blue-100 text-blue-800 border-blue-200\", // Level 2 - Blue\n \"bg-purple-100 text-purple-800 border-purple-200\", // Level 3 - Purple\n ];\n\n return (\n onNavigate(`#/puzzle/${puzzle.date}`)}\n >\n

{formatDate(puzzle.date)}

\n {getRatingDisplay(puzzle.overall_average)}\n

\n {puzzle.total_votes} vote{puzzle.total_votes !== 1 ? \"s\" : \"\"}\n

\n {isToday\n ? (\n

\n 🤫 No spoilers! Click to rate today's puzzle\n

\n )\n : (\n puzzle.categories.map((category, i) => (\n

\n {category}\n

\n ))\n )}\n

\n \n );\n};\n\nconst HomePage: React.FC<{ onNavigate: (route: string) => void }> = ({ onNavigate }) => {\n const [puzzles, setPuzzles] = useState([]);\n const [loading, setLoading] = useState(false);\n const [loaded, setLoaded] = useState(false);\n\n const loadPuzzles = async () => {\n if (loaded) return;\n setLoading(true);\n try {\n // Check for initial data first\n const initialData = (window as any).__INITIAL_DATA__;\n if (initialData?.puzzles) {\n setPuzzles(initialData.puzzles);\n setLoaded(true);\n } else {\n const data = await api.getPuzzles();\n setPuzzles(data);\n }\n setLoaded(true);\n } catch (error) {\n console.error(\"Failed to load puzzles:\", error);\n }\n setLoading(false);\n };\n\n // Load on first render\n if (!loaded && !loading) {\n loadPuzzles();\n }\n\n return (\n

\n Rate NYT Connections Categories\n

\n Praise or roast each day's four categories. 1 = dumpster fire, 5 = chef's kiss.\n

\n\n {loading && (\n

Loading puzzles...

\n )}\n\n

\n {puzzles.map((puzzle) => (\n \n ))}\n

\n\n {puzzles.length === 0 && !loading && (\n

No puzzles found.

\n )}\n

\n );\n};\n\nconst CategoryCard: React.FC<{\n category: string;\n members: string[];\n level: number;\n average: number;\n voteCount: number;\n userVote: number;\n onVote: (rating: number) => void;\n}> = ({ category, members, level, average, voteCount, userVote, onVote }) => {\n const colors = [\n \"bg-yellow-100 border-yellow-300\", // Level 0 - Yellow\n \"bg-green-100 border-green-300\", // Level 1 - Green\n \"bg-blue-100 border-blue-300\", // Level 2 - Blue\n \"bg-purple-100 border-purple-300\", // Level 3 - Purple\n ];\n\n const hasVoted = userVote > 0;\n\n return (\n

\n {category}\n

\n\n

\n {members.join(\" • \")}\n

\n\n {hasVoted\n ? (\n // Show averages and vote counts only after user has voted\n <>\n

\n {getRatingDisplay(average)}\n

\n {average > 0 ? average.toFixed(1) : \"—\"} avg\n

\n {voteCount} vote{voteCount !== 1 ? \"s\" : \"\"}\n

\n \n )\n : (\n // Show placeholder when user hasn't voted yet\n

\n Vote to see results\n

\n )}\n

\n\n {hasVoted\n ? (\n

Your vote:

\n {getRatingDisplay(userVote)}\n

\n )\n : (\n

Rate this category:

\n {[1, 2, 3, 4, 5].map((rating) => (\n onVote(rating)}\n className=\"w-8 h-8 text-lg hover:bg-white hover:shadow-sm rounded transition-all\"\n title={`Rate ${rating} star${rating !== 1 ? \"s\" : \"\"}`}\n >\n ☆\n \n ))}\n

\n 1 = dumpster fire, 5 = chef's kiss\n

\n )}\n

\n );\n};\n\nconst PuzzleDetailPage: React.FC<{\n date: string;\n onNavigate: (route: string) => void;\n}> = ({ date, onNavigate }) => {\n const [puzzle, setPuzzle] = useState(null);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(\"\");\n const [loaded, setLoaded] = useState(false);\n\n const loadPuzzle = async () => {\n if (loaded) return;\n setLoading(true);\n setError(\"\");\n try {\n const data = await api.getPuzzle(date);\n setPuzzle(data);\n setLoaded(true);\n } catch (err) {\n setError(\"Failed to load puzzle\");\n console.error(\"Failed to load puzzle:\", err);\n }\n setLoading(false);\n };\n\n const handleVote = async (categoryIndex: number, rating: number) => {\n if (!puzzle) return;\n\n try {\n const updatedPuzzle = await api.vote(date, categoryIndex, rating);\n setPuzzle(updatedPuzzle);\n setError(\"\");\n \n // Clear cached data so home page refreshes with updated vote counts\n delete (window as any).__INITIAL_DATA__;\n } catch (err) {\n setError(err instanceof Error ? err.message : \"Failed to submit vote\");\n }\n };\n\n // Load on first render\n if (!loaded && !loading) {\n loadPuzzle();\n }\n\n if (loading) {\n return (\n

Loading puzzle...

\n );\n }\n\n if (!puzzle) {\n return (\n

Puzzle not found

\n onNavigate(\"#/\")}\n className=\"mt-4 text-blue-600 hover:underline\"\n >\n ← Back to home\n \n

\n );\n }\n\n return (\n

\n onNavigate(\"#/\")}\n className=\"text-blue-600 hover:underline mb-2\"\n >\n ← Back to puzzles\n \n

\n {formatDate(puzzle.date)} Puzzle\n

\n Overall: {getRatingDisplay(puzzle.overall_average)}\n

\n {puzzle.total_votes} total vote{puzzle.total_votes !== 1 ? \"s\" : \"\"}\n

\n\n {error && (\n

{error}

\n )}\n\n

\n {puzzle.categories.map((category, index) => (\n handleVote(index, rating)}\n />\n ))}\n

\n );\n};\n\nconst BestLeaderboardPage: React.FC<{ onNavigate: (route: string) => void }> = ({ onNavigate }) => {\n const [puzzles, setPuzzles] = useState([]);\n const [loading, setLoading] = useState(false);\n const [loaded, setLoaded] = useState(false);\n\n const loadLeaderboard = async () => {\n if (loaded) return;\n setLoading(true);\n try {\n const data = await api.getBestLeaderboard();\n setPuzzles(data);\n setLoaded(true);\n } catch (error) {\n console.error(\"Failed to load best leaderboard:\", error);\n }\n setLoading(false);\n };\n\n // Load on first render\n if (!loaded && !loading) {\n loadLeaderboard();\n }\n\n return (\n

\n onNavigate(\"#/\")}\n className=\"text-blue-600 hover:underline mb-2\"\n >\n ← Back to puzzles\n \n

\n 🏆 Best Days\n

\n Puzzles ranked by highest overall ratings (newest ties first)\n

\n\n {loading && (\n

Loading leaderboard...

\n )}\n\n

\n {puzzles.map((puzzle, index) => (\n onNavigate(`#/puzzle/${puzzle.date}`)}\n >\n

\n #{index + 1}\n

\n {formatDate(puzzle.date)}\n

\n {puzzle.total_votes} vote{puzzle.total_votes !== 1 ? \"s\" : \"\"}\n

\n {getRatingDisplay(puzzle.overall_average)}\n

\n {puzzle.overall_average.toFixed(1)}\n

\n ))}\n

\n\n {puzzles.length === 0 && !loading && (\n

No rated puzzles found.

\n )}\n \n );\n};\n\nconst WorstLeaderboardPage: React.FC<{ onNavigate: (route: string) => void }> = ({ onNavigate }) => {\n const [puzzles, setPuzzles] = useState([]);\n const [loading, setLoading] = useState(false);\n const [loaded, setLoaded] = useState(false);\n\n const loadLeaderboard = async () => {\n if (loaded) return;\n setLoading(true);\n try {\n const data = await api.getWorstLeaderboard();\n setPuzzles(data);\n setLoaded(true);\n } catch (error) {\n console.error(\"Failed to load worst leaderboard:\", error);\n }\n setLoading(false);\n };\n\n // Load on first render\n if (!loaded && !loading) {\n loadLeaderboard();\n }\n\n return (\n

\n onNavigate(\"#/\")}\n className=\"text-blue-600 hover:underline mb-2\"\n >\n ← Back to puzzles\n \n

\n 💩 Worst Days\n

\n Puzzles ranked by lowest overall ratings (newest ties first)\n

\n\n {loading && (\n

Loading leaderboard...

\n )}\n\n

\n {puzzles.map((puzzle, index) => (\n onNavigate(`#/puzzle/${puzzle.date}`)}\n >\n

\n #{index + 1}\n

\n {formatDate(puzzle.date)}\n

\n {puzzle.total_votes} vote{puzzle.total_votes !== 1 ? \"s\" : \"\"}\n

\n {getRatingDisplay(puzzle.overall_average)}\n

\n {puzzle.overall_average.toFixed(1)}\n

\n ))}\n

\n\n {puzzles.length === 0 && !loading && (\n

No rated puzzles found.

\n )}\n \n );\n};\n\nconst Footer: React.FC = () => (\n \n);\n\n// Main App\nconst App: React.FC = () => {\n const [route, setRoute] = useState(window.location.hash || \"#/\");\n\n const handleNavigate = (newRoute: string) => {\n window.location.hash = newRoute;\n setRoute(newRoute);\n };\n\n // Listen for hash changes\n window.addEventListener(\"hashchange\", () => {\n setRoute(window.location.hash);\n });\n\n const renderPage = () => {\n if (route.startsWith(\"#/puzzle/\")) {\n const date = route.replace(\"#/puzzle/\", \"\");\n return ;\n }\n\n if (route === \"#/best\") {\n return ;\n }\n\n if (route === \"#/worst\") {\n return ;\n }\n\n return ;\n };\n\n return (\n

\n {renderPage()}\n

\n );\n};\n\n// Initialize app\nconst container = document.getElementById(\"root\");\nif (container) {\n const root = createRoot(container);\n root.render();\n}","deleted","label",[168,149],"frontend","permalink","https://www.val.town/x/stevekrouse/rate-connections/code/frontend/index.tsx","extension","actionData","errors"]