[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_398":399,"_400":401},"routes/_app.x.$handle.$name",{"_102":101,"_32":46,"_111":92,"_27":112,"_13":14,"_113":-5,"_11":114,"_115":116,"_117":118,"_119":120,"_121":122,"_20":-5,"_123":-5,"_124":-5,"_125":25,"_126":127,"_128":60,"_129":-5,"_130":-5,"_131":132},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":72,"_73":74,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":85,"_86":87,"_88":89,"_90":25},"version",171,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/components/Leaderboard.tsx","latestPath","fileId","6a79628a-f547-11f0-9f03-42dde27851f2","name","Leaderboard.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { RoundIndicator } from \"./RoundIndicator.tsx\";\n\ninterface LeaderboardEntry {\n submission_id: string;\n game_id: string;\n club_name: string;\n user_name: string;\n submitted_at: string;\n total_points: number;\n submissions: string[];\n submission_validity: boolean[];\n}\n\ninterface LeaderboardProps {\n clubName: string;\n}\n\nexport function Leaderboard({ clubName }: LeaderboardProps) {\n const [entries, setEntries] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [sortByRound, setSortByRound] = useState(null); // null = total, 0-4 = round index\n\n const totalRounds = 5; // Number of rounds in the game\n\n useEffect(() => {\n const fetchLeaderboard = async () => {\n setLoading(true);\n setError(null);\n \n try {\n const response = await fetch(`/api/leaderboard/${encodeURIComponent(clubName)}`);\n if (!response.ok) {\n throw new Error(\"Failed to fetch leaderboard\");\n }\n const data = await response.json();\n setEntries(data.entries || []);\n } catch (err) {\n console.error(\"Error fetching leaderboard:\", err);\n setError(err instanceof Error ? err.message : \"Failed to load leaderboard\");\n } finally {\n setLoading(false);\n }\n };\n\n fetchLeaderboard();\n }, [clubName]);\n\n // Calculate points for a specific round (word length if valid, 0 if invalid)\n const getRoundPoints = (entry: LeaderboardEntry, roundIndex: number): number => {\n if (roundIndex >= entry.submissions.length) return 0;\n if (!entry.submission_validity[roundIndex]) return 0;\n return entry.submissions[roundIndex].length;\n };\n\n // Get the word for a specific round\n const getRoundWord = (entry: LeaderboardEntry, roundIndex: number): string => {\n if (roundIndex >= entry.submissions.length) return \"\";\n return entry.submissions[roundIndex];\n };\n\n // Sort entries based on current sort selection\n const sortedEntries = [...entries].sort((a, b) => {\n if (sortByRound === null) {\n // Sort by total points DESC, then user_name ASC\n if (b.total_points !== a.total_points) {\n return b.total_points - a.total_points;\n }\n return a.user_name.localeCompare(b.user_name);\n } else {\n // Sort by specific round's points\n const aPoints = getRoundPoints(a, sortByRound);\n const bPoints = getRoundPoints(b, sortByRound);\n \n if (bPoints !== aPoints) {\n return bPoints - aPoints;\n }\n \n // Tiebreaker: word alphabetically\n const aWord = getRoundWord(a, sortByRound);\n const bWord = getRoundWord(b, sortByRound);\n if (aWord !== bWord) {\n return aWord.localeCompare(bWord);\n }\n \n // Final tiebreaker: user_name\n return a.user_name.localeCompare(b.user_name);\n }\n });\n\n // Handle round selection click\n const handleRoundClick = (roundIndex: number) => {\n // roundIndex === totalRounds means \"Total\" (the extra dot)\n if (roundIndex === totalRounds) {\n setSortByRound(null);\n } else {\n setSortByRound(roundIndex);\n }\n };\n\n // Determine which dot is selected (totalRounds = Total dot)\n const selectedRound = sortByRound === null ? totalRounds : sortByRound;\n\n if (loading) {\n return (\n

{clubName}

Loading leaderboard...

\n );\n }\n\n if (error) {\n return (\n

{clubName}

{error}

\n );\n }\n\n if (entries.length === 0) {\n return (\n

{clubName}

Nobody in the club has played yet!

Share this link to invite friends:

\n {window.location.origin}/club/{clubName.toLowerCase()}\n

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

{clubName}

\n \n {/* Sort selector using RoundIndicator */}\n

\n Sort by:\n \n

\n \n {/* Scrollable table container */}\n

\n \n \n \n \n \n \n \n \n \n \n {sortedEntries.map((entry, index) => (\n \n \n \n \n \n \n ))}\n \n

#	Player	Pts	Words
{index + 1}	{entry.user_name}	\n {sortByRound === null \n ? entry.total_points \n : getRoundPoints(entry, sortByRound)\n }\n	\n \n {sortByRound === null ? (\n // Show all words when sorting by total\n entry.submissions.map((word, i) => (\n \n {word}\n \n ))\n ) : (\n // Show only the selected round's word\n \n {getRoundWord(entry, sortByRound) \|\| \"—\"}\n \n )}\n \n

\n );\n}\n","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { RoundIndicator } from \"./RoundIndicator.tsx\";\nimport { rounds } from \"../rounds.ts\";\n\ninterface LeaderboardEntry {\n submission_id: string;\n game_id: number;\n club_name: string;\n user_name: string;\n submitted_at: string;\n total_points: number;\n submissions: string[];\n submission_validity: boolean[];\n}\n\ninterface LeaderboardProps {\n clubName: string;\n gameId?: number; // Optional: filter by specific game, defaults to current game\n}\n\nexport function Leaderboard({ clubName, gameId }: LeaderboardProps) {\n const [entries, setEntries] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [sortByRound, setSortByRound] = useState(null); // null = total, 0-4 = round index\n\n const totalRounds = rounds.length;\n // Use provided gameId or default to current game's id\n const currentGameId = gameId ?? rounds[0].game_id;\n\n useEffect(() => {\n const fetchLeaderboard = async () => {\n setLoading(true);\n setError(null);\n \n try {\n const response = await fetch(`/api/leaderboard/${encodeURIComponent(clubName)}`);\n if (!response.ok) {\n throw new Error(\"Failed to fetch leaderboard\");\n }\n const data = await response.json();\n \n // Filter entries by game_id (for when multiple games exist)\n const allEntries: LeaderboardEntry[] = data.entries || [];\n const filteredEntries = allEntries.filter(entry => entry.game_id === currentGameId);\n \n setEntries(filteredEntries);\n } catch (err) {\n console.error(\"Error fetching leaderboard:\", err);\n setError(err instanceof Error ? err.message : \"Failed to load leaderboard\");\n } finally {\n setLoading(false);\n }\n };\n\n fetchLeaderboard();\n }, [clubName, currentGameId]);\n\n // Calculate points for a specific round (word length if valid, 0 if invalid)\n const getRoundPoints = (entry: LeaderboardEntry, roundIndex: number): number => {\n if (roundIndex >= entry.submissions.length) return 0;\n if (!entry.submission_validity[roundIndex]) return 0;\n return entry.submissions[roundIndex].length;\n };\n\n // Get the word for a specific round\n const getRoundWord = (entry: LeaderboardEntry, roundIndex: number): string => {\n if (roundIndex >= entry.submissions.length) return \"\";\n return entry.submissions[roundIndex];\n };\n\n // Sort entries based on current sort selection\n const sortedEntries = [...entries].sort((a, b) => {\n if (sortByRound === null) {\n // Sort by total points DESC, then user_name ASC\n if (b.total_points !== a.total_points) {\n return b.total_points - a.total_points;\n }\n return a.user_name.localeCompare(b.user_name);\n } else {\n // Sort by specific round's points\n const aPoints = getRoundPoints(a, sortByRound);\n const bPoints = getRoundPoints(b, sortByRound);\n \n if (bPoints !== aPoints) {\n return bPoints - aPoints;\n }\n \n // Tiebreaker: word alphabetically\n const aWord = getRoundWord(a, sortByRound);\n const bWord = getRoundWord(b, sortByRound);\n if (aWord !== bWord) {\n return aWord.localeCompare(bWord);\n }\n \n // Final tiebreaker: user_name\n return a.user_name.localeCompare(b.user_name);\n }\n });\n\n // Handle round selection click\n const handleRoundClick = (roundIndex: number) => {\n // roundIndex === totalRounds means \"Total\" (the extra dot)\n if (roundIndex === totalRounds) {\n setSortByRound(null);\n } else {\n setSortByRound(roundIndex);\n }\n };\n\n // Determine which dot is selected (totalRounds = Total dot)\n const selectedRound = sortByRound === null ? totalRounds : sortByRound;\n\n if (loading) {\n return (\n

{clubName}

Loading leaderboard...

\n );\n }\n\n if (error) {\n return (\n

{clubName}

{error}

\n );\n }\n\n if (entries.length === 0) {\n return (\n

{clubName}

Nobody in the club has played yet!

Share this link to invite friends:

\n {window.location.origin}/club/{clubName.toLowerCase()}\n

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

{clubName}

\n \n {/* Sort selector using RoundIndicator */}\n

\n Sort by:\n \n

\n \n {/* Scrollable table container */}\n

\n \n \n \n \n \n \n \n \n \n \n {sortedEntries.map((entry, index) => (\n \n \n \n \n \n \n ))}\n \n

#	Player	Pts	Words
{index + 1}	{entry.user_name}	\n {sortByRound === null \n ? entry.total_points \n : getRoundPoints(entry, sortByRound)\n }\n	\n \n {sortByRound === null ? (\n // Show all words when sorting by total\n entry.submissions.map((word, i) => (\n \n {word}\n \n ))\n ) : (\n // Show only the selected round's word\n \n {getRoundWord(entry, sortByRound) \|\| \"—\"}\n \n )}\n \n

\n );\n}\n","createdAt",["D",1768836725987],"branchVersion","branchId","f23cf196-f3d5-11f0-8692-42dde27851f2","id","f239e0c8-f3d5-11f0-8692-42dde27851f2","thinkalittlelonger",["D",1768676066564],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","a little game where you think of big words","imageUrl","b85dcfbf-50f1-466c-9e2b-28ac90e0dd23","pinnedFileId","019bcd4f-053b-76eb-a453-718b43a5c39c","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","875ed3cd-ae4b-40bb-a45f-6a1970e11689","tursoName","f239e0c8f3d511f0869242dde27851f2","tursoHostname","f239e0c8f3d511f0869242dde27851f2-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789527643940],"pinned",1,"userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_102":101,"_110":106},"org",{"_102":101,"_103":104,"_105":106,"_18":56,"_107":108,"_109":25},"branch",{"_13":91,"_32":92,"_44":43,"_93":45,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":46,"_100":101},"isOwned",247,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","alexwein","handle","displayName","Alex Wein","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ycjh6emNHdk9mMnY5djU3OFZBbEdleGhQZFAifQ","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":393,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":394,"_73":74,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":395,"_86":396,"_88":397,"_90":25},"tree",[184,201,204,208,209],"files",[184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208,209],"counts",{"_174":64,"_175":74,"_176":64,"_177":178,"_179":180},"contents",[133,134,135,136,137],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":169,"_32":170,"_30":171,"_140":-5,"_42":43,"_41":74,"_142":60,"_39":172,"_13":64,"_34":161,"_36":-5,"_24":25,"_147":-5,"_27":173},{"_44":163,"_32":164,"_30":165,"_140":-5,"_42":43,"_41":166,"_142":60,"_39":167,"_13":64,"_34":161,"_36":-5,"_24":25,"_147":-5,"_27":168},{"_44":156,"_32":157,"_30":158,"_140":-5,"_42":43,"_41":159,"_142":60,"_39":160,"_13":74,"_34":161,"_36":-5,"_24":25,"_147":-5,"_27":162},{"_44":149,"_32":150,"_30":151,"_140":-5,"_42":43,"_41":152,"_142":60,"_39":153,"_13":74,"_34":20,"_36":154,"_24":25,"_147":-5,"_27":155},{"_44":138,"_32":139,"_30":58,"_140":-5,"_42":43,"_41":141,"_142":25,"_39":143,"_13":144,"_34":145,"_36":146,"_24":25,"_147":46,"_27":148},"d774581e-f54b-11f0-858b-42dde27851f2","index.ts","parentId",169,"latest",["D",1768836653438],4,"http","import { serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite\";\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 frontend at club URLs (for leaderboard feature)\napp.get(\"/club/:clubName\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/club/:clubName/\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/club/:clubName/leaderboard\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/club/:clubName/leaderboard/\", () => serveFile(\"/frontend/index.html\"));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// API endpoint to validate submissions\napp.post(\"/api/validate\", async (c) => {\n const { submissions } = await c.req.json<{ submissions: { round: number; word: string }[] }>();\n \n // Validate each submission against the valid_words table\n const results = await Promise.all(\n submissions.map(async (submission) => {\n const wordLower = submission.word.toLowerCase();\n \n try {\n const result = await sqlite.execute({\n sql: \"SELECT 1 FROM valid_words WHERE id = ? AND word = ?\",\n args: [submission.round, wordLower]\n });\n \n return {\n round: submission.round,\n word: submission.word,\n isValid: result.rows.length > 0\n };\n } catch (error) {\n // If table doesn't exist or other DB error, return invalid\n console.error(`Validation error for round ${submission.round}, word \"${submission.word}\":`, error);\n return {\n round: submission.round,\n word: submission.word,\n isValid: false\n };\n }\n })\n );\n \n return c.json({ results });\n});\n\n// ============================================\n// Leaderboard API Endpoints\n// ============================================\n\n// POST /api/submit-result - Submit a game result\napp.post(\"/api/submit-result\", async (c) => {\n try {\n const body = await c.req.json<{\n game_id: number;\n club_name: string;\n user_name: string;\n total_points: number;\n submissions: string[];\n submission_validity: boolean[];\n }>();\n\n // Validate required fields\n if (body.game_id === undefined || !body.club_name || !body.user_name || \n body.total_points === undefined || !body.submissions || !body.submission_validity) {\n return c.json({ error: \"Missing required fields\" }, 400);\n }\n\n // Validate game_id is an integer\n if (!Number.isInteger(body.game_id) || body.game_id < 0) {\n return c.json({ error: \"game_id must be a non-negative integer\" }, 400);\n }\n\n // Validate club_name format (A-Z only, max 25 chars)\n const clubNameUpper = body.club_name.toUpperCase();\n if (!/^[A-Z]+$/.test(clubNameUpper) || clubNameUpper.length > 25) {\n return c.json({ error: \"club_name must be A-Z only, max 25 characters\" }, 400);\n }\n\n // Validate user_name format (A-Z only, max 25 chars)\n const userNameUpper = body.user_name.toUpperCase();\n if (!/^[A-Z]+$/.test(userNameUpper) || userNameUpper.length > 25) {\n return c.json({ error: \"user_name must be A-Z only, max 25 characters\" }, 400);\n }\n\n // Generate IDs and timestamp\n const submission_id = crypto.randomUUID();\n const submitted_at = new Date().toISOString();\n\n // Store arrays as JSON strings\n const submissionsJson = JSON.stringify(body.submissions);\n const validityJson = JSON.stringify(body.submission_validity);\n\n await sqlite.execute({\n sql: `INSERT INTO game_results \n (submission_id, game_id, club_name, user_name, submitted_at, total_points, submissions, submission_validity)\n VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,\n args: [\n submission_id,\n body.game_id,\n clubNameUpper,\n userNameUpper,\n submitted_at,\n body.total_points,\n submissionsJson,\n validityJson\n ]\n });\n\n return c.json({ submission_id });\n\n } catch (error) {\n console.error(\"Error submitting result:\", error);\n return c.json({ error: \"Database error\" }, 500);\n }\n});\n\n// GET /api/leaderboard/:clubName - Fetch leaderboard for a club\napp.get(\"/api/leaderboard/:clubName\", async (c) => {\n try {\n const clubName = c.req.param(\"clubName\").toUpperCase();\n\n const result = await sqlite.execute({\n sql: `SELECT submission_id, game_id, club_name, user_name, submitted_at, \n total_points, submissions, submission_validity\n FROM game_results \n WHERE club_name = ?\n ORDER BY total_points DESC, user_name ASC`,\n args: [clubName]\n });\n\n // Transform rows to objects and parse JSON fields\n const entries = result.rows.map(row => ({\n submission_id: row[0],\n game_id: row[1],\n club_name: row[2],\n user_name: row[3],\n submitted_at: row[4],\n total_points: row[5],\n submissions: JSON.parse(row[6] as string),\n submission_validity: JSON.parse(row[7] as string)\n }));\n\n return c.json({\n club_name: clubName,\n entries\n });\n\n } catch (error) {\n console.error(\"Error fetching leaderboard:\", error);\n return c.json({ error: \"Database error\" }, 500);\n }\n});\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;\n","label",[139],"16882a70-f4a3-11f0-afad-42dde27851f2","README.md","019bcd4f-053b-76eb-a453-6fc01919d6db",82,["D",1768764174325],"# Your Biggest Word\n\nA word game where players must think of the biggest word that fits a given constraint (e.g., \"starts with HI\").\n\n## Setup\n\n### Database Initialization\n\nThe game requires a word database to validate submissions. Before playing, you need to initialize the database:\n\n1. **Run the initialization script** by visiting the script's endpoint in your browser:\n - Navigate to the `scripts/initDb.ts` file in Val Town\n - Click the endpoint URL to trigger the script\n - Or run it via curl: `curl https://your-val-endpoint/scripts/initDb.ts`\n\n2. **Verify initialization** - The script will return a JSON response showing:\n - Total number of words loaded\n - List of available rounds and their rules\n\n**Note:** This only needs to be done once, or when the word list is updated. The script is idempotent and will drop/recreate the table if run again.\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\n## API Endpoints\n\n### POST /api/validate\n\nValidates word submissions against the game's word database.\n\n**Request body:**\n```json\n{\n \"submissions\": [\n { \"round\": 1, \"word\": \"history\" },\n { \"round\": 1, \"word\": \"hippopotamus\" }\n ]\n}\n```\n\n**Response:**\n```json\n{\n \"results\": [\n { \"round\": 1, \"word\": \"history\", \"isValid\": true },\n { \"round\": 1, \"word\": \"hippopotamus\", \"isValid\": true }\n ]\n}\n```\n\n## File Structure\n\n```\nindex.ts # Main HTTP handler with /api/validate endpoint\nscripts/\n initDb.ts # Database initialization script (HTTP type)\nfrontend/\n index.html # Client-side HTML entry point\n index.tsx # Client-side React entry point\n components/\n App.tsx # Main React app component\nREADME.md # This file\n```\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.\n",[150],"50d64bb4-f492-11f0-82f7-42dde27851f2","towniePrompts","49b75f26-f492-11f0-890d-42dde27851f2",51,["D",1768756970700],"directory",[157],"027944ec-f4a3-11f0-afad-42dde27851f2","scripts","02794596-f4a3-11f0-afad-42dde27851f2",79,["D",1768764140659],[164],"f23f9cf2-f3d5-11f0-8692-42dde27851f2","frontend","019bcd4f-053b-76eb-a453-691afb751804",["D",1768676066564],[170],"pulls","branches","forks","envVars",{"_181":64,"_183":64},"connections",{"_181":64,"_182":64},"count","unfilledCount","emptyCount",{"_44":169,"_32":170,"_30":171,"_140":-5,"_42":43,"_41":74,"_142":60,"_39":390,"_13":64,"_34":161,"_36":-5,"_24":25,"_147":-5,"_211":391,"_27":392},{"_44":386,"_32":316,"_30":310,"_140":171,"_42":43,"_41":74,"_142":60,"_39":387,"_13":64,"_34":161,"_36":-5,"_24":25,"_147":-5,"_211":388,"_27":389},{"_44":378,"_32":379,"_30":380,"_140":310,"_42":43,"_41":381,"_142":60,"_39":382,"_13":64,"_34":35,"_36":383,"_24":25,"_147":-5,"_211":384,"_27":385},{"_44":369,"_32":370,"_30":371,"_140":310,"_42":43,"_41":372,"_142":25,"_39":373,"_13":374,"_34":35,"_36":375,"_24":25,"_147":-5,"_211":376,"_27":377},{"_44":361,"_32":362,"_30":363,"_140":310,"_42":43,"_41":364,"_142":60,"_39":365,"_13":231,"_34":35,"_36":366,"_24":25,"_147":-5,"_211":367,"_27":368},{"_44":353,"_32":354,"_30":355,"_140":310,"_42":43,"_41":356,"_142":60,"_39":357,"_13":64,"_34":35,"_36":358,"_24":25,"_147":-5,"_211":359,"_27":360},{"_44":345,"_32":346,"_30":347,"_140":310,"_42":43,"_41":348,"_142":60,"_39":349,"_13":74,"_34":35,"_36":350,"_24":25,"_147":-5,"_211":351,"_27":352},{"_44":337,"_32":338,"_30":339,"_140":310,"_42":43,"_41":340,"_142":25,"_39":341,"_13":74,"_34":35,"_36":342,"_24":25,"_147":-5,"_211":343,"_27":344},{"_44":333,"_32":33,"_30":31,"_140":310,"_42":43,"_41":14,"_142":25,"_39":334,"_13":144,"_34":35,"_36":38,"_24":25,"_147":-5,"_211":335,"_27":336},{"_44":325,"_32":326,"_30":327,"_140":310,"_42":43,"_41":328,"_142":60,"_39":329,"_13":231,"_34":35,"_36":330,"_24":25,"_147":-5,"_211":331,"_27":332},{"_44":317,"_32":318,"_30":319,"_140":310,"_42":43,"_41":320,"_142":60,"_39":321,"_13":74,"_34":35,"_36":322,"_24":25,"_147":-5,"_211":323,"_27":324},{"_44":307,"_32":308,"_30":309,"_140":310,"_42":43,"_41":311,"_142":25,"_39":312,"_13":231,"_34":35,"_36":313,"_24":25,"_147":-5,"_211":314,"_27":315},{"_44":300,"_32":301,"_30":302,"_140":171,"_42":43,"_41":74,"_142":60,"_39":303,"_13":64,"_34":20,"_36":304,"_24":25,"_147":-5,"_211":305,"_27":306},{"_44":292,"_32":293,"_30":294,"_140":171,"_42":43,"_41":295,"_142":25,"_39":296,"_13":74,"_34":20,"_36":297,"_24":25,"_147":-5,"_211":298,"_27":299},{"_44":285,"_32":286,"_30":287,"_140":171,"_42":43,"_41":74,"_142":60,"_39":288,"_13":64,"_34":35,"_36":289,"_24":25,"_147":-5,"_211":290,"_27":291},{"_44":277,"_32":278,"_30":279,"_140":171,"_42":43,"_41":280,"_142":60,"_39":281,"_13":144,"_34":35,"_36":282,"_24":25,"_147":-5,"_211":283,"_27":284},{"_44":268,"_32":269,"_30":270,"_140":171,"_42":43,"_41":271,"_142":25,"_39":272,"_13":273,"_34":20,"_36":274,"_24":25,"_147":-5,"_211":275,"_27":276},{"_44":163,"_32":164,"_30":165,"_140":-5,"_42":43,"_41":166,"_142":60,"_39":265,"_13":64,"_34":161,"_36":-5,"_24":25,"_147":-5,"_211":266,"_27":267},{"_44":256,"_32":257,"_30":258,"_140":165,"_42":43,"_41":259,"_142":25,"_39":260,"_13":261,"_34":35,"_36":262,"_24":25,"_147":-5,"_211":263,"_27":264},{"_44":247,"_32":248,"_30":249,"_140":165,"_42":43,"_41":250,"_142":60,"_39":251,"_13":252,"_34":145,"_36":253,"_24":25,"_147":-5,"_211":254,"_27":255},{"_44":156,"_32":157,"_30":158,"_140":-5,"_42":43,"_41":159,"_142":60,"_39":244,"_13":74,"_34":161,"_36":-5,"_24":25,"_147":-5,"_211":245,"_27":246},{"_44":235,"_32":236,"_30":237,"_140":158,"_42":43,"_41":238,"_142":60,"_39":239,"_13":240,"_34":20,"_36":241,"_24":25,"_147":-5,"_211":242,"_27":243},{"_44":226,"_32":227,"_30":228,"_140":158,"_42":43,"_41":229,"_142":25,"_39":230,"_13":231,"_34":20,"_36":232,"_24":25,"_147":-5,"_211":233,"_27":234},{"_44":217,"_32":218,"_30":219,"_140":158,"_42":43,"_41":220,"_142":25,"_39":221,"_13":222,"_34":20,"_36":223,"_24":25,"_147":-5,"_211":224,"_27":225},{"_44":149,"_32":150,"_30":151,"_140":-5,"_42":43,"_41":152,"_142":60,"_39":214,"_13":74,"_34":20,"_36":154,"_24":25,"_147":-5,"_211":215,"_27":216},{"_44":138,"_32":139,"_30":58,"_140":-5,"_42":43,"_41":141,"_142":25,"_39":210,"_13":144,"_34":145,"_36":146,"_24":25,"_147":46,"_211":212,"_27":213},["D",1768836653438],"children",[],[139],["D",1768764174325],[],[150],"bc39cd40-f54b-11f0-957c-42dde27851f2","todo.md","3b78d070-f492-11f0-ae80-42dde27851f2",167,["D",1768836607762],30,"- i have added an integer field game_id to the rounds.ts data. It is currently always set to 0.\n- Change the structure of the game_results table so that game_id is an int. change the db init code as well. you can drop the existing table as a one-off\n- eventually there will be more games than id = 0, so update frontend code and anywhere else to use the game_id from the rounds data.",[],[157,218],"3f95c0a6-f54a-11f0-a984-42dde27851f2","done-2-leaderboard.md","2f1e788a-f54a-11f0-8617-42dde27851f2",162,["D",1768835969156],3,"## club leaderboards and postGame\n\nDon't make code changes outside of this file. Help me edit this prompt so that Townie with Claude Opus 4.5 gives best results.\n\nI want to change the postgame workflow to support club leaderboards.\n\nAfter the user gets their scored results,\n- header\n- resultsTable\n- clubNameInput\n- userNameInput\n- submitToLeaderboardButton\n\n- club names should be a string of only 26 letters in the alphabet. no digits or other characters or spaces.(ie, can be input using the keyboard component)\n- club names should be no more than 25 characters long\n\nlikewise for players:\n\n- player names should be a string of 26 letters in the alphabet. no digits or other characters or spaces.(ie, can be input using the keyboard component)\n- player names should be no more than 25 characters long\n\n### collecting game data\n\neach submission gets a unique id, two players can submit with the same userName and clubName\n\nHere's what I was thinking for data needed to be collected to support the leaderboard view.\nAlthough submitted at is not currently needed, it should be included.\nif this is insufficient, or could be handled better, make those changes.\n\n- submission_id\n- game_id\n- club_name\n- user_name\n- submitted_at: timestamp when the user submitted to finish the final round, ending the game.\n- total_points: sum of length of every valid submission, as displayed on the postGame resultsTable.\n- submissions: array of strings containing the words the user played, in order\n- submission_validity : array of booleans of same length of submission, true for valid words and false for invalid,\n\n- create a file scripts/initDbResults.ts to initialize a game_results table where these are stored.\n\n### leadboardBoard view\n\n- add leaderboard as a gameState.\n- the user transitions to the leaderboard state after they press the submitToLeaderboardButton\n- the leaderboard view displays a scrollable table with the results of every submission of to that club.\n- the results should be sorted by default from most total points to least\n- reuse the roundIndicator, but with an extra unconnected dot for total points, to allow the user to change the sort order to sort by round.\n- if two users have the same total points, use the username as a tiebreaker for sort order.\n- if two users have the same number of points for a round, use the submitted word as the first tiebreaker, followed by user_name.\n\n### routing\n\n- The club name should be autopopulated (but editable) if the user navigated to the app via a path with \"/club/{clubname}/\" (or \"/club/{clubname}\" without the terminal \"/\")\n- if a user inputs the url with a path \"/club/{clubname}/leaderboard/\" into their browser, that should take them to club leaderboard\n- if there are no player submissions with that club name, indicate \"nobody in the club has played yet!\"\n- when the user navigates from the postGame to leaderboard gameState, update the path in the browser as well.\n\n---\n\n## REFINED PROMPTS FOR TOWNIE\n\nUse these 5 prompts in sequence to deliver a leaderboard feature. Each builds on the previous one. Here is prompt 1\n\n---\n\n### PROMPT 1: Database Schema\n\n**Goal:** Create the database table for storing game results.\n\n**File to create:** `scripts/initDbResults.ts`\n\n**Context:**\n- Use `import { sqlite } from \"https://esm.town/v/std/sqlite\"`\n- This is a Val Town project using SQLite\n\n**Schema requirements:**\n```sql\nCREATE TABLE IF NOT EXISTS game_results (\n submission_id TEXT PRIMARY KEY,\n game_id TEXT NOT NULL,\n club_name TEXT NOT NULL,\n user_name TEXT NOT NULL,\n submitted_at TEXT NOT NULL,\n total_points INTEGER NOT NULL,\n submissions TEXT NOT NULL,\n submission_validity TEXT NOT NULL\n)\n```\n\nAlso create an index on `club_name` for efficient leaderboard queries.\n\n**Notes:**\n- `submissions` and `submission_validity` are JSON-stringified arrays\n- `club_name` and `user_name` should be stored uppercase for case-insensitive matching\n- `submitted_at` is an ISO 8601 timestamp\n- `submission_id` is a UUID generated at insert time\n- `game_id` is a UUID generated per game session (passed from frontend)\n\n\n---\n\n### PROMPT 2: Backend API Endpoints\n\n**Goal:** Add API endpoints for submitting results and fetching leaderboards.\n\n**File to modify:** `index.ts`\n\n**Context:**\n- Backend uses Hono framework\n- SQLite is already imported: `import { sqlite } from \"https://esm.town/v/std/sqlite\"`\n- The `game_results` table exists (from Prompt 1)\n\n**Endpoint 1: POST /api/submit-result**\n\nRequest body:\n```typescript\n{\n game_id: string, // UUID from frontend\n club_name: string, // A-Z only, max 25 chars\n user_name: string, // A-Z only, max 25 chars\n total_points: number,\n submissions: string[],\n submission_validity: boolean[]\n}\n```\n\nBehavior:\n- Generate `submission_id` using `crypto.randomUUID()`\n- Generate `submitted_at` as `new Date().toISOString()`\n- Normalize `club_name` and `user_name` to uppercase\n- Store arrays as JSON strings\n- Return `{ submission_id }` on success\n- Return 400 for missing required fields, 500 for DB errors\n\n**Endpoint 2: GET /api/leaderboard/:clubName**\n\nBehavior:\n- Normalize `clubName` param to uppercase\n- Query all results for that club, ordered by `total_points DESC, user_name ASC`\n- Parse JSON fields back to arrays\n- Return `{ club_name, entries: [...] }`\n\n**Add routes for serving frontend at club URLs:**\n```typescript\napp.get(\"/club/:clubName\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/club/:clubName/\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/club/:clubName/leaderboard\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/club/:clubName/leaderboard/\", () => serveFile(\"/frontend/index.html\"));\n```\n\n---\n\n### PROMPT 3: PostGame UI - Club Submission Form\n\n**Goal:** Add club name and player name inputs to the postGame view.\n\n**File to modify:** `frontend/components/App.tsx`\n\n**Context:**\n- Current GameState type is `\"preGame\" | \"inGame\" | \"postGame\"`\n- PostGame view currently shows: Header, \"Good game.\" heading, ResultsTable, \"Play Again\" button\n- The `results` state contains: `{ round, word, isValid }[]`\n\n**Changes needed:**\n\n1. Add state variables:\n```typescript\nconst [clubName, setClubName] = useState(\"\");\nconst [playerName, setPlayerName] = useState(\"\");\n```\n\n2. Add URL parsing on mount (useEffect with empty deps):\n - Check `window.location.pathname`\n - If matches `/club/{name}` or `/club/{name}/`, extract name and set `clubName` (uppercase)\n - If matches `/club/{name}/leaderboard`, also set `gameState` to `\"leaderboard\"`\n\n3. Update GameState type to include `\"leaderboard\"`\n\n4. In the postGame view, after ResultsTable, add:\n - \"Submit to Club Leaderboard\" heading\n - Club name text input (validate: A-Z only, max 25 chars, auto-uppercase)\n - Player name text input (same validation)\n - \"Submit to Leaderboard\" button (disabled unless both inputs valid)\n\n5. Add `handleSubmitToLeaderboard` function:\n - Calculate `total_points` from results (sum of word lengths where `isValid` is true)\n - Generate `game_id` with `crypto.randomUUID()`\n - POST to `/api/submit-result`\n - On success: set `gameState` to `\"leaderboard\"` and update URL with `window.history.pushState`\n\n**Input validation:**\n- Only allow A-Z characters (use regex: `/[^A-Z]/g` to strip invalid chars)\n- Convert to uppercase automatically\n- Max 25 characters\n\n**Styling:** Add appropriate CSS classes. Match the existing app style.\n\n---\n\n### PROMPT 4: Leaderboard View\n\n**Goal:** Create the leaderboard component and integrate it into App.\n\n**Files to create/modify:**\n- Create: `frontend/components/Leaderboard.tsx`\n- Modify: `frontend/components/App.tsx`\n- Modify: `frontend/components/RoundIndicator.tsx`\n- Modify: `frontend/style.css`\n\n**Context:**\n- Current RoundIndicator shows connected dots for rounds (see `frontend/components/RoundIndicator.tsx`)\n- There are 5 rounds in the game (defined in `frontend/rounds.ts`)\n\n**Leaderboard.tsx requirements:**\n\nProps: `{ clubName: string }`\n\nState:\n- `entries`: array of leaderboard entries from API\n- `loading`: boolean\n- `sortByRound`: `number | null` (null means sort by total, 0-4 means sort by that round)\n\nOn mount, fetch `/api/leaderboard/{clubName}`\n\nDisplay:\n- Club name as heading\n- Modified RoundIndicator for sort selection (see below)\n- Scrollable table with columns: Rank, Player, Total Points, Words\n- Words should show each submission, styled as valid (normal) or invalid (strikethrough or muted)\n- If no entries: \"Nobody in the club has played yet!\"\n\nSorting logic:\n- Default (null): sort by `total_points` DESC, tiebreaker: `user_name` ASC\n- By round: sort by that round's points (word length if valid, 0 if invalid), tiebreaker: word alphabetically, then `user_name`\n\n**RoundIndicator.tsx modifications:**\n\nAdd optional props:\n```typescript\nshowTotal?: boolean; // If true, add one extra dot (disconnected) for \"Total\"\nonRoundClick?: (roundIndex: number) => void; // Make dots clickable\nselectedRound?: number; // Which dot is selected (for leaderboard sorting)\n```\n\nWhen `showTotal` is true:\n- Render `totalRounds + 1` dots\n- The last dot should be visually separated (small gap, no connecting line to it)\n- This extra dot represents \"Total Points\"\n\nWhen `onRoundClick` is provided:\n- Make dots clickable (add cursor:pointer, hover state)\n- Call `onRoundClick(index)` when clicked\n- Use `selectedRound` to highlight which dot is currently selected\n\n**App.tsx integration:**\n\nAdd leaderboard gameState handling:\n```typescript\nif (gameState === \"leaderboard\") {\n return (\n

\n \n \n

\n );\n}\n```\n\n**CSS additions needed:**\n- `.leaderboard` container\n- `.leaderboard-table` with scrollable container\n- Valid/invalid word styling in table\n- Clickable dot hover states for RoundIndicator\n\n---\n\n### PROMPT 5: Testing & Polish\n\n**Goal:** Test the full flow and fix any issues.\n\n**Test scenarios:**\n\n1. Play a full game → postGame shows results and submission form\n2. Enter club name and player name → Submit button enables\n3. Submit → navigates to leaderboard with your entry\n4. Direct URL `/club/TESTCLUB` → Club name pre-filled, can start game\n5. Direct URL `/club/TESTCLUB/leaderboard` → Shows leaderboard directly\n6. Empty leaderboard → Shows \"Nobody in the club has played yet!\"\n7. Multiple submissions → Sorted correctly by total points\n8. Click different round dots → Re-sorts by that round's scores\n\n**Potential issues to check:**\n- URL case sensitivity (should be case-insensitive)\n- Trailing slashes in URLs\n- Form validation edge cases (empty, special characters)\n- Loading states during API calls\n- Error handling for failed API requests\n- Mobile responsiveness of leaderboard table\n\n**Polish items:**\n- Smooth transitions between game states\n- Clear visual feedback when submitting\n- Consistent styling with rest of app",[],[157,227],"210222ce-f54a-11f0-b7c3-42dde27851f2","done-01.md","01a7c58e-f3d6-11f0-986d-42dde27851f2",158,["D",1768835917856],20,"I have forked the Val Town React Hono Starter, but made no other changes to the code outside of this `todo.md` file. help me create make this word game.\nLet's focus on building out the front-end for now.\n\n- Title: What's the Biggest Word You Can Think of?\n\nThe player is prompted with some constraints and must think of the biggest word they can that fulfills the constraints.\n\nexamples:\n\n- What's the biggest word you can think of that starts with P and ends with P?\n- What's the biggest word you can think of that contains the letters EVE in order (without anything in between)?\n\n\n\n\n## Frontend React Components:\n- Header\n- Prompt\n - title\n - constraint\n - examples\n- CurrentGuess\n - Cursor\n - lengthCounter\n- SubmitButton\n- trash button\n- keyboard\n - key\n \ngameState: [preGame, inGame, postGame]\n\ninGame:\ncurrentRound\ncurrentGuess\ncursorPosition\n\n## Prompt Component\n- the title always starts with \"What's the biggest word you can think of\"\n- the constraint\n\n## CurrentGuess Component\n- Displays the currentGuess state, which is updated through the keyboard component.\n- tapping/clicking on a letter in the current guess adjusts the cursor position\n- the cursor should be a thin vertical line that strobes at a standard speed for a text editor.\n- use a monospaced font\n- Left justify the currentGuess\n- Use a font size so that 15 letters fits within the width. when the currentGuess gets larger, dynamically resize the font so that the full word fits. Don't allow input after 30 letters (should be handled in keyboard keys below)\n- the lengthCounter component should display the number of letters in the CurrentGuess. It should float above the top right corner of the currentGuess, similar to a notification count on an app icon (but don't use red)\n\n## Submit Button\n- A button that submits the current guess\n- has an selectable property\n - if the currentWord is blank,\n - certain constraints (like \"ends with\" or \"uses every letter in a set\") will make the currentGuess unselectable if the constraint is not met\n - when the current guess is submitted, the currentRound is incremented and the next round's constraint is presented. the current guess is reset to blank.\n - If it is the final round, submitting changes gameState to postGame\n\n## Trash button\n\nThe trash button resets the currentGuess to blank without submitting. It should be a trash icon.\n\nSubmit and Trash buttons should appear on the same line, with trash being to the left of submit, and submit taking up 4x the width of the trash button.\n\n## keyboard component\n- should always be up when gameState=inGame\n- It should fill the bottom third of the screen on mobile\n- Follow QWERTY layout, but only have keys for\n - the 26 Letters in the alphabet\n - to the left of Z, there should be a key with a backspace icon. The back button removes the letter at the cursor.\n - to the right of M, there should be left and right arrow keys.\n- Keys should have an selectable property, unselectable keys should be indicated visually in css, but by default all keys are selectable.\n- pressing a key adds the letter to the currentGuess at the cursor position.\n\n### edits 1: mobile/desktop experience\n- Mobile experience should be prioritized.\n- Make the desktop version look a little more like the mobile version: rather than being full screen, it should be portrait-mode and centered in the screen.\n- On desktop (and on mobile with attached keyboard), keyboard input should still word.\n\n\n### edits 2:\n\nmake the following tweaks:\n1. Add a header at the top: \"a word game by Alex Wein\"\n1. there should be less white space. Increase the size of the other elements slightly so that there's not as much blank space.\n2. and distribute the blank space more evenly\n1. On mobile, when I have 14 letters in the currentGuess, the cursor moves to a new line. ensure currentGuess is always a single line and doesn't change height.\n\nmake the letterCount bigger, keep it's position visually anchored to the top right of the currentGuess (not the container)\n\nundo the last update and try again: I liked how the currentGuess looked (the size of the box should never change),\nI just want to move the counter down so it's not floating on its own. The counter should display 0 when the current guess is blank\n\nThe changes to the make the length counter bigger were successful and you should repeat them.\nMade the length counter bigger:\n\nIncreased font size from 0.9rem to 1rem\nIncreased padding from 3px 9px to 4px 10px\nIncreased min-width from 28px to 32px\nIncreased border-radius to 16px for a larger, rounder look\n\n\nthat's better but not quite there yet. I want the letterCount to partially overlap with the white div with currentGuess at the top right corner.\n\n---\n\n\n### messyQueries.ts\n\nThis is an export from an Observable notebook.\nI want you to read it, and return a fully formed duckDB query against the wordnik table\nthe query should be a `union all` of the results of the separate sql queries in the file\ntry to preserve the sql coding style in the query (from-first, lowercase, etc.)\n\nfields in result:\n- id: int where the first query is 1, the next is 2, etc.\n- rule: string: use text in the comment of each query above the where clause\n- word: string: word from wordnik\n- n_letters: int: length(word)\n\nupdate `todo.md` with the correct query but make no other changes to `todo.md`:\n\n```sql\nfrom (\n -- 1: ends with p\n from wordnik\n select 1 as id, 'ends with p' as rule, word, length(word) as n_letters\n where word like '%p'\n\n union all\n\n -- 2: starts and ends with p\n from wordnik\n select 2 as id, 'starts and ends with p' as rule, word, length(word) as n_letters\n where word like 'p%p'\n\n union all\n\n -- 3: has the letters dog in sequence\n from wordnik\n select 3 as id, 'has the letters dog in sequence' as rule, word, length(word) as n_letters\n where word like '%d%o%g%'\n\n union all\n\n -- 4: starts with the letters OVER\n from wordnik\n select 4 as id, 'starts with the letters OVER' as rule, word, length(word) as n_letters\n where word like 'over%'\n\n union all\n\n -- 5: ends with the letters OVER\n from wordnik\n select 5 as id, 'ends with the letters OVER' as rule, word, length(word) as n_letters\n where word like '%over'\n\n union all\n\n -- 6: all vowels are As\n from wordnik\n select 6 as id, 'all vowels are As' as rule, word, length(word) as n_letters\n where word similar to '[^eiouy]+'\n\n union all\n\n -- 7: only uses QWERTY\n from wordnik\n select 7 as id, 'only uses QWERTY' as rule, word, length(word) as n_letters\n where word similar to '[qwerty]+'\n\n union all\n\n -- 8: can be typed only using your left hand\n from wordnik\n select 8 as id, 'can be typed only using your left hand' as rule, word, length(word) as n_letters\n where word similar to '[qwertasdfgzxcvb]+'\n\n union all\n\n -- 9: has exactly two Cs\n from wordnik\n select 9 as id, 'has exactly two Cs' as rule, word, length(word) as n_letters\n where length(word) - length(replace(word, 'c', '')) = 2\n\n union all\n\n -- 10: has the letters ABC in any order\n from wordnik\n select 10 as id, 'has the letters ABC in any order' as rule, word, length(word) as n_letters\n where word like '%a%'\n and word like '%b%'\n and word like '%c%'\n\n union all\n\n -- 11: no s no t no e no a\n from wordnik\n select 11 as id, 'no s no t no e no a' as rule, word, length(word) as n_letters\n where word similar to '[^stea]+'\n)\nselect *\norder by id, n_letters desc\n```\n\n----\n\n### edit frontend/rounds.ts:\n\n- apply the structure of the first element to the others: highlight takes an array of letters, validation is an unquoted function, examples is a list of words.\n\t{\n\t\tround: 1,\n\t\ttitle: \"starts with HI\",\n\t\thighlight: [\"H\", \"I\"],\n\t\tvalidation: str => /^hi.*/.test(str.toLowerCase()),\n\t\tunselectable_keys: [],\n\t\texamples: [\"hit\", \"hint\", \"hill\",]\n\t},\n- make this array exportable.\n- import the rounds array in the App component to use for the rounds of the game.\n- leverage the other features of the rounds data:\n - the examples should be between the prompt and the currentGuess\n - in the currentGuess, on the keyboard, and in the displayex examples, the letters in round.highlight should be visually distinct from the the other letters.\n - the submit button should only be clickable if validation returns true.\n - make the unselectable keys unselectable. With keyboard input, typing an unselectable letter doesn't do anything\n\n\n### game Over\n\nHelp me begin to build out the postGame view:\n\n- during the game, record the list of words the player submitted.\n- upon submitting the final guess, send that data to the backend.\n - we will validate that submissions are actual words on the backend. Skip the actual validation for now. instead use a stub that says every submission has a 75% change of being valid. Do this on the backend.\n - the postGame state should present a table of the results, that lists each word.\n - if it the word is valid, list the number of letters in it.\n - visually indicate valid and invalid words using versions of red and green that are discernible for standard colorblindness.\n - the last line of the table should a \"total\" that sums up the letters in all valid words.\n\n\n ### validation strategy\n\nhelp me devise a good strategy for validation. Currently, I have a list of valid words in a table format.\n\n- create a database initialization script that loads the csv into sql.\n- update the project readme with instructions to run the this initialization (so the project is easy to remix)\n- update the validation logic build earlier in the conversation.\n\n- below the first few lines of the csv.\n- A version currently lives at https://gist.githubusercontent.com/a-lexwein/e3e6a0817c71d57c063c238f519f8b45/raw/9a06a1e2f5e4c479bb653ff39dbb65f77cd60cff/thinkOfWords.csv\n\n```\nid,rule,word,n_letters\n1,starts with HI,histocompatibilities,20\n1,starts with HI,histopathologically,19\n1,starts with HI,historiographically,19\n1,starts with HI,histocompatibility,18\n\n ```\n\n don't suggest code changes yet, instead, build out a strategy in markdown that I can freshly prompt townie with.\n\n Put that prompt immediately below here in this file todo.md:\n\n---\n\n## Townie Prompt: Implement Word Validation with SQLite\n\n### Context\n\nThis is a word game where players must think of the biggest word that fits a given constraint (e.g., \"starts with HI\"). We need to validate that submitted words are real English words AND that they satisfy the round's constraint.\n\nA CSV file containing valid words for each round is available at:\nhttps://gist.githubusercontent.com/a-lexwein/e3e6a0817c71d57c063c238f519f8b45/raw/9a06a1e2f5e4c479bb653ff39dbb65f77cd60cff/thinkOfWords.csv\n\nThe CSV format is:\n```\nid,rule,word,n_letters\n1,starts with HI,histocompatibilities,20\n1,starts with HI,histopathologically,19\n...\n```\n\nWhere `id` corresponds to the round number and `rule` describes the constraint.\n\n### Tasks\n\n#### 1. Create Database Initialization Script\n\nCreate a new file `scripts/initDb.ts` that:\n\n- Fetches the CSV from the gist URL above\n- Parses the CSV data\n- Creates a SQLite table called `valid_words` with columns:\n - `id` (INTEGER) - the round number\n - `rule` (TEXT) - the constraint description \n - `word` (TEXT) - the valid word (lowercase)\n - `n_letters` (INTEGER) - word length\n- Creates an index on `(id, word)` for fast lookups\n- Inserts all rows from the CSV\n- This script should be idempotent (safe to run multiple times - drop and recreate table)\n\nUse Val Town's SQLite: `import { sqlite } from \"https://esm.town/v/std/sqlite\";`\n\n#### 2. Update README.md\n\nAdd a \"Setup\" or \"Database Initialization\" section that explains:\n- The game requires a word database to validate submissions\n- How to run the initialization script (visit the script's endpoint or run it manually)\n- Note that this only needs to be done once, or when the word list is updated\n\n#### 3. Update Backend Validation Logic\n\nModify the `/api/validate` endpoint in `index.ts` to:\n\n- Accept submissions in format `{ submissions: [{ round: number, word: string }] }`\n- For each submission, query the `valid_words` table to check if the word exists for that round\n- Query: `SELECT 1 FROM valid_words WHERE id = ? AND word = ?` (lowercase the word before querying)\n- Return `{ results: [{ round, word, isValid: boolean }] }`\n\n#### 4. File Structure After Changes\n\n```\nindex.ts # Main HTTP handler with /api/validate endpoint\nscripts/\n initDb.ts # Database initialization script (HTTP type so it can be triggered)\nREADME.md # Updated with setup instructions\nfrontend/ # (no changes needed)\n```\n\n### Important Notes\n\n- The `valid_words` table pre-validates words against round constraints, so we only need to check if the (round, word) pair exists\n- Words should be compared case-insensitively (store and query in lowercase)\n- The init script should be an HTTP val so it can be easily triggered via browser or curl\n- Keep the init script simple - just fetch, parse, and insert\n\n\n----\n\n\n- for the inGame view, add a component that indicates how many rounds there are and what the current round is.\n- it should take up a single like and say \"Round 1/5\"\n- After the text, use an minimal svg chart that resembles a subway map. each round is a circle, and as the game progresses, the current round is visually indicated\n(through color and an additional outline)\n\n### styling cleanup\n\n- pick a complete coherent color pallet: use a dark background and light text. maintain color-blind friendly coloring for valid and invalid words, but you can pick new colors.\n- the size of the text in the prompt-title should be smaller than the prompt-constraint.\n- ensure that the height of the in-game element never changes and fully fills the screen on mobile.\n - the longest prompt size in the current dataset is under 60 characters. Ensure that 75 characters fits cleanly.\n - include logic to responsively size the text when greater than 70 characters.\n\n\n- use the same header component across all states. start with this, but make it its own component so we can tweak later\n

Think A Little Longer. a word game by Alex Wein

\n\n- refactor if needed and add comments and documentation so that is is easy to adjust the color palette\n- change it back to something with dark text on a light background\n \n- on postGame view, the results table would be the full width of the screen/gameContainer.\n- the gameContainer shouldn't grow in width, once the text gets too long, resize the text\n\n----",[],[157,236],["D",1768756970700],[205,206,207],[157],"797b2606-f4ca-11f0-a785-42dde27851f2","initDbSolutions.ts","0b44e522-f4a3-11f0-afad-42dde27851f2",116,["D",1768781090709],2,"// import { sqlite } from \"https://esm.town/v/std/sqlite\";\n\n// const CSV_URL = \"https://gist.githubusercontent.com/a-lexwein/e3e6a0817c71d57c063c238f519f8b45/raw/9a06a1e2f5e4c479bb653ff39dbb65f77cd60cff/thinkOfWords.csv\";\n\n// interface WordEntry {\n// id: number;\n// rule: string;\n// word: string;\n// n_letters: number;\n// }\n\n// function parseCSV(csvText: string): WordEntry[] {\n// const lines = csvText.trim().split(\"\\n\");\n// // Skip header row\n// const dataLines = lines.slice(1);\n \n// return dataLines.map(line => {\n// // Handle CSV parsing - rule field may contain commas so we need to be careful\n// // Format: id,rule,word,n_letters\n// // Example: 1,starts with HI,histocompatibilities,20\n// const firstComma = line.indexOf(\",\");\n// const lastComma = line.lastIndexOf(\",\");\n// const secondLastComma = line.lastIndexOf(\",\", lastComma - 1);\n \n// const id = parseInt(line.substring(0, firstComma), 10);\n// const rule = line.substring(firstComma + 1, secondLastComma);\n// const word = line.substring(secondLastComma + 1, lastComma).toLowerCase();\n// const n_letters = parseInt(line.substring(lastComma + 1), 10);\n \n// return { id, rule, word, n_letters };\n// });\n// }\n\n// export default async function(req: Request): Promise {\n// try {\n// console.log(\"Fetching CSV data...\");\n// const response = await fetch(CSV_URL);\n// if (!response.ok) {\n// throw new Error(`Failed to fetch CSV: ${response.status} ${response.statusText}`);\n// }\n// const csvText = await response.text();\n \n// console.log(\"Parsing CSV...\");\n// const entries = parseCSV(csvText);\n// console.log(`Parsed ${entries.length} word entries`);\n \n// // Drop existing table and recreate (idempotent)\n// console.log(\"Dropping existing table if exists...\");\n// await sqlite.execute(\"DROP TABLE IF EXISTS valid_words\");\n \n// console.log(\"Creating valid_words table...\");\n// await sqlite.execute(`\n// CREATE TABLE valid_words (\n// id INTEGER NOT NULL,\n// rule TEXT NOT NULL,\n// word TEXT NOT NULL,\n// n_letters INTEGER NOT NULL\n// )\n// `);\n \n// console.log(\"Creating index on (id, word)...\");\n// await sqlite.execute(`\n// CREATE INDEX idx_valid_words_id_word ON valid_words (id, word)\n// `);\n \n// // Insert data in batches for better performance\n// console.log(\"Inserting word data...\");\n// const BATCH_SIZE = 100;\n// let inserted = 0;\n \n// for (let i = 0; i < entries.length; i += BATCH_SIZE) {\n// const batch = entries.slice(i, i + BATCH_SIZE);\n// const statements = batch.map(entry => ({\n// sql: \"INSERT INTO valid_words (id, rule, word, n_letters) VALUES (?, ?, ?, ?)\",\n// args: [entry.id, entry.rule, entry.word, entry.n_letters]\n// }));\n \n// await sqlite.batch(statements);\n// inserted += batch.length;\n \n// if (inserted % 1000 === 0) {\n// console.log(`Inserted ${inserted} / ${entries.length} rows...`);\n// }\n// }\n \n// console.log(`Successfully inserted ${inserted} rows`);\n \n// // Verify the data\n// const countResult = await sqlite.execute(\"SELECT COUNT(*) as count FROM valid_words\");\n// const count = countResult.rows[0][0];\n \n// const roundsResult = await sqlite.execute(\"SELECT DISTINCT id, rule FROM valid_words ORDER BY id\");\n// const rounds = roundsResult.rows.map(row => ({ id: row[0], rule: row[1] }));\n \n// return new Response(JSON.stringify({\n// success: true,\n// message: `Database initialized successfully`,\n// totalWords: count,\n// rounds: rounds\n// }, null, 2), {\n// status: 200,\n// headers: { \"Content-Type\": \"application/json\" }\n// });\n \n// } catch (error) {\n// console.error(\"Error initializing database:\", error);\n// return new Response(JSON.stringify({\n// success: false,\n// error: error instanceof Error ? error.message : String(error)\n// }, null, 2), {\n// status: 500,\n// headers: { \"Content-Type\": \"application/json\" }\n// });\n// }\n// }",[],[164,248],"cda5f8ec-f54b-11f0-858b-42dde27851f2","initDbResults.ts","0109041e-f4ce-11f0-b356-42dde27851f2",168,["D",1768836636952],7,"import { sqlite } from \"https://esm.town/v/std/sqlite\";\n\n/**\n * Initialize the game_results table for storing leaderboard data.\n * \n * Schema:\n * - submission_id: UUID primary key (generated at insert time)\n * - game_id: INTEGER for the game (from rounds.ts game_id field)\n * - club_name: Club identifier (stored uppercase for case-insensitive matching)\n * - user_name: Player name (stored uppercase for case-insensitive matching)\n * - submitted_at: ISO 8601 timestamp\n * - total_points: Sum of points for all submissions\n * - submissions: JSON-stringified array of submitted words\n * - submission_validity: JSON-stringified array of validity flags\n */\n\n// ============================================\n// STEP 1: Drop existing table (one-off migration)\n// ============================================\nasync function step1_dropTable() {\n console.log(\"STEP 1: Dropping existing game_results table...\");\n await sqlite.execute(`DROP TABLE IF EXISTS game_results`);\n console.log(\"STEP 1: Done - table dropped\");\n}\n\n// ============================================\n// STEP 2: Create the main table with INTEGER game_id\n// ============================================\nasync function step2_createTable() {\n console.log(\"STEP 2: Creating game_results table with INTEGER game_id...\");\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS game_results (\n submission_id TEXT PRIMARY KEY,\n game_id INTEGER NOT NULL,\n club_name TEXT NOT NULL,\n user_name TEXT NOT NULL,\n submitted_at TEXT NOT NULL,\n total_points INTEGER NOT NULL,\n submissions TEXT NOT NULL,\n submission_validity TEXT NOT NULL\n )\n `);\n console.log(\"STEP 2: Done - table created\");\n}\n\n// ============================================\n// STEP 3: Create index on club_name\n// ============================================\nasync function step3_createClubNameIndex() {\n console.log(\"STEP 3: Creating index on club_name...\");\n await sqlite.execute(`\n CREATE INDEX IF NOT EXISTS idx_game_results_club_name \n ON game_results (club_name)\n `);\n console.log(\"STEP 3: Done - club_name index created\");\n}\n\n// ============================================\n// STEP 4: Create index on game_id\n// ============================================\nasync function step4_createGameIdIndex() {\n console.log(\"STEP 4: Creating index on game_id...\");\n await sqlite.execute(`\n CREATE INDEX IF NOT EXISTS idx_game_results_game_id \n ON game_results (game_id)\n `);\n console.log(\"STEP 4: Done - game_id index created\");\n}\n\n// ============================================\n// STEP 5: Verify table exists\n// ============================================\nasync function step5_verifyTable() {\n console.log(\"STEP 5: Verifying table exists...\");\n const tableCheck = await sqlite.execute(`\n SELECT name FROM sqlite_master \n WHERE type='table' AND name='game_results'\n `);\n \n if (tableCheck.rows.length === 0) {\n throw new Error(\"Table creation failed - table not found after CREATE\");\n }\n console.log(\"STEP 5: Done - table verified\");\n}\n\n// ============================================\n// STEP 6: Get row count\n// ============================================\nasync function step6_getRowCount() {\n console.log(\"STEP 6: Getting row count...\");\n const countResult = await sqlite.execute(\"SELECT COUNT(*) as count FROM game_results\");\n const rowCount = countResult.rows[0][0];\n console.log(`STEP 6: Done - game_results table has ${rowCount} rows`);\n return rowCount;\n}\n\n// ============================================\n// Wrapper function (for importing elsewhere)\n// ============================================\nexport async function initGameResultsTable(): Promise<{ success: boolean; message: string }> {\n try {\n await step1_dropTable();\n await step2_createTable();\n await step3_createClubNameIndex();\n await step4_createGameIdIndex();\n await step5_verifyTable();\n const rowCount = await step6_getRowCount();\n \n return {\n success: true,\n message: `game_results table initialized successfully with INTEGER game_id. Current row count: ${rowCount}`\n };\n \n } catch (error) {\n console.error(\"Error initializing game_results table:\", error);\n return {\n success: false,\n message: error instanceof Error ? error.message : String(error)\n };\n }\n}\n\n// ============================================\n// RUN INDIVIDUAL STEPS HERE\n// Comment/uncomment as needed to debug\n// ============================================\n\n// await step1_dropTable();\n// await step2_createTable();\n// await step3_createClubNameIndex();\n// await step4_createGameIdIndex();\n// await step5_verifyTable();\n// await step6_getRowCount();\n\n// Or run all steps:\nconst result = await initGameResultsTable();\nconsole.log(result);\n",[],[164,257],["D",1768764140659],[202,203],[164],"71024c7e-f548-11f0-9825-42dde27851f2","style.css","019bcd4f-053b-76eb-a453-672ffb6e4140",155,["D",1768835193081],22,"/*\n * =============================================================================\n * COLOR PALETTE - Light Theme\n * =============================================================================\n * \n * To customize the color scheme, modify the CSS variables below.\n * The naming convention follows a semantic approach:\n * \n * BACKGROUNDS:\n * --bg-primary : Main app background (outermost)\n * --bg-secondary : Game container background\n * --bg-tertiary : Header and accent areas\n * --bg-card : Cards, buttons, elevated surfaces\n * --bg-input : Input fields, text areas\n * \n * TEXT:\n * --text-primary : Main body text, headings\n * --text-secondary: Subheadings, labels, less emphasis\n * --text-muted : Disabled text, placeholders\n * \n * ACCENT:\n * --accent-primary: Primary buttons, links, active states\n * --accent-hover : Hover state for accent elements\n * \n * FEEDBACK (color-blind friendly):\n * --color-valid : Valid/success states (teal - distinguishable from red/green)\n * --color-valid-bg : Background tint for valid states\n * --color-invalid : Invalid/error states (orange - distinguishable from red/green)\n * --color-invalid-bg: Background tint for invalid states\n * \n * HIGHLIGHT:\n * --color-highlight : Highlighted letters and keys\n * --color-highlight-bg: Background for highlighted elements\n * \n * KEYBOARD:\n * --keyboard-bg: Keyboard container background\n * --key-bg : Default key background\n * --key-active : Key pressed/active state\n * \n * OTHER:\n * --border-color: Borders and dividers\n * --shadow-color: Box shadows\n * \n * =============================================================================\n */\n\n:root {\n /* Backgrounds - Light theme */\n --bg-primary: #e8e8e8; /* Outer wrapper */\n --bg-secondary: #f5f5f5; /* Game container */\n --bg-tertiary: #fafafa; /* Header */\n --bg-card: #e0e0e0; /* Cards, elevated surfaces */\n --bg-input: #ffffff; /* Input fields */\n \n /* Text - Dark on light */\n --text-primary: #1a1a1a; /* Main text */\n --text-secondary: #555555; /* Secondary text */\n --text-muted: #999999; /* Muted/disabled text */\n \n /* Accent - Blue */\n --accent-primary: #4a90e2; /* Primary actions */\n --accent-hover: #357ae8; /* Hover state */\n \n /* \n * Feedback Colors - Color-blind friendly\n * Using teal/orange instead of green/red for better accessibility\n * These colors are distinguishable by people with red-green color blindness\n */\n --color-valid: #0d9488; /* Teal for valid/success */\n --color-valid-bg: #e8f5f3; /* Light teal background */\n --color-invalid: #ea580c; /* Orange for invalid/error */\n --color-invalid-bg: #fef3e8; /* Light orange background */\n \n /* Highlight - Amber/Gold for keyboard hints */\n --color-highlight: #d97706; /* Amber for highlights */\n --color-highlight-bg: #fef3c7; /* Light amber background */\n \n /* Keyboard */\n --keyboard-bg: #d1d5db; /* Keyboard container */\n --key-bg: #ffffff; /* Key background */\n --key-active: #e5e5e5; /* Key pressed state */\n --key-special-bg: #adb5bd; /* Special keys (backspace, etc.) */\n \n /* Borders and shadows */\n --border-color: #e0e0e0; /* Borders */\n --shadow-color: rgba(0, 0, 0, 0.2); /* Shadows */\n}\n\n\n/*\n * =============================================================================\n * BASE STYLES\n * =============================================================================\n */\n\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nhtml, body {\n height: 100%;\n}\n\nbody {\n font-family: -apple-system, Arial, sans-serif;\n color: var(--text-primary);\n background: var(--bg-primary);\n}\n\nmain {\n height: 100%;\n}\n\n#root {\n height: 100%;\n}\n\n\n/*\n * =============================================================================\n * LAYOUT - App Wrapper & Game Container\n * =============================================================================\n */\n\n/* Centers the game on desktop, fills screen on mobile */\n.app-wrapper {\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 0;\n background: var(--bg-primary);\n}\n\n/* Portrait phone shape container */\n.game-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n max-width: 430px;\n height: 100%;\n max-height: 932px;\n background: var(--bg-secondary);\n overflow: hidden;\n}\n\n.game-container h1 {\n font-size: 2rem;\n text-align: center;\n margin-bottom: 10px;\n color: var(--text-primary);\n}\n\n.game-container p {\n text-align: center;\n margin-bottom: 10px;\n color: var(--text-secondary);\n}\n\n\n/*\n * =============================================================================\n * HEADER\n * =============================================================================\n */\n\n.game-header {\n width: 100%;\n text-align: center;\n padding: 12px 20px;\n font-size: 0.85rem;\n color: var(--text-secondary);\n border-bottom: 1px solid var(--border-color);\n background: var(--bg-tertiary);\n flex-shrink: 0;\n}\n\n\n/*\n * =============================================================================\n * CONTENT AREA\n * =============================================================================\n */\n\n/* Main content area - everything except keyboard */\n.content-area {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 20px;\n width: 100%;\n overflow-y: auto;\n gap: 10px;\n}\n\n/* In-game: fixed layout, no scrolling, evenly distributed */\n.game-container.in-game .content-area {\n justify-content: space-between;\n padding-top: 15px;\n padding-bottom: 10px;\n overflow: hidden;\n}\n\n/* Post-game: scrollable results */\n.content-area.post-game {\n justify-content: flex-start;\n padding-top: 30px;\n gap: 20px;\n overflow-y: auto;\n}\n\n\n/*\n * =============================================================================\n * BUTTONS\n * =============================================================================\n */\n\n/* Primary action button (Start Game, Play Again) */\n.start-button {\n background-color: var(--accent-primary);\n color: white;\n border: none;\n padding: 18px 40px;\n border-radius: 8px;\n cursor: pointer;\n font-size: 1.3rem;\n font-weight: bold;\n}\n\n.start-button:hover {\n background-color: var(--accent-hover);\n}\n\n/* Action buttons row (trash + submit) */\n.action-buttons {\n display: flex;\n gap: 10px;\n width: 100%;\n max-width: 500px;\n padding: 0 20px 10px 20px;\n flex-shrink: 0;\n}\n\n.trash-button {\n flex: 1;\n background: var(--bg-card);\n border: none;\n border-radius: 8px;\n padding: 16px;\n font-size: 1.6rem;\n cursor: pointer;\n color: var(--text-secondary);\n}\n\n.trash-button:hover {\n background: var(--key-active);\n}\n\n.submit-button {\n flex: 4;\n background-color: var(--accent-primary);\n color: white;\n border: none;\n padding: 16px 24px;\n border-radius: 8px;\n cursor: pointer;\n font-size: 1.2rem;\n font-weight: bold;\n}\n\n.submit-button:hover:not(.disabled) {\n background-color: var(--accent-hover);\n}\n\n.submit-button.disabled {\n background-color: var(--bg-card);\n color: var(--text-muted);\n cursor: not-allowed;\n}\n\n\n/*\n * =============================================================================\n * PROMPT\n * Fixed height to prevent layout shifts during gameplay\n * =============================================================================\n */\n\n.prompt {\n text-align: center;\n padding: 10px 20px;\n flex-shrink: 0;\n height: 110px; /* Fixed height for layout stability */\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n\n/* \"What's the biggest word...\" - smaller, secondary emphasis */\n.prompt-title {\n font-size: 1.1rem;\n font-weight: 500;\n line-height: 1.4;\n color: var(--text-secondary);\n margin-bottom: 4px;\n}\n\n/* \"that [constraint]?\" - larger, primary emphasis */\n.prompt-constraint {\n font-size: 1.6rem;\n font-weight: 600;\n line-height: 1.3;\n color: var(--text-primary);\n}\n\n/* Responsive sizing for long prompts (>70 characters) */\n.prompt-constraint.prompt-long {\n font-size: 1.25rem;\n line-height: 1.25;\n}\n\n\n/*\n * =============================================================================\n * CURRENT GUESS INPUT\n * =============================================================================\n */\n\n.current-guess-container {\n position: relative;\n width: 100%;\n max-width: 500px;\n padding: 10px 20px;\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 80px;\n max-height: 120px;\n}\n\n/* Letter count badge */\n.length-counter {\n position: absolute;\n top: calc(50% - 1.5rem - 12px);\n right: 8px;\n background: var(--accent-primary);\n color: white;\n border-radius: 16px;\n padding: 4px 10px;\n font-size: 1rem;\n font-weight: bold;\n min-width: 32px;\n text-align: center;\n z-index: 10;\n}\n\n/* Text input display */\n.current-guess {\n font-family: 'Courier New', Courier, monospace;\n font-size: 2rem;\n min-height: 3rem;\n max-height: 3rem;\n padding: 12px 15px;\n background: var(--bg-input);\n border: 2px solid var(--border-color);\n border-radius: 8px;\n display: flex;\n align-items: center;\n white-space: nowrap;\n overflow: hidden;\n width: 100%;\n color: var(--text-primary);\n}\n\n.letter, .letter-placeholder {\n position: relative;\n cursor: text;\n flex-shrink: 0;\n}\n\n/* Blinking cursor */\n.cursor-before::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 2px;\n background: var(--text-primary);\n animation: blink 1s step-end infinite;\n}\n\n@keyframes blink {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0; }\n}\n\n/* Highlighted letters in guess */\n.letter-highlighted {\n color: var(--color-highlight);\n font-weight: bold;\n}\n\n\n/*\n * =============================================================================\n * KEYBOARD\n * =============================================================================\n */\n\n.keyboard {\n width: 100%;\n background: var(--keyboard-bg);\n padding: 10px 6px;\n padding-bottom: max(10px, env(safe-area-inset-bottom));\n flex-shrink: 0;\n}\n\n.keyboard-row {\n display: flex;\n justify-content: center;\n gap: 5px;\n margin-bottom: 7px;\n}\n\n.keyboard-row:last-child {\n margin-bottom: 0;\n}\n\n/* Standard key */\n.key {\n background: var(--key-bg);\n border: none;\n border-radius: 6px;\n padding: 16px 11px;\n min-width: 34px;\n font-size: 1.2rem;\n font-weight: 600;\n cursor: pointer;\n box-shadow: 0 1px 2px var(--shadow-color);\n flex: 1;\n max-width: 42px;\n color: var(--text-primary);\n}\n\n.key:active {\n background: var(--key-active);\n transform: translateY(1px);\n}\n\n/* Special keys (backspace, arrows) */\n.key-special {\n min-width: 46px;\n max-width: 52px;\n background: var(--key-special-bg);\n color: var(--text-primary);\n}\n\n.key-special:active {\n background: var(--key-active);\n}\n\n/* Highlighted keys (hint letters) */\n.key-highlighted {\n background: var(--color-highlight-bg);\n border: 2px solid var(--color-highlight);\n color: var(--color-highlight);\n}\n\n.key-highlighted:active {\n background: #fde68a; /* Slightly darker amber on press */\n}\n\n/* Disabled/unselectable keys */\n.key-unselectable {\n background: var(--bg-card);\n color: var(--text-muted);\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.key-unselectable:active {\n background: var(--bg-card);\n transform: none;\n}\n\n\n/*\n * =============================================================================\n * EXAMPLES\n * =============================================================================\n */\n\n.examples {\n text-align: center;\n font-size: 1.1rem;\n color: var(--text-secondary);\n padding: 5px 20px;\n flex-shrink: 0;\n}\n\n.examples-label {\n font-style: italic;\n margin-right: 6px;\n}\n\n.example-word {\n font-family: 'Courier New', Courier, monospace;\n font-weight: 500;\n}\n\n\n/*\n * =============================================================================\n * ROUND INDICATOR\n * =============================================================================\n */\n\n.round-indicator {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 8px 16px;\n flex-shrink: 0;\n}\n\n.round-text {\n font-size: 1rem;\n font-weight: 600;\n color: var(--text-secondary);\n white-space: nowrap;\n}\n\n.round-subway-map {\n flex-shrink: 0;\n}\n\n\n/*\n * =============================================================================\n * RESULTS TABLE\n * Full width within game container, with responsive text sizing for long words\n * =============================================================================\n */\n\n.results-table-container {\n width: 100%;\n padding: 0 15px;\n}\n\n.results-table {\n width: 100%;\n border-collapse: collapse;\n font-size: 1.1rem;\n table-layout: fixed; /* Fixed layout for consistent column widths */\n}\n\n.results-table th,\n.results-table td {\n padding: 12px 10px;\n text-align: left;\n border-bottom: 1px solid var(--border-color);\n}\n\n/* Column widths: Round (narrow), Word (flexible), Letters (narrow) */\n.results-table th:first-child,\n.results-table td:first-child {\n width: 60px;\n}\n\n.results-table th:last-child,\n.results-table td:last-child {\n width: 70px;\n}\n\n.results-table th {\n font-weight: 600;\n color: var(--text-secondary);\n font-size: 0.9rem;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.results-table .result-word {\n font-family: 'Courier New', Courier, monospace;\n font-weight: 500;\n text-transform: uppercase;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* Responsive font sizing for long words */\n.results-table .result-word.word-long {\n font-size: 0.9rem;\n}\n\n.results-table .result-word.word-very-long {\n font-size: 0.75rem;\n}\n\n.results-table .result-letters {\n text-align: center;\n font-weight: bold;\n}\n\n/* Valid rows - teal (color-blind friendly) */\n.results-table .result-valid {\n background-color: var(--color-valid-bg);\n}\n\n.results-table .result-valid .result-letters {\n color: var(--color-valid);\n}\n\n/* Invalid rows - orange (color-blind friendly) */\n.results-table .result-invalid {\n background-color: var(--color-invalid-bg);\n}\n\n.results-table .result-invalid .result-word {\n text-decoration: line-through;\n color: var(--text-muted);\n}\n\n.results-table .result-invalid .result-letters {\n color: var(--color-invalid);\n}\n\n/* Total row */\n.results-table .result-total {\n background-color: var(--bg-tertiary);\n font-weight: bold;\n}\n\n.results-table .result-total td {\n border-bottom: none;\n border-top: 2px solid var(--text-secondary);\n padding-top: 14px;\n}\n\n.results-table .result-total .result-letters {\n font-size: 1.3rem;\n color: var(--text-primary);\n}\n\n\n/*\n * =============================================================================\n * RESPONSIVE - Mobile (≤480px)\n * =============================================================================\n */\n\n@media (max-width: 480px) {\n .app-wrapper {\n background: var(--bg-secondary);\n }\n \n .game-container {\n max-height: none;\n border-radius: 0;\n }\n\n .prompt {\n height: 100px;\n padding: 8px 16px;\n }\n\n .prompt-title {\n font-size: 0.95rem;\n }\n \n .prompt-constraint {\n font-size: 1.3rem;\n }\n \n .prompt-constraint.prompt-long {\n font-size: 1.1rem;\n line-height: 1.2;\n }\n \n .key {\n padding: 14px 7px;\n min-width: 30px;\n font-size: 1.05rem;\n }\n \n .key-special {\n min-width: 40px;\n }\n\n .round-indicator {\n gap: 10px;\n padding: 6px 12px;\n }\n \n .round-text {\n font-size: 0.9rem;\n }\n}\n\n\n/*\n * =============================================================================\n * RESPONSIVE - Desktop (≥481px)\n * Adds phone-like frame around game container\n * =============================================================================\n */\n\n@media (min-width: 481px) {\n .app-wrapper {\n padding: 20px;\n }\n\n .game-container {\n border-radius: 24px;\n box-shadow: 0 8px 32px var(--shadow-color);\n border: 8px solid #222;\n }\n}\n\n/* Taller screens: limit height for phone-like appearance */\n@media (min-height: 800px) and (min-width: 481px) {\n .game-container {\n height: min(100%, 800px);\n }\n}\n\n\n/*\n * =============================================================================\n * LEADERBOARD FORM\n * Styles for club submission form in postGame view\n * =============================================================================\n */\n\n.leaderboard-form {\n width: 100%;\n max-width: 350px;\n padding: 20px;\n background: var(--bg-tertiary);\n border-radius: 12px;\n border: 1px solid var(--border-color);\n}\n\n.leaderboard-form-title {\n font-size: 1.1rem;\n font-weight: 600;\n color: var(--text-primary);\n text-align: center;\n margin-bottom: 16px;\n}\n\n.leaderboard-input-group {\n margin-bottom: 14px;\n}\n\n.leaderboard-label {\n display: block;\n font-size: 0.85rem;\n font-weight: 600;\n color: var(--text-secondary);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 6px;\n}\n\n.leaderboard-input {\n width: 100%;\n padding: 12px 14px;\n font-size: 1rem;\n font-family: 'Courier New', Courier, monospace;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 1px;\n background: var(--bg-input);\n border: 2px solid var(--border-color);\n border-radius: 8px;\n color: var(--text-primary);\n transition: border-color 0.2s ease;\n}\n\n.leaderboard-input:focus {\n outline: none;\n border-color: var(--accent-primary);\n}\n\n.leaderboard-input::placeholder {\n color: var(--text-muted);\n text-transform: uppercase;\n letter-spacing: 1px;\n}\n\n.leaderboard-error {\n color: var(--color-invalid);\n font-size: 0.9rem;\n text-align: center;\n margin-bottom: 12px;\n}\n\n.leaderboard-submit-button {\n width: 100%;\n background-color: var(--accent-primary);\n color: white;\n border: none;\n padding: 14px 20px;\n border-radius: 8px;\n cursor: pointer;\n font-size: 1rem;\n font-weight: 600;\n transition: background-color 0.2s ease;\n}\n\n.leaderboard-submit-button:hover:not(.disabled) {\n background-color: var(--accent-hover);\n}\n\n.leaderboard-submit-button.disabled {\n background-color: var(--bg-card);\n color: var(--text-muted);\n cursor: not-allowed;\n}\n\n/* Club name display on leaderboard view */\n.club-name-display {\n font-family: 'Courier New', Courier, monospace;\n font-size: 1.3rem;\n font-weight: 600;\n color: var(--accent-primary);\n text-transform: uppercase;\n letter-spacing: 2px;\n}\n\n\n/*\n * =============================================================================\n * PROMPT 5: POLISH & TRANSITIONS\n * =============================================================================\n */\n\n/* Club welcome message on preGame */\n.club-welcome {\n color: var(--accent-primary);\n font-size: 1rem;\n margin-bottom: 10px;\n}\n\n.club-welcome strong {\n font-family: 'Courier New', Courier, monospace;\n letter-spacing: 1px;\n}\n\n/* Loading text style */\n.loading-text {\n color: var(--text-secondary);\n font-style: italic;\n}\n\n/* Submission success state */\n.submission-success {\n text-align: center;\n padding: 10px 0 16px 0;\n}\n\n.success-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n background: var(--color-valid);\n color: white;\n border-radius: 50%;\n font-size: 1.5rem;\n font-weight: bold;\n margin-bottom: 12px;\n}\n\n.success-message {\n color: var(--text-secondary);\n font-size: 0.95rem;\n margin: 0;\n}\n\n/* Share link hint */\n.leaderboard-share-hint {\n color: var(--text-secondary);\n font-size: 0.9rem;\n margin-top: 20px;\n margin-bottom: 8px;\n}\n\n.leaderboard-share-url {\n display: block;\n background: var(--bg-card);\n padding: 10px 16px;\n border-radius: 6px;\n font-family: 'Courier New', Courier, monospace;\n font-size: 0.85rem;\n color: var(--accent-primary);\n word-break: break-all;\n user-select: all;\n cursor: pointer;\n}\n\n.leaderboard-share-url:hover {\n background: var(--key-active);\n}\n\n/* Smooth transitions */\n.content-area {\n animation: fadeIn 0.2s ease-out;\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Button hover transitions */\n.start-button,\n.leaderboard-submit-button,\n.submit-button,\n.trash-button {\n transition: background-color 0.15s ease, transform 0.1s ease;\n}\n\n.start-button:active,\n.leaderboard-submit-button:active:not(.disabled),\n.submit-button:active:not(.disabled) {\n transform: scale(0.98);\n}\n\n/* Input focus transitions */\n.leaderboard-input {\n transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n\n.leaderboard-input:focus {\n box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.15);\n}\n\n/* Leaderboard table row hover */\n.leaderboard-table tbody tr {\n transition: background-color 0.1s ease;\n}\n\n.leaderboard-table tbody tr:hover {\n background-color: var(--bg-tertiary);\n}\n\n/* Better scrollbar styling for leaderboard */\n.leaderboard-table-container::-webkit-scrollbar {\n width: 6px;\n}\n\n.leaderboard-table-container::-webkit-scrollbar-track {\n background: var(--bg-secondary);\n border-radius: 3px;\n}\n\n.leaderboard-table-container::-webkit-scrollbar-thumb {\n background: var(--border-color);\n border-radius: 3px;\n}\n\n.leaderboard-table-container::-webkit-scrollbar-thumb:hover {\n background: var(--text-muted);\n}\n",[],[170,269],"c0b7a41a-f54a-11f0-95a7-42dde27851f2","rounds.ts","5e68b008-f499-11f0-a36e-42dde27851f2",164,["D",1768836185805],"export interface Round {\n game_id: number;\n\tround: number;\n\ttitle: string;\n\thighlight: string[];\n\tvalidation: (str: string) => boolean;\n\tunselectable_keys: string[];\n\texamples: string[];\n}\n\nexport const rounds: Round[] = [\n\t{\n game_id: 0,\n\t\tround: 1,\n\t\ttitle: \"starts with HI\",\n\t\thighlight: [\"H\", \"I\"],\n\t\tvalidation: str => /^hi.*/.test(str.toLowerCase()),\n\t\tunselectable_keys: [],\n\t\texamples: [\"hit\", \"hint\", \"hill\"],\n\t},\n\t{\n game_id: 0,\n\t\tround: 2,\n\t\ttitle: \"starts with P and ends with P\",\n\t\thighlight: [\"P\"],\n\t\tvalidation: str => /^p.*p$/i.test(str.toLowerCase()),\n\t\tunselectable_keys: [],\n\t\texamples: [\"pep\", \"prop\", \"pulp\"],\n\t},\n\t{\n game_id: 0,\n\t\tround: 3,\n\t\ttitle: \"has exactly two Cs\",\n\t\thighlight: [\"C\"],\n\t\tvalidation: str => /^(?:[^c]*c){2}[^c]*$/i.test(str.toLowerCase()),\n\t\tunselectable_keys: [],\n\t\texamples: [\"click\", \"occur\", \"clock\"],\n\t},\n\t{\n game_id: 0,\n\t\tround: 4,\n\t\ttitle: \"doesn't use vowels besides A\",\n\t\thighlight: [\"A\"],\n\t\tvalidation: str => /^[^eiuoy]*$/i.test(str.toLowerCase()),\n\t\tunselectable_keys: [\"E\", \"I\", \"O\", \"U\", \"Y\"],\n\t\texamples: [\"map\", \"arms\", \"salsa\"],\n\t},\n\t{\n game_id: 0,\n\t\tround: 5,\n\t\ttitle: \"has the letters DOG in sequence (with possible gaps)\",\n\t\thighlight: [\"D\", \"O\", \"G\"],\n\t\tvalidation: str => /d.*o.*g/i.test(str.toLowerCase()),\n\t\tunselectable_keys: [],\n\t\texamples: [\"dog\", \"dogs\", \"defog\"],\n\t},\n];",[],[170,278],"f23f95d6-f3d5-11f0-8692-42dde27851f2","index.tsx","019bcd4f-053b-76eb-a453-603586da5553",["D",1768676066564],"/** @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();",[],[170,286],"05b162b0-f3dc-11f0-850f-42dde27851f2","index.html","019bcd4f-053b-76eb-a453-5c0ec15359cc",10,["D",1768678676215],"\n\n \n \n \n What's the Biggest Word You Can Think Of?\n \n \n \n \n

\n \n \n \n",[],[170,293],"f23f8a5a-f3d5-11f0-8692-42dde27851f2","favicon.svg","019bcd4f-053b-76eb-a453-588cc7698352",["D",1768676066564],"\n",[],[170,301],"78c54656-f547-11f0-9f03-42dde27851f2","RoundIndicator.tsx","0a0e76b2-f4a5-11f0-a60b-42dde27851f2","019bcd4f-053b-76eb-a453-57913d70df82",139,["D",1768834776609],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface RoundIndicatorProps {\n currentRound: number; // 0-indexed\n totalRounds: number;\n showTotal?: boolean; // If true, add one extra dot (disconnected) for \"Total\"\n onRoundClick?: (roundIndex: number) => void; // Make dots clickable\n selectedRound?: number; // Which dot is selected (for leaderboard sorting)\n}\n\n/**\n * Visual progress indicator showing completed, current, and future rounds.\n * \n * When used in game: shows progress through rounds with checkmarks for completed.\n * When used in leaderboard (showTotal=true): shows clickable sort selector.\n * \n * Colors are defined here to match the CSS theme. If you change the color\n * palette in style.css, update these values to match:\n * - accentColor: Should match --accent-primary\n * - inactiveColor: Should match --border-color\n * - bgColor: Should match --bg-input or --bg-secondary\n * - checkColor: Should contrast with accentColor (usually white or dark)\n */\nexport function RoundIndicator({ \n currentRound, \n totalRounds, \n showTotal = false,\n onRoundClick,\n selectedRound \n}: RoundIndicatorProps) {\n // SVG dimensions\n const circleRadius = 8;\n const circleSpacing = 28;\n const totalGap = 14; // Extra gap before the \"Total\" dot\n const strokeWidth = 3;\n const padding = 4;\n \n // Calculate total dots to render\n const dotsCount = showTotal ? totalRounds + 1 : totalRounds;\n \n // Calculate SVG width accounting for total gap if needed\n const baseWidth = (totalRounds - 1) * circleSpacing + circleRadius * 2 + padding * 2;\n const svgWidth = showTotal ? baseWidth + totalGap + circleSpacing : baseWidth;\n const svgHeight = circleRadius * 2 + padding * 2 + 4; // Extra 4 for outline\n\n // Colors - update these to match your theme\n const accentColor = \"#4a90e2\"; // Matches --accent-primary\n const inactiveColor = \"#d0d0d0\"; // Matches --border-color (lighter for light theme)\n const bgColor = \"#ffffff\"; // Matches --bg-input\n const checkColor = \"#ffffff\"; // Checkmark color (contrasts with accent)\n\n // Helper to get X position for a dot\n const getDotX = (index: number): number => {\n if (showTotal && index === totalRounds) {\n // \"Total\" dot has extra gap\n return padding + circleRadius + totalRounds * circleSpacing + totalGap;\n }\n return padding + circleRadius + index * circleSpacing;\n };\n\n // Determine if we're in \"selection mode\" (for leaderboard)\n const isSelectionMode = onRoundClick !== undefined;\n\n return (\n

\n {!isSelectionMode && (\n Round {currentRound + 1}/{totalRounds}\n )}\n \n

\n );\n}\n",[],[170,316,308],"components","21e29ab8-f4c6-11f0-9658-42dde27851f2","ResultsTable.tsx","abc05714-f4a0-11f0-b9ac-42dde27851f2",115,["D",1768779225757],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface ValidationResult {\n round: number;\n word: string;\n isValid: boolean;\n}\n\ninterface ResultsTableProps {\n results: ValidationResult[];\n}\n\n/**\n * Returns a CSS class for responsive text sizing based on word length.\n * Longer words get smaller text to fit within the table.\n */\nfunction getWordSizeClass(word: string): string {\n if (word.length > 20) return \"result-word word-very-long\";\n if (word.length > 14) return \"result-word word-long\";\n return \"result-word\";\n}\n\nexport function ResultsTable({ results }: ResultsTableProps) {\n const total = results\n .filter(r => r.isValid)\n .reduce((sum, r) => sum + r.word.length, 0);\n\n return (\n

\n \n \n \n \n \n \n \n \n \n {results.map((result) => (\n \n \n \n \n \n ))}\n \n \n \n \n \n \n \n

Round	Word	Letters
{result.round}	{result.word}	\n {result.isValid ? result.word.length : \"✗\"}\n
Total	{total}

\n );\n}\n",[],[170,316,318],"4659d314-f4b9-11f0-bad5-42dde27851f2","Prompt.tsx","197aee4c-f3dc-11f0-b024-42dde27851f2",99,["D",1768773703481],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface PromptProps {\n title: string;\n}\n\nexport function Prompt({ title }: PromptProps) {\n // Full constraint text to check length\n const constraintText = `that ${title}?`;\n const isLongPrompt = constraintText.length > 70;\n \n return (\n

\n What's the biggest word you can think of...\n

\n {constraintText}\n

\n );\n}\n",[],[170,316,326],"02b3db30-f54c-11f0-8579-42dde27851f2",["D",1768836725987],[],[170,316,33],"d77a7bce-f49a-11f0-8f38-42dde27851f2","Keyboard.tsx","1fe8c132-f3dc-11f0-b024-42dde27851f2",63,["D",1768760632568],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface KeyboardProps {\n onKeyPress: (letter: string) => void;\n onBackspace: () => void;\n onArrowLeft: () => void;\n onArrowRight: () => void;\n highlightLetters: string[];\n unselectableKeys: string[];\n}\n\nconst ROWS = [\n [\"Q\", \"W\", \"E\", \"R\", \"T\", \"Y\", \"U\", \"I\", \"O\", \"P\"],\n [\"A\", \"S\", \"D\", \"F\", \"G\", \"H\", \"J\", \"K\", \"L\"],\n [\"BACKSPACE\", \"Z\", \"X\", \"C\", \"V\", \"B\", \"N\", \"M\", \"LEFT\", \"RIGHT\"],\n];\n\nexport function Keyboard({ onKeyPress, onBackspace, onArrowLeft, onArrowRight, highlightLetters, unselectableKeys }: KeyboardProps) {\n const highlightSet = new Set(highlightLetters.map(l => l.toUpperCase()));\n const unselectableSet = new Set(unselectableKeys.map(l => l.toUpperCase()));\n\n const handleKeyClick = (key: string) => {\n if (key === \"BACKSPACE\") {\n onBackspace();\n } else if (key === \"LEFT\") {\n onArrowLeft();\n } else if (key === \"RIGHT\") {\n onArrowRight();\n } else if (!unselectableSet.has(key)) {\n onKeyPress(key);\n }\n };\n\n const renderKey = (key: string) => {\n let displayContent: string | JSX.Element = key;\n let className = \"key\";\n\n if (key === \"BACKSPACE\") {\n displayContent = \"⌫\";\n className += \" key-special\";\n } else if (key === \"LEFT\") {\n displayContent = \"←\";\n className += \" key-special\";\n } else if (key === \"RIGHT\") {\n displayContent = \"→\";\n className += \" key-special\";\n } else {\n if (highlightSet.has(key)) {\n className += \" key-highlighted\";\n }\n if (unselectableSet.has(key)) {\n className += \" key-unselectable\";\n }\n }\n\n return (\n handleKeyClick(key)}\n disabled={unselectableSet.has(key)}\n >\n {displayContent}\n \n );\n };\n\n return (\n

\n {ROWS.map((row, rowIndex) => (\n

\n {row.map(renderKey)}\n

\n ))}\n

\n );\n}\n",[],[170,316,338],"7166583a-f4bd-11f0-be5a-42dde27851f2","Header.tsx","5969b49a-f4bb-11f0-991e-42dde27851f2",109,["D",1768775493690],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport function Header() {\n return (\n

\n Think A Little Longer. A word game by Alex Wein\n

\n );\n}",[],[170,316,346],"cdc08a10-f49a-11f0-8f38-42dde27851f2","Examples.tsx","cdc08ac4-f49a-11f0-8f38-42dde27851f2",61,["D",1768760616250],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface ExamplesProps {\n examples: string[];\n highlightLetters: string[];\n}\n\nexport function Examples({ examples, highlightLetters }: ExamplesProps) {\n const highlightSet = new Set(highlightLetters.map(l => l.toUpperCase()));\n\n const renderWord = (word: string) => {\n return word.split(\"\").map((letter, index) => {\n const isHighlighted = highlightSet.has(letter.toUpperCase());\n return (\n \n {letter}\n \n );\n });\n };\n\n return (\n

\n e.g.\n {examples.map((word, index) => (\n \n {renderWord(word)}\n {index < examples.length - 1 && \", \"}\n \n ))}\n

\n );\n}\n",[],[170,316,354],"d234b756-f49a-11f0-8f38-42dde27851f2","CurrentGuess.tsx","1c959424-f3dc-11f0-b024-42dde27851f2",62,["D",1768760623723],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface CurrentGuessProps {\n guess: string;\n cursorPosition: number;\n onCursorClick: (position: number) => void;\n highlightLetters: string[];\n}\n\nexport function CurrentGuess({ guess, cursorPosition, onCursorClick, highlightLetters }: CurrentGuessProps) {\n const highlightSet = new Set(highlightLetters.map(l => l.toUpperCase()));\n\n // Calculate font size: base size fits 15 letters, shrink if more\n const baseFontSize = 2; // rem\n const minFontSize = 1; // rem\n const fontSize = guess.length > 15 \n ? Math.max(minFontSize, baseFontSize * (15 / guess.length))\n : baseFontSize;\n\n const handleClick = (index: number) => {\n onCursorClick(index);\n };\n\n return (\n

{guess.length}

\n {guess.split(\"\").map((letter, index) => {\n const isHighlighted = highlightSet.has(letter.toUpperCase());\n return (\n handleClick(index)}\n >\n {letter}\n \n );\n })}\n handleClick(guess.length)}\n >\n \n \n

\n );\n}\n",[],[170,316,362],"ea2eac0c-f54b-11f0-858b-42dde27851f2","App.tsx","019bcd4f-053b-76eb-a453-53cff50e297c",170,["D",1768836684853],26,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { Header } from \"./Header.tsx\";\nimport { Prompt } from \"./Prompt.tsx\";\nimport { Examples } from \"./Examples.tsx\";\nimport { CurrentGuess } from \"./CurrentGuess.tsx\";\nimport { Keyboard } from \"./Keyboard.tsx\";\nimport { ActionButtons } from \"./ActionButtons.tsx\";\nimport { ResultsTable } from \"./ResultsTable.tsx\";\nimport { RoundIndicator } from \"./RoundIndicator.tsx\";\nimport { Leaderboard } from \"./Leaderboard.tsx\";\nimport { rounds } from \"../rounds.ts\";\n\ntype GameState = \"preGame\" | \"inGame\" | \"postGame\" | \"leaderboard\";\n\ninterface Submission {\n round: number;\n word: string;\n}\n\ninterface ValidationResult {\n round: number;\n word: string;\n isValid: boolean;\n}\n\nexport function App() {\n const [gameState, setGameState] = useState(\"preGame\");\n const [currentRound, setCurrentRound] = useState(0);\n const [currentGuess, setCurrentGuess] = useState(\"\");\n const [cursorPosition, setCursorPosition] = useState(0);\n const [submissions, setSubmissions] = useState([]);\n const [results, setResults] = useState(null);\n const [isValidating, setIsValidating] = useState(false);\n \n // Leaderboard form state\n const [clubName, setClubName] = useState(\"\");\n const [playerName, setPlayerName] = useState(\"\");\n const [isSubmittingToLeaderboard, setIsSubmittingToLeaderboard] = useState(false);\n const [leaderboardError, setLeaderboardError] = useState(null);\n const [submittedSuccessfully, setSubmittedSuccessfully] = useState(false);\n\n const round = rounds[currentRound];\n const unselectableSet = new Set(round?.unselectable_keys.map(k => k.toUpperCase()) || []);\n\n // Parse URL on mount to extract club name (case-insensitive)\n useEffect(() => {\n const path = window.location.pathname.toLowerCase();\n \n // Match /club/{name}/leaderboard or /club/{name}/leaderboard/ (check this first - more specific)\n const leaderboardMatch = path.match(/^\\/club\\/([^\\/]+)\\/leaderboard\\/?$/);\n if (leaderboardMatch) {\n const extractedClubName = leaderboardMatch[1].toUpperCase().replace(/[^A-Z]/g, \"\").slice(0, 25);\n if (extractedClubName) {\n setClubName(extractedClubName);\n setGameState(\"leaderboard\");\n }\n return;\n }\n \n // Match /club/{name} or /club/{name}/\n const clubMatch = path.match(/^\\/club\\/([^\\/]+)\\/?$/);\n if (clubMatch) {\n const extractedClubName = clubMatch[1].toUpperCase().replace(/[^A-Z]/g, \"\").slice(0, 25);\n if (extractedClubName) {\n setClubName(extractedClubName);\n }\n }\n }, []);\n\n // Input validation helper: A-Z only, max 25 chars, auto-uppercase\n const sanitizeInput = (value: string): string => {\n return value.toUpperCase().replace(/[^A-Z]/g, \"\").slice(0, 25);\n };\n\n const handleClubNameChange = (e: React.ChangeEvent) => {\n setClubName(sanitizeInput(e.target.value));\n setLeaderboardError(null);\n };\n\n const handlePlayerNameChange = (e: React.ChangeEvent) => {\n setPlayerName(sanitizeInput(e.target.value));\n setLeaderboardError(null);\n };\n\n // Check if both inputs are valid for submission\n const canSubmitToLeaderboard = clubName.length > 0 && playerName.length > 0;\n\n const handleSubmitToLeaderboard = async () => {\n if (!canSubmitToLeaderboard || !results) return;\n \n setIsSubmittingToLeaderboard(true);\n setLeaderboardError(null);\n \n try {\n // Calculate total points (sum of word lengths where isValid is true)\n const total_points = results\n .filter(r => r.isValid)\n .reduce((sum, r) => sum + r.word.length, 0);\n \n // Get game_id from the first round (all rounds in a game share the same game_id)\n const game_id = rounds[0].game_id;\n \n const response = await fetch(\"/api/submit-result\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n game_id,\n club_name: clubName,\n user_name: playerName,\n total_points,\n submissions: results.map(r => r.word),\n submission_validity: results.map(r => r.isValid)\n })\n });\n \n if (!response.ok) {\n const errorData = await response.json();\n throw new Error(errorData.error || \"Failed to submit\");\n }\n \n // Success - mark as submitted and show success state\n setSubmittedSuccessfully(true);\n \n } catch (error) {\n console.error(\"Error submitting to leaderboard:\", error);\n setLeaderboardError(error instanceof Error ? error.message : \"Failed to submit\");\n } finally {\n setIsSubmittingToLeaderboard(false);\n }\n };\n\n const handleStartGame = () => {\n setGameState(\"inGame\");\n setCurrentRound(0);\n setCurrentGuess(\"\");\n setCursorPosition(0);\n setSubmissions([]);\n setResults(null);\n setLeaderboardError(null);\n setSubmittedSuccessfully(false);\n // Don't reset playerName - user may want to keep it for next game\n };\n\n const handleViewLeaderboard = () => {\n const newUrl = `/club/${clubName.toLowerCase()}/leaderboard`;\n window.history.pushState({}, \"\", newUrl);\n setGameState(\"leaderboard\");\n };\n\n const handleKeyPress = useCallback((letter: string) => {\n if (currentGuess.length >= 30) return;\n if (unselectableSet.has(letter.toUpperCase())) return;\n const newGuess = currentGuess.slice(0, cursorPosition) + letter + currentGuess.slice(cursorPosition);\n setCurrentGuess(newGuess);\n setCursorPosition(cursorPosition + 1);\n }, [currentGuess, cursorPosition, unselectableSet]);\n\n const handleBackspace = useCallback(() => {\n if (cursorPosition > 0) {\n const newGuess = currentGuess.slice(0, cursorPosition - 1) + currentGuess.slice(cursorPosition);\n setCurrentGuess(newGuess);\n setCursorPosition(cursorPosition - 1);\n }\n }, [currentGuess, cursorPosition]);\n\n const handleArrowLeft = useCallback(() => {\n if (cursorPosition > 0) {\n setCursorPosition(cursorPosition - 1);\n }\n }, [cursorPosition]);\n\n const handleArrowRight = useCallback(() => {\n if (cursorPosition < currentGuess.length) {\n setCursorPosition(cursorPosition + 1);\n }\n }, [cursorPosition, currentGuess.length]);\n\n const handleCursorClick = (position: number) => {\n setCursorPosition(position);\n };\n\n const isValid = round?.validation(currentGuess) ?? false;\n\n const validateSubmissions = async (allSubmissions: Submission[]) => {\n setIsValidating(true);\n try {\n const response = await fetch(\"/api/validate\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ submissions: allSubmissions }),\n });\n const data = await response.json();\n setResults(data.results);\n } catch (error) {\n console.error(\"Validation failed:\", error);\n // Fallback: mark all as valid if API fails\n setResults(allSubmissions.map(s => ({ ...s, isValid: true })));\n } finally {\n setIsValidating(false);\n }\n };\n\n const handleSubmit = useCallback(() => {\n if (!isValid) return;\n \n const newSubmission: Submission = {\n round: currentRound + 1,\n word: currentGuess,\n };\n const newSubmissions = [...submissions, newSubmission];\n setSubmissions(newSubmissions);\n\n if (currentRound < rounds.length - 1) {\n setCurrentRound(currentRound + 1);\n setCurrentGuess(\"\");\n setCursorPosition(0);\n } else {\n setGameState(\"postGame\");\n validateSubmissions(newSubmissions);\n }\n }, [isValid, currentRound, currentGuess, submissions]);\n\n const handleTrash = useCallback(() => {\n setCurrentGuess(\"\");\n setCursorPosition(0);\n }, []);\n\n // Physical keyboard support\n useEffect(() => {\n if (gameState !== \"inGame\") return;\n\n const handleKeyDown = (e: KeyboardEvent) => {\n // Ignore if user is typing in an input field\n if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {\n return;\n }\n\n const key = e.key.toUpperCase();\n\n if (key.length === 1 && key >= \"A\" && key <= \"Z\") {\n if (!unselectableSet.has(key)) {\n e.preventDefault();\n handleKeyPress(key);\n }\n } else if (e.key === \"Backspace\") {\n e.preventDefault();\n handleBackspace();\n } else if (e.key === \"ArrowLeft\") {\n e.preventDefault();\n handleArrowLeft();\n } else if (e.key === \"ArrowRight\") {\n e.preventDefault();\n handleArrowRight();\n } else if (e.key === \"Enter\") {\n e.preventDefault();\n handleSubmit();\n } else if (e.key === \"Escape\") {\n e.preventDefault();\n handleTrash();\n }\n };\n\n window.addEventListener(\"keydown\", handleKeyDown);\n return () => window.removeEventListener(\"keydown\", handleKeyDown);\n }, [gameState, handleKeyPress, handleBackspace, handleArrowLeft, handleArrowRight, handleSubmit, handleTrash, unselectableSet]);\n\n\n if (gameState === \"preGame\") {\n return (\n

Think a Little Longer.

What's the biggest word you can think of that meets the constraints?

\n {clubName && (\n

Playing for club: {clubName}

\n )}\n \n

\n );\n }\n\n if (gameState === \"leaderboard\") {\n return (\n

\n \n \n

\n );\n }\n\n if (gameState === \"postGame\") {\n return (\n

Good game.

\n {isValidating ? (\n

Validating your words...

\n ) : results ? (\n \n ) : (\n

Loading results...

\n )}\n \n {/* Club Leaderboard Submission Form */}\n {results && !isValidating && (\n

\n {submittedSuccessfully ? (\n <>\n

\n ✓\n

Submitted!

Your score has been added to the {clubName} leaderboard.

\n \n View Leaderboard\n \n \n ) : (\n <>\n

Submit to Club Leaderboard

\n \n

\n Club Name\n \n

\n \n

\n Your Name\n \n

\n \n {leaderboardError && (\n

{leaderboardError}

\n )}\n \n \n {isSubmittingToLeaderboard ? \"Submitting...\" : \"Submit to Leaderboard\"}\n \n \n )}\n

\n )}\n \n \n

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

\n \n \n \n \n \n

\n \n

\n );\n}\n",[],[170,316,370],"21496f36-f3dc-11f0-b024-42dde27851f2","ActionButtons.tsx","21496ff4-f3dc-11f0-b024-42dde27851f2",15,["D",1768678722522],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface ActionButtonsProps {\n onSubmit: () => void;\n onTrash: () => void;\n canSubmit: boolean;\n}\n\nexport function ActionButtons({ onSubmit, onTrash, canSubmit }: ActionButtonsProps) {\n return (\n

\n \n \n

\n );\n}\n",[],[170,316,379],"f23f87e4-f3d5-11f0-8692-42dde27851f2",["D",1768676066564],[186,187,188,189,190,191,192,193,194,195],[170,316],["D",1768676066564],[185,196,197,198,199,200],[170],["D",1768676066564],["D",1789527643940],{"_102":101,"_110":106},{"_102":101,"_103":104,"_105":106,"_18":56,"_107":108,"_109":25},{"_13":91,"_32":92,"_44":43,"_93":45,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":46,"_100":101},"ctx",{"_84":-5,"_130":431,"_432":433,"_434":435,"_436":25,"_437":25,"_438":25,"_439":60,"_440":-5,"_441":-7,"_442":-7,"_443":64,"_444":25,"_445":25,"_446":-5,"_447":25,"_448":25,"_449":25,"_450":-5},"ENV",{"_402":403,"_404":405,"_406":92,"_407":408,"_409":410,"_411":412,"_413":414,"_415":416,"_417":418,"_419":420,"_421":422,"_423":424,"_425":426,"_427":428,"_429":430},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","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"]

Diff · v171