function MainComponent() { const [currentLetters, setCurrentLetters] = React.useState([]); const [step, setStep] = React.useState(1); const [count, setCount] = React.useState(0); const [inputValue, setInputValue] = React.useState(""); const [letterIndexToShow, setLetterIndexToShow] = React.useState(0); const generateLetters = ()=>{ const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; let newLetters = []; for(let i = 0; i < 5; i++){ newLetters.push(letters[Math.floor(Math.random() * letters.length)]); } setCurrentLetters(newLetters); }; const letterFontSize = (step)=>{ return `${step * 10 / 2}px`; }; const processAudioInput = (audioInput)=>{ const expectedLetter = currentLetters[letterIndexToShow].toLowerCase(); if (audioInput.toLowerCase() === expectedLetter) { setCount((prevCount)=>prevCount + 1); } }; const showNextLetter = (index)=>{ if (index < 5) { setLetterIndexToShow(index); setInputValue(""); } else { setStep((currentStep)=>currentStep + 1); } }; React.useEffect(()=>{ if (step <= 10) { setCount(0); generateLetters(); let index = 0; showNextLetter(index); const interval = setInterval(()=>{ processAudioInput(inputValue); index++; showNextLetter(index); }, 6000); return ()=>clearInterval(interval); } }, [ step, inputValue ]); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-[100vh]", __source: { fileName: "", lineNumber: 55, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-[#000000] text-2xl", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, "Diottrie di lettura: ", step / 10)), /*#__PURE__*/ React.createElement("div", { className: "my-8 space-y-4", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { style: { fontSize: letterFontSize(step) }, __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, currentLetters[letterIndexToShow])), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "audioInput", type: "text", value: inputValue, onChange: (event)=>setInputValue(event.target.value), className: "mt-4 border-2 border-gray-300 p-2 rounded-md focus:outline-none focus:border-blue-500 transition-colors", autoComplete: "off", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }))); }