\n \n \n \n",[126,116],"b82094054913e35a975a3a5aadbf5f274b5c60c738c7f461ebc122c58ec32a8e","frontend","744576d0-3807-11f0-93cc-9e149126039e","74457748-3807-11f0-93cc-9e149126039e","5d6a1f64-003d-403c-8a18-76dbf5bf1727",["D",1748026511498],"\n\n \n Loopy Letters\n \n \n \n \n

\n \n \n \n",[126,116],"54ca3f13a4debb08a1d393e8a9f764b9780e6adc6778494b7b9e63ff06588fa3","frontend/components/GameApp.tsx",{"_32":147,"_13":138,"_83":148,"_85":149,"_87":33,"_88":106,"_90":51,"_34":150,"_41":108,"_93":94,"_95":151,"_66":51,"_97":-5,"_98":-7,"_75":152,"_100":153},{"_32":137,"_13":138,"_83":139,"_85":140,"_87":59,"_88":58,"_90":26,"_34":141,"_41":142,"_93":94,"_95":143,"_66":51,"_97":-5,"_98":-7,"_75":144,"_100":145},"2d94be6e-a5e7-11f0-819e-0224a6c84d84","GameApp.tsx","0199ce72-4f99-776a-bfe2-af4a23c1e2ef","0199ce72-4f99-776a-bfe2-b0460a9701e5",["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}",[126,146,138],"0b521c25f15f607685473c5ff78770d78b3de35a60c1cdca054cb11b65338612","components","74456884-3807-11f0-93cc-9e149126039e","74456906-3807-11f0-93cc-9e149126039e","5685ead9-33ca-446d-b1ff-87130446c22e",["D",1748026511498],"/** @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

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 {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}",[126,146,138],"7a73d5c5edfe61fe10a4f654d6adceac300682b6f508b82fa584bcc557f45616","backend/index.ts",{"_32":168,"_13":158,"_83":169,"_85":170,"_87":33,"_88":60,"_90":51,"_34":171,"_41":121,"_93":163,"_95":172,"_66":51,"_97":173,"_98":-7,"_75":174,"_100":175},{"_32":157,"_13":158,"_83":159,"_85":160,"_87":59,"_88":161,"_90":26,"_34":162,"_41":121,"_93":163,"_95":164,"_66":51,"_97":-5,"_98":-7,"_75":165,"_100":166},"15d2e0b0-a5e4-11f0-aeda-0224a6c84d84","index.ts","0199ce72-4f99-776a-bfe2-a54aed132c0c","0199ce72-4f99-776a-bfe2-aa16917c9756",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;",[167,158],"991ce26ff9dce4ffbbaf2c1ca51d05d188d562bf9678009926325fb5e8167b69","backend","bab27270-a207-11f0-b116-0224a6c84d84","74453af8-3807-11f0-93cc-9e149126039e","88d05142-37db-4d5c-ab45-59a8a78112e7",["D",1759681452903],"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;","loopyletters",[167,158],"47df2e65d75926092a394d037daf2fa6bef79d4ce13b271eda94d6ddbfe050f5","README.md",{"_32":187,"_13":176,"_83":188,"_85":-5,"_87":33,"_88":58,"_90":51,"_34":189,"_41":190,"_93":122,"_95":191,"_66":51,"_97":-5,"_98":-7,"_75":192,"_100":193},{"_32":179,"_13":176,"_83":180,"_85":-5,"_87":59,"_88":181,"_90":26,"_34":182,"_41":183,"_93":122,"_95":184,"_66":51,"_97":-5,"_98":-7,"_75":185,"_100":186},"5285cca6-a5e5-11f0-9fb6-0224a6c84d84","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",[176],"7907122277ba17522ca7c5a8bd6df128fae4c48cde8b0fdede79dc93e7141cec","cb9ea87e-3821-11f0-b6b3-9e149126039e","602f2730-7466-4f4f-8567-38928f6b9372",["D",1748037824966],5,"# 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",[176],"59db84114a1b708bfe21978cdafe3437a7688ab3c3003c99f28a36653769194f",["D",1747493636610],"legacyEnvVars","httpPrivacy","description","find big words with a small gameplay loop","imageUrl","userId","b85dcfbf-50f1-466c-9e2b-28ac90e0dd23","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_232":228},"org",{"_11":12,"_225":226,"_227":228,"_200":201,"_229":230,"_231":51},"branch","displayName","Alex Wein","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ycjh6emNHdk9mMnY5djU3OFZBbEdleGhQZFAifQ","tier","pro","canRestrictVals","profileImageUrl","","adoptOrgId",{"_32":40,"_13":14,"_34":338,"_49":-5,"_195":51,"_52":53,"_196":53,"_197":198,"_199":-5,"_200":201,"_202":169,"_203":26,"_204":26,"_205":-5,"_206":108,"_55":56,"_207":-5,"_208":-5,"_209":-5,"_210":161,"_211":212,"_213":212,"_214":215,"_216":215,"_217":215,"_218":212,"_219":212,"_220":339,"_222":340,"_224":341,"_50":51},"tree",[294,296,301,303,304],"files",[294,295,296,297,298,299,300,301,302,303,304],"counts",{"_284":108,"_285":190,"_286":108,"_287":288,"_289":290},"contents",[261,262,263,264,265],"upstreamProject",{"_32":258,"_13":259,"_197":-5,"_199":-5,"_52":53,"_220":260},"upstreamBranch",{"_32":33,"_34":256,"_36":257,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":-5,"_50":51,"_52":53,"_54":12,"_55":56,"_57":14},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1747493636610],["D",1762811541464],"b897eb5c-1c5e-11f0-8f90-569c3dd06744","loopyLetters",{"_11":12,"_232":228},{"_32":281,"_13":167,"_83":160,"_85":-5,"_87":59,"_88":121,"_90":26,"_34":282,"_41":108,"_93":276,"_95":-5,"_66":51,"_97":-5,"_75":283},{"_32":278,"_13":126,"_83":118,"_85":-5,"_87":59,"_88":121,"_90":26,"_34":279,"_41":108,"_93":276,"_95":-5,"_66":51,"_97":-5,"_75":280},{"_32":274,"_13":102,"_83":86,"_85":-5,"_87":59,"_88":121,"_90":26,"_34":275,"_41":108,"_93":276,"_95":-5,"_66":51,"_97":-5,"_75":277},{"_32":179,"_13":176,"_83":180,"_85":-5,"_87":59,"_88":181,"_90":26,"_34":272,"_41":183,"_93":122,"_95":184,"_66":51,"_97":-5,"_75":273},{"_32":266,"_13":267,"_83":268,"_85":-5,"_87":59,"_88":121,"_90":26,"_34":269,"_41":108,"_93":122,"_95":270,"_66":51,"_97":-5,"_75":271},"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",[267],["D",1760106479889],[176],"64cb77a6-a5e2-11f0-9a34-0224a6c84d84",["D",1760105222054],"directory",[102],"64cb7328-a5e2-11f0-9a34-0224a6c84d84",["D",1760105222054],[126],"64cb5172-a5e2-11f0-9a34-0224a6c84d84",["D",1760105222054],[167],"pulls","branches","forks","envVars",{"_291":108,"_293":108},"connections",{"_291":108,"_292":108},"count","unfilledCount","emptyCount",{"_32":281,"_13":167,"_83":160,"_85":-5,"_87":59,"_88":121,"_90":26,"_34":335,"_41":108,"_93":276,"_95":-5,"_66":51,"_97":-5,"_98":336,"_75":337},{"_32":157,"_13":158,"_83":159,"_85":160,"_87":59,"_88":161,"_90":26,"_34":162,"_41":121,"_93":163,"_95":164,"_66":51,"_97":-5,"_98":333,"_75":334},{"_32":278,"_13":126,"_83":118,"_85":-5,"_87":59,"_88":121,"_90":26,"_34":330,"_41":108,"_93":276,"_95":-5,"_66":51,"_97":-5,"_98":331,"_75":332},{"_32":326,"_13":146,"_83":140,"_85":118,"_87":59,"_88":121,"_90":26,"_34":327,"_41":108,"_93":276,"_95":-5,"_66":51,"_97":-5,"_98":328,"_75":329},{"_32":137,"_13":138,"_83":139,"_85":140,"_87":59,"_88":58,"_90":26,"_34":141,"_41":142,"_93":94,"_95":143,"_66":51,"_97":-5,"_98":324,"_75":325},{"_32":115,"_13":116,"_83":117,"_85":118,"_87":59,"_88":119,"_90":26,"_34":120,"_41":121,"_93":122,"_95":123,"_66":51,"_97":-5,"_98":322,"_75":323},{"_32":315,"_13":316,"_83":317,"_85":118,"_87":59,"_88":121,"_90":26,"_34":318,"_41":108,"_93":94,"_95":319,"_66":51,"_97":-5,"_98":320,"_75":321},{"_32":274,"_13":102,"_83":86,"_85":-5,"_87":59,"_88":121,"_90":26,"_34":312,"_41":108,"_93":276,"_95":-5,"_66":51,"_97":-5,"_98":313,"_75":314},{"_32":81,"_13":82,"_83":84,"_85":86,"_87":59,"_88":89,"_90":26,"_34":91,"_41":92,"_93":94,"_95":96,"_66":51,"_97":-5,"_98":310,"_75":311},{"_32":179,"_13":176,"_83":180,"_85":-5,"_87":59,"_88":181,"_90":26,"_34":182,"_41":183,"_93":122,"_95":184,"_66":51,"_97":-5,"_98":308,"_75":309},{"_32":266,"_13":267,"_83":268,"_85":-5,"_87":59,"_88":121,"_90":26,"_34":305,"_41":108,"_93":122,"_95":270,"_66":51,"_97":-5,"_98":306,"_75":307},["D",1760105222054],[],[267],[],[176],[],[102,82],["D",1760105222054],[302],[102],"64cb71de-a5e2-11f0-9a34-0224a6c84d84","index.tsx","0199ce72-4f99-776a-bfe2-bac8a9618897",["D",1760105222054],"/** @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}",[],[126,316],[],[126,116],[],[126,146,138],"64cb6c3e-a5e2-11f0-9a34-0224a6c84d84",["D",1760105222054],[298],[126,146],["D",1760105222054],[297,299,300],[126],[],[167,158],["D",1760105222054],[295],[167],["D",1747493636610],{"_11":12,"_232":228},{"_11":12,"_225":226,"_227":228,"_200":201,"_229":230,"_231":51},{"_41":58,"_13":16,"_32":59,"_39":40,"_43":33,"_45":60,"_61":53,"_62":40,"_63":56,"_57":14,"_54":12},"ctx",{"_220":-5,"_253":375,"_376":377,"_378":379,"_380":51,"_381":51,"_382":51,"_383":26,"_384":-5,"_385":-7,"_386":-7,"_387":108,"_388":51,"_389":51,"_390":-5,"_391":51,"_392":51,"_393":51,"_394":-5},"ENV",{"_346":347,"_348":349,"_350":38,"_351":352,"_353":354,"_355":356,"_357":358,"_359":360,"_361":362,"_363":364,"_365":366,"_367":368,"_369":370,"_371":372,"_373":374},"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"]

Compare

Mergetownie-2loopintomain

README.md+11-0

Hbackend/index.ts+13-0

frontend/components/GameApp.tsx+90-24

frontend/index.html+5-0

shared/gameLogic.ts+111-0