maintained initiall generated words

src/App.tsx

@@ -49,4 +49,4 @@ const CountdownTimer = ({ timeLeft }: { timeLeft: number }) => {
   return <h2 className="text-primary-400 font-medium">Time: {timeLeft}</h2>;
 };
 
-export default App;
+export default App;

src/components/RestartButton.tsx

@@ -27,4 +27,4 @@ const RestartButton = ({
   );
 };
 
-export default RestartButton;
+export default RestartButton;

src/hooks/completeWord.tsx

@@ -2,7 +2,7 @@ import { defineConfig, loadEnv } from 'vite'
 import OpenAI from "openai";
 
 const openai = new OpenAI({
-  apiKey: process.env.REACT_APP_OPENAI_API_KEY,
+  apiKey: "" ,
   dangerouslyAllowBrowser: true,
 });
 

src/hooks/useEngine.ts

@@ -13,7 +13,7 @@ const COUNTDOWN_SECONDS = 30;
 const useEngine = () => {
   const [state, setState] = useState<State>("start"); // State to manage the current phase of the engine
   const { timeLeft, startCountdown, resetCountdown } = useCountdown(COUNTDOWN_SECONDS); // Hook to manage the countdown timer
-  const { words, updateWords, setWords } = useWords(NUMBER_OF_WORDS); // Hook to manage the words
+  const { words, initialWords, setWords } = useWords(NUMBER_OF_WORDS); // Hook to manage the words
   const { cursor, typed, clearTyped, totalTyped, resetTotalTyped } = useTypings(state !== "finish"); // Hook to manage the user's typing
   const [errors, setErrors] = useState(0); // State to track the number of errors
 
@@ -27,9 +27,9 @@ const useEngine = () => {
     resetTotalTyped(); // Reset the total typed characters
     setState("start"); // Set the state to 'start'
     setErrors(0); // Reset the error count
-    updateWords(); // Generate a new set of words
+    setWords(initialWords); // Use the initial words
     clearTyped(); // Clear the typed characters
-  }, [clearTyped, updateWords, resetCountdown, resetTotalTyped]);
+  }, [clearTyped, resetCountdown, resetTotalTyped, setWords, initialWords]);
 
   // Function to calculate and sum errors
   const sumErrors = useCallback(() => {
@@ -60,21 +60,21 @@ const useEngine = () => {
     if (areWordsFinished) {
       debug("words are finished...");
       sumErrors(); // Calculate and sum errors
-      updateWords(); // Generate a new set of words
       clearTyped(); // Clear the typed characters
     }
-  }, [clearTyped, areWordsFinished, updateWords, sumErrors]);
+  }, [clearTyped, areWordsFinished, sumErrors]);
 
   // New effect to handle word regeneration on mistakes
   useEffect(() => {
     const handleMistake = async () => {
-      const currentWord = words.split(" ")[Math.floor(cursor / NUMBER_OF_WORDS)];
-      const userTypedWord = typed.split(" ")[Math.floor(cursor / NUMBER_OF_WORDS)];
+      const currentWordIndex = Math.floor(cursor / NUMBER_OF_WORDS);
+      const currentWord = words.split(" ")[currentWordIndex];
+      const userTypedWord = typed.split(" ")[currentWordIndex];
       if (currentWord && userTypedWord && userTypedWord !== currentWord) {
         const newWordPart = await completeWord(userTypedWord);
         if (newWordPart !== ".") {
           const newWords = words.split(" ");
-          newWords[Math.floor(cursor / NUMBER_OF_WORDS)] = userTypedWord + newWordPart;
+          newWords[currentWordIndex] = userTypedWord + newWordPart;
           setWords(newWords.join(" "));
         }
       }

src/hooks/useWords.ts

@@ -3,22 +3,18 @@ import { useCallback, useState } from "react"; // Import necessary hooks from Re
 
 // Function to generate a specified number of lowercase words using faker
 const generateWords = (count: number) => {
-  var words = faker.word.words(count).toLowerCase(); // Generate 'count' number of random words in lowercase
+  const words = faker.word.words(count).toLowerCase(); // Generate 'count' number of random words in lowercase
   console.log('words: ', words);
   return words;
 };
 
 // Custom hook for managing dynamically generated words
 const useWords = (count: number) => {
-  const [words, setWords] = useState<string>(generateWords(count)); // State to hold generated words
-
-  // Callback function to update generated words when count changes
-  const updateWords = useCallback(() => {
-    setWords(generateWords(count)); // Generate new words based on current count and update state
-  }, [count]); // Recreate callback only if count changes
+  const initialWords = generateWords(count);
+  const [words, setWords] = useState<string>(initialWords); // State to hold generated words
 
   // Return generated words and update function
-  return { words, updateWords, setWords };
+  return { words, setWords, initialWords };
 };
 
 export default useWords;