Fix countdown bug, considerable refactor

Author: nluka

…PlayArea/Input/PracticePlayAreaInput.css …utBuffer/PracticePlayAreaInputBuffer.csssrc/components/Practice/PlayArea/Input/PracticePlayAreaInput.css renamed to src/components/Practice/PlayArea/InputBuffer/PracticePlayAreaInputBuffer.css src/components/Practice/PlayArea/Input/PracticePlayAreaInput.css renamed to src/components/Practice/PlayArea/InputBuffer/PracticePlayAreaInputBuffer.css

@@ -1,4 +1,4 @@
-#practiceInput {
+#practiceInputBuffer {
   --shadow-color: transparent;
   background-color: rgb(var(--rgb-h2));
   border: none;
@@ -12,9 +12,9 @@
   padding: 0.75rem;
   resize: none;
 }
-#practiceInput:focus {
+#practiceInputBuffer:focus {
   --shadow-color: var(--color-border-low);
 }
-#practiceInput[data-has-mistakes='true'] {
+#practiceInputBuffer[data-has-mistakes='true'] {
   background-color: rgba(var(--rgb-red), 0.5);
 }

…PlayArea/Input/PracticePlayAreaInput.tsx …utBuffer/PracticePlayAreaInputBuffer.tsxsrc/components/Practice/PlayArea/Input/PracticePlayAreaInput.tsx renamed to src/components/Practice/PlayArea/InputBuffer/PracticePlayAreaInputBuffer.tsx src/components/Practice/PlayArea/Input/PracticePlayAreaInput.tsx renamed to src/components/Practice/PlayArea/InputBuffer/PracticePlayAreaInputBuffer.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import roundTextGetFirstUncompletedItemIndex from '../../../../core/roundTextGetFirstUncompletedItemIndex';
+import firstUncompletedRoundTextWordIdx from '../../../../core/firstUncompletedRoundTextWordIdx';
 
 import { useAppDispatch, useAppSelector } from '../../../../redux/hooks';
 import {
@@ -9,21 +9,21 @@ import {
 } from '../../../../redux/roundActions';
 import { PracticeStatus } from '../../../../redux/types';
 import replaceControlCharsWithVisibleChars from '../../../../utility/functions/replaceControlCharsWithVisibleChars';
-import './PracticePlayAreaInput.css';
+import './PracticePlayAreaInputBuffer.css';
 
 type HtmlElementType = HTMLTextAreaElement;
 
-export default function PracticePlayAreaInput() {
+export default function PracticePlayAreaInputBuffer() {
   const [value, setValue] = useState('');
   const [isFocused, setIsFocused] = useState(false);
   const roundStatus = useAppSelector(
     (state) => state.practice.playArea.roundStatus,
   );
-  const textItems = useAppSelector(
-    (state) => state.practice.playArea.roundText?.items,
+  const words = useAppSelector(
+    (state) => state.practice.playArea.roundText?.words,
   );
-  const textItemsCompletedCount = useAppSelector(
-    (state) => state.practice.playArea.roundText?.itemsCompletedCount,
+  const wordsCompletedCount = useAppSelector(
+    (state) => state.practice.playArea.roundText?.numWordsCompleted,
   );
   const element = useRef<HtmlElementType>(null);
   const dispatch = useAppDispatch();
@@ -39,7 +39,7 @@ export default function PracticePlayAreaInput() {
     setValue('');
   }, [roundStatus]);
 
-  useEffect(() => setValue(''), [textItemsCompletedCount]);
+  useEffect(() => setValue(''), [wordsCompletedCount]);
 
   // Cleanup
   useEffect(
@@ -105,16 +105,16 @@ export default function PracticePlayAreaInput() {
   }
 
   function areThereUncorrectedMistakesInBuffer() {
-    if (textItems === undefined || textItems.length === 0) {
+    if (words === undefined || words.length === 0) {
       return false;
     }
-    const currentItemIdx = roundTextGetFirstUncompletedItemIndex(textItems);
-    if (currentItemIdx >= textItems.length) {
-      // all items are completed and correct
+    const currentWordIdx = firstUncompletedRoundTextWordIdx(words);
+    if (currentWordIdx >= words.length) {
+      // all words are completed and correct
       return false;
     }
-    const currentItem = textItems[currentItemIdx];
-    for (const char of currentItem.chars) {
+    const currentWord = words[currentWordIdx];
+    for (const char of currentWord.chars) {
       if (char.input === null) {
         // reached end of input
         return false;
@@ -133,7 +133,7 @@ export default function PracticePlayAreaInput() {
       autoFocus={true}
       className="text-norm py-1 rounded w-100"
       data-has-mistakes={areThereUncorrectedMistakesInBuffer()}
-      id="practiceInput"
+      id="practiceInputBuffer"
       onBlur={() => setIsFocused(false)}
       onChange={handleChange}
       onFocus={() => setIsFocused(true)}

src/components/Practice/PlayArea/PracticePlayArea.tsx

@@ -1,17 +1,17 @@
 import React, { useState } from 'react';
-import type IRoundTextItemCharMistake from '../../../core/types/IRoundTextItemCharMistake';
+import type { IRoundTextCharMistake } from '../../../core/types';
 import PracticePlayAreaAccuracyMeter from './AccuracyMeter/PracticePlayAreaAccuracyMeter';
 import PracticePlayAreaActionButton from './ActionButton/PracticePlayAreaActionButton';
 import PracticePlayAreaCountdownTimer from './CountdownTimer/PracticePlayAreaCountdownTimer';
-import PracticePlayAreaInput from './Input/PracticePlayAreaInput';
+import PracticePlayAreaInputBuffer from './InputBuffer/PracticePlayAreaInputBuffer';
 import PracticePlayAreaMistakeAnalysis from './MistakeAnalysis/PracticePlayAreaMistakeAnalysis';
 import PracticePlayAreaStopwatch from './Stopwatch/PracticePlayAreaStopwatch';
 import PracticePlayAreaText from './Text/PracticePlayAreaText';
 import PracticePlayAreaWpmCounter from './WpmCounter/PracticePlayAreaWpmCounter';
 
 export interface ISelectedChar {
   actual: string;
-  mistakes: IRoundTextItemCharMistake[];
+  mistakes: IRoundTextCharMistake[];
   position: number;
 }
 
@@ -33,7 +33,7 @@ export default function PracticePlayArea() {
         setSelectedChar={setSelectedChar}
       />
       <div className="d-flex gap-2">
-        <PracticePlayAreaInput />
+        <PracticePlayAreaInputBuffer />
         <PracticePlayAreaActionButton />
       </div>
       <PracticePlayAreaMistakeAnalysis selectedChar={selectedChar} />

src/components/Practice/PlayArea/Text/Char/Analyzed/PracticePlayAreaTextCharAnalyzed.tsx

@@ -1,13 +1,13 @@
 import React, { useState } from 'react';
-import type IRoundTextItemCharMistake from '../../../../../../core/types/IRoundTextItemCharMistake';
+import type { IRoundTextCharMistake } from '../../../../../../core/types';
 import { SPACE } from '../../../../../../utility/constants';
 import replaceControlCharsWithVisibleChars from '../../../../../../utility/functions/replaceControlCharsWithVisibleChars';
 import type { ISelectedChar } from '../../../PracticePlayArea';
 import './PracticePlayAreaTextCharAnalyzed.css';
 
 interface IProps {
   actual: string;
-  mistakes: IRoundTextItemCharMistake[];
+  mistakes: IRoundTextCharMistake[];
   position: number;
   selectedChar: ISelectedChar | null;
   setSelectedChar: React.Dispatch<React.SetStateAction<ISelectedChar | null>>;

src/components/Practice/PlayArea/Text/PracticePlayAreaText.tsx

@@ -30,13 +30,13 @@ export default function PracticePlayAreaText(props: IProps) {
     const isRoundCompleted =
       roundStatus === PracticeStatus.running &&
       roundText !== null &&
-      roundText.items.length > 0 &&
-      roundText.itemsCompletedCount === roundText.items.length;
+      roundText.words.length > 0 &&
+      roundText.numWordsCompleted === roundText.words.length;
 
     if (isRoundCompleted) {
       dispatch(actionCreatorPracticeRoundEnd());
     }
-  }, [roundText?.items.length, roundText?.itemsCompletedCount, roundStatus]);
+  }, [roundText?.words.length, roundText?.numWordsCompleted, roundStatus]);
 
   useEffect(() => {
     if (roundStatus !== PracticeStatus.idle) {
@@ -51,7 +51,7 @@ export default function PracticePlayAreaText(props: IProps) {
     if (roundText === null) {
       return <p className="text-danger m-0">Internal error</p>;
     }
-    if (roundText.items.length === 0) {
+    if (roundText.words.length === 0) {
       return (
         <p className="m-0">
           Use the button or the keyboard shortcuts <Key text="Enter" /> to
@@ -60,7 +60,7 @@ export default function PracticePlayAreaText(props: IProps) {
       );
     }
     if (
-      roundText.items.length > 0 &&
+      roundText.words.length > 0 &&
       roundStatus !== PracticeStatus.running &&
       roundResult !== null
     ) {
@@ -77,8 +77,8 @@ export default function PracticePlayAreaText(props: IProps) {
       throw new TypeError('roundText === null');
     }
 
-    for (const item of roundText.items) {
-      for (const char of item.chars) {
+    for (const word of roundText.words) {
+      for (const char of word.chars) {
         chars.push(
           <PracticePlayAreaTextChar
             actual={char.actual}
@@ -105,8 +105,8 @@ export default function PracticePlayAreaText(props: IProps) {
       throw new TypeError('roundText === null');
     }
 
-    for (const item of roundText.items) {
-      for (const char of item.chars) {
+    for (const word of roundText.words) {
+      for (const char of word.chars) {
         chars.push(
           <PracticePlayAreaTextCharAnalyzed
             actual={char.actual}

src/components/Practice/PlayArea/WpmCounter/PracticePlayAreaWpmCounter.tsx

@@ -1,11 +1,11 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { CHARACTERS_PER_WORD } from '../../../../core/constants';
-import roundResultCalcNetWordsPerMinute from '../../../../core/roundResultCalcNetWordsPerMinute';
-import roundTextCalcCorrectCharsCount from '../../../../core/roundTextCalcCorrectCharsCount';
+import { CHARS_PER_WORD } from '../../../../core/constants';
+import calcNetWPM from '../../../../core/calcNetWPM';
+import countCorrectRoundTextChars from '../../../../core/countCorrectRoundTextChars';
 import { useAppSelector } from '../../../../redux/hooks';
 import store from '../../../../redux/store';
 import { PracticeStatus } from '../../../../redux/types';
-import getMinutesElapsed from '../../../../utility/functions/getMinutesElapsed';
+import minutesElapsed from '../../../../utility/functions/minutesElapsed';
 import './PracticePlayAreaWpmCounter.css';
 
 const UPDATE_INTERVAL_MS = 250;
@@ -54,10 +54,10 @@ export default function PracticePlayAreaWpmCounter() {
     }
 
     setWpm(
-      roundResultCalcNetWordsPerMinute(
-        roundTextCalcCorrectCharsCount(text.items),
-        CHARACTERS_PER_WORD,
-        getMinutesElapsed(startTime, Date.now()),
+      calcNetWPM(
+        countCorrectRoundTextChars(text.words),
+        CHARS_PER_WORD,
+        minutesElapsed(startTime, Date.now()),
       ),
     );
   }

src/components/Practice/Settings/Advanced/Items/MedleyCollectionsCustom/Collection/PracticeSettingsAdvancedItemMedleyCollectionCustom.tsx

@@ -15,22 +15,22 @@ import BootstrapButton from '../../../../../../Bootstrap/Button/BootstrapButton'
 import './PracticeSettingsAdvancedItemMedleyCollectionCustom.css';
 
 const MAX_LENGTH_NAME = 32;
-const MAX_LENGTH_ITEMS = 1000;
+const MAX_LENGTH_WORDS_BUFFER = 1000;
 
 export default function PracticeSettingsAdvancedItemMedleyCollectionCustom(
   props: IPracticeMedleyCollection,
 ) {
   const [name, setName] = useState(props.name);
-  const [items, setItems] = useState(props.items.join(SPACE));
+  const [words, setWords] = useState(props.words.join(SPACE));
   const medleyCollectionsActive = useAppSelector(
     (state) => state.practice.settings.current.medleyCollectionsActive,
   );
   const medleyCollectionsCustom = useAppSelector(
     (state) => state.practice.settings.current.medleyCollectionsCustom,
   );
-  const prevItems = useRef(items);
+  const prevWords = useRef(words);
   const nameLength = useRef(name.length);
-  const itemCount = useRef(items.length);
+  const wordsBufferLen = useRef(words.length);
   const dispatch = useAppDispatch();
 
   return (
@@ -83,36 +83,36 @@ export default function PracticeSettingsAdvancedItemMedleyCollectionCustom(
       <textarea
         className="items p-2 rounded w-100"
         onBlur={(event) =>
-          handleCollectionItemsInputBlur(
+          handleCollectionWordsInputBlur(
             event.target.value,
-            prevItems,
+            prevWords,
             props,
             medleyCollectionsCustom,
             dispatch,
           )
         }
         onChange={(event) => {
           handleChange(
-            ChangeTarget.Items,
+            ChangeTarget.Words,
             event.target.value,
-            MAX_LENGTH_ITEMS,
-            itemCount,
-            setItems,
+            MAX_LENGTH_WORDS_BUFFER,
+            wordsBufferLen,
+            setWords,
             { forceLowerCase: false },
           );
         }}
         placeholder="Items (letters/numbers/symbols separated by spaces)"
         spellCheck="false"
-        value={items}
+        value={words}
       />
-      <div className="small text-low">{`${itemCount.current}/${MAX_LENGTH_ITEMS} characters`}</div>
+      <div className="small text-low">{`${wordsBufferLen.current}/${MAX_LENGTH_WORDS_BUFFER} characters`}</div>
     </div>
   );
 }
 
 enum ChangeTarget {
   Name,
-  Items,
+  Words,
 }
 
 function handleChange(
@@ -272,15 +272,15 @@ function handleCollectionDeleteButtonClick(
   );
 }
 
-function handleCollectionItemsInputBlur(
+function handleCollectionWordsInputBlur(
   eventTargetValue: string,
-  prevItems: React.MutableRefObject<string>,
+  prevWords: React.MutableRefObject<string>,
   collectionToUpdate: IPracticeMedleyCollection,
   currentCollections: IPracticeMedleyCollection[],
   dispatch: Dispatch<any>,
 ) {
-  const isNewValueSameAsCurrent = eventTargetValue === prevItems.current;
-  prevItems.current = eventTargetValue;
+  const isNewValueSameAsCurrent = eventTargetValue === prevWords.current;
+  prevWords.current = eventTargetValue;
 
   if (isNewValueSameAsCurrent) {
     return;
@@ -295,11 +295,11 @@ function handleCollectionItemsInputBlur(
   }
 
   const valueTrimmed = eventTargetValue.trim();
-  let newItems: string[];
+  let newWords: string[];
   if (valueTrimmed.length === 0) {
-    newItems = [];
+    newWords = [];
   } else {
-    newItems = valueTrimmed.split(/ +/);
+    newWords = valueTrimmed.split(/ +/);
   }
 
   const updatedCollections = createDeepCopy(
@@ -308,7 +308,7 @@ function handleCollectionItemsInputBlur(
 
   updatedCollections[collectionToUpdateIndex] = {
     name: collectionToUpdate.name,
-    items: newItems,
+    words: newWords,
   };
 
   dispatch(

src/components/Practice/Settings/Advanced/Items/MedleyCollectionsCustom/PracticeSettingsAdvancedItemMedleyCollectionsCustomContainer.tsx

@@ -35,7 +35,7 @@ export default function PracticeSettingsAdvancedItemMedleyCollectionsCustomConta
         <div className="text-norm d-flex flex-column gap-3 mb-2">
           {medleyCollectionsCustom.map((collection) => (
             <PracticeSettingsAdvancedItemMedleyCollectionCustom
-              items={collection.items}
+              words={collection.words}
               key={v4()}
               name={collection.name}
             />
@@ -71,7 +71,7 @@ function AddCollectionButton() {
                 ...medleyCollectionsCustom,
                 {
                   name: getInitialCollectionName(medleyCollectionsCustom),
-                  items: [],
+                  words: [],
                 },
               ],
             }),