added carrot and added unit mode

components/input/Input.jsx

@@ -17,14 +17,15 @@ export class Input extends React.Component {
       author: this.props.author,
       errorCount: 0,
       validLetters:
-        "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZöüäß.?!;:,'\" ",
+        "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZöüäß.?!;-:,'\" ",
       time: 0.0,
       start: 0.0,
       wpm: 0.0,
       lastSoundIndex: 0,
       clickSounds: [],
       errorSound: undefined,
       words: [],
+      unit: undefined
     };
 
     this.state.fullText.split(" ").forEach((element) => {
@@ -63,6 +64,10 @@ export class Input extends React.Component {
       ? localStorage.getItem("language")
       : "english";
 
+    this.state.unit = localStorage.getItem("unit")
+      ? localStorage.getItem("unit")
+      : "WPM"
+
     if (
       localStorage.getItem("mode")
         ? localStorage.getItem("mode") == "Quotes"
@@ -94,7 +99,10 @@ export class Input extends React.Component {
     });
     this.setState({ index: (this.state.index -= 1) });
     this.setState({
-      typedText: this.state.typedText.substring(0, this.state.typedText.length - 1),
+      typedText: this.state.typedText.substring(
+        0,
+        this.state.typedText.length - 1
+      ),
     });
   }
 
@@ -104,11 +112,11 @@ export class Input extends React.Component {
     if (localStorage.getItem("click_sounds") === "true")
       playSound("click_sounds");
 
-      if (event.key !== this.state.fullText[this.state.index]) {
-        this.setState({ errorCount: this.state.errorCount + 1 });
-        if (localStorage.getItem("error_sounds") === "true")
-          playSound("error_sounds");
-      }
+    if (event.key !== this.state.fullText[this.state.index]) {
+      this.setState({ errorCount: this.state.errorCount + 1 });
+      if (localStorage.getItem("error_sounds") === "true")
+        playSound("error_sounds");
+    }
 
     this.state.typedText += event.key;
     this.state.remainingText = this.state.remainingText.slice(
@@ -135,34 +143,37 @@ export class Input extends React.Component {
     );
 
     let typed = [];
+    let remaining = [];
+
+    for (let i = 0; i < this.state.fullText.length; i++)
+      remaining.push(<a className={styles.remaining}>{this.state.remainingText[i]}</a>);
 
     for (let i = 0; i < this.state.typedText.length; i++) {
       let value = this.state.typedText[i];
       if (value !== this.state.fullText[i])
         typed.push(<a className={styles.wrong}>{this.state.fullText[i]}</a>);
-      else typed.push(<a>{value}</a>);
+      else {
+        typed.push(<a>{value}</a>);
+      }
     }
+    typed.push(<img className={styles.carrot} src="/carrot.png"></img>);
 
     return (
       <div>
         <div className={styles.information}>
           <p className={styles.code}>Errors: {this.state.errorCount} </p>
           <p className={styles.code}>Letters: {this.state.typedText.length} </p>
           <p className={styles.code}>
-            Time elapsed:{" "}
-            <code className={styles.timeElapsed}>
-              {Math.round((this.state.time / 1000) * 1) / 1}
-            </code>{" "}
-            seconds
+            Time elapsed: {Math.round((this.state.time / 1000) * 1) / 1}s
           </p>
-          <p className={styles.code}>WPM: {calculated.wpm}</p>
+          <p className={styles.code}>{this.state.unit}: {this.state.unit == "wpm" ? calculated.wpm : calculated.cpm}</p>
           <p className={styles.code}>Raw: {calculated.raw}</p>
           <p className={styles.code}>Accuracy: {calculated.accuracy}%</p>
         </div>
         <div className={styles.text}>
           <p>
             {typed}
-            <a className={styles.remaining}>{this.state.remainingText}</a>
+            {remaining}
           </p>
         </div>
         <p className={styles.author}>~ {this.state.author}</p>

pages/config/index.js

@@ -4,9 +4,10 @@ import { Mode } from "../../components/config/Mode.jsx"
 export default function Home() {
   return (
     <>
-      <Checkbox title="Error Sound" description="If this is enabled, you will hear a sound, every time you type a error. (Not reommend on Macbook's)" item="error_sounds" />
-      <Checkbox title="Click Sound" description="If this is enabled, you will hear a sound, every time you press a key. (Not reommend on Macbook's)" item="click_sounds" />
+      <Checkbox title="Error Sound" description="If this is enabled, you will hear a sound, every time you type a error. (Not recommend on Macbook's)" item="error_sounds" />
+      <Checkbox title="Click Sound" description="If this is enabled, you will hear a sound, every time you press a key. (Not recommend on Macbook's)" item="click_sounds" />
       <Mode title="Mode" description="If you want to type quotes in you selected language, or just randomly placed words." item="mode" values={["Words", "Quotes"]} />
+      <Mode title="Unit" description="If you want to see your wpm or you cpm." item="unit" values={["WPM", "CPM"]} />
       <Mode title="Language" description="The Language, in which you want to type in" item="language" values={["English", "German", "France", "Russia"]} />
    </>
   )

styles/components/Input.module.css

@@ -3,8 +3,8 @@
 }
 
 .wrong {
-  color: #ef4f4f;
-} 
+  background-color: rgb(240, 84, 84, 1);
+}
 
 .text {
   max-width: 300px;
@@ -18,6 +18,7 @@
   -ms-user-select: none;
   user-select: none;
   cursor: default;
+  font-size: 20px;
 }
 
 .text:focus {
@@ -31,6 +32,11 @@
   margin-top: 0;
 }
 
+.carrot {
+  height: 20px;
+  width: 0.28rem;
+}
+
 .information {
   max-width: 500px;
   overflow: hidden;
@@ -43,6 +49,8 @@
   font-size: 0.9rem;
   font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
     Bitstream Vera Sans Mono, Courier New, monospace;
+  font-size: 17px;
+  display: flex;
 }
 
 .timeElapsed {

styles/components/config/Checkbox.module.css

@@ -12,7 +12,7 @@
   height: auto;
   display: flex;
   align-items: center;
-  margin: 30px;
+  margin: 10px;
 }
 
 .content .box {

util/config.js

@@ -1,6 +1,16 @@
-class Config {
-    mode = "quotes";
-    language = "english";
-    click_sound = false;
-    error_sound = false;
+let currentConfig = {
+    mode: "",
+    language: "",
+    clickSounds: false,
+    errorSounds: false
+}
+
+export function load() {
+    if (localStorage.getItem("config"))
+        this.currentConfig = JSON.parse(localStorage.getItem("config"))
+    else this.save()
+}
+
+export function save() {
+    localStorage.setItem("config", currentConfig)
 }

util/logic/type-logic.js

@@ -10,26 +10,30 @@
  */
 export function calculate(time, typedText, errors, words) {
     const mins = Math.round((time / 1000) * 1) / 1
-    let wpm = Math.round(((typedText.length - errors + (words.length - 2)) * (60 / mins)) / 5)
+    let wpm = Math.round((((typedText.length - errors) + (words.length - 2)) * (60 / mins)) / 5)
     let raw = Math.round((typedText.length * (60 / mins)) / 5);
+    let cpm = Math.round(((typedText.length - errors) * (60 / mins)));
 
     const rawAccuracy = (((typedText.length - errors) / typedText.length) * 100)
     let accuracy = Math.round(rawAccuracy)
 
     if (isNaN(accuracy) || accuracy.toString().includes("-Infinity"))
         accuracy = 100
 
-    if (isNaN(wpm) || wpm.toString().includes("-Infinity"))
+    if (isNaN(wpm) || wpm.toString().includes("-Infinity") || wpm < 0)
         wpm = 0
 
-    if (isNaN(raw) || raw.toString().includes("-Infinity"))
+    if (isNaN(raw) || raw.toString().includes("-Infinity") || raw < 0)
         raw = 0
 
+    if (isNaN(cpm) || cpm.toString().includes("-Infinity") || cpm < 0)
+        cpm = 0
+
     if (typedText.length < errors) {
         wpm = 0
         accuracy = 0
         raw = 0
     }
 
-    return { wpm, accuracy, raw }
+    return { wpm, accuracy, raw, cpm }
 }