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

\n {showModal === \"instructions\" && }\n {showModal === \"gameOver\" && (\n \n )}\n

Loopy Letters: Birds

\n a ~~word~~ bird game by Alex Wein\n

Birds Found: {wordCount}/{wordlist.length}

{Math.round(elapsedTime)} s

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

- {selectedWord} -

\n \n

\n );\n}",[],[185,192,198],{"_104":207,"_95":208,"_156":209,"_158":193,"_159":138,"_160":187,"_162":22,"_106":210,"_100":32,"_164":202,"_166":211,"_167":22,"_168":-5,"_169":212,"_98":213},"ad42adf4-332f-11f0-9152-9e149126039e","GameCanvas.tsx","ad42aec6-332f-11f0-9152-9e149126039e",["D",1747494031172],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useRef } from \"https://esm.sh/react@18.2.0\";\nimport { Point, Star } from \"../../shared/utils\";\n\ninterface GameCanvasProps {\n svgRef: React.RefObject;\n displayWord: string;\n currentWord: string;\n selection: number[];\n stars: Star[];\n center: Point;\n outerRadius: number;\n innerRadius: number;\n handlePointerDown: (event: React.PointerEvent) => void;\n handlePointerMove: (event: React.PointerEvent) => void;\n handlePointerUp: () => void;\n createDonutSegment: (startAngle: number, endAngle: number, index: number) => JSX.Element;\n createStar: (cx: number, cy: number, spikes: number, outerRadius: number, innerRadius: number, fading: boolean) => JSX.Element;\n lettersOnlyFn?: (str: string) => string;\n imgUrl?: string;\n}\n\nexport function GameCanvas({\n svgRef,\n displayWord,\n currentWord,\n selection,\n stars,\n center,\n outerRadius,\n innerRadius,\n handlePointerDown,\n handlePointerMove,\n handlePointerUp,\n createDonutSegment,\n createStar,\n lettersOnlyFn = (str) => str,\n imgUrl\n}: GameCanvasProps) {\n const wordToDisplay = lettersOnlyFn(displayWord);\n const wordLength = lettersOnlyFn(currentWord).length;\n\n return (\n

\n \n {imgUrl && (\n <>\n \n \n \n \n \n \n \n )}\n \n {wordToDisplay.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 * outerRadius) / 2;\n const textX = center.x + textRadius * Math.cos(midAngle);\n const textY = center.y + textRadius * Math.sin(midAngle);\n\n return (\n \n {createDonutSegment(startAngle, endAngle, index)}\n \n {letter}\n \n \n );\n })}\n \n {stars.map((star) => createStar(star.x, star.y, 5, 15, 7.5, star.fading))}\n \n

\n );\n}",[],[185,192,208],{"_104":215,"_95":216,"_156":217,"_158":193,"_159":138,"_160":101,"_162":22,"_106":218,"_100":219,"_164":202,"_166":220,"_167":22,"_168":-5,"_169":221,"_98":222},"41e9b29a-3330-11f0-8b3f-9e149126039e","MainGame.tsx","d08e2630-332f-11f0-884a-9e149126039e",["D",1747494280569],1,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { GameCanvas } from \"./GameCanvas\";\nimport { InstructionsModal, GameOverModal } from \"./Modals\";\nimport { \n isReverseSubstring, \n tryReverse, \n randomRotate, \n GAME_CONSTANTS, \n FALLBACK_WORDLISTS,\n Star,\n Point\n} from \"https://esm.town/v/alexwein/loopyLettersApp/shared/utils\";\n\nexport function MainGame() {\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 svgRef = useRef(null);\n const timerRef = useRef(null);\n\n const { OUTER_RADIUS, INNER_RADIUS, CENTER } = GAME_CONSTANTS.MAIN;\n\n useEffect(() => {\n fetch(\"/api/words\")\n .then(response => response.json())\n .then(data => {\n setWordlist(data);\n setCurrentWord(data[0]);\n setIsLoading(false);\n })\n .catch(error => {\n console.error(\"Error fetching words:\", error);\n setWordlist(FALLBACK_WORDLISTS.MAIN);\n setCurrentWord(FALLBACK_WORDLISTS.MAIN[0]);\n setIsLoading(false);\n });\n }, []);\n\n useEffect(() => {\n setDisplayWord(randomRotate(tryReverse(currentWord)));\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 = window.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 isValid = (str: string) => str === currentWord;\n\n const handlePointerDown = (event: React.PointerEvent) => {\n if (!gameStarted) return;\n const point = getRelativeCoordinates(event);\n const index = getLetterIndexFromPoint(point);\n if (index !== -1) {\n setSelectedWord(displayWord[index]);\n setSelection([index]);\n }\n };\n\n const handlePointerMove = (event: React.PointerEvent) => {\n if (!gameStarted) return;\n if (selection.length === 0) return;\n const point = getRelativeCoordinates(event);\n const index = getLetterIndexFromPoint(point);\n if (index !== -1 && index !== selection[selection.length - 1] && !selection.includes(index)) {\n if (isAdjacent(index, selection[selection.length - 1])) {\n const newSelection = [...selection, index];\n setSelection(newSelection);\n setSelectedWord(newSelection.map(i => displayWord[i]).join(\"\"));\n }\n }\n };\n\n const handlePointerUp = () => {\n if (!gameStarted) return;\n if (selectedWord && isReverseSubstring(selectedWord, displayWord) && 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([selectedWord]);\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 setCurrentWord(wordlist[nextIndex]);\n }\n }\n setSelectedWord(\"\");\n setSelection([]);\n };\n\n const getRelativeCoordinates = (event: React.PointerEvent): Point => {\n const svg = svgRef.current;\n if (!svg) return { x: 0, y: 0 };\n \n const pt = svg.createSVGPoint();\n pt.x = event.clientX;\n pt.y = event.clientY;\n return pt.matrixTransform(svg.getScreenCTM()?.inverse() || new DOMMatrix());\n };\n\n const getLetterIndexFromPoint = (point: Point): number => {\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 < INNER_RADIUS || 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) / currentWord.length;\n return Math.floor(angle / segmentAngle) % currentWord.length;\n };\n\n const isAdjacent = (index1: number, index2: number): boolean => {\n const diff = Math.abs(index1 - index2);\n return diff === 1 || diff === currentWord.length - 1;\n };\n\n const createDonutSegment = (startAngle: number, endAngle: number, index: number): JSX.Element => {\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 + INNER_RADIUS * Math.cos(endAngle);\n const startInnerY = CENTER.y + INNER_RADIUS * Math.sin(endAngle);\n const endInnerX = CENTER.x + INNER_RADIUS * Math.cos(startAngle);\n const endInnerY = CENTER.y + INNER_RADIUS * 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 ${INNER_RADIUS} ${INNER_RADIUS} 0 ${largeArcFlag} 0 ${endInnerX} ${endInnerY}`,\n \"Z\",\n ].join(\" \");\n\n return ;\n };\n\n const createStar = (cx: number, cy: number, spikes = 5, outerRadius = 20, innerRadius = 10, fading = false): JSX.Element => {\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 ;\n };\n\n const startGame = () => {\n setShowInstructionsModal(false);\n setGameStarted(true);\n };\n\n const resetGame = () => {\n setIsLoading(true);\n fetch(\"/api/words\")\n .then(response => response.json())\n .then(data => {\n setWordlist(data);\n setCurrentWordIndex(0);\n setCurrentWord(data[0]);\n setDisplayWord(\"\");\n setSelectedWord(\"\");\n setSelection([]);\n setStars([]);\n setFoundWords([]);\n setWordCount(0);\n setShowGameOverModal(false);\n setGameStarted(true);\n setElapsedTime(0);\n setIsLoading(false);\n })\n .catch(error => {\n console.error(\"Error fetching words:\", error);\n setWordlist(FALLBACK_WORDLISTS.MAIN);\n setCurrentWordIndex(0);\n setCurrentWord(FALLBACK_WORDLISTS.MAIN[0]);\n setDisplayWord(\"\");\n setSelectedWord(\"\");\n setSelection([]);\n setStars([]);\n setFoundWords([]);\n setWordCount(0);\n setShowGameOverModal(false);\n setGameStarted(true);\n setElapsedTime(0);\n setIsLoading(false);\n });\n };\n\n if (isLoading) {\n return

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

\n {showInstructionsModal && }\n {showGameOverModal && }\n

Loopy Letters

a word game by Alex Wein

Words Found: {wordCount}/{wordlist.length}

{Math.round(elapsedTime)} s

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

- {selectedWord} -

\n \n

\n );\n}",[],[185,192,216],{"_104":224,"_95":225,"_156":226,"_158":193,"_159":138,"_160":227,"_162":22,"_106":228,"_100":32,"_164":202,"_166":229,"_167":22,"_168":-5,"_169":230,"_98":231},"b746225e-332f-11f0-b587-9e149126039e","Modals.tsx","b7462326-332f-11f0-b587-9e149126039e",14,["D",1747494047975],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { WordItem } from \"../../shared/utils\";\n\ninterface InstructionsModalProps {\n onClose: () => void;\n}\n\nexport function InstructionsModal({ onClose }: InstructionsModalProps) {\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 \n

\n );\n}\n\ninterface GameOverModalProps {\n elapsedTime: number;\n onPlayAgain: () => void;\n}\n\nexport function GameOverModal({ elapsedTime, onPlayAgain }: GameOverModalProps) {\n return (\n

Game Over!

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

\n \n

\n );\n}\n\ninterface BirdsInstructionsModalProps {\n onClose: () => void;\n}\n\nexport function BirdsInstructionsModal({ onClose }: BirdsInstructionsModalProps) {\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\ninterface BirdsGameOverModalProps {\n elapsedTime: number;\n onPlayAgain: () => void;\n wordlist: WordItem[];\n}\n\nexport function BirdsGameOverModal({ elapsedTime, onPlayAgain, wordlist }: BirdsGameOverModalProps) {\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}",[],[185,192,225],[185,192],{"_104":234,"_95":235,"_156":236,"_158":186,"_159":138,"_160":237,"_162":22,"_106":238,"_100":32,"_164":202,"_166":239,"_167":22,"_168":-5,"_169":240,"_98":241},"f344e5b0-332f-11f0-a2cd-9e149126039e","birds.tsx","f344e664-332f-11f0-a2cd-9e149126039e",19,["D",1747494148631],"/** @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 { BirdsGame } from \"./components/BirdsGame\";\n\nfunction App() {\n return ;\n}\n\n// Client-side rendering\nif (typeof document !== \"undefined\") {\n createRoot(document.getElementById(\"root\")!).render();\n}\n\nexport default App;",[],[185,235],{"_104":243,"_95":244,"_156":245,"_158":186,"_159":138,"_160":246,"_162":22,"_106":247,"_100":32,"_164":248,"_166":249,"_167":22,"_168":-5,"_169":250,"_98":251},"ec6f1da0-332f-11f0-b307-9e149126039e","index.html","ec6f1e54-332f-11f0-b307-9e149126039e",17,["D",1747494137161],"file","\n\n\n \n \n Loopy Letters\n\n\n

\n \n\n",[],[185,244],{"_104":253,"_95":254,"_156":255,"_158":186,"_159":138,"_160":256,"_162":22,"_106":257,"_100":32,"_164":202,"_166":258,"_167":22,"_168":-5,"_169":259,"_98":260},"efed1360-332f-11f0-b721-9e149126039e","main.tsx","efed141e-332f-11f0-b721-9e149126039e",18,["D",1747494143022],"/** @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 { MainGame } from \"./components/MainGame\";\n\nfunction App() {\n return ;\n}\n\n// Client-side rendering\nif (typeof document !== \"undefined\") {\n createRoot(document.getElementById(\"root\")!).render();\n}\n\nexport default App;",[],[185,254],[185],{"_104":263,"_95":264,"_156":265,"_158":-5,"_159":138,"_160":266,"_162":22,"_106":267,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":268,"_98":286},"98f4cf1c-332f-11f0-9982-9e149126039e","shared","5d04c50b-6131-498e-bf1e-9723a9213c84",11,["D",1747493997109],[269,278],{"_104":270,"_95":271,"_156":272,"_158":265,"_159":138,"_160":273,"_162":22,"_106":274,"_100":32,"_164":202,"_166":275,"_167":22,"_168":-5,"_169":276,"_98":277},"a397a354-332f-11f0-898b-9e149126039e","styles.ts","a397a3fe-332f-11f0-898b-9e149126039e",12,["D",1747494014955],"// Shared styles for Loopy Letters game\n\nexport const baseStyles = `\nbody, html {\n margin: 0;\n padding: 0;\n font-family: system-ui, sans-serif;\n height: 100%;\n overscroll-behavior: none;\n}\n\n#root {\n height: 100%;\n}\n\n.game-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n max-width: 100%;\n padding: 10px;\n box-sizing: border-box;\n height: 100vh;\n max-height: 100vh;\n overflow: hidden;\n}\n\n.game-header {\n width: 100%;\n background-color: #333;\n color: white;\n text-align: center;\n padding: 10px 0;\n margin-bottom: 10px;\n flex-shrink: 0;\n}\n\n.game-header h1 {\n margin: 0;\n font-size: 24px;\n}\n\n.game-stats {\n display: flex;\n justify-content: space-between;\n width: 100%;\n padding: 0 20px;\n margin-bottom: 10px;\n flex-shrink: 0;\n}\n\n.word-count, .timer {\n font-weight: bold;\n}\n\n.last-word {\n display: flex;\n gap: 10px;\n}\n\n.found-word {\n background-color: #e0e0e0;\n padding: 5px 10px;\n border-radius: 5px;\n}\n\n.svg-container {\n flex-grow: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n max-height: 60vh;\n overflow: hidden;\n}\n\nsvg {\n width: 100%;\n max-width: 300px;\n max-height: 300px;\n touch-action: none;\n}\n\n.donut path {\n fill: #fff;\n stroke: #333;\n stroke-width: 2;\n}\n\n.donut path.selected {\n fill: #ffd700;\n}\n\ntext {\n font-size: 24px;\n user-select: none;\n}\n\n.word-display {\n text-align: center;\n height: 50px;\n flex-shrink: 0;\n}\n\n.star {\n fill: gold;\n stroke: goldenrod;\n stroke-width: 1;\n opacity: 1;\n transition: opacity 0.3s ease-out;\n}\n\n.star.fading {\n opacity: 0;\n}\n\n.modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n}\n\n.modal-content {\n background-color: white;\n padding: 20px;\n border-radius: 10px;\n max-width: 90%;\n width: 400px;\n text-align: left;\n}\n\n.modal-content h2, .modal-content h3 {\n margin-top: 0;\n text-align: center;\n}\n\n.modal-content ol {\n padding-left: 20px;\n}\n\n.modal-content button {\n width: 100%;\n padding: 10px;\n background-color: #333;\n color: white;\n border: none;\n border-radius: 5px;\n margin-top: 20px;\n cursor: pointer;\n}\n\n@media (max-height: 600px) {\n .game-container {\n padding: 5px;\n }\n \n .svg-container {\n max-height: 50vh;\n }\n \n svg {\n max-width: 250px;\n max-height: 250px;\n }\n}\n`;\n\nexport const birdsStyles = `\n.game-header {\n padding: 5px 0;\n}\n\n.game-header h1 {\n font-size: 20px;\n margin-bottom: 2px;\n}\n\n.wordlist-grid {\n display: grid;\n grid-template-columns: auto auto;\n gap: 1rem;\n align-items: center;\n}\n\n.wordlist-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n`;",[],[264,271],{"_104":279,"_95":280,"_156":281,"_158":265,"_159":138,"_160":266,"_162":22,"_106":282,"_100":32,"_164":202,"_166":283,"_167":22,"_168":-5,"_169":284,"_98":285},"98f4aa82-332f-11f0-9982-9e149126039e","utils.ts","98f4b126-332f-11f0-9982-9e149126039e",["D",1747493997109],"// Shared utility functions for Loopy Letters game\n\n/**\n * Checks if a substring exists in a board string, either forward or backward\n */\nexport const isReverseSubstring = (substr: string, board: string): boolean =>\n (board + board).includes(substr) || (board + board).includes(substr.split(\"\").reverse().join(\"\"));\n\n/**\n * Randomly reverses a string with 50% probability\n */\nexport const tryReverse = (str: string): string => {\n return Math.random() < 0.5 ? str.split(\"\").reverse().join(\"\") : str;\n};\n\n/**\n * Randomly rotates a string by shifting characters\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\n/**\n * Removes non-alphabetic characters from a string\n */\nexport const lettersOnly = (str: string): string => str.replace(/[^a-zA-Z]/g, \"\");\n\n/**\n * Constants for the game\n */\nexport const GAME_CONSTANTS = {\n MAIN: {\n OUTER_RADIUS: 146,\n INNER_RADIUS: 60,\n CENTER: { x: 150, y: 150 }\n },\n BIRDS: {\n OUTER_RADIUS: 146,\n INNER_RADIUS: 75,\n CENTER: { x: 150, y: 150 }\n }\n};\n\n/**\n * Fallback wordlists in case the database is unavailable\n */\nexport const FALLBACK_WORDLISTS = {\n MAIN: [\n \"WATERFALL\",\n \"UNDERGROUND\",\n \"CONSECRATION\",\n \"DECONSECRATION\",\n \"PANDAS\",\n \"RATION\",\n \"ITERATION\",\n \"REITERATE\",\n ],\n BIRDS: [\"WATERFALL\"]\n};\n\n/**\n * Types for the game\n */\nexport interface Point {\n x: number;\n y: number;\n}\n\nexport interface Star extends Point {\n key: number;\n fading: boolean;\n}\n\nexport interface WordItem {\n word: string;\n img_url?: string;\n url?: string;\n}",[],[264,280],[264],{"_104":288,"_95":289,"_156":290,"_158":-5,"_159":138,"_160":291,"_162":22,"_106":292,"_100":219,"_164":248,"_166":293,"_167":22,"_168":-5,"_169":294,"_98":295},"07fae694-3330-11f0-9f63-9e149126039e","README.md","602f2730-7466-4f4f-8567-38928f6b9372",21,["D",1747494183376],"# Loopy Letters\n\nA word game with a small gameplay loop. Plays best on your phone.\n\nIt uses random words from the Wordnik word game list, as shared on [their Github page](https://github.com/wordnik/wordlist),\nwhich has a lot of stuff on there I myself wouldn't really consider a word. Sorry about that.\n\n## Game Versions\n\n- **Main Game**: Available at the root path `/`\n- **Birds Version**: Available at `/birds` - find bird names with images!\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## Project Structure\n\n```\n├── backend/ # Hono server and API routes\n├── frontend/ # React components and UI\n│ ├── components/ # Shared React components\n│ ├── main.tsx # Main game entry point\n│ └── birds.tsx # Birds game entry point\n└── shared/ # Shared utilities and styles\n```\n\n## Technologies Used\n\n- React 18.2.0\n- Hono for backend routing\n- SQLite for word storage",[],[289],{"_104":297,"_95":235,"_156":298,"_158":-5,"_159":138,"_160":219,"_162":22,"_106":299,"_100":32,"_164":178,"_166":300,"_167":22,"_168":-5,"_169":301,"_98":302},"c2186a76-332e-11f0-81f8-9e149126039e","3122890d-0574-4c2a-8a24-5bec89fb89c5",["D",1747493636610],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nconst OUTER_RADIUS = 146;\nconst INNER_RADIUS = 75;\nconst CENTER = { x: 150, y: 150 };\n\nconst FALLBACK_WORDLIST = [\"WATERFALL\"];\n\nconst isReverseSubstring = (substr, board) =>\n (board + board).includes(substr) || (board + board).includes(substr.split(\"\").reverse().join(\"\"));\n\nconst tryReverse = (str) => Math.random() < 0.5 ? str.split(\"\").reverse().join(\"\") : str;\nconst randomRotate = (str) => {\n const i = Math.floor(Math.random() * str.length);\n return str.slice(i) + str.slice(0, i);\n};\nconst lettersOnly = (str) => str.replace(/[^a-zA-Z]/g, \"\");\n\nfunction Modal({ type, onClose, elapsedTime, wordlist }) {\n if (type === \"instructions\") {\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 } else if (type === \"gameOver\") {\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 return null;\n}\n\nfunction App() {\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 [showModal, setShowModal] = useState(\"instructions\");\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 useEffect(() => {\n fetchWords();\n }, []);\n\n useEffect(() => {\n setDisplayWord(randomRotate(tryReverse(currentWord)));\n }, [currentWord]);\n\n useEffect(() => {\n handleStarAnimation();\n }, [stars]);\n\n useEffect(() => {\n handleGameTimer();\n return () => {\n if (timerRef.current) clearInterval(timerRef.current);\n };\n }, [gameStarted, currentWordIndex, wordlist.length]);\n\n useEffect(() => {\n if (!isLoading && currentWordIndex === wordlist.length) {\n if (timerRef.current) clearInterval(timerRef.current);\n setShowModal(\"gameOver\");\n }\n }, [currentWordIndex, wordlist.length, isLoading]);\n\n const fetchWords = () => {\n fetch(\"/words\")\n .then(response => response.json())\n .then(data => {\n setWordlist(data);\n setCurrentWord(data[0].word);\n setImgUrl(data[0].img_url);\n setIsLoading(false);\n })\n .catch(error => {\n console.error(\"Error fetching words:\", error);\n setWordlist(FALLBACK_WORDLIST);\n setCurrentWord(FALLBACK_WORDLIST[0]);\n setIsLoading(false);\n });\n };\n\n const handleStarAnimation = () => {\n const timeout = setTimeout(() => {\n setStars(prevStars => prevStars.map(star => ({ ...star, fading: true })));\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 };\n\n const handleGameTimer = () => {\n if (gameStarted && currentWordIndex < wordlist.length) {\n timerRef.current = setInterval(() => {\n setElapsedTime(prev => prev + 1);\n }, 1000);\n }\n };\n\n const isValid = (str) => str === lettersOnly(currentWord);\n\n const handlePointerDown = (event) => {\n if (!gameStarted) return;\n const point = getRelativeCoordinates(event);\n const index = getLetterIndexFromPoint(point);\n if (index !== -1) {\n setSelectedWord(lettersOnly(displayWord)[index]);\n setSelection([index]);\n }\n };\n\n const handlePointerMove = (event) => {\n if (!gameStarted || selection.length === 0) return;\n const point = getRelativeCoordinates(event);\n const index = getLetterIndexFromPoint(point);\n if (index !== -1 && index !== selection[selection.length - 1] && !selection.includes(index)) {\n if (isAdjacent(index, selection[selection.length - 1])) {\n const newSelection = [...selection, index];\n setSelection(newSelection);\n setSelectedWord(newSelection.map(i => lettersOnly(displayWord)[i]).join(\"\"));\n }\n }\n };\n\n const handlePointerUp = () => {\n if (!gameStarted) return;\n if (selectedWord && isReverseSubstring(selectedWord, lettersOnly(displayWord)) && isValid(selectedWord)) {\n setStars(prevStars => [...prevStars, { x: CENTER.x, y: CENTER.y, key: Date.now(), fading: false }]);\n setFoundWords([currentWord]);\n setWordCount(prev => prev + 1);\n const nextIndex = currentWordIndex + 1;\n setCurrentWordIndex(nextIndex);\n if (nextIndex < wordlist.length) {\n setCurrentWord(wordlist[nextIndex].word);\n setImgUrl(wordlist[nextIndex].img_url);\n }\n }\n setSelectedWord(\"\");\n setSelection([]);\n };\n\n const getRelativeCoordinates = (event) => {\n const svg = svgRef.current;\n const pt = svg.createSVGPoint();\n pt.x = event.clientX;\n pt.y = event.clientY;\n return pt.matrixTransform(svg.getScreenCTM().inverse());\n };\n\n const getLetterIndexFromPoint = (point) => {\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 < INNER_RADIUS || 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) / lettersOnly(currentWord).length;\n return Math.floor(angle / segmentAngle) % lettersOnly(currentWord).length;\n };\n\n const isAdjacent = (index1, index2) => {\n const diff = Math.abs(index1 - index2);\n return diff === 1 || diff === lettersOnly(currentWord).length - 1;\n };\n\n const createDonutSegment = (startAngle, endAngle, index) => {\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 + INNER_RADIUS * Math.cos(endAngle);\n const startInnerY = CENTER.y + INNER_RADIUS * Math.sin(endAngle);\n const endInnerX = CENTER.x + INNER_RADIUS * Math.cos(startAngle);\n const endInnerY = CENTER.y + INNER_RADIUS * 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 ${INNER_RADIUS} ${INNER_RADIUS} 0 ${largeArcFlag} 0 ${endInnerX} ${endInnerY}`,\n \"Z\",\n ].join(\" \");\n\n return ;\n };\n\n const createStar = (cx, cy, spikes = 5, outerRadius = 20, innerRadius = 10, fading = false) => {\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 ;\n };\n\n const startGame = () => {\n setShowModal(null);\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 setShowModal(null);\n setGameStarted(true);\n setElapsedTime(0);\n };\n\n if (isLoading) {\n return

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

\n {showModal && (\n \n )}\n

Loopy Letters: Birds

\n a ~~word~~ bird game by Alex Wein\n

Birds Found: {wordCount}/{wordlist.length}

{Math.round(elapsedTime)} s

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

- {selectedWord} -

\n \n \n \n \n \n \n \n \n {lettersOnly(displayWord).split(\"\").map((letter, index) => {\n const segmentAngle = (2 * Math.PI) / lettersOnly(currentWord).length;\n const startAngle = index * segmentAngle;\n const endAngle = (index + 1) * segmentAngle;\n const midAngle = (startAngle + endAngle) / 2;\n const textRadius = (INNER_RADIUS + 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 return (\n \n {createDonutSegment(startAngle, endAngle, index)}\n {letter}\n \n );\n })}\n \n {stars.map((star) => createStar(star.x, star.y, 5, 15, 7.5, star.fading))}\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const url = new URL(request.url);\n\n if (url.pathname === \"/words\") {\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 ? { word: row.word.toUpperCase(), img_url: row.img_url, url: row.url } : null)\n .filter(item => item !== null);\n\n return new Response(JSON.stringify(wordlist.length > 0 ? wordlist : FALLBACK_WORDLIST), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (error) {\n console.error(\"Error fetching words:\", error);\n return new Response(JSON.stringify(FALLBACK_WORDLIST), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n return new Response(\n `\n \n \n Loopy Letters: Birds\n \n \n \n \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 \n

\n );\n}\n\nfunction GameOverModal({ elapsedTime, onPlayAgain }) {\n return (\n

Game Over!

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

\n \n

\n );\n}\n\nfunction App() {\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 svgRef = useRef(null);\n const timerRef = useRef(null);\n\n useEffect(() => {\n fetch(\"/words\")\n .then(response => response.json())\n .then(data => {\n setWordlist(data);\n setCurrentWord(data[0]);\n setIsLoading(false);\n })\n .catch(error => {\n console.error(\"Error fetching words:\", error);\n setWordlist(FALLBACK_WORDLIST);\n setCurrentWord(FALLBACK_WORDLIST[0]);\n setIsLoading(false);\n });\n }, []);\n\n useEffect(() => {\n setDisplayWord(randomRotate(tryReverse(currentWord)));\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 isValid = (str) => str === currentWord;\n\n const handlePointerDown = (event) => {\n if (!gameStarted) return;\n const point = getRelativeCoordinates(event);\n const index = getLetterIndexFromPoint(point);\n if (index !== -1) {\n setSelectedWord(displayWord[index]);\n setSelection([index]);\n }\n };\n\n const handlePointerMove = (event) => {\n if (!gameStarted) return;\n if (selection.length === 0) return;\n const point = getRelativeCoordinates(event);\n const index = getLetterIndexFromPoint(point);\n if (index !== -1 && index !== selection[selection.length - 1] && !selection.includes(index)) {\n if (isAdjacent(index, selection[selection.length - 1])) {\n const newSelection = [...selection, index];\n setSelection(newSelection);\n setSelectedWord(newSelection.map(i => displayWord[i]).join(\"\"));\n }\n }\n };\n\n const handlePointerUp = () => {\n if (!gameStarted) return;\n if (selectedWord && isReverseSubstring(selectedWord, displayWord) && 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([selectedWord]);\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 setCurrentWord(wordlist[nextIndex]);\n }\n }\n setSelectedWord(\"\");\n setSelection([]);\n };\n\n const getRelativeCoordinates = (event) => {\n const svg = svgRef.current;\n const pt = svg.createSVGPoint();\n pt.x = event.clientX;\n pt.y = event.clientY;\n return pt.matrixTransform(svg.getScreenCTM().inverse());\n };\n\n const getLetterIndexFromPoint = (point) => {\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 < INNER_RADIUS || 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) / currentWord.length;\n return Math.floor(angle / segmentAngle) % currentWord.length;\n };\n\n const isAdjacent = (index1, index2) => {\n const diff = Math.abs(index1 - index2);\n return diff === 1 || diff === currentWord.length - 1;\n };\n\n const createDonutSegment = (startAngle, endAngle, index) => {\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 + INNER_RADIUS * Math.cos(endAngle);\n const startInnerY = CENTER.y + INNER_RADIUS * Math.sin(endAngle);\n const endInnerX = CENTER.x + INNER_RADIUS * Math.cos(startAngle);\n const endInnerY = CENTER.y + INNER_RADIUS * 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 ${INNER_RADIUS} ${INNER_RADIUS} 0 ${largeArcFlag} 0 ${endInnerX} ${endInnerY}`,\n \"Z\",\n ].join(\" \");\n\n return ;\n };\n\n const createStar = (cx, cy, spikes = 5, outerRadius = 20, innerRadius = 10, fading = false) => {\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 ;\n };\n\n const startGame = () => {\n setShowInstructionsModal(false);\n setGameStarted(true);\n };\n\n const resetGame = () => {\n setIsLoading(true);\n fetch(\"/words\")\n .then(response => response.json())\n .then(data => {\n setWordlist(data);\n setCurrentWordIndex(0);\n setCurrentWord(data[0]);\n setDisplayWord(\"\");\n setSelectedWord(\"\");\n setSelection([]);\n setStars([]);\n setFoundWords([]);\n setWordCount(0);\n setShowGameOverModal(false);\n setGameStarted(true);\n setElapsedTime(0);\n setIsLoading(false);\n })\n .catch(error => {\n console.error(\"Error fetching words:\", error);\n setWordlist(FALLBACK_WORDLIST);\n setCurrentWordIndex(0);\n setCurrentWord(FALLBACK_WORDLIST[0]);\n setDisplayWord(\"\");\n setSelectedWord(\"\");\n setSelection([]);\n setStars([]);\n setFoundWords([]);\n setWordCount(0);\n setShowGameOverModal(false);\n setGameStarted(true);\n setElapsedTime(0);\n setIsLoading(false);\n });\n };\n\n if (isLoading) {\n return

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

\n {showInstructionsModal && }\n {showGameOverModal && }\n

Loopy Letters

a word game by Alex Wein

Words Found: {wordCount}/{wordlist.length}

{Math.round(elapsedTime)} s

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

- {selectedWord} -

\n \n \n {displayWord.split(\"\").map((letter, index) => {\n const segmentAngle = (2 * Math.PI) / currentWord.length;\n const startAngle = index * segmentAngle;\n const endAngle = (index + 1) * segmentAngle;\n const midAngle = (startAngle + endAngle) / 2;\n const textRadius = (INNER_RADIUS + 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 return (\n \n {createDonutSegment(startAngle, endAngle, index)}\n \n {letter}\n \n \n );\n })}\n \n {stars.map((star) => createStar(star.x, star.y, 5, 15, 7.5, star.fading))}\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n\n const url = new URL(request.url);\n if (url.pathname === \"/words\") {\n const randRowsQ = `\n select id, word\n from judgments\n where judgment is null\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 finalWordlist = wordlist.length > 0 ? wordlist : FALLBACK_WORDLIST;\n\n return new Response(JSON.stringify(finalWordlist), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (error) {\n console.error(\"Error fetching words:\", error);\n return new Response(JSON.stringify(FALLBACK_WORDLIST), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n return new Response(\n `\n \n \n Loopy Letters\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}\n\nconst css = `\nbody, html {\n margin: 0;\n padding: 0;\n font-family: system-ui, sans-serif;\n height: 100%;\n overscroll-behavior: none;\n}\n\n#root {\n height: 100%;\n}\n\n.game-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n max-width: 100%;\n padding: 10px;\n box-sizing: border-box;\n height: 100vh;\n max-height: 100vh;\n overflow: hidden;\n}\n\n.game-header {\n width: 100%;\n background-color: #333;\n color: white;\n text-align: center;\n padding: 10px 0;\n margin-bottom: 10px;\n flex-shrink: 0;\n}\n\n.game-header h1 {\n margin: 0;\n font-size: 24px;\n}\n\n.game-stats {\n display: flex;\n justify-content: space-between;\n width: 100%;\n padding: 0 20px;\n margin-bottom: 10px;\n flex-shrink: 0;\n}\n\n.word-count {\n font-weight: bold;\n}\n\n.timer {\n font-weight: bold;\n}\n\n.last-word {\n display: flex;\n gap: 10px;\n}\n\n.found-word {\n background-color: #e0e0e0;\n padding: 5px 10px;\n border-radius: 5px;\n}\n\n.svg-container {\n flex-grow: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n max-height: 60vh;\n overflow: hidden;\n}\n\nsvg {\n width: 100%;\n max-width: 300px;\n max-height: 300px;\n touch-action: none;\n}\n\n.donut path {\n fill: #fff;\n stroke: #333;\n stroke-width: 2;\n}\n\n.donut path.selected {\n fill: #ffd700;\n}\n\ntext {\n font-size: 24px;\n user-select: none;\n}\n\n.word-display {\n text-align: center;\n height: 50px;\n flex-shrink: 0;\n}\n\n.star {\n fill: gold;\n stroke: goldenrod;\n stroke-width: 1;\n opacity: 1;\n transition: opacity 0.3s ease-out;\n}\n\n.star.fading {\n opacity: 0;\n}\n\n.modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n}\n\n.modal-content {\n background-color: white;\n padding: 20px;\n border-radius: 10px;\n max-width: 90%;\n width: 400px;\n text-align: left;\n}\n\n.modal-content h2 {\n margin-top: 0;\n}\n\n.modal-content ol {\n padding-left: 20px;\n}\n\n.modal-content button {\n width: 100%;\n padding: 10px;\n background-color: #333;\n color: white;\n border: none;\n border-radius: 5px;\n margin-top: 20px;\n cursor: pointer;\n}\n\n@media (max-height: 600px) {\n .game-container {\n padding: 5px;\n }\n \n .svg-container {\n max-height: 50vh;\n }\n \n svg {\n max-width: 250px;\n max-height: 250px;\n }\n}\n`;",[],[254],{"_104":312,"_95":99,"_156":313,"_158":-5,"_159":138,"_160":314,"_162":22,"_106":315,"_100":316,"_164":248,"_166":317,"_167":22,"_168":-5,"_169":318,"_98":319},"0c31b81e-3330-11f0-aafd-9e149126039e","e171af68-332e-11f0-ae27-9e149126039e",22,["D",1747494190442],6,"1. [x] refactor into a react/hono app\n - [x] 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",[],[99],"files",[153,171,183,190,196,206,214,223,233,242,252,262,269,278,287,296,303,311],"counts",{"_324":32,"_325":326,"_327":32,"_328":329},"pulls","branches",4,"forks","envVars",{"_330":32,"_331":32},"count","emptyCount","contents",[],{"_104":312,"_95":99,"_156":313,"_158":-5,"_159":138,"_160":314,"_162":22,"_106":335,"_100":316,"_164":248,"_166":317,"_167":22,"_168":-5,"_98":336},["D",1747494190442],[99],"upstreamProject",{"_104":146,"_95":339,"_112":-5,"_113":-5,"_110":111,"_23":340},"loopyLetters",{"_93":94,"_130":131},"upstreamBranch",{"_104":141,"_106":343,"_344":345,"_95":43,"_139":146,"_100":143,"_140":346,"_142":32,"_347":348,"_108":-5,"_150":22,"_110":111,"_149":94,"_16":119,"_148":339},["D",1744985359792],"updatedAt",["D",1762725391675],"c707a092-2799-11f0-9d52-569c3dd06744","lockfileKey","1762725395458-esm.town_v_alexwein_loopyLetters@64-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":355,"_151":360,"_320":415,"_248":416,"_332":418,"_419":420,"_423":-5,"_424":425,"_426":32,"_427":428},{"_104":105,"_95":96,"_106":356,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":-5,"_116":22,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":357,"_132":358,"_135":359,"_150":22},["D",1747493636610],{"_93":94,"_130":131},{"_93":94,"_134":131,"_14":114},{"_100":137,"_95":43,"_104":138,"_139":105,"_140":141,"_142":143,"_144":111,"_145":146,"_147":119,"_148":96,"_149":94},[361,367,394,403,406,409,412],{"_104":154,"_95":155,"_156":157,"_158":-5,"_159":138,"_160":161,"_162":22,"_106":163,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":362,"_98":366},[363],{"_104":172,"_95":173,"_156":174,"_158":157,"_159":138,"_160":175,"_162":22,"_106":176,"_100":177,"_164":178,"_166":179,"_167":22,"_168":-5,"_169":364,"_98":365},[],[155,173],[155],{"_104":184,"_95":185,"_156":186,"_158":-5,"_159":138,"_160":187,"_162":22,"_106":188,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":368,"_98":393},[369,384,387,390],{"_104":191,"_95":192,"_156":193,"_158":186,"_159":138,"_160":187,"_162":22,"_106":194,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":370,"_98":383},[371,374,377,380],{"_104":197,"_95":198,"_156":199,"_158":193,"_159":138,"_160":200,"_162":22,"_106":201,"_100":32,"_164":202,"_166":203,"_167":22,"_168":-5,"_169":372,"_98":373},[],[185,192,198],{"_104":207,"_95":208,"_156":209,"_158":193,"_159":138,"_160":187,"_162":22,"_106":210,"_100":32,"_164":202,"_166":211,"_167":22,"_168":-5,"_169":375,"_98":376},[],[185,192,208],{"_104":215,"_95":216,"_156":217,"_158":193,"_159":138,"_160":101,"_162":22,"_106":218,"_100":219,"_164":202,"_166":220,"_167":22,"_168":-5,"_169":378,"_98":379},[],[185,192,216],{"_104":224,"_95":225,"_156":226,"_158":193,"_159":138,"_160":227,"_162":22,"_106":228,"_100":32,"_164":202,"_166":229,"_167":22,"_168":-5,"_169":381,"_98":382},[],[185,192,225],[185,192],{"_104":234,"_95":235,"_156":236,"_158":186,"_159":138,"_160":237,"_162":22,"_106":238,"_100":32,"_164":202,"_166":239,"_167":22,"_168":-5,"_169":385,"_98":386},[],[185,235],{"_104":243,"_95":244,"_156":245,"_158":186,"_159":138,"_160":246,"_162":22,"_106":247,"_100":32,"_164":248,"_166":249,"_167":22,"_168":-5,"_169":388,"_98":389},[],[185,244],{"_104":253,"_95":254,"_156":255,"_158":186,"_159":138,"_160":256,"_162":22,"_106":257,"_100":32,"_164":202,"_166":258,"_167":22,"_168":-5,"_169":391,"_98":392},[],[185,254],[185],{"_104":263,"_95":264,"_156":265,"_158":-5,"_159":138,"_160":266,"_162":22,"_106":267,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":395,"_98":402},[396,399],{"_104":270,"_95":271,"_156":272,"_158":265,"_159":138,"_160":273,"_162":22,"_106":274,"_100":32,"_164":202,"_166":275,"_167":22,"_168":-5,"_169":397,"_98":398},[],[264,271],{"_104":279,"_95":280,"_156":281,"_158":265,"_159":138,"_160":266,"_162":22,"_106":282,"_100":32,"_164":202,"_166":283,"_167":22,"_168":-5,"_169":400,"_98":401},[],[264,280],[264],{"_104":288,"_95":289,"_156":290,"_158":-5,"_159":138,"_160":291,"_162":22,"_106":292,"_100":219,"_164":248,"_166":293,"_167":22,"_168":-5,"_169":404,"_98":405},[],[289],{"_104":297,"_95":235,"_156":298,"_158":-5,"_159":138,"_160":219,"_162":22,"_106":299,"_100":32,"_164":178,"_166":300,"_167":22,"_168":-5,"_169":407,"_98":408},[],[235],{"_104":304,"_95":254,"_156":305,"_158":-5,"_159":138,"_160":306,"_162":22,"_106":307,"_100":219,"_164":202,"_166":308,"_167":22,"_168":-5,"_169":410,"_98":411},[],[254],{"_104":312,"_95":99,"_156":313,"_158":-5,"_159":138,"_160":314,"_162":22,"_106":315,"_100":316,"_164":248,"_166":317,"_167":22,"_168":-5,"_169":413,"_98":414},[],[99],[361,363,367,369,371,374,377,380,384,387,390,394,396,399,403,406,409,412],{"_104":312,"_95":99,"_156":313,"_158":-5,"_159":138,"_160":314,"_162":22,"_106":335,"_100":316,"_164":248,"_166":317,"_167":22,"_168":-5,"_98":417},[99],[],"upstream",{"_104":141,"_106":421,"_344":422,"_95":43,"_139":146,"_100":143,"_140":346,"_142":32,"_347":348,"_108":-5,"_150":22,"_110":111,"_149":94,"_16":119,"_148":339},["D",1744985359792],["D",1762725391675],"pull","ahead",3,"behind","templates",[],"actionData","errors"]