[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_268":269,"_270":271},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_200":-5,"_20":201,"_22":202,"_203":204,"_205":206,"_26":207,"_24":208,"_209":-5,"_210":-5,"_211":55,"_212":213,"_214":46,"_215":-5,"_216":-5,"_217":218},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","alexwein","name","loopyLetters","branchName","main","version","path","backend","project",{"_34":142,"_13":14,"_47":143,"_144":-5,"_145":46,"_146":147,"_148":147,"_149":-5,"_150":-5,"_151":152,"_153":38,"_154":46,"_155":46,"_156":157,"_158":159,"_160":161,"_162":-5,"_163":-5,"_164":-5,"_165":-5,"_166":167,"_168":167,"_169":170,"_171":170,"_172":170,"_173":167,"_174":167,"_175":176,"_177":178,"_179":180,"_181":55},"tree",[62,63,64,65,66],"file",{"_34":58,"_13":19,"_37":40,"_39":-5,"_41":42,"_43":44,"_45":46,"_47":59,"_17":49,"_50":60,"_52":-5,"_54":55,"_56":-5,"_18":61},"contents",[33],"upstream","pull","ahead","behind","envVars",{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_18":57},"id","f3957c34-bdb6-11f0-9987-42dde27851f2","index.ts","fileId","f3957cd4-bdb6-11f0-9987-42dde27851f2","parentId","019a6a9e-ed39-730b-a41a-312ed81fc198","branchId","b8984c5a-1c5e-11f0-8f90-569c3dd06744","branchVersion",64,"latest",true,"createdAt",["D",1762725391675],0,"fileType","http","content","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Main game route\napp.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject game type\n const gameScript = ``;\n \n html = html.replace(\"\", `${gameScript}`);\n return c.html(html);\n});\n\n// Birds game route\napp.get(\"/birds\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject game type\n const gameScript = ``;\n \n html = html.replace(\"\", `${gameScript}`);\n return c.html(html);\n});\n\n// API routes\napp.get(\"/api/words\", async c => {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n \n const randRowsQ = `\n select id, word\n from judgments\n order by random()\n limit 7\n `;\n\n try {\n const result = await sqlite.execute(randRowsQ);\n const wordlist = result.rows\n .map(row => row?.word ? row.word.toUpperCase() : null)\n .filter(word => word !== null);\n\n // Use fallback wordlist if no words are found\n const FALLBACK_WORDLIST = [\n \"WATERFALL\",\n \"UNDERGROUND\", \n \"CONSECRATION\",\n \"DECONSECRATION\",\n \"PANDAS\",\n \"RATION\",\n \"ITERATION\",\n \"REITERATE\",\n ];\n const finalWordlist = wordlist.length > 0 ? wordlist : FALLBACK_WORDLIST;\n\n return c.json(finalWordlist);\n } catch (error) {\n console.error(\"Error fetching words:\", error);\n const FALLBACK_WORDLIST = [\n \"WATERFALL\",\n \"UNDERGROUND\",\n \"CONSECRATION\", \n \"DECONSECRATION\",\n \"PANDAS\",\n \"RATION\",\n \"ITERATION\",\n \"REITERATE\",\n ];\n return c.json(FALLBACK_WORDLIST);\n }\n});\n\napp.get(\"/api/birds\", async c => {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n \n const randRowsQ = `\n select id, name as word, img_url, url\n from birds\n where\n img_url != 'null'\n and name_length <= 25\n order by random()\n limit 4\n `;\n\n try {\n const result = await sqlite.execute(randRowsQ);\n const wordlist = result.rows\n .map(row => row?.word ? { \n word: row.word.toUpperCase(), \n img_url: row.img_url, \n url: row.url \n } : null)\n .filter(item => item !== null);\n\n const FALLBACK_WORDLIST = [{ word: \"WATERFALL\", img_url: \"\", url: \"\" }];\n return c.json(wordlist.length > 0 ? wordlist : FALLBACK_WORDLIST);\n } catch (error) {\n console.error(\"Error fetching birds:\", error);\n const FALLBACK_WORDLIST = [{ word: \"WATERFALL\", img_url: \"\", url: \"\" }];\n return c.json(FALLBACK_WORDLIST);\n }\n});\n\nexport default app.fetch;","deleted",false,"label",[19,36],"f395a506-bdb6-11f0-9987-42dde27851f2",["D",1762725391675],"directory",[19],{"_34":58,"_13":19,"_37":40,"_39":-5,"_41":42,"_43":44,"_45":46,"_47":135,"_17":49,"_50":60,"_52":-5,"_54":55,"_56":-5,"_72":136,"_18":137},{"_34":98,"_13":99,"_37":100,"_39":-5,"_41":42,"_43":44,"_45":46,"_47":101,"_17":49,"_50":60,"_52":-5,"_54":55,"_56":-5,"_72":102,"_18":103},{"_34":83,"_13":84,"_37":85,"_39":-5,"_41":42,"_43":44,"_45":46,"_47":86,"_17":49,"_50":60,"_52":-5,"_54":55,"_56":-5,"_72":87,"_18":88},{"_34":75,"_13":76,"_37":77,"_39":-5,"_41":42,"_43":44,"_45":46,"_47":78,"_17":79,"_50":24,"_52":80,"_54":55,"_56":-5,"_72":81,"_18":82},{"_34":67,"_13":68,"_37":69,"_39":-5,"_41":42,"_43":44,"_45":46,"_47":70,"_17":49,"_50":24,"_52":71,"_54":55,"_56":-5,"_72":73,"_18":74},"f395a326-bdb6-11f0-9987-42dde27851f2","todos.md","f395a39e-bdb6-11f0-9987-42dde27851f2",["D",1762725391675],"## todo:\n\n\n## completed:\n\n1. [x] refactor into a react/hono app\n - [x] logic shared between birds.tsx and main.tsx should be brought together into libraries\n - [x] \"/\" should serve the version in main.tsx\n - [x] \"/birds\" should serve the version in birds.tsx\n - [x] add a link to \"/birds\" on the main \"/\" page","children",[],[68],"f395c57c-bdb6-11f0-9987-42dde27851f2","README.md","b89b7dd0-1c5e-11f0-8f90-569c3dd06744",["D",1762725391675],2,"# Loopy Letters - A Word Game\n\nA word game with a small gameplay loop. Plays best on your phone.\n\n\n## Games\n\n- **Main Game** (`/`) - Use every letter on the donut to spell words random words.\n- **Birds** (`/birds`) - With random birds instead of random words.\n\n## Project Structure\n\n```\n├── backend/\n│ └── index.ts # Main Hono server with API routes\n├── frontend/\n│ ├── components/\n│ │ └── GameApp.tsx # Main game component\n│ ├── index.html # HTML template\n│ └── index.tsx # Frontend entry point\n├── shared/\n│ └── gameLogic.ts # Shared game logic and utilities\n└── README.md\n```\n\n### Rules\n\n1. Use every letter on the donut to spell a word.\n2. Letters in the word must be adjacent to each other on the donut.\n3. You can go **clockwise** or **counterclockwise**.\n4. When you find a word, the next word to find appears.\n5. Go fast. Go slow. Enjoy.\n\nThis revisits the gameplay from a 2002 Observable notebook I made called\n[\"find a (big) word, rings\"](https://observablehq.com/@a-lexwein/find-a-big-word-rings).\n\n## Data Sources\n\n- Main game uses random words from the Wordnik word game list\n- Birds version uses Wikipedia's List of Birds By Common Name with images",[],[76],"f395a8f8-bdb6-11f0-9987-42dde27851f2","shared","019a6a9e-ed39-730b-a41a-3d3a71595bf5",["D",1762725391675],[89],[84],{"_34":90,"_13":91,"_37":92,"_39":85,"_41":42,"_43":44,"_45":46,"_47":93,"_17":49,"_50":94,"_52":95,"_54":55,"_56":-5,"_72":96,"_18":97},"f3959ffc-bdb6-11f0-9987-42dde27851f2","gameLogic.ts","f395a06a-bdb6-11f0-9987-42dde27851f2",["D",1762725391675],"script","// Shared game logic between main and birds versions\n\nexport const OUTER_RADIUS = 146;\nexport const INNER_RADIUS = 60;\nexport const INNER_RADIUS_BIRDS = 75;\nexport const CENTER = { x: 150, y: 150 };\n\nexport const FALLBACK_WORDLIST = [\n \"WATERFALL\",\n \"UNDERGROUND\",\n \"CONSECRATION\",\n \"DECONSECRATION\",\n \"PANDAS\",\n \"RATION\",\n \"ITERATION\",\n \"REITERATE\",\n];\n\nexport const FALLBACK_BIRDS_WORDLIST = [{ word: \"WATERFALL\", img_url: \"\", url: \"\" }];\n\nexport const isReverseSubstring = (substr: string, board: string): boolean =>\n (board + board).includes(substr) || (board + board).includes(substr.split(\"\").reverse().join(\"\"));\n\nexport const tryReverse = (str: string): string => {\n return Math.random() < 0.5 ? str.split(\"\").reverse().join(\"\") : str;\n};\n\nexport const randomRotate = (str: string): string => {\n const i = Math.floor(Math.random() * str.length);\n return str.slice(i) + str.slice(0, i);\n};\n\nexport const lettersOnly = (str: string): string => str.replace(/[^a-zA-Z]/g, \"\");\n\nexport const createDonutSegment = (\n startAngle: number, \n endAngle: number, \n index: number, \n selection: number[],\n innerRadius: number = INNER_RADIUS\n) => {\n const isSelected = selection.includes(index);\n const largeArcFlag = endAngle - startAngle <= Math.PI ? \"0\" : \"1\";\n\n const startOuterX = CENTER.x + OUTER_RADIUS * Math.cos(startAngle);\n const startOuterY = CENTER.y + OUTER_RADIUS * Math.sin(startAngle);\n const endOuterX = CENTER.x + OUTER_RADIUS * Math.cos(endAngle);\n const endOuterY = CENTER.y + OUTER_RADIUS * Math.sin(endAngle);\n\n const startInnerX = CENTER.x + innerRadius * Math.cos(endAngle);\n const startInnerY = CENTER.y + innerRadius * Math.sin(endAngle);\n const endInnerX = CENTER.x + innerRadius * Math.cos(startAngle);\n const endInnerY = CENTER.y + innerRadius * Math.sin(startAngle);\n\n const path = [\n `M ${startOuterX} ${startOuterY}`,\n `A ${OUTER_RADIUS} ${OUTER_RADIUS} 0 ${largeArcFlag} 1 ${endOuterX} ${endOuterY}`,\n `L ${startInnerX} ${startInnerY}`,\n `A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} 0 ${endInnerX} ${endInnerY}`,\n \"Z\",\n ].join(\" \");\n\n return { path, isSelected };\n};\n\nexport const createStar = (cx: number, cy: number, spikes = 5, outerRadius = 20, innerRadius = 10) => {\n let points = [];\n for (let i = 0; i < spikes * 2; i++) {\n const radius = i % 2 === 0 ? outerRadius : innerRadius;\n const angle = (Math.PI * i) / spikes;\n const x = cx + Math.cos(angle) * radius;\n const y = cy + Math.sin(angle) * radius;\n points.push(`${x},${y}`);\n }\n return points.join(\" \");\n};\n\nexport const getRelativeCoordinates = (event: PointerEvent, svgRef: SVGSVGElement) => {\n const pt = svgRef.createSVGPoint();\n pt.x = event.clientX;\n pt.y = event.clientY;\n return pt.matrixTransform(svgRef.getScreenCTM()!.inverse());\n};\n\nexport const getLetterIndexFromPoint = (\n point: { x: number; y: number }, \n currentWordLength: number,\n innerRadius: number = INNER_RADIUS\n) => {\n const dx = point.x - CENTER.x;\n const dy = point.y - CENTER.y;\n const distance = Math.sqrt(dx * dx + dy * dy);\n if (distance < innerRadius || distance > OUTER_RADIUS) return -1;\n\n let angle = Math.atan2(dy, dx);\n if (angle < 0) angle += 2 * Math.PI;\n const segmentAngle = (2 * Math.PI) / currentWordLength;\n return Math.floor(angle / segmentAngle) % currentWordLength;\n};\n\nexport const isAdjacent = (index1: number, index2: number, wordLength: number): boolean => {\n const diff = Math.abs(index1 - index2);\n return diff === 1 || diff === wordLength - 1;\n};\n\nexport interface WordItem {\n word: string;\n img_url?: string;\n url?: string;\n}\n\nexport interface Star {\n x: number;\n y: number;\n key: number;\n fading: boolean;\n}",[],[84,91],"f395a6d2-bdb6-11f0-9987-42dde27851f2","frontend","019a6a9e-ed39-730b-a41a-342b93e762e4",["D",1762725391675],[104,105,106],[99],{"_34":121,"_13":122,"_37":123,"_39":100,"_41":42,"_43":44,"_45":46,"_47":124,"_17":49,"_50":60,"_52":-5,"_54":55,"_56":-5,"_72":125,"_18":126},{"_34":114,"_13":115,"_37":116,"_39":100,"_41":42,"_43":44,"_45":46,"_47":117,"_17":49,"_50":24,"_52":118,"_54":55,"_56":-5,"_72":119,"_18":120},{"_34":107,"_13":108,"_37":109,"_39":100,"_41":42,"_43":44,"_45":46,"_47":110,"_17":49,"_50":94,"_52":111,"_54":55,"_56":-5,"_72":112,"_18":113},"f3959dc2-bdb6-11f0-9987-42dde27851f2","index.tsx","f3959e3a-bdb6-11f0-9987-42dde27851f2",["D",1762725391675],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React from \"https://esm.sh/react@18.2.0\";\nimport GameApp from \"/frontend/components/GameApp.tsx\";\n\nfunction App() {\n // Get game type from injected script\n const gameType = (window as any).__GAME_TYPE__ || \"main\";\n \n return ;\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")!).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}",[],[99,108],"f39599ee-bdb6-11f0-9987-42dde27851f2","index.html","f3959a84-bdb6-11f0-9987-42dde27851f2",["D",1762725391675],"\n\n \n Loopy Letters\n \n \n \n \n

\n \n \n \n",[],[99,115],"f395a7ea-bdb6-11f0-9987-42dde27851f2","components","019a6a9e-ed39-730b-a41a-39f991b2a117",["D",1762725391675],[127],[99,122],{"_34":128,"_13":129,"_37":130,"_39":123,"_41":42,"_43":44,"_45":46,"_47":131,"_17":49,"_50":94,"_52":132,"_54":55,"_56":-5,"_72":133,"_18":134},"f3958684-bdb6-11f0-9987-42dde27851f2","GameApp.tsx","f39586fc-bdb6-11f0-9987-42dde27851f2",["D",1762725391675],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport {\n CENTER,\n createDonutSegment,\n createStar,\n getLetterIndexFromPoint,\n getRelativeCoordinates,\n INNER_RADIUS,\n INNER_RADIUS_BIRDS,\n isAdjacent,\n isReverseSubstring,\n lettersOnly,\n OUTER_RADIUS,\n randomRotate,\n type Star,\n tryReverse,\n type WordItem,\n} from \"/shared/gameLogic.ts\";\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface GameAppProps {\n gameType: \"main\" | \"birds\";\n}\n\nfunction InstructionsModal({ onClose, gameType }: { onClose: () => void; gameType: \"main\" | \"birds\" }) {\n if (gameType === \"birds\") {\n return (\n

Return to Loopy Letters:

The Birdy Version

Use every letter on the donut to spell the name of the bird in the center.
Letters in the word must be adjacent to each other on the donut.
\n You can go clockwise or counterclockwise.\n
\n Birds via Wikipedia's{\" \"}\n List of Birds By Common Name.\n
\n Hate birds? Check out the original Loopy Letters!\n

\n \n

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

How to play Loopy Letters:

Use every letter on the donut to spell a word.
Letters in the word must be adjacent to each other on the donut.
\n You can go clockwise or counterclockwise.\n
When you find a word, the next word to find appears.
Go fast? Go slow? Enjoy!

\n There's also a birdy version\n

\n \n

\n );\n}\n\nfunction GameOverModal({\n elapsedTime,\n onPlayAgain,\n gameType,\n wordlist,\n}: {\n elapsedTime: number;\n onPlayAgain: () => void;\n gameType: \"main\" | \"birds\";\n wordlist: WordItem[];\n}) {\n if (gameType === \"birds\") {\n return (\n

Game Over!

Your time: {Math.round(elapsedTime)} seconds

\n\n

\n {wordlist.map((word, index) => (\n

\n {word.word}\n

\n ))}\n

\n\n \n

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

Game Over!

Your time: {Math.round(elapsedTime)} seconds

\n \n

\n );\n}\n\nexport default function GameApp({ gameType }: GameAppProps) {\n const [wordlist, setWordlist] = useState([]);\n const [currentWordIndex, setCurrentWordIndex] = useState(0);\n const [currentWord, setCurrentWord] = useState(\"\");\n const [displayWord, setDisplayWord] = useState(\"\");\n const [selectedWord, setSelectedWord] = useState(\"\");\n const [selection, setSelection] = useState([]);\n const [stars, setStars] = useState([]);\n const [foundWords, setFoundWords] = useState([]);\n const [wordCount, setWordCount] = useState(0);\n const [showInstructionsModal, setShowInstructionsModal] = useState(true);\n const [showGameOverModal, setShowGameOverModal] = useState(false);\n const [gameStarted, setGameStarted] = useState(false);\n const [elapsedTime, setElapsedTime] = useState(0);\n const [isLoading, setIsLoading] = useState(true);\n const [imgUrl, setImgUrl] = useState(\"\");\n const svgRef = useRef(null);\n const timerRef = useRef(null);\n\n const innerRadius = gameType === \"birds\" ? INNER_RADIUS_BIRDS : INNER_RADIUS;\n const apiEndpoint = gameType === \"birds\" ? \"/api/birds\" : \"/api/words\";\n\n useEffect(() => {\n fetchWords();\n }, []);\n\n useEffect(() => {\n if (currentWord) {\n setDisplayWord(randomRotate(tryReverse(currentWord)));\n }\n }, [currentWord]);\n\n useEffect(() => {\n const timeout = setTimeout(() => {\n setStars(prevStars => {\n const updatedStars = prevStars.map(star => ({\n ...star,\n fading: true,\n }));\n return updatedStars;\n });\n }, 300);\n\n const removeTimeout = setTimeout(() => {\n setStars(prevStars => prevStars.filter(star => !star.fading));\n }, 600);\n\n return () => {\n clearTimeout(timeout);\n clearTimeout(removeTimeout);\n };\n }, [stars]);\n\n useEffect(() => {\n if (gameStarted && currentWordIndex < wordlist.length) {\n timerRef.current = setInterval(() => {\n setElapsedTime(prev => prev + 1);\n }, 1000);\n\n return () => {\n if (timerRef.current) {\n clearInterval(timerRef.current);\n }\n };\n }\n }, [gameStarted, currentWordIndex, wordlist.length]);\n\n useEffect(() => {\n if (!isLoading && currentWordIndex === wordlist.length) {\n if (timerRef.current) {\n clearInterval(timerRef.current);\n }\n setShowGameOverModal(true);\n }\n }, [currentWordIndex, wordlist.length, isLoading]);\n\n const fetchWords = async () => {\n try {\n const response = await fetch(apiEndpoint);\n const data = await response.json();\n setWordlist(data);\n\n if (gameType === \"birds\") {\n setCurrentWord(data[0].word);\n setImgUrl(data[0].img_url);\n } else {\n setCurrentWord(data[0]);\n }\n\n setIsLoading(false);\n } catch (error) {\n console.error(\"Error fetching words:\", error);\n const fallback = gameType === \"birds\"\n ? [{ word: \"WATERFALL\", img_url: \"\", url: \"\" }]\n : [\"WATERFALL\"];\n setWordlist(fallback);\n setCurrentWord(\"WATERFALL\");\n setIsLoading(false);\n }\n };\n\n const isValid = (str: string) => {\n const targetWord = gameType === \"birds\" ? lettersOnly(currentWord) : currentWord;\n return str === targetWord;\n };\n\n const handlePointerDown = (event: React.PointerEvent) => {\n if (!gameStarted || !svgRef.current) return;\n const point = getRelativeCoordinates(event.nativeEvent, svgRef.current);\n const wordLength = gameType === \"birds\" ? lettersOnly(currentWord).length : currentWord.length;\n const index = getLetterIndexFromPoint(point, wordLength, innerRadius);\n if (index !== -1) {\n const letters = gameType === \"birds\" ? lettersOnly(displayWord) : displayWord;\n setSelectedWord(letters[index]);\n setSelection([index]);\n }\n };\n\n const handlePointerMove = (event: React.PointerEvent) => {\n if (!gameStarted || selection.length === 0 || !svgRef.current) return;\n const point = getRelativeCoordinates(event.nativeEvent, svgRef.current);\n const wordLength = gameType === \"birds\" ? lettersOnly(currentWord).length : currentWord.length;\n const index = getLetterIndexFromPoint(point, wordLength, innerRadius);\n if (index !== -1 && index !== selection[selection.length - 1] && !selection.includes(index)) {\n if (isAdjacent(index, selection[selection.length - 1], wordLength)) {\n const newSelection = [...selection, index];\n setSelection(newSelection);\n const letters = gameType === \"birds\" ? lettersOnly(displayWord) : displayWord;\n setSelectedWord(newSelection.map(i => letters[i]).join(\"\"));\n }\n }\n };\n\n const handlePointerUp = () => {\n if (!gameStarted) return;\n const boardWord = gameType === \"birds\" ? lettersOnly(displayWord) : displayWord;\n if (selectedWord && isReverseSubstring(selectedWord, boardWord) && isValid(selectedWord)) {\n setStars(prevStars => [...prevStars, { x: CENTER.x, y: CENTER.y, key: Date.now(), fading: false }]);\n\n // Update found words (keep only the most recent word)\n setFoundWords([currentWord]);\n\n // Increment word count\n setWordCount(prev => prev + 1);\n\n const nextIndex = currentWordIndex + 1;\n setCurrentWordIndex(nextIndex);\n if (nextIndex < wordlist.length) {\n if (gameType === \"birds\") {\n setCurrentWord(wordlist[nextIndex].word);\n setImgUrl(wordlist[nextIndex].img_url || \"\");\n } else {\n setCurrentWord(wordlist[nextIndex] as string);\n }\n }\n }\n setSelectedWord(\"\");\n setSelection([]);\n };\n\n const startGame = () => {\n setShowInstructionsModal(false);\n setGameStarted(true);\n };\n\n const resetGame = () => {\n setIsLoading(true);\n fetchWords();\n setCurrentWordIndex(0);\n setDisplayWord(\"\");\n setSelectedWord(\"\");\n setSelection([]);\n setStars([]);\n setFoundWords([]);\n setWordCount(0);\n setShowGameOverModal(false);\n setGameStarted(true);\n setElapsedTime(0);\n };\n\n if (isLoading) {\n return

;\n }\n\n const letters = gameType === \"birds\" ? lettersOnly(displayWord) : displayWord;\n const wordLength = gameType === \"birds\" ? lettersOnly(currentWord).length : currentWord.length;\n\n return (\n

\n {showInstructionsModal && }\n {showGameOverModal && (\n \n )}\n

{gameType === \"birds\" ? \"Loopy Letters: Birds\" : \"Loopy Letters\"}

\n {gameType === \"birds\"\n ? (\n <>\n a ~~word~~ bird game by Alex Wein | or play\n Loopy Letters: Classic\n \n )\n : (\n <>\n a word game by Alex Wein | or playLoopy Letters: Birds\n \n )}\n

\n {gameType === \"birds\" ? \"Birds\" : \"Words\"} Found: {wordCount}/{wordlist.length}\n

{Math.round(elapsedTime)} s

\n {foundWords.map((word, index) => {word})}\n

- {selectedWord} -

\n \n {gameType === \"birds\" && imgUrl && (\n <>\n \n \n \n \n \n \n \n )}\n \n {letters.split(\"\").map((letter, index) => {\n const segmentAngle = (2 * Math.PI) / wordLength;\n const startAngle = index * segmentAngle;\n const endAngle = (index + 1) * segmentAngle;\n const midAngle = (startAngle + endAngle) / 2;\n const textRadius = (innerRadius + 1.1 * OUTER_RADIUS) / 2;\n const textX = CENTER.x + textRadius * Math.cos(midAngle);\n const textY = CENTER.y + textRadius * Math.sin(midAngle);\n\n const { path, isSelected } = createDonutSegment(startAngle, endAngle, index, selection, innerRadius);\n\n return (\n \n \n \n {letter}\n \n \n );\n })}\n \n {stars.map((star) => (\n \n ))}\n \n

\n );\n}",[],[99,122,129],["D",1762725391675],[138],[19],{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":139,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_72":140,"_18":141},["D",1762725391675],[],[19,36],"b897eb5c-1c5e-11f0-8f90-569c3dd06744",["D",1744985359792],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","b85dcfbf-50f1-466c-9e2b-28ac90e0dd23","pinnedFileId","pinPreview","pinMigrated","screenshotVersion",63,"likeCount",1,"orgId","875ed3cd-ae4b-40bb-a45f-6a1970e11689","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_199":195},"org",{"_11":12,"_192":193,"_194":195,"_151":152,"_196":197,"_198":55},"branch",{"_17":44,"_13":16,"_34":42,"_182":142,"_183":-5,"_184":-5,"_185":186,"_187":188,"_189":161,"_190":14,"_191":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","private","forkedProjectId","c7075efc-2799-11f0-9d52-569c3dd06744","forkedProjectOrgId","projectName","userHandle","displayName","Alex Wein","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ycjh6emNHdk9mMnY5djU3OFZBbEdleGhQZFAifQ","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_34":142,"_13":14,"_47":264,"_144":-5,"_145":46,"_146":147,"_148":147,"_149":-5,"_150":-5,"_151":152,"_153":38,"_154":46,"_155":46,"_156":157,"_158":159,"_160":161,"_162":-5,"_163":-5,"_164":-5,"_165":-5,"_166":167,"_168":167,"_169":170,"_171":170,"_172":170,"_173":167,"_174":167,"_175":265,"_177":266,"_179":267,"_181":55},[231,233,238,240,241],"files",[231,232,233,234,235,236,237,238,239,240,241],"counts",{"_222":49,"_223":159,"_224":79,"_32":225,"_226":227},[220],{"_34":58,"_13":19,"_37":40,"_39":-5,"_41":42,"_43":44,"_45":46,"_47":59,"_17":49,"_50":60,"_52":-5,"_54":55,"_56":-5,"_18":219},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},[19],{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_18":221},[19,36],"pulls","branches","forks",{"_228":49,"_230":49},"connections",{"_228":49,"_229":49},"count","unfilledCount","emptyCount",{"_34":58,"_13":19,"_37":40,"_39":-5,"_41":42,"_43":44,"_45":46,"_47":135,"_17":49,"_50":60,"_52":-5,"_54":55,"_56":-5,"_72":262,"_18":263},{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":139,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_72":260,"_18":261},{"_34":98,"_13":99,"_37":100,"_39":-5,"_41":42,"_43":44,"_45":46,"_47":101,"_17":49,"_50":60,"_52":-5,"_54":55,"_56":-5,"_72":258,"_18":259},{"_34":121,"_13":122,"_37":123,"_39":100,"_41":42,"_43":44,"_45":46,"_47":124,"_17":49,"_50":60,"_52":-5,"_54":55,"_56":-5,"_72":256,"_18":257},{"_34":128,"_13":129,"_37":130,"_39":123,"_41":42,"_43":44,"_45":46,"_47":131,"_17":49,"_50":94,"_52":132,"_54":55,"_56":-5,"_72":254,"_18":255},{"_34":114,"_13":115,"_37":116,"_39":100,"_41":42,"_43":44,"_45":46,"_47":117,"_17":49,"_50":24,"_52":118,"_54":55,"_56":-5,"_72":252,"_18":253},{"_34":107,"_13":108,"_37":109,"_39":100,"_41":42,"_43":44,"_45":46,"_47":110,"_17":49,"_50":94,"_52":111,"_54":55,"_56":-5,"_72":250,"_18":251},{"_34":83,"_13":84,"_37":85,"_39":-5,"_41":42,"_43":44,"_45":46,"_47":86,"_17":49,"_50":60,"_52":-5,"_54":55,"_56":-5,"_72":248,"_18":249},{"_34":90,"_13":91,"_37":92,"_39":85,"_41":42,"_43":44,"_45":46,"_47":93,"_17":49,"_50":94,"_52":95,"_54":55,"_56":-5,"_72":246,"_18":247},{"_34":75,"_13":76,"_37":77,"_39":-5,"_41":42,"_43":44,"_45":46,"_47":78,"_17":79,"_50":24,"_52":80,"_54":55,"_56":-5,"_72":244,"_18":245},{"_34":67,"_13":68,"_37":69,"_39":-5,"_41":42,"_43":44,"_45":46,"_47":70,"_17":49,"_50":24,"_52":71,"_54":55,"_56":-5,"_72":242,"_18":243},[],[68],[],[76],[],[84,91],[239],[84],[],[99,108],[],[99,115],[],[99,122,129],[235],[99,122],[234,236,237],[99],[],[19,36],[232],[19],["D",1744985359792],{"_11":12,"_199":195},{"_11":12,"_192":193,"_194":195,"_151":152,"_196":197,"_198":55},{"_17":44,"_13":16,"_34":42,"_182":142,"_183":-5,"_184":-5,"_185":186,"_187":188,"_189":161,"_190":14,"_191":12},"ctx",{"_175":-5,"_216":301,"_302":303,"_304":305,"_306":55,"_307":55,"_308":55,"_309":46,"_310":-5,"_311":-7,"_312":-7,"_313":49,"_314":55,"_315":55,"_316":-5,"_317":55,"_318":55,"_319":55,"_320":-5},"ENV",{"_272":273,"_274":275,"_276":16,"_277":278,"_279":280,"_281":282,"_283":284,"_285":286,"_287":288,"_289":290,"_291":292,"_293":294,"_295":296,"_297":298,"_299":300},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","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"]