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

\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: 5px 0;\n}\n\n.game-header h1 {\n margin: 0;\n font-size: 20px;\n margin-bottom: 2px;\n}\n\n.game-header div {\n margin: 0;\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.wordlist-grid {\n display: grid;\n grid-template-columns: auto auto;\n gap: 1rem;\n align-items: center;\n}\n.wordlist-item {\n display: flex;\n flex-direction: column;\n align-items: center;\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`;","deleted","subdomain",[102],"permalink","https://www.val.town/x/alexwein/loopyLettersBirds/code/main.tsx","extension","routes/embed","actionData","errors"]