added Time gameplay

components/input/Input.jsx

@@ -25,7 +25,8 @@ export class Input extends React.Component {
       clickSounds: [],
       errorSound: undefined,
       words: [],
-      unit: undefined
+      unit: undefined,
+      timeText: "",
     };
 
     this.state.fullText.split(" ").forEach((element) => {
@@ -42,6 +43,11 @@ export class Input extends React.Component {
       this.setState({
         time: Date.now() - this.state.start,
       });
+      if (localStorage.getItem("mode")) {
+        if (localStorage.getItem("mode") !== "Time") {
+          if (this.state.time > parseInt(localStorage.getItem("mode").substring(0, 2)) * 1000) this.handleFinish();
+        }
+      }
     }, 1);
   }
 
@@ -66,11 +72,18 @@ export class Input extends React.Component {
 
     this.state.unit = localStorage.getItem("unit")
       ? localStorage.getItem("unit")
-      : "WPM"
+      : "WPM";
+
+    if (!localStorage.getItem("mode")) localStorage.setItem("mode", "15s");
+
+    if (localStorage.getItem("mode") !== "Text")
+      this.setState({ timeText: " / " + localStorage.getItem("mode") });
+
+      console.log(this.state.timeText)
 
     if (
-      localStorage.getItem("mode")
-        ? localStorage.getItem("mode") == "Quotes"
+      localStorage.getItem("input_mode")
+        ? localStorage.getItem("input_mode") == "Quotes"
         : true
     ) {
       let quote = await getQuote(language);
@@ -146,7 +159,9 @@ export class Input extends React.Component {
     let remaining = [];
 
     for (let i = 0; i < this.state.fullText.length; i++)
-      remaining.push(<a className={styles.remaining}>{this.state.remainingText[i]}</a>);
+      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];
@@ -164,9 +179,13 @@ export class Input extends React.Component {
           <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: {Math.round((this.state.time / 1000) * 1) / 1}s
+            Time elapsed: {Math.round((this.state.time / 1000) * 1) / 1}s{" "}
+            {this.state.timeText}
+          </p>
+          <p className={styles.code}>
+            {this.state.unit}:{" "}
+            {this.state.unit === "WPM" ? calculated.wpm : calculated.cpm}
           </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>

pages/config/index.js

@@ -6,8 +6,9 @@ export default function Home() {
     <>
       <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="Input Mode" description="If you want to type quotes in you selected language, or just randomly placed words." item="input_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="Mode" description="If you want to play in time, or just write a text." item="mode" values={["Text", "10s", "15s", "30s", "60s"]} />
       <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

@@ -7,7 +7,7 @@
 }
 
 .text {
-  max-width: 300px;
+  max-width: 500px;
   display: -webkit-box;
   -webkit-line-clamp: 9;
   -webkit-box-orient: vertical;