finished the keywords mode and added comments

src/components/Layout/CodeArea/TestCode.jsx

@@ -21,60 +21,87 @@ const TestCode = ({ incrementRight, incrementWrong }) => {
   const [code, setCode] = useState(keywords[arrayIndex]);
 
   const handleKeyDown = useCallback((e) => {
+    // 1. whenever a key is pressed, set the pressedKey to the key that was pressed
+    // 2. increment the index if index is less than the length of the code
+
     if (isValidKey(e.key)) {
       setPressedKey(e.key);
+      if (isInLimit(index, code.length)) {
+        setIndex((prevIndex) => prevIndex + 1);
+      }
     }
   }, []);
 
   useEffect(() => {
     const windowEventListenerId = window.addEventListener("keydown", (e) => {
       handleKeyDown(e);
-      if (isInLimit(index, code.length)) {
-        setIndex((prevIndex) => prevIndex + 1);
-      }
     });
     return () => window.removeEventListener("keydown", windowEventListenerId);
   }, []);
 
   useEffect(() => {
+    // 1. whenever the index reaches the length of the code string,
+    //    reset the index to 0 and add 1 to the arrayIndex
+
+    // 2. Reset all of the values to their initial state
+
     if (index === code.length) {
       setIndex(0);
       setArrayIndex((prevArrayIndex) => prevArrayIndex + 1);
       setCode(keywords[arrayIndex]);
       setBeforeKeys([]);
       setAfterKeys([]);
-      setCurrentKey("");
+      setPressedKey("");
     }
   }, [index]);
 
   useEffect(() => {
-    console.log(index);
-    setCurrentKey(code[index]);
+    // 1. whenever a valid key is pressed, set the currentKey to the next
+    //    character in the code string.
+
+    // 2. when the index reaches the length of the code string, reset the currentKey to an empty string
+
+    if (index < code.length) {
+      setCurrentKey(code[index]);
+    } else {
+      setCurrentKey("");
+    }
 
     if (isValidKey(pressedKey)) {
       //  if the pressed key is an alphanumeric character
-      if (isSameKey(pressedKey, currentKey)) {
-        // if the pressed key and the current key is same
-        // change its color to white, if not, change its
-        //  color to dark gray
 
-        setBeforeKeys((prev) => [...prev, { key: currentKey, color: "white" }]);
+      if (isSameKey(pressedKey, currentKey)) {
+        // if the pressed key and the current key are the same
         incrementRight();
+
+        if (index < code.length) {
+          // if the index is in bounds of the code string
+
+          setBeforeKeys((prev) => [
+            ...prev,
+            { key: currentKey, color: "white" },
+          ]);
+        }
       } else {
-        setBeforeKeys((prev) => [
-          ...prev,
-          { key: currentKey, color: "darkgray" },
-        ]);
         incrementWrong();
+        // if the currentKey and pressed key are not the same
+
+        if (index < code.length) {
+          // if the index is in bounds of the code string
+
+          setBeforeKeys((prev) => [
+            ...prev,
+            { key: currentKey, color: "darkgray" },
+          ]);
+        }
       }
     } else {
       setBeforeKeys((prev) => [...prev, currentKey]);
+      // if the pressed key is not an alphanumeric character
     }
 
     setAfterKeys(code.split("").slice(index + 1));
-
-    console.log(pressedKey, currentKey);
-  }, [index, pressedKey]);
+  }, [index]);
 
   return (
     <HStack justify="center" h="full" w="full">

vite.config.js

@@ -6,6 +6,5 @@ export default defineConfig({
   plugins: [react()],
   server: {
     port: 3000,
-    open: true,
   },
 });