changed the duration

staranbeer · Sep 16, 2022 · abdcd39 · abdcd39 · vercel · Sep 16, 2022
1 parent 6b25706
commit abdcd39
Show file tree

Hide file tree

Showing 16 changed files with 219 additions and 41 deletions.
diff --git a/index.html b/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favico.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>Typo</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/lib/generateKeywords.js b/lib/generateKeywords.js
@@ -12,12 +12,10 @@ let keywords = {
     "delete",
     "do",
     "else",
-    "finally",
     "for",
     "function",
     "if",
     "in",
-    "instanceof",
     "new",
     "return",
     "switch",
@@ -42,8 +40,70 @@ let keywords = {
     "undefined",
     "boolean",
   ],
-  DOM: ["DOM"],
-  Node: ["Node"],
+  DOM: [
+    "document",
+    "getElementById",
+    "getElementsByClassName",
+    "getElementsByName",
+    "querySelector",
+    "querySelectorAll",
+    "append",
+    "appendChild",
+    "remove",
+    "removeItem",
+    "removeChild",
+    "removeEventListener",
+    "removeAttribute",
+    "window",
+    "event",
+    "addEventListener",
+    "node",
+    "click",
+    "keydown",
+    "keyup",
+    "keypress",
+    "mouseenter",
+    "mouseleave",
+    "mouseover",
+    "mouseup",
+    "scroll",
+    "select",
+    "drag",
+    "drop",
+  ],
+  Node: [
+    "require",
+    "module",
+    "exports",
+    "fs",
+    "http",
+    "events",
+    "process",
+    "path",
+    "dirname",
+    "basename",
+    "join",
+    "readFile",
+    "readFileSync",
+    "writeFile",
+    "writeFileSync",
+    "appendFile",
+    "appendFileSync",
+    "mkdir",
+    "mkdirSync",
+    "readdir",
+    "rename",
+    "renameSync",
+    "rmdir",
+    "rmdir",
+    "rmdirSync",
+    "createServer",
+    "end",
+    "req",
+    "res",
+    "port",
+    "node",
+  ],
 };
 
 const generateKeywords = (mode = "Vanilla Js") => {

diff --git a/lib/isValidKey.js b/lib/isValidKey.js
@@ -26,6 +26,32 @@ const keys = [
   "y",
   "z",
   " ",
+  "A",
+  "B",
+  "C",
+  "D",
+  "E",
+  "F",
+  "G",
+  "H",
+  "I",
+  "J",
+  "K",
+  "L",
+  "M",
+  "N",
+  "O",
+  "P",
+  "Q",
+  "R",
+  "S",
+  "T",
+  "U",
+  "V",
+  "W",
+  "X",
+  "Y",
+  "Z",
 ];
 
 const isValidKey = (key) => {

diff --git a/public/favico.svg b/public/favico.svg
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.jsx b/src/App.jsx
@@ -2,11 +2,11 @@ import React, { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import Stats from "./components/Layout/Stats";
 import Game from "./components/Layout/Game/Game";
-
 /*  actions */
 import { startGame, stopGame } from "./store/gameSlice";
 import { incrementTimer, stopTimer } from "./store/timerSlice";
 import Layout from "./components/Layout/Layout";
+import Introduction from "./components/Layout/Introduction";
 
 const App = () => {
   /* global state */
@@ -54,14 +54,14 @@ const App = () => {
       </Layout>
 
       {/* intro modal */}
-      {/* {
+      {
         <Introduction
           isOpen={!hasStarted && !hasEnded && isIntroModalOpen}
           onClose={closeIntroModal}
         />
-      } */}
+      }
 
-      {/* stats Modal */}
+      {/* open the stats modal when the game ends */}
       {
         <Stats
           isOpen={hasEnded && isStatsModalOpen}

diff --git a/src/components/Layout/Game/Char.jsx b/src/components/Layout/Game/Char.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 const Char = ({ children, isCorrect = false }) => {
-  return <span style={{ color: isCorrect ? "#fff" : "#333" }}>{children}</span>;
+  return <span style={{ color: isCorrect ? "#fff" : "#777" }}>{children}</span>;
 };
 
 export default Char;
diff --git a/src/components/Layout/Game/Game.jsx b/src/components/Layout/Game/Game.jsx
@@ -6,12 +6,16 @@ import isSameKey from "../../../../lib/isSameKey";
 import { useDispatch, useSelector } from "react-redux";
 import { incrementCorrect, incrementWrong } from "../../../store/statsSlice";
 import Characters from "./Characters";
+import { changeGameMode } from "../../../store/codeSlice";
+import generateKeywords from "../../../../lib/generateKeywords";
 
 const Game = () => {
   const dispatch = useDispatch();
 
   /* global state */
-  const { hasStarted, hasEnded } = useSelector((state) => state.game);
+  const { hasStarted, hasEnded, restarted } = useSelector(
+    (state) => state.game
+  );
   const { keywords } = useSelector((state) => state.code);
 
   /* component state */
@@ -41,13 +45,19 @@ const Game = () => {
       window.removeEventListener("keydown", handleKeyDown);
     }
 
+    // remove the listener when the fame restarts
+
+    if (restarted) {
+      window.removeEventListener("keydown", handleKeyDown);
+    }
+
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [hasStarted, hasEnded]);
+  }, [hasStarted, hasEnded, restarted]);
 
   /* check which key was pressed */
   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
+    // 2. increment the index if index is less than the length of the word
 
     if (isValidKey(e.key)) {
       setPressedKey(e.key);
@@ -57,7 +67,7 @@ const Game = () => {
     }
   }, []);
 
-  /* if <pressedKey> is equal to the <currentKey>, change its color */
+  /* if <pressedKey> is equal to the <currentKey>, increment <correct> else increment <wrong> */
   useEffect(() => {
     // 1. whenever a valid key is pressed, set the currentKey to the next
     //    character in the code string.
@@ -71,7 +81,7 @@ const Game = () => {
     }
 
     if (isValidKey(pressedKey)) {
-      //  if the pressed key is an alphanumeric character
+      //  if the pressed key is an alphabetical character
 
       if (isSameKey(pressedKey, currentKey)) {
         // if the pressed key and the current key are the same
@@ -123,6 +133,19 @@ const Game = () => {
     }
   }, [index]);
 
+  /* reset the game when the game finishes */
+  useEffect(() => {
+    if (hasEnded) {
+      setIndex(0);
+      setArrayIndex(0);
+      setCode(keywords[arrayIndex]);
+      setBeforeKeys([]);
+      setAfterKeys([]);
+      setPressedKey("");
+      setCurrentKey(code[0]);
+    }
+  }, [hasEnded]);
+
   return (
     <HStack justify="center" h="full" w="full">
       <Box

diff --git a/src/components/Layout/Introduction.jsx b/src/components/Layout/Introduction.jsx
@@ -48,7 +48,7 @@ const Introduction = ({ isOpen, onClose }) => {
       <ModalOverlay />
       <ModalContent>
         <ModalHeader>Typo</ModalHeader>
-        <ModalCloseButton />
+        {/* <ModalCloseButton /> */}
         <ModalBody py="10" px="8">
           <Text fontSize={"lg"}>
             A typing test and practice tool made specifically for developers.
@@ -80,7 +80,7 @@ const Introduction = ({ isOpen, onClose }) => {
             <GridItem w="full" alignItems={"start"}>
               <label>Select Duration</label>
               <Select mt="2" onChange={handleDurationChange}>
-                {["2", "5", "7"].map((i) => (
+                {["10", "30", "60"].map((i) => (
                   <option key={i} value={i}>
                     {i} seconds
                   </option>

diff --git a/src/components/Layout/Layout.jsx b/src/components/Layout/Layout.jsx
@@ -7,7 +7,6 @@ const Layout = ({ children }) => {
     <Box h="100vh" w="100vw" overflow={"hidden"} p={10}>
       <VStack w="full" h="full" align={"start"} maxW={"5xl"} mx="auto" gap="4">
         <Header />
-
         <Box flex={1} w="full">
           {children}
         </Box>
-Original file line number
+Diff line change
@@ Expand Up / @@ -26,6 +26,32 @@ const keys = [ @@
       "y",
       "z",
       " ",
+      "A",
+      "B",
+      "C",
+      "D",
+      "E",
+      "F",
+      "G",
+      "H",
+      "I",
+      "J",
+      "K",
+      "L",
+      "M",
+      "N",
+      "O",
+      "P",
+      "Q",
+      "R",
+      "S",
+      "T",
+      "U",
+      "V",
+      "W",
+      "X",
+      "Y",
+      "Z",
     ];
     const isValidKey = (key) => {
@@ Expand Down @@