Merge pull request #60 from rendi12345678/performance-optimization

fix/prevent excessive dom size , feat/add tokyo night theme
gamer-ai · Jul 26, 2024 · a2d084c · a2d084c
2 parents e0bc63c + 2f26c10
commit a2d084c
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 33 deletions.
diff --git a/src/algorithm.md b/src/algorithm.md
@@ -0,0 +1,5 @@
+# Algorithm to get total speed target wpm
+
+1. Get target wpm
+2. Get to know how to calculate wpm
+3.
diff --git a/src/components/features/TypeBox/Stats.js b/src/components/features/TypeBox/Stats.js
@@ -283,18 +283,20 @@ const Stats = ({
           opacity={0.25}
         />
         <YAxis stroke={theme.text} tickMargin={10} opacity={0.25} />
-        <TooltipChart cursor={false} content={<CustomTooltip />} />{" "}
+        <TooltipChart cursor content={<CustomTooltip />} />{" "}
         <Line
           type="monotone"
           dataKey="rawWpm"
           stroke={theme.textTypeBox}
-          activeDot={{ r: 6 }}
+          dot={false}
+          activeDot={false}
         />
         <Line
           type="monotone"
           dataKey="wpm"
           stroke={theme.text}
-          activeDot={{ r: 6 }}
+          dot={false}
+          activeDot={false}
         />
         <Bar dataKey="error" barSize={12} fill={`${red[400]}`} />
       </ComposedChart>

diff --git a/src/components/features/TypeBox/TypeBox.js b/src/components/features/TypeBox/TypeBox.js
@@ -95,6 +95,8 @@ const TypeBox = ({
     SYMBOL_ADDON_KEY
   );
 
+  const [itemsToRender, setItemsToRender] = useState(40);
+
   // Caps Lock
   const [capsLocked, setCapsLocked] = useState(false);
 
@@ -106,6 +108,7 @@ const TypeBox = ({
     if (e.keyCode === 13 || e.keyCode === 9) {
       e.preventDefault();
       setOpenRestart(false);
+      setItemsToRender(40);
       reset(
         countDownConstant,
         difficulty,
@@ -118,6 +121,7 @@ const TypeBox = ({
     else if (e.keyCode === 32) {
       e.preventDefault();
       setOpenRestart(false);
+      setItemsToRender(40);
       reset(
         countDownConstant,
         difficulty,
@@ -1008,7 +1012,21 @@ const TypeBox = ({
     );
   };
 
-  // console.log(status);
+  const startIndex = 0;
+
+  // Calculate the end index for slicing
+  const endIndex = startIndex + itemsToRender;
+
+  // Get the current slice of words
+  const currentWords = words.slice(startIndex, endIndex);
+
+  useEffect(() => {
+    const distanceToEnd = currentWords.length - 1 - currWordIndex;
+
+    if (distanceToEnd === 20) {
+      setItemsToRender((prev) => prev + 20);
+    }
+  }, [currWordIndex]);
 
   return (
     <div onClick={handleInputFocus}>
@@ -1019,23 +1037,25 @@ const TypeBox = ({
           style={{ visibility: status === "finished" ? "hidden" : "visible" }}
         >
           <div className="words">
-            {words.map((word, i) => (
-              <span
-                key={i}
-                ref={wordSpanRefs[i]}
-                className={getWordClassName(i)}
-              >
-                {word.split("").map((char, idx) => (
-                  <span
-                    key={"word" + idx}
-                    className={getCharClassName(i, idx, char, word)}
-                  >
-                    {char}
-                  </span>
-                ))}
-                {getExtraCharsDisplay(word, i)}
-              </span>
-            ))}
+            {currentWords.map((word, i) => {
+              return (
+                <span
+                  key={i}
+                  ref={wordSpanRefs[i]}
+                  className={getWordClassName(i)}
+                >
+                  {word.split("").map((char, idx) => (
+                    <span
+                      key={"word" + idx}
+                      className={getCharClassName(i, idx, char, word)}
+                    >
+                      {char}
+                    </span>
+                  ))}
+                  {getExtraCharsDisplay(word, i)}
+                </span>
+              );
+            })}
           </div>
         </div>
       )}
@@ -1045,7 +1065,7 @@ const TypeBox = ({
           style={{ visibility: status === "finished" ? "hidden" : "visible" }}
         >
           <div className="words">
-            {words.map((word, i) => (
+            {currentWords.map((word, i) => (
               <div key={i + "word"}>
                 <span
                   key={i + "anchor"}

diff --git a/src/style/global.js b/src/style/global.js
@@ -84,6 +84,7 @@ export const GlobalStyles = createGlobalStyle`
     background: ${({ theme }) => theme.background};
     inset: 0;
     z-index: 99;
+    padding-inline: 1rem;
   }
 
   .stats-chart {

diff --git a/src/style/theme.js b/src/style/theme.js
@@ -9,6 +9,17 @@ const lightTheme = {
   fontFamily: "sans-serif",
 };
 
+const tokyoNightTheme = {
+  label: "Tokyo Night",
+  background: "#011628",
+  text: "#CBE0F0",
+  gradient: "linear-gradient(315deg, #F7971E 0%, #FFD200 94%)",
+  title: "#ff9e64",
+  textTypeBox: "#547998",
+  stats: "#B4D0E9",
+  fontFamily: "sans-serif",
+};
+
 const darkTheme = {
   label: "Dark",
   background: "#121212",
@@ -118,7 +129,7 @@ const aluminiumTheme = {
   textTypeBox: "#FAF9F6",
   stats: "#2D3436",
   fontFamily: "Rufina",
-  textShadow: "0px -1px 0px rgba(0,0,0,0.3)"
+  textShadow: "0px -1px 0px rgba(0,0,0,0.3)",
 };
 
 const pianoTheme = {
@@ -130,7 +141,7 @@ const pianoTheme = {
   textTypeBox: "#555",
   stats: "#FAF9F6",
   fontFamily: "Rufina",
-  textShadow: "0px -1px 0px rgba(0,0,0,0.3)"
+  textShadow: "0px -1px 0px rgba(0,0,0,0.3)",
 };
 
 const coolKidTheme = {
@@ -142,7 +153,7 @@ const coolKidTheme = {
   textTypeBox: "#090261",
   stats: "#EA00BA",
   fontFamily: "Tomorrow",
-  textShadow: "0px -1px 0px rgba(0,0,0,0.3)"
+  textShadow: "0px -1px 0px rgba(0,0,0,0.3)",
 };
 
 const edgeRunnerTheme = {
@@ -154,7 +165,7 @@ const edgeRunnerTheme = {
   textTypeBox: "#D1C5C0",
   stats: "#FE00FE",
   fontFamily: "Tomorrow",
-  textShadow: "0 0 2vw #E7E7E3"
+  textShadow: "0 0 2vw #E7E7E3",
 };
 
 const tranquiluxeTheme = {
@@ -166,7 +177,7 @@ const tranquiluxeTheme = {
   textTypeBox: "#FAF9F6",
   stats: "#1b2021",
   fontFamily: "Rufina",
-  textShadow: "0px 1px 1px #000000"
+  textShadow: "0px 1px 1px #000000",
 };
 
 const lumiflexTheme = {
@@ -178,7 +189,7 @@ const lumiflexTheme = {
   textTypeBox: "#2f2f2f",
   stats: "#20F0A0",
   fontFamily: "Rufina",
-  textShadow: "2px 0px 2px #888B8D"
+  textShadow: "2px 0px 2px #888B8D",
 };
 
 const opulentoTheme = {
@@ -190,7 +201,7 @@ const opulentoTheme = {
   textTypeBox: "#B67352",
   stats: "#20F0A0",
   fontFamily: "Rufina",
-  textShadow: "4px 4px 2px #000000"
+  textShadow: "4px 4px 2px #000000",
 };
 
 const velustroTheme = {
@@ -202,13 +213,14 @@ const velustroTheme = {
   textTypeBox: "#3E3232",
   stats: "#FAF9F6",
   fontFamily: "Rufina",
-  textShadow: "1px 0px 0px #000000"
+  textShadow: "1px 0px 0px #000000",
 };
 
 const defaultTheme = darkTheme;
 
 const themesOptions = [
   { value: darkTheme, label: "Dark" },
+  { value: tokyoNightTheme, label: "Tokyo Night" },
   { value: aluminiumTheme, label: "Aluminium" },
   { value: pianoTheme, label: "Piano" },
   { value: terminalTheme, label: "Terminal" },
@@ -224,8 +236,8 @@ const themesOptions = [
   { value: lightTheme, label: "Light" },
   { value: tranquiluxeTheme, label: "Tranquiluxe" },
   { value: lumiflexTheme, label: "Lumiflex" },
-  { value: opulentoTheme, label: "Opulento"},
-  { value: velustroTheme, label: "Velustro"}
+  { value: opulentoTheme, label: "Opulento" },
+  { value: velustroTheme, label: "Velustro" },
 ];
 
 export {
@@ -247,5 +259,6 @@ export {
   edgeRunnerTheme,
   tranquiluxeTheme,
   lumiflexTheme,
-  opulentoTheme
+  opulentoTheme,
+  tokyoNightTheme,
 };