Merge pull request #13 from gamer-ai/staging

v0.3.1-beta/add-pacing-caret-mode
gamer-ai · Aug 29, 2022 · 9d026b2 · 9d026b2
2 parents c5bb049 + 5485cc8
commit 9d026b2
Show file tree

Hide file tree

Showing 8 changed files with 234 additions and 71 deletions.
diff --git a/README.md b/README.md
@@ -17,7 +17,6 @@ An elegant typing test tool.
 
 https://github.com/gamer-ai/eletype-frontend/issues
 
-
 ## Community Channel:
 
 Discord: ![Discord](https://img.shields.io/discord/993567075589181621?style=for-the-badge)
@@ -41,6 +40,9 @@ Discord: ![Discord](https://img.shields.io/discord/993567075589181621?style=for-
     - KPM
     - Accuracy
     - Error analysis (correct/error/missing/extra chars count)
+  - Pacing Style (word pulse/ character caret):
+    - Pulse mode: the active word will have an underlien pulse, which helps improve the speed typing habit.
+    - Caret mode: a pacing caret, advancing character by character, which aligns normal typing habit.
 
 #### 2. Words Card (for English learners)
 

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.0",
+  "version": "0.3.1",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.9.0",

diff --git a/src/components/features/Keyboard/DefaultKeyboard.js b/src/components/features/Keyboard/DefaultKeyboard.js
@@ -9,23 +9,23 @@ const DefaultKeyboard = () => {
   const [inputChar, setInputChar] = useState("");
   const [correctCount, setCorrectCount] = useState(0);
   const [incorrectCount, setIncorrectCount] = useState(0);
-  const accuracy = (correctCount + incorrectCount) === 0 ? 0 : Math.floor(
-    (correctCount / (correctCount + incorrectCount)) * 100
-  );
+  const accuracy =
+    correctCount + incorrectCount === 0
+      ? 0
+      : Math.floor((correctCount / (correctCount + incorrectCount)) * 100);
   const keys = [..." abcdefghijklmnopqrstuvwxyz "];
   const resetStats = () => {
     setCorrectCount(0);
     setIncorrectCount(0);
   };
- 
+
   useEffect(() => {
     keyboardRef.current && keyboardRef.current.focus();
   });
   const handleInputBlur = (event) => {
     keyboardRef.current && keyboardRef.current.focus();
   };
   const handleKeyDown = (event) => {
-
     setInputChar(event.key);
     event.preventDefault();
     return;

diff --git a/src/components/features/TypeBox/Stats.js b/src/components/features/TypeBox/Stats.js
@@ -3,46 +3,48 @@ import { Box } from "@mui/system";
 import { Tooltip } from "@mui/material";
 import { CHAR_TOOLTIP_TITLE } from "../../../constants/Constants";
 
-const Stats = ({ status, wpm, countDown, countDownConstant, statsCharCount, rawKeyStrokes}) => {
+const Stats = ({
+  status,
+  wpm,
+  countDown,
+  countDownConstant,
+  statsCharCount,
+  rawKeyStrokes,
+}) => {
   return (
     <>
-        <h3>{countDown} s </h3>
-        <Box display="flex" flexDirection="row">
-          <h3>WPM: {Math.round(wpm)}</h3>
-          {status === "finished" && (
-            <h4>Accuracy: {Math.round(statsCharCount[0])} %</h4>
-          )}
-          {status === "finished" && (
-            <Tooltip
-              title={
-                <span style={{ whiteSpace: "pre-line" }}>
-                  {CHAR_TOOLTIP_TITLE}
-                </span>
-              }
-            >
-              <h4>
-                Char:{" "}
-                <span className="correct-char-stats">{statsCharCount[1]}</span>/
-                <span className="incorrect-char-stats">
-                  {statsCharCount[2]}
-                </span>
-                /<span className="missing-char-stats">{statsCharCount[3]}</span>
-                /<span className="correct-char-stats">{statsCharCount[4]}</span>
-                /
-                <span className="incorrect-char-stats">
-                  {statsCharCount[5]}
-                </span>
-              </h4>
-            </Tooltip>
-          )}
-          {status === "finished" && (
+      <h3>{countDown} s </h3>
+      <Box display="flex" flexDirection="row">
+        <h3>WPM: {Math.round(wpm)}</h3>
+        {status === "finished" && (
+          <h4>Accuracy: {Math.round(statsCharCount[0])} %</h4>
+        )}
+        {status === "finished" && (
+          <Tooltip
+            title={
+              <span style={{ whiteSpace: "pre-line" }}>
+                {CHAR_TOOLTIP_TITLE}
+              </span>
+            }
+          >
             <h4>
-              Raw KPM: {Math.round((rawKeyStrokes / countDownConstant) * 60.0)}
+              Char:{" "}
+              <span className="correct-char-stats">{statsCharCount[1]}</span>/
+              <span className="incorrect-char-stats">{statsCharCount[2]}</span>/
+              <span className="missing-char-stats">{statsCharCount[3]}</span>/
+              <span className="correct-char-stats">{statsCharCount[4]}</span>/
+              <span className="incorrect-char-stats">{statsCharCount[5]}</span>
             </h4>
-          )}
-        </Box>
+          </Tooltip>
+        )}
+        {status === "finished" && (
+          <h4>
+            Raw KPM: {Math.round((rawKeyStrokes / countDownConstant) * 60.0)}
+          </h4>
+        )}
+      </Box>
     </>
   );
 };
 
-export default Stats;
+export default Stats;