Merge pull request #33 from gamer-ai/v0.3.4-beta/add-redo-button

v0.3.4-beta/add-redo-button
gamer-ai · Oct 3, 2022 · 7a18268 · 7a18268
2 parents b922aa7 + f33a40b
commit 7a18268
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 43 deletions.
diff --git a/README.md b/README.md
@@ -103,8 +103,9 @@ To join the community, please go to the website and hit "discord" icon.
 
   <img width="120" alt="Screen Shot 2022-09-29 at 2 01 51 AM" src="https://user-images.githubusercontent.com/39578778/192989337-637e1154-fbca-420b-babb-22846d5dbdb1.png">
 
-#### 10. [Tab] key to Fast reset
+#### 10. [Tab] key to Fast redo/reset
 
+  - [Tab] + [Space] for quickly redo
   - [Tab] + [Enter] / [Tab] + [Tab] for quickly reset
   - [Tab] + [Any Key] to exit the dialog
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eletype",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.9.0",

diff --git a/src/components/features/SentenceBox/SentenceBox.js b/src/components/features/SentenceBox/SentenceBox.js
@@ -6,11 +6,13 @@ import { Grid } from "@mui/material";
 import { Box } from "@mui/system";
 import IconButton from "../../utils/IconButton";
 import RestartAltIcon from "@mui/icons-material/RestartAlt";
+import UndoIcon from "@mui/icons-material/Undo";
 import {
   DEFAULT_SENTENCES_COUNT,
   TEN_SENTENCES_COUNT,
   FIFTEEN_SENTENCES_COUNT,
-  RESTART_BUTTON_TOOLTIP_TITLE
+  RESTART_BUTTON_TOOLTIP_TITLE,
+  REDO_BUTTON_TOOLTIP_TITLE,
 } from "../../../constants/Constants";
 import useLocalPersistState from "../../../hooks/useLocalPersistState";
 import {
@@ -26,9 +28,14 @@ import SentenceBoxStats from "./SentenceBoxStats";
 import { SOUND_MAP } from "../sound/sound";
 import useSound from "use-sound";
 
-const SentenceBox = ({ sentenceInputRef, handleInputFocus, isFocusedMode, soundMode, soundType }) => {
-
-  const [play] = useSound(SOUND_MAP[soundType], {volume: 0.5});
+const SentenceBox = ({
+  sentenceInputRef,
+  handleInputFocus,
+  isFocusedMode,
+  soundMode,
+  soundType,
+}) => {
+  const [play] = useSound(SOUND_MAP[soundType], { volume: 0.5 });
 
   // local persist timer
   const [sentencesCountConstant, setSentencesCountConstant] =
@@ -47,7 +54,11 @@ const SentenceBox = ({ sentenceInputRef, handleInputFocus, isFocusedMode, soundM
     if (e.keyCode === 13 || e.keyCode === 9) {
       e.preventDefault();
       setOpenRestart(false);
-      reset(sentencesCountConstant, language);
+      reset(sentencesCountConstant, language, false);
+    } else if (e.keyCode === 32) {
+      e.preventDefault();
+      setOpenRestart(false);
+      reset(sentencesCountConstant, language, true);
     } else {
       e.preventDefault();
       setOpenRestart(false);
@@ -118,13 +129,15 @@ const SentenceBox = ({ sentenceInputRef, handleInputFocus, isFocusedMode, soundM
 
   const wpm = time < 1 ? 0 : ((rawKeyStroke / time) * 60) / 5;
 
-  const reset = (newSentencesCountConstant, newLanguage) => {
+  const reset = (newSentencesCountConstant, newLanguage, isRedo) => {
     setStatus("watiting");
     setSentencesCountConstant(newSentencesCountConstant);
     setLanguage(newLanguage);
-    setSentencesDict(
-      sentencesGenerator(newSentencesCountConstant, newLanguage)
-    );
+    if (!isRedo) {
+      setSentencesDict(
+        sentencesGenerator(newSentencesCountConstant, newLanguage)
+      );
+    }
     setTimeRunning(false);
     setTime(0);
     setCurrSentenceIndex(0);
@@ -141,7 +154,7 @@ const SentenceBox = ({ sentenceInputRef, handleInputFocus, isFocusedMode, soundM
 
   const start = () => {
     if (status === "finished") {
-      reset(sentencesCountConstant, language);
+      reset(sentencesCountConstant, language, false);
     }
     if (status !== "started") {
       setStatus("started");
@@ -174,7 +187,7 @@ const SentenceBox = ({ sentenceInputRef, handleInputFocus, isFocusedMode, soundM
   };
 
   const handleKeyDown = (e) => {
-    if (status !== "finished" && soundMode){
+    if (status !== "finished" && soundMode) {
       play();
     }
     const keyCode = e.keyCode;
@@ -306,12 +319,24 @@ const SentenceBox = ({ sentenceInputRef, handleInputFocus, isFocusedMode, soundM
         <div className="restart-button" key="restart-button">
           <Grid container justifyContent="center" alignItems="center">
             <Box display="flex" flexDirection="row">
+              <IconButton
+                aria-label="redo"
+                color="secondary"
+                size="medium"
+                onClick={() => {
+                  reset(sentencesCountConstant, language, true);
+                }}
+              >
+                <Tooltip title={REDO_BUTTON_TOOLTIP_TITLE}>
+                  <UndoIcon />
+                </Tooltip>
+              </IconButton>
               <IconButton
                 aria-label="restart"
                 color="secondary"
                 size="medium"
                 onClick={() => {
-                  reset(sentencesCountConstant, language);
+                  reset(sentencesCountConstant, language, false);
                 }}
               >
                 <Tooltip title={RESTART_BUTTON_TOOLTIP_TITLE}>
@@ -322,7 +347,7 @@ const SentenceBox = ({ sentenceInputRef, handleInputFocus, isFocusedMode, soundM
                 <>
                   <IconButton
                     onClick={() => {
-                      reset(DEFAULT_SENTENCES_COUNT, language);
+                      reset(DEFAULT_SENTENCES_COUNT, language, false);
                     }}
                   >
                     <span
@@ -335,7 +360,7 @@ const SentenceBox = ({ sentenceInputRef, handleInputFocus, isFocusedMode, soundM
                   </IconButton>
                   <IconButton
                     onClick={() => {
-                      reset(TEN_SENTENCES_COUNT, language);
+                      reset(TEN_SENTENCES_COUNT, language, false);
                     }}
                   >
                     <span
@@ -348,7 +373,7 @@ const SentenceBox = ({ sentenceInputRef, handleInputFocus, isFocusedMode, soundM
                   </IconButton>
                   <IconButton
                     onClick={() => {
-                      reset(FIFTEEN_SENTENCES_COUNT, language);
+                      reset(FIFTEEN_SENTENCES_COUNT, language, false);
                     }}
                   >
                     <span
@@ -365,7 +390,7 @@ const SentenceBox = ({ sentenceInputRef, handleInputFocus, isFocusedMode, soundM
                   </IconButton>
                   <IconButton
                     onClick={() => {
-                      reset(sentencesCountConstant, ENGLISH_MODE);
+                      reset(sentencesCountConstant, ENGLISH_MODE, false);
                     }}
                   >
                     <Tooltip title={ENGLISH_SENTENCE_MODE_TOOLTIP_TITLE}>
@@ -378,7 +403,7 @@ const SentenceBox = ({ sentenceInputRef, handleInputFocus, isFocusedMode, soundM
                   </IconButton>
                   <IconButton
                     onClick={() => {
-                      reset(sentencesCountConstant, CHINESE_MODE);
+                      reset(sentencesCountConstant, CHINESE_MODE, false);
                     }}
                   >
                     <Tooltip title={CHINESE_SENTENCE_MODE_TOOLTIP_TITLE}>
@@ -406,6 +431,11 @@ const SentenceBox = ({ sentenceInputRef, handleInputFocus, isFocusedMode, soundM
         onKeyDown={EnterkeyPressReset}
       >
         <DialogTitle>
+          <div>
+            <span className="key-note"> press </span>
+            <span className="key-type">Space</span>{" "}
+            <span className="key-note">to redo</span>
+          </div>
           <div>
             <span className="key-note"> press </span>
             <span className="key-type">Tab</span>{" "}

diff --git a/src/components/features/TypeBox/TypeBox.js b/src/components/features/TypeBox/TypeBox.js
@@ -1,10 +1,11 @@
 import React, { useEffect, useState, useMemo } from "react";
-import useSound from 'use-sound';
+import useSound from "use-sound";
 import {
   wordsGenerator,
   chineseWordsGenerator,
 } from "../../../scripts/wordsGenerator";
 import RestartAltIcon from "@mui/icons-material/RestartAlt";
+import UndoIcon from "@mui/icons-material/Undo";
 import IconButton from "../../utils/IconButton";
 import Grid from "@mui/material/Grid";
 import Box from "@mui/material/Box";
@@ -32,16 +33,22 @@ import {
   DEFAULT_DIFFICULTY_TOOLTIP_TITLE_CHINESE,
   HARD_DIFFICULTY_TOOLTIP_TITLE_CHINESE,
   RESTART_BUTTON_TOOLTIP_TITLE,
+  REDO_BUTTON_TOOLTIP_TITLE,
   PACING_CARET,
   PACING_PULSE,
   PACING_CARET_TOOLTIP,
   PACING_PULSE_TOOLTIP,
 } from "../../../constants/Constants";
 import { SOUND_MAP } from "../sound/sound";
 
-const TypeBox = ({ textInputRef, isFocusedMode, soundMode, soundType, handleInputFocus }) => {
-
-  const [play] = useSound(SOUND_MAP[soundType], {volume: 0.5});
+const TypeBox = ({
+  textInputRef,
+  isFocusedMode,
+  soundMode,
+  soundType,
+  handleInputFocus,
+}) => {
+  const [play] = useSound(SOUND_MAP[soundType], { volume: 0.5 });
 
   // local persist timer
   const [countDownConstant, setCountDownConstant] = useLocalPersistState(
@@ -78,7 +85,12 @@ const TypeBox = ({ textInputRef, isFocusedMode, soundMode, soundType, handleInpu
     if (e.keyCode === 13 || e.keyCode === 9) {
       e.preventDefault();
       setOpenRestart(false);
-      reset(countDownConstant, difficulty, language);
+      reset(countDownConstant, difficulty, language, false);
+    } // press space to redo
+    else if (e.keyCode === 32) {
+      e.preventDefault();
+      setOpenRestart(false);
+      reset(countDownConstant, difficulty, language, true);
     } else {
       e.preventDefault();
       setOpenRestart(false);
@@ -177,13 +189,15 @@ const TypeBox = ({ textInputRef, isFocusedMode, soundMode, soundType, handleInpu
     }
   }, [currWordIndex, wordSpanRefs, difficulty, language]);
 
-  const reset = (newCountDown, difficulty, language) => {
+  const reset = (newCountDown, difficulty, language, isRedo) => {
     setStatus("waiting");
-    if (language === CHINESE_MODE) {
-      setWordsDict(chineseWordsGenerator(difficulty, language));
-    }
-    if (language === ENGLISH_MODE) {
-      setWordsDict(wordsGenerator(DEFAULT_WORDS_COUNT, difficulty, language));
+    if (!isRedo) {
+      if (language === CHINESE_MODE) {
+        setWordsDict(chineseWordsGenerator(difficulty, language));
+      }
+      if (language === ENGLISH_MODE) {
+        setWordsDict(wordsGenerator(DEFAULT_WORDS_COUNT, difficulty, language));
+      }
     }
     setCountDownConstant(newCountDown);
     setCountDown(newCountDown);
@@ -299,7 +313,7 @@ const TypeBox = ({ textInputRef, isFocusedMode, soundMode, soundType, handleInpu
   };
 
   const handleKeyDown = (e) => {
-    if (status !== "finished" && soundMode){
+    if (status !== "finished" && soundMode) {
       play();
     }
     const key = e.key;
@@ -678,12 +692,24 @@ const TypeBox = ({ textInputRef, isFocusedMode, soundMode, soundType, handleInpu
         <div className="restart-button" key="restart-button">
           <Grid container justifyContent="center" alignItems="center">
             <Box display="flex" flexDirection="row">
+              <IconButton
+                aria-label="redo"
+                color="secondary"
+                size="medium"
+                onClick={() => {
+                  reset(countDownConstant, difficulty, language, true);
+                }}
+              >
+                <Tooltip title={REDO_BUTTON_TOOLTIP_TITLE}>
+                  <UndoIcon />
+                </Tooltip>
+              </IconButton>
               <IconButton
                 aria-label="restart"
                 color="secondary"
                 size="medium"
                 onClick={() => {
-                  reset(countDownConstant, difficulty, language);
+                  reset(countDownConstant, difficulty, language, false);
                 }}
               >
                 <Tooltip title={RESTART_BUTTON_TOOLTIP_TITLE}>
@@ -694,7 +720,7 @@ const TypeBox = ({ textInputRef, isFocusedMode, soundMode, soundType, handleInpu
                 <>
                   <IconButton
                     onClick={() => {
-                      reset(COUNT_DOWN_90, difficulty, language);
+                      reset(COUNT_DOWN_90, difficulty, language, false);
                     }}
                   >
                     <span className={getTimerButtonClassName(COUNT_DOWN_90)}>
@@ -703,7 +729,7 @@ const TypeBox = ({ textInputRef, isFocusedMode, soundMode, soundType, handleInpu
                   </IconButton>
                   <IconButton
                     onClick={() => {
-                      reset(COUNT_DOWN_60, difficulty, language);
+                      reset(COUNT_DOWN_60, difficulty, language, false);
                     }}
                   >
                     <span className={getTimerButtonClassName(COUNT_DOWN_60)}>
@@ -712,7 +738,7 @@ const TypeBox = ({ textInputRef, isFocusedMode, soundMode, soundType, handleInpu
                   </IconButton>
                   <IconButton
                     onClick={() => {
-                      reset(COUNT_DOWN_30, difficulty, language);
+                      reset(COUNT_DOWN_30, difficulty, language, false);
                     }}
                   >
                     <span className={getTimerButtonClassName(COUNT_DOWN_30)}>
@@ -721,7 +747,7 @@ const TypeBox = ({ textInputRef, isFocusedMode, soundMode, soundType, handleInpu
                   </IconButton>
                   <IconButton
                     onClick={() => {
-                      reset(COUNT_DOWN_15, difficulty, language);
+                      reset(COUNT_DOWN_15, difficulty, language, false);
                     }}
                   >
                     <span className={getTimerButtonClassName(COUNT_DOWN_15)}>
@@ -735,7 +761,12 @@ const TypeBox = ({ textInputRef, isFocusedMode, soundMode, soundType, handleInpu
               <Box display="flex" flexDirection="row">
                 <IconButton
                   onClick={() => {
-                    reset(countDownConstant, DEFAULT_DIFFICULTY, language);
+                    reset(
+                      countDownConstant,
+                      DEFAULT_DIFFICULTY,
+                      language,
+                      false
+                    );
                   }}
                 >
                   <Tooltip
@@ -756,7 +787,7 @@ const TypeBox = ({ textInputRef, isFocusedMode, soundMode, soundType, handleInpu
                 </IconButton>
                 <IconButton
                   onClick={() => {
-                    reset(countDownConstant, HARD_DIFFICULTY, language);
+                    reset(countDownConstant, HARD_DIFFICULTY, language, false);
                   }}
                 >
                   <Tooltip
@@ -779,7 +810,7 @@ const TypeBox = ({ textInputRef, isFocusedMode, soundMode, soundType, handleInpu
                 </IconButton>
                 <IconButton
                   onClick={() => {
-                    reset(countDownConstant, difficulty, ENGLISH_MODE);
+                    reset(countDownConstant, difficulty, ENGLISH_MODE, false);
                   }}
                 >
                   <Tooltip title={ENGLISH_MODE_TOOLTIP_TITLE}>
@@ -790,7 +821,7 @@ const TypeBox = ({ textInputRef, isFocusedMode, soundMode, soundType, handleInpu
                 </IconButton>
                 <IconButton
                   onClick={() => {
-                    reset(countDownConstant, difficulty, CHINESE_MODE);
+                    reset(countDownConstant, difficulty, CHINESE_MODE, false);
                   }}
                 >
                   <Tooltip title={CHINESE_MODE_TOOLTIP_TITLE}>
@@ -855,6 +886,11 @@ const TypeBox = ({ textInputRef, isFocusedMode, soundMode, soundType, handleInpu
         onKeyDown={EnterkeyPressReset}
       >
         <DialogTitle>
+          <div>
+            <span className="key-note"> press </span>
+            <span className="key-type">Space</span>{" "}
+            <span className="key-note">to redo</span>
+          </div>
           <div>
             <span className="key-note"> press </span>
             <span className="key-type">Tab</span>{" "}