Add custom text mode

README.md

@@ -75,6 +75,7 @@ available modes:
 
 - `wordcount`
 - `time`
+- `custom`
 
 ## punctuation
 
@@ -92,4 +93,4 @@ acc: total number of characters (including spaces) of words you got right divide
 
 ## support
 
-- <a href="https://www.paypal.me/briano1905" target="_blank">PayPal</a>
+- <a href="https://www.paypal.me/briano1905" target="_blank">PayPal</a>

index.html

@@ -47,6 +47,9 @@ <h2 id="header">typings</h2>
             <text> / </text>
             <span id="tc-240" onclick="setTimeCount(240)">240</span>
           </span>
+          <span id="custom">
+            <span style="border-bottom: 2px solid;">CUSTOM</span>
+          </span>
         </div>
         <div id="right-wing">WPM: XX / ACC: XX</div>
       </div>

main.js

@@ -31,14 +31,23 @@ function setText() {
   wordList = [];
   currentWord = 0;
   correctKeys = 0;
-  inputField.value = '';
   timerActive = false;
   clearTimeout(timer);
   textDisplay.style.display = 'block';
   inputField.className = '';
 
   switch (typingMode) {
+		case 'custom':
+      const helpText = "Paste your custom text and click redo!"
+      wordList = (inputField.value === 'custom' || inputField.value === '') ? helpText.split(" "): betterSplit(inputField.value);
+      punctuation = false;
+			textDisplay.style.height = '3.2rem';
+			textDisplay.innerHTML = '';
+      inputField.value='';
+			break;
+
     case 'wordcount':
+      inputField.value = '';
       textDisplay.style.height = 'auto';
       textDisplay.innerHTML = '';
       wordList = [];
@@ -51,6 +60,7 @@ function setText() {
       break;
 
     case 'time':
+      inputField.value = '';
       textDisplay.style.height = '3.2rem';
       document.querySelector(`#tc-${timeCount}`).innerHTML = timeCount;
       textDisplay.innerHTML = '';
@@ -60,7 +70,6 @@ function setText() {
         wordList.push(randomWords[n]);
       }
   }
-
   if (punctuation) addPunctuations();
   showText();
   inputField.focus();
@@ -111,13 +120,15 @@ function showText() {
 inputField.addEventListener('keydown', e => {
   // Add wrong class to input field
   switch (typingMode) {
+		case 'custom':
     case 'wordcount':
       if (currentWord < wordList.length) inputFieldClass();
     case 'time':
       if (timerActive) inputFieldClass();
   }
   function inputFieldClass() {
-    if (e.key >= 'a' && e.key <= 'z' || (e.key === `'` || e.key === ',' || e.key === '.' || e.key === ';')) {
+    const puncRegex = /[!:;'",.\/?!@#$%^&*()_}{\[\]-]/;
+    if (e.key >= 'a' && e.key <= 'z' || puncRegex.test(e.key)) {
       let inputWordSlice = inputField.value + e.key;
       let currentWordSlice = wordList[currentWord].slice(0, inputWordSlice.length);
       inputField.className = inputWordSlice === currentWordSlice ? '' : 'wrong';
@@ -133,6 +144,7 @@ inputField.addEventListener('keydown', e => {
   // If it is the first character entered
   if (currentWord === 0 && inputField.value === '') {
     switch (typingMode) {
+			case 'custom':
       case 'wordcount':
         startDate = Date.now();
         break;
@@ -166,7 +178,7 @@ inputField.addEventListener('keydown', e => {
 
     if (inputField.value !== '') {
       // Scroll down text when reach new line
-      if (typingMode === 'time') {
+      if (typingMode === 'time' || typingMode === 'custom') {
         const currentWordPosition = textDisplay.childNodes[currentWord].getBoundingClientRect();
         const nextWordPosition = textDisplay.childNodes[currentWord + 1].getBoundingClientRect();
         if (currentWordPosition.top < nextWordPosition.top) {
@@ -207,6 +219,7 @@ inputField.addEventListener('keydown', e => {
 function showResult() {
   let words, minute, acc;
   switch (typingMode) {
+		case 'custom':
     case 'wordcount':
       words = correctKeys / 5;
       minute = (Date.now() - startDate) / 1000 / 60;
@@ -310,16 +323,26 @@ function setTypingMode(_mode) {
       typingMode = mode;
       setCookie('typingMode', mode, 90);
       document.querySelector('#word-count').style.display = 'inline';
-      document.querySelector('#time-count').style.display = 'none';
+			document.querySelector('#time-count').style.display = 'none';
+      document.querySelector('#custom').style.display = 'none';
       setText();
       break;
     case 'time':
       typingMode = mode;
       setCookie('typingMode', mode, 90);
       document.querySelector('#word-count').style.display = 'none';
-      document.querySelector('#time-count').style.display = 'inline';
+			document.querySelector('#time-count').style.display = 'inline';
+			document.querySelector('#custom').style.display = 'none';
       setText();
-      break;
+			break;
+		case 'custom':
+			typingMode = mode;
+			setCookie('typingMode', mode, 90);
+			document.querySelector('#word-count').style.display = 'none';
+			document.querySelector('#time-count').style.display = 'none';
+			document.querySelector('#custom').style.display = 'inline';
+			setText();
+			break;
     default:
       console.error(`mode ${mode} is undefine`);
   }
@@ -445,4 +468,15 @@ function hideThemeCenter() {
   document.getElementById('command-center').classList.remove('hidden');
 }
 
-
+function betterSplit(str) {
+	// Regex tester for:
+		// Normal a-z, A-Z
+		// punjabi,
+		// CJK,
+		// Russian
+	// TODO: Add support for remaining European languages
+	// Cleaner way to do this???
+	const regex = /[\u0A00-\u0A7F\u3040-\u30ff\u3400-\u4dbf\u4e00-\u9fff\uf900-\ufaff\uff66-\uff9f\u3131-\uD79D]+|[\u0400-\u04FFa-zA-Z0-9!:;'",.\/?!@#$%^&*()_}{\[\]-]+\'*[a-z]*/g;	
+	let array = [...str.match(regex)];
+  return array;
+}