[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_305":306,"_307":308},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_225":-5,"_20":226,"_22":227,"_228":229,"_230":231,"_26":232,"_24":233,"_234":235,"_236":237,"_238":54,"_239":240,"_241":75,"_242":-5,"_243":-5,"_244":245},"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":29,"_30":-5,"_31":32,"_33":34,"_35":-5},"handle","alexwein","name","loopyLettersApp","branchName","townie-2loop","version","path","frontend","project",{"_36":44,"_13":14,"_38":180,"_52":-5,"_181":54,"_55":56,"_182":56,"_183":184,"_185":-5,"_186":187,"_188":189,"_190":75,"_191":75,"_192":-5,"_193":77,"_58":59,"_194":-5,"_195":-5,"_196":-5,"_197":174,"_198":199,"_200":199,"_201":202,"_203":202,"_204":202,"_205":199,"_206":199,"_207":208,"_209":210,"_211":212,"_53":54},"tree",[101,102,103,104,105],"file",{"_36":98,"_13":19,"_66":69,"_68":-5,"_70":71,"_72":73,"_74":75,"_38":99,"_17":77,"_78":96,"_80":-5,"_82":54,"_83":-5,"_18":100},"contents",[61,62,63],"upstream",{"_36":37,"_38":39,"_40":41,"_13":42,"_43":44,"_17":45,"_46":47,"_48":49,"_50":51,"_52":-5,"_53":54,"_55":56,"_57":12,"_58":59,"_60":14},"pull","ahead",39,"behind",4,"envVars","id","c216a542-332e-11f0-81f8-9e149126039e","createdAt",["D",1747493636610],"updatedAt",["D",1762811541464],"main","projectId","c214e284-332e-11f0-81f8-9e149126039e",46,"forkedBranchId","b8984c5a-1c5e-11f0-8f90-569c3dd06744","forkedBranchVersion",64,"lockfileKey","1774455451475-esm.town_v_alexwein_loopyLettersApp@46-main","deletedAt","isOwned",false,"privacy","public","userHandle","orgId","875ed3cd-ae4b-40bb-a45f-6a1970e11689","projectName",{"_36":92,"_13":93,"_66":94,"_68":69,"_70":71,"_72":73,"_74":75,"_38":95,"_17":77,"_78":96,"_80":-5,"_82":54,"_83":-5,"_18":97},{"_36":85,"_13":86,"_66":87,"_68":69,"_70":71,"_72":88,"_74":75,"_38":89,"_17":73,"_78":24,"_80":90,"_82":54,"_83":-5,"_18":91},{"_36":64,"_13":65,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_38":76,"_17":77,"_78":79,"_80":81,"_82":54,"_83":-5,"_18":84},"64cb71de-a5e2-11f0-9a34-0224a6c84d84","index.tsx","fileId","0199ce72-4f99-776a-bfe2-bac8a9618897","parentId","0199ce72-4f99-776a-bfe2-bf876adca822","branchId","64c3dca8-a5e2-11f0-9d2c-0224a6c84d84","branchVersion",1,"latest",true,["D",1760105222054],0,"fileType","script","content","/** @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}","deleted","label",[19,65],"fd9af77a-a5e4-11f0-bc54-0224a6c84d84","index.html","0199ce72-4f99-776a-bfe2-b4313e4ad2f0",21,["D",1760106337429],"\n\n \n Loopy Letters\n \n \n \n \n

\n \n \n \n",[19,86],"64cb6c3e-a5e2-11f0-9a34-0224a6c84d84","components","0199ce72-4f99-776a-bfe2-b0460a9701e5",["D",1760105222054],"directory",[19,93],"64cb7328-a5e2-11f0-9a34-0224a6c84d84",["D",1760105222054],[19],{"_36":164,"_13":165,"_66":166,"_68":-5,"_70":71,"_72":73,"_74":75,"_38":167,"_17":77,"_78":96,"_80":-5,"_82":54,"_83":-5,"_111":168,"_18":169},{"_36":98,"_13":19,"_66":69,"_68":-5,"_70":71,"_72":73,"_74":75,"_38":139,"_17":77,"_78":96,"_80":-5,"_82":54,"_83":-5,"_111":140,"_18":141},{"_36":123,"_13":124,"_66":125,"_68":-5,"_70":71,"_72":73,"_74":75,"_38":126,"_17":77,"_78":96,"_80":-5,"_82":54,"_83":-5,"_111":127,"_18":128},{"_36":114,"_13":115,"_66":116,"_68":-5,"_70":71,"_72":117,"_74":75,"_38":118,"_17":119,"_78":24,"_80":120,"_82":54,"_83":-5,"_111":121,"_18":122},{"_36":106,"_13":107,"_66":108,"_68":-5,"_70":71,"_72":73,"_74":75,"_38":109,"_17":77,"_78":24,"_80":110,"_82":54,"_83":-5,"_111":112,"_18":113},"64cb7a3a-a5e2-11f0-9a34-0224a6c84d84","todos.md","0199ce72-4f99-776a-bfe2-cc6025da4e5d",["D",1760105222054],"## 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",[],[107],"5285cca6-a5e5-11f0-9fb6-0224a6c84d84","README.md","0199ce72-4f99-776a-bfe2-ca34b83ba06b",31,["D",1760106479889],3,"# 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\n#### Classic & Birds\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\n#### 2Loops\n1. Use every letter on the two horseshoes to spell a word.\n2. Letters in the word must be adjacent to each other.\n3. You can go **clockwise** or **counterclockwise** within each horseshoe.\n4. The **ends of each horseshoe** are adjacent to **both ends of the other horseshoe**.\n5. When you find a word, the next word to find appears.\n6. Go fast. Go slow. Enjoy.\n\nThe 2Loops variant features two horseshoe-shaped letter arrangements positioned side by side. Unlike the classic donut shape, the horseshoes have special connectivity rules: the end letters of each horseshoe can connect to both end letters of the opposite horseshoe, creating unique word-forming possibilities.\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",[],[115],"64cb77a6-a5e2-11f0-9a34-0224a6c84d84","shared","0199ce72-4f99-776a-bfe2-c7add4a5e0e3",["D",1760105222054],[129],[124],{"_36":130,"_13":131,"_66":132,"_68":125,"_70":71,"_72":133,"_74":75,"_38":134,"_17":135,"_78":79,"_80":136,"_82":54,"_83":-5,"_111":137,"_18":138},"114f996e-a5e6-11f0-82aa-0224a6c84d84","gameLogic.ts","0199ce72-4f99-776a-bfe2-c035581f7ac2",37,["D",1760106799986],14,"// 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 };\nexport const CENTER_2LOOPS = { x: 200, y: 150 }; // Wider center for 2Loops\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\n// 2Loops specific horseshoe segment creation\nexport const createHorseshoeSegment = (\n startAngle: number, \n endAngle: number, \n index: number, \n selection: number[],\n center: { x: number; y: 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\n// 2Loops specific point detection\nexport const getLetterIndexFromPoint2Loops = (\n point: { x: number; y: number }, \n currentWordLength: number,\n innerRadius: number = INNER_RADIUS\n) => {\n const halfLength = currentWordLength / 2;\n const leftCenter = { x: CENTER_2LOOPS.x - 60, y: CENTER_2LOOPS.y };\n const rightCenter = { x: CENTER_2LOOPS.x + 60, y: CENTER_2LOOPS.y };\n \n // Check left horseshoe first\n const leftDx = point.x - leftCenter.x;\n const leftDy = point.y - leftCenter.y;\n const leftDistance = Math.sqrt(leftDx * leftDx + leftDy * leftDy);\n \n if (leftDistance >= innerRadius && leftDistance <= OUTER_RADIUS) {\n let angle = Math.atan2(leftDy, leftDx);\n if (angle < 0) angle += 2 * Math.PI;\n \n // Map angle to horseshoe segment (only top half, from -π/2 to π/2)\n const adjustedAngle = angle + Math.PI/2;\n if (adjustedAngle >= 0 && adjustedAngle <= Math.PI) {\n const segmentAngle = Math.PI / halfLength;\n const index = Math.floor(adjustedAngle / segmentAngle);\n if (index >= 0 && index < halfLength) {\n return index;\n }\n }\n }\n \n // Check right horseshoe\n const rightDx = point.x - rightCenter.x;\n const rightDy = point.y - rightCenter.y;\n const rightDistance = Math.sqrt(rightDx * rightDx + rightDy * rightDy);\n \n if (rightDistance >= innerRadius && rightDistance <= OUTER_RADIUS) {\n let angle = Math.atan2(rightDy, rightDx);\n if (angle < 0) angle += 2 * Math.PI;\n \n // Map angle to horseshoe segment (only top half, from -π/2 to π/2)\n const adjustedAngle = angle + Math.PI/2;\n if (adjustedAngle >= 0 && adjustedAngle <= Math.PI) {\n const segmentAngle = Math.PI / halfLength;\n const index = Math.floor(adjustedAngle / segmentAngle);\n if (index >= 0 && index < halfLength) {\n return halfLength + index;\n }\n }\n }\n \n return -1;\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\n// 2Loops specific adjacency logic\nexport const isAdjacent2Loops = (index1: number, index2: number, wordLength: number): boolean => {\n // For 2Loops, we have two horseshoes with special adjacency rules\n const halfLength = wordLength / 2;\n \n // Normal adjacency within each horseshoe\n const diff = Math.abs(index1 - index2);\n if (diff === 1) return true;\n \n // Special adjacency between the ends of the horseshoes\n // Left horseshoe: indices 0 to halfLength-1\n // Right horseshoe: indices halfLength to wordLength-1\n // The ends are: 0, halfLength-1 (left) and halfLength, wordLength-1 (right)\n \n const leftEnds = [0, halfLength - 1];\n const rightEnds = [halfLength, wordLength - 1];\n \n // Check if both indices are ends and from different horseshoes\n if (leftEnds.includes(index1) && rightEnds.includes(index2)) return true;\n if (rightEnds.includes(index1) && leftEnds.includes(index2)) return true;\n \n return false;\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}",[],[124,131],["D",1760105222054],[142,143,144],[19],{"_36":92,"_13":93,"_66":94,"_68":69,"_70":71,"_72":73,"_74":75,"_38":151,"_17":77,"_78":96,"_80":-5,"_82":54,"_83":-5,"_111":152,"_18":153},{"_36":85,"_13":86,"_66":87,"_68":69,"_70":71,"_72":88,"_74":75,"_38":148,"_17":73,"_78":24,"_80":90,"_82":54,"_83":-5,"_111":149,"_18":150},{"_36":64,"_13":65,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_38":145,"_17":77,"_78":79,"_80":81,"_82":54,"_83":-5,"_111":146,"_18":147},["D",1760105222054],[],[19,65],["D",1760106337429],[],[19,86],["D",1760105222054],[154],[19,93],{"_36":155,"_13":156,"_66":157,"_68":94,"_70":71,"_72":158,"_74":75,"_38":159,"_17":160,"_78":79,"_80":161,"_82":54,"_83":-5,"_111":162,"_18":163},"2d94be6e-a5e7-11f0-819e-0224a6c84d84","GameApp.tsx","0199ce72-4f99-776a-bfe2-af4a23c1e2ef",40,["D",1760107276911],18,"/** @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 createHorseshoeSegment,\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 const starCenter = gameType === \"2loops\" ? CENTER_2LOOPS : CENTER;\n setStars(prevStars => [...prevStars, { x: starCenter.x, y: starCenter.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 {gameType === \"2loops\" ? (\n // Render 2Loops horseshoes\n letters.split(\"\").map((letter, index) => {\n const halfLength = wordLength / 2;\n const isLeftHorseshoe = index < halfLength;\n \n if (isLeftHorseshoe) {\n // Left horseshoe\n const segmentAngle = Math.PI / halfLength;\n const startAngle = index * segmentAngle - Math.PI/2;\n const endAngle = (index + 1) * segmentAngle - Math.PI/2;\n const midAngle = (startAngle + endAngle) / 2;\n const leftCenter = { x: CENTER.x - 60, y: CENTER.y };\n const textRadius = (innerRadius + 1.1 * OUTER_RADIUS) / 2;\n const textX = leftCenter.x + textRadius * Math.cos(midAngle);\n const textY = leftCenter.y + textRadius * Math.sin(midAngle);\n\n const { path, isSelected } = createHorseshoeSegment(startAngle, endAngle, index, selection, leftCenter, innerRadius);\n\n return (\n \n \n \n {letter}\n \n \n );\n } else {\n // Right horseshoe\n const localIndex = index - halfLength;\n const segmentAngle = Math.PI / halfLength;\n const startAngle = localIndex * segmentAngle - Math.PI/2;\n const endAngle = (localIndex + 1) * segmentAngle - Math.PI/2;\n const midAngle = (startAngle + endAngle) / 2;\n const rightCenter = { x: CENTER.x + 60, y: CENTER.y };\n const textRadius = (innerRadius + 1.1 * OUTER_RADIUS) / 2;\n const textX = rightCenter.x + textRadius * Math.cos(midAngle);\n const textY = rightCenter.y + textRadius * Math.sin(midAngle);\n\n const { path, isSelected } = createHorseshoeSegment(startAngle, endAngle, index, selection, rightCenter, innerRadius);\n\n return (\n \n \n \n {letter}\n \n \n );\n }\n })\n ) : (\n // Render regular donut\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 \n {stars.map((star) => (\n \n ))}\n \n

\n );\n}",[],[19,93,156],"64cb5172-a5e2-11f0-9a34-0224a6c84d84","backend","0199ce72-4f99-776a-bfe2-aa16917c9756",["D",1760105222054],[170],[165],{"_36":171,"_13":172,"_66":173,"_68":166,"_70":71,"_72":174,"_74":75,"_38":175,"_17":73,"_78":176,"_80":177,"_82":54,"_83":-5,"_111":178,"_18":179},"15d2e0b0-a5e4-11f0-aeda-0224a6c84d84","index.ts","0199ce72-4f99-776a-bfe2-a54aed132c0c",2,["D",1760105948564],"http","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// 2Loops game route\napp.get(\"/2loops\", 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;",[],[165,172],["D",1747493636610],"legacyEnvVars","httpPrivacy","description","find big words with a small gameplay loop","imageUrl","userId","b85dcfbf-50f1-466c-9e2b-28ac90e0dd23","pinnedFileId","74453af8-3807-11f0-93cc-9e149126039e","pinPreview","pinMigrated","screenshotVersion","likeCount","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_224":220},"org",{"_11":12,"_217":218,"_219":220,"_186":187,"_221":222,"_223":54},"branch",{"_17":158,"_13":16,"_36":71,"_43":44,"_46":37,"_48":213,"_214":56,"_215":44,"_216":59,"_60":14,"_57":12},42,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","Alex Wein","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ycjh6emNHdk9mMnY5djU3OFZBbEdleGhQZFAifQ","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":44,"_13":14,"_38":301,"_52":-5,"_181":54,"_55":56,"_182":56,"_183":184,"_185":-5,"_186":187,"_188":189,"_190":75,"_191":75,"_192":-5,"_193":77,"_58":59,"_194":-5,"_195":-5,"_196":-5,"_197":174,"_198":199,"_200":199,"_201":202,"_203":202,"_204":202,"_205":199,"_206":199,"_207":302,"_209":303,"_211":304,"_53":54},[268,270,275,277,278],"files",[268,269,270,271,272,273,274,275,276,277,278],"counts",{"_258":77,"_259":260,"_261":77,"_35":262,"_263":264},[252,253,254],{"_36":98,"_13":19,"_66":69,"_68":-5,"_70":71,"_72":73,"_74":75,"_38":99,"_17":77,"_78":96,"_80":-5,"_82":54,"_83":-5,"_18":251},"upstreamProject",{"_36":248,"_13":249,"_183":-5,"_185":-5,"_55":56,"_207":250},"upstreamBranch",{"_36":37,"_38":246,"_40":247,"_13":42,"_43":44,"_17":45,"_46":47,"_48":49,"_50":51,"_52":-5,"_53":54,"_55":56,"_57":12,"_58":59,"_60":14},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1747493636610],["D",1762811541464],"b897eb5c-1c5e-11f0-8f90-569c3dd06744","loopyLetters",{"_11":12,"_224":220},[19],{"_36":92,"_13":93,"_66":94,"_68":69,"_70":71,"_72":73,"_74":75,"_38":95,"_17":77,"_78":96,"_80":-5,"_82":54,"_83":-5,"_18":257},{"_36":85,"_13":86,"_66":87,"_68":69,"_70":71,"_72":88,"_74":75,"_38":89,"_17":73,"_78":24,"_80":90,"_82":54,"_83":-5,"_18":256},{"_36":64,"_13":65,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_38":76,"_17":77,"_78":79,"_80":81,"_82":54,"_83":-5,"_18":255},[19,65],[19,86],[19,93],"pulls","branches",5,"forks",{"_265":77,"_267":77},"connections",{"_265":77,"_266":77},"count","unfilledCount","emptyCount",{"_36":164,"_13":165,"_66":166,"_68":-5,"_70":71,"_72":73,"_74":75,"_38":167,"_17":77,"_78":96,"_80":-5,"_82":54,"_83":-5,"_111":299,"_18":300},{"_36":171,"_13":172,"_66":173,"_68":166,"_70":71,"_72":174,"_74":75,"_38":175,"_17":73,"_78":176,"_80":177,"_82":54,"_83":-5,"_111":297,"_18":298},{"_36":98,"_13":19,"_66":69,"_68":-5,"_70":71,"_72":73,"_74":75,"_38":139,"_17":77,"_78":96,"_80":-5,"_82":54,"_83":-5,"_111":295,"_18":296},{"_36":92,"_13":93,"_66":94,"_68":69,"_70":71,"_72":73,"_74":75,"_38":151,"_17":77,"_78":96,"_80":-5,"_82":54,"_83":-5,"_111":293,"_18":294},{"_36":155,"_13":156,"_66":157,"_68":94,"_70":71,"_72":158,"_74":75,"_38":159,"_17":160,"_78":79,"_80":161,"_82":54,"_83":-5,"_111":291,"_18":292},{"_36":85,"_13":86,"_66":87,"_68":69,"_70":71,"_72":88,"_74":75,"_38":148,"_17":73,"_78":24,"_80":90,"_82":54,"_83":-5,"_111":289,"_18":290},{"_36":64,"_13":65,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_38":145,"_17":77,"_78":79,"_80":81,"_82":54,"_83":-5,"_111":287,"_18":288},{"_36":123,"_13":124,"_66":125,"_68":-5,"_70":71,"_72":73,"_74":75,"_38":126,"_17":77,"_78":96,"_80":-5,"_82":54,"_83":-5,"_111":285,"_18":286},{"_36":130,"_13":131,"_66":132,"_68":125,"_70":71,"_72":133,"_74":75,"_38":134,"_17":135,"_78":79,"_80":136,"_82":54,"_83":-5,"_111":283,"_18":284},{"_36":114,"_13":115,"_66":116,"_68":-5,"_70":71,"_72":117,"_74":75,"_38":118,"_17":119,"_78":24,"_80":120,"_82":54,"_83":-5,"_111":281,"_18":282},{"_36":106,"_13":107,"_66":108,"_68":-5,"_70":71,"_72":73,"_74":75,"_38":109,"_17":77,"_78":24,"_80":110,"_82":54,"_83":-5,"_111":279,"_18":280},[],[107],[],[115],[],[124,131],[276],[124],[],[19,65],[],[19,86],[],[19,93,156],[272],[19,93],[271,273,274],[19],[],[165,172],[269],[165],["D",1747493636610],{"_11":12,"_224":220},{"_11":12,"_217":218,"_219":220,"_186":187,"_221":222,"_223":54},{"_17":158,"_13":16,"_36":71,"_43":44,"_46":37,"_48":213,"_214":56,"_215":44,"_216":59,"_60":14,"_57":12},"ctx",{"_207":-5,"_243":338,"_339":340,"_341":342,"_343":54,"_344":54,"_345":54,"_346":75,"_347":-5,"_348":-7,"_349":-7,"_350":77,"_351":54,"_352":54,"_353":-5,"_354":54,"_355":54,"_356":54,"_357":-5},"ENV",{"_309":310,"_311":312,"_313":42,"_314":315,"_316":317,"_318":319,"_320":321,"_322":323,"_324":325,"_326":327,"_328":329,"_330":331,"_332":333,"_334":335,"_336":337},"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"]