\n {word.split(\"\").map((char, index) => (\n \n {char}\n \n ))}\n

\n );\n};\n\nfunction HiraganaWordBuilder() {\n const [currentWord, setCurrentWord] = useState({ romaji: \"\", hiragana: \"\" });\n const [userInput, setUserInput] = useState([]);\n const [availableChars, setAvailableChars] = useState([]);\n const [isComplete, setIsComplete] = useState(false);\n const [inputStatus, setInputStatus] = useState([]);\n const [imageData, setImageData] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [isTransitioning, setIsTransitioning] = useState(false);\n\n const getRandomWord = () => {\n const randomIndex = Math.floor(Math.random() * vocabularyList.length);\n return vocabularyList[randomIndex];\n };\n\n const generateAvailableChars = (word) => {\n const wordChars = word.hiragana.split(\"\");\n const uniqueWordChars = [...new Set(wordChars)];\n const extraChars = \"あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん\"\n .split(\"\");\n const filteredExtraChars = extraChars.filter(char => !uniqueWordChars.includes(char));\n const selectedExtraChars = shuffleArray(filteredExtraChars).slice(0, 10 - uniqueWordChars.length);\n const allChars = shuffleArray([...uniqueWordChars, ...selectedExtraChars]);\n return allChars;\n };\n\n const shuffleArray = (array) => {\n for (let i = array.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [array[i], array[j]] = [array[j], array[i]];\n }\n return array;\n };\n\n const fetchImage = async (romaji) => {\n setIsLoading(true);\n try {\n const response = await fetch(`/api/image/${romaji}`);\n if (!response.ok) {\n throw new Error(\"Failed to fetch image\");\n }\n const data = await response.json();\n if (data && data.image) {\n const dataUrl = `data:image/png;base64,${data.image}`;\n setImageData(dataUrl);\n } else {\n throw new Error(\"Invalid image data received\");\n }\n } catch (error) {\n console.error(\"Error fetching image:\", error);\n setImageData(\"\");\n } finally {\n setIsLoading(false);\n }\n };\n\n const setNewWord = () => {\n setIsTransitioning(true);\n setTimeout(() => {\n const newWord = getRandomWord();\n setCurrentWord(newWord);\n setAvailableChars(generateAvailableChars(newWord));\n setUserInput([]);\n setInputStatus([]);\n setIsComplete(false);\n fetchImage(newWord.romaji);\n setIsTransitioning(false);\n }, 300);\n };\n\n useEffect(() => {\n setNewWord();\n }, []);\n\n const handleCharSelect = (char) => {\n const newUserInput = [...userInput];\n const newInputStatus = [...inputStatus];\n let currentIndex = newUserInput.findIndex((_, index) => newInputStatus[index] !== \"correct\");\n\n if (currentIndex === -1) {\n currentIndex = newUserInput.length;\n }\n\n if (currentIndex < currentWord.hiragana.length) {\n newUserInput[currentIndex] = char;\n newInputStatus[currentIndex] = char === currentWord.hiragana[currentIndex] ? \"correct\" : \"incorrect\";\n\n setUserInput(newUserInput);\n setInputStatus(newInputStatus);\n\n if (newUserInput.join(\"\") === currentWord.hiragana) {\n setIsComplete(true);\n }\n }\n };\n\n return (\n

\n \n

Hiragana Word Builder

\n\n

\n {isLoading\n ? (\n

\n )\n : imageData\n ? $\"Vocabulary$ \n : (\n

\n No image available\n

\n )}\n

\n\n

{currentWord.romaji}

\n\n

\n {isComplete\n ? \n : (\n

\n {currentWord.hiragana.split(\"\").map((_, index) => (\n \n {userInput[index] || \"\"}\n

\n ))}\n

\n )}\n

\n\n \n {availableChars.map((char) => (\n handleCharSelect(char)}\n className=\"px-4 py-2 bg-gray-200 rounded\"\n disabled={isComplete || isTransitioning}\n >\n {char}\n \n ))}\n \n\n

\n \n Next Word\n \n

\n \n );\n}\n\nfunction App() {\n return (\n

\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n const url = new URL(request.url);\n\n if (url.pathname.startsWith(\"/api/image/\")) {\n const romaji = url.pathname.split(\"/\").pop();\n try {\n // This is a placeholder for the actual image retrieval from Val Town blob storage\n // You'll need to implement the actual retrieval logic here\n const vocabularyJson = await blob.getJSON(romaji);\n console.log(vocabularyJson.romaji);\n return new Response(JSON.stringify(vocabularyJson), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (error) {\n console.error(\"Error fetching image:\", error);\n return new Response(\"Image not found\", { status: 404 });\n }\n }\n\n return new Response(\n `\n \n \n \n \n \n Hiragana Word Builder\n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}","deleted","label","hiragana",[99],"permalink","https://www.val.town/x/ashryanio/hiraganaWordBuilder/code/main.tsx","extension","actionData","errors"]