Return to Loopy Letters:

The Birdy Version

Use every letter on the donut to spell the name of the bird in the center.
Consectuive 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 or try Coney Letters!\n

\n \n

\n );\n }\n\n if (gameType === \"coney\") {\n return (\n

How to play Coney Letters:

Use every letter to spell a word.
Consecutive letters in the word must be adjacent on the circle. The middle letter is adjacent to all the others.
When you find a word, the next word to find appears.
Go fast? Go slow? Enjoy!

\n Want the classic experience? Try the original Loopy Letters or Loopy Letters: Birds!\n

\n \n

\n );\n }\n\n // Main/classic mode\n return (\n

How to play Loopy Letters:

Use every letter on the donut to spell a word.
Consecutive 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 and coney letters!\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\" | \"coney\" | \"birds\";\n wordlist: (WordItem | string)[];\n}) {\n if (gameType === \"birds\") {\n const birdWordlist = wordlist as WordItem[];\n return (\n

Game Over!

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

\n\n

\n {birdWordlist.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<(WordItem | string)[]>([]);\n const [currentWordIndex, setCurrentWordIndex] = useState(0);\n const [currentWord, setCurrentWord] = useState(\"\");\n const [currentValidAnagrams, setCurrentValidAnagrams] = useState([]);\n const [displayWord, setDisplayWord] = useState(\"\");\n const [coneyLetter, setConeyLetter] = 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\" : gameType === \"coney\" ? \"/api/coneywords\" : \"/api/words\";\n\n useEffect(() => {\n fetchWords();\n }, []);\n\n useEffect(() => {\n if (currentWord) {\n const { displayWord, coneyLetter } = prepareWordDisplay(currentWord, gameType);\n setDisplayWord(displayWord);\n setConeyLetter(coneyLetter);\n }\n }, [currentWord, gameType]);\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 // Birds endpoint returns WordItem objects\n const firstItem = data[0] as WordItem;\n setCurrentWord(firstItem.word);\n setImgUrl(firstItem.img_url || \"\");\n setCurrentValidAnagrams([firstItem.word]); // Birds only have one valid word\n } else {\n // Check if /words endpoint returns array of strings or array of objects\n const firstItem = data[0];\n if (typeof firstItem === \"string\") {\n // Old format: array of strings\n setCurrentWord(firstItem);\n setCurrentValidAnagrams([firstItem]);\n } else {\n // New format: array of objects with word and valid_anagrams\n const wordItem = firstItem as WordItem;\n setCurrentWord(wordItem.word);\n // Parse valid_anagrams JSON string\n try {\n const validAnagrams = JSON.parse(wordItem.valid_anagrams || \"[]\");\n setCurrentValidAnagrams(validAnagrams);\n } catch {\n setCurrentValidAnagrams([wordItem.word]);\n }\n }\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 setCurrentValidAnagrams([\"WATERFALL\"]);\n setIsLoading(false);\n }\n };\n\n const isValid = (str: string) => {\n const targetWord = gameType === \"birds\" ? lettersOnly(str) : str;\n \n // Check if the player used all available letters\n let expectedLength;\n if (gameType === \"birds\") {\n expectedLength = lettersOnly(currentWord).length;\n } else {\n expectedLength = currentWord.length;\n }\n \n if (targetWord.length !== expectedLength) {\n return false;\n }\n \n // Birds mode: only one correct answer (the bird's name)\n if (gameType === \"birds\") {\n return targetWord === lettersOnly(currentWord);\n }\n \n // Main/coney modes: validate against the valid anagrams list\n return currentValidAnagrams.includes(targetWord);\n };\n\n const handlePointerDown = (event: React.PointerEvent) => {\n if (!gameStarted || !svgRef.current) return;\n const point = getRelativeCoordinates(event.nativeEvent, svgRef.current);\n \n // Check if clicking on the center coney letter (only for coney mode)\n if (gameType === \"coney\") {\n const centerDistance = Math.sqrt((point.x - CENTER.x) ** 2 + (point.y - CENTER.y) ** 2);\n if (centerDistance <= innerRadius && coneyLetter) {\n setSelectedWord(coneyLetter);\n setSelection([-1]); // Use -1 to represent the center coney letter\n return;\n }\n }\n \n // Check donut segments\n let adjustedWordLength;\n if (gameType === \"birds\") {\n // Birds mode: use letters only (no spaces/punctuation)\n adjustedWordLength = gameType === \"coney\" \n ? lettersOnly(currentWord).length - 1 // One letter in center\n : lettersOnly(currentWord).length; // All letters on donut\n } else {\n // Main/coney modes: use full word\n adjustedWordLength = gameType === \"coney\" \n ? currentWord.length - 1 // One letter in center\n : currentWord.length; // All letters on donut\n }\n const index = getLetterIndexFromPoint(point, adjustedWordLength, 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 \n const lastSelectedIndex = selection[selection.length - 1];\n let newIndex = -2; // Initialize to invalid index\n \n // Check if hovering over center coney letter (only for coney mode)\n if (gameType === \"coney\") {\n const centerDistance = Math.sqrt((point.x - CENTER.x) ** 2 + (point.y - CENTER.y) ** 2);\n if (centerDistance <= innerRadius && coneyLetter) {\n newIndex = -1; // Center coney letter index\n }\n }\n \n // Check donut segments if not already found center\n if (newIndex === -2) {\n let adjustedWordLength;\n if (gameType === \"birds\") {\n // Birds mode: use letters only (no spaces/punctuation)\n adjustedWordLength = gameType === \"coney\" \n ? lettersOnly(currentWord).length - 1 // One letter in center\n : lettersOnly(currentWord).length; // All letters on donut\n } else {\n // Main/coney modes: use full word\n adjustedWordLength = gameType === \"coney\" \n ? currentWord.length - 1 // One letter in center\n : currentWord.length; // All letters on donut\n }\n const segmentIndex = getLetterIndexFromPoint(point, adjustedWordLength, innerRadius);\n if (segmentIndex !== -1) {\n newIndex = segmentIndex;\n }\n }\n \n if (newIndex !== -2 && newIndex !== lastSelectedIndex && !selection.includes(newIndex)) {\n // Use appropriate adjacency function based on game mode\n const fullWordLength = gameType === \"birds\" ? lettersOnly(currentWord).length : currentWord.length;\n const adjacencyChecker = getAdjacencyChecker(gameType);\n \n let isAdjacent = false;\n if (gameType === \"coney\") {\n isAdjacent = coneyIsAdjacent(newIndex, lastSelectedIndex, fullWordLength, coneyLetter, currentWord);\n } else {\n isAdjacent = adjacencyChecker(newIndex, lastSelectedIndex, fullWordLength);\n }\n \n if (isAdjacent) {\n const newSelection = [...selection, newIndex];\n setSelection(newSelection);\n \n // Build selected word from indices\n const letters = gameType === \"birds\" ? lettersOnly(displayWord) : displayWord;\n const selectedLetters = newSelection.map(i => {\n if (i === -1) return coneyLetter; // Center coney letter\n return letters[i]; // Donut letter\n });\n setSelectedWord(selectedLetters.join(\"\"));\n }\n }\n };\n\n const handlePointerUp = () => {\n if (!gameStarted) return;\n \n // For validation, we need to check if the selected word matches the target word\n // The selectedWord now includes letters from both the donut and the center coney letter\n if (selectedWord && isValid(selectedWord)) {\n // Don't add stars for birds mode\n if (gameType !== \"birds\") {\n setStars(prevStars => [...prevStars, { x: CENTER.x, y: CENTER.y, key: Date.now(), fading: false }]);\n }\n\n // Update found words (keep only the most recent word)\n // For birds mode, use the original bird name with spaces/punctuation\n const displayWord = gameType === \"birds\" ? currentWord : selectedWord;\n setFoundWords([displayWord]);\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 const nextItem = wordlist[nextIndex];\n if (gameType === \"birds\") {\n const birdItem = nextItem as WordItem;\n setCurrentWord(birdItem.word);\n setImgUrl(birdItem.img_url || \"\");\n setCurrentValidAnagrams([birdItem.word]);\n } else {\n // Check if it's a string or object\n if (typeof nextItem === \"string\") {\n setCurrentWord(nextItem);\n setCurrentValidAnagrams([nextItem]);\n } else {\n const wordItem = nextItem as WordItem;\n setCurrentWord(wordItem.word);\n // Parse valid_anagrams JSON string\n try {\n const validAnagrams = JSON.parse(wordItem.valid_anagrams || \"[]\");\n setCurrentValidAnagrams(validAnagrams);\n } catch {\n setCurrentValidAnagrams([wordItem.word]);\n }\n }\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 setConeyLetter(\"\");\n setCurrentValidAnagrams([]);\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 adjustedWordLength = letters.length; // This is the actual length of letters to display on the donut\n\n return (\n

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

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

\n a {gameType === \"birds\" ? <>~~word~~ bird : \"word\"} game by Alex Wein\n

\n {(() => {\n const links = [];\n if (gameType !== \"main\") {\n links.push(Loopy Letters);\n }\n if (gameType !== \"birds\") {\n links.push(Loopy Letters: Birds);\n }\n if (gameType !== \"coney\") {\n links.push(Coney Letters);\n }\n \n if (links.length === 0) return null;\n \n return (\n <>\n or play {links.reduce((acc, link, index) => {\n if (index > 0) acc.push(\" or \");\n acc.push(link);\n return acc;\n }, [] as React.ReactNode[])}\n \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 {/* Interactive coney letter in center for coney mode */}\n {gameType === \"coney\" && coneyLetter && (\n \n \n \n {coneyLetter}\n \n \n )}\n \n {letters.split(\"\").map((letter, index) => {\n const segmentAngle = (2 * Math.PI) / adjustedWordLength;\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}","deleted","label",[171,172,152],"frontend","components","permalink","https://www.val.town/x/alexwein/loopyLettersApp/code/frontend/components/GameApp.tsx","extension","actionData","errors"]