@testgorilla/tgo-typing-test 1.0.0 → 2.0.0

package/src/lib/helpers/controllers/input-controller.ts

@@ -0,0 +1,710 @@
+import * as TestLogic from '../test/test-logic';
+import * as TestUI from '../test/test-ui';
+import * as TestStats from '../test/test-stats';
+import Config, * as UpdateConfig from '../config';
+import * as Misc from '../../utils/misc';
+import * as Caret from '../test/caret';
+import * as CustomText from '../test/custom-text';
+import * as TimerProgress from '../test/timer-progress';
+import * as Focus from '../test/focus';
+import * as Replay from '../test/replay';
+import * as WeakSpot from '../test/weak-spot';
+import * as TestActive from '../states/test-active';
+import * as CompositionState from '../states/composition';
+import * as TestInput from '../test/test-input';
+import * as TestWords from '../test/test-words';
+
+let dontInsertSpace = false;
+const correctShiftUsed = true;
+
+let wordsInput: HTMLInputElement;
+
+function setWordsInput(value: string): void {
+  // Only change #wordsInput if it's not already the wanted value
+  // Avoids Safari triggering unneeded events, causing issues with
+  // dead keys.
+  if (value !== wordsInput.value) {
+    wordsInput.value = value;
+  }
+}
+
+function updateUI(): void {
+  const acc = Misc.roundTo2(TestStats.calculateAccuracy());
+}
+
+function backspaceToPrevious(): void {
+  if (!TestActive.get()) return;
+
+  if (TestInput.input.history.length == 0 || TestUI.currentWordElementIndex == 0) {
+    return;
+  }
+
+  if (
+    (TestInput.input.history[TestWords.words.currentIndex - 1] ==
+      TestWords.words.get(TestWords.words.currentIndex - 1) &&
+      !Config.freedomMode) ||
+    document
+      .querySelectorAll('.word')
+      [TestWords.words.currentIndex - 1]?.classList.contains('hidden')
+  ) {
+    return;
+  }
+
+  if (Config.confidenceMode === 'on' || Config.confidenceMode === 'max') {
+    return;
+  }
+
+  TestInput.input.current = TestInput.input.popHistory();
+  TestInput.corrected.popHistory();
+  if (Config.funbox === 'nospace' || Config.funbox === 'arrows') {
+    TestInput.input.current = TestInput.input.current.slice(0, -1);
+  }
+  TestWords.words.decreaseCurrentIndex();
+  TestUI.setCurrentWordElementIndex(TestUI.currentWordElementIndex - 1);
+  TestUI.updateActiveElement(true);
+  TestUI.updateWordElement();
+
+  Caret.updatePosition();
+  Replay.addReplayEvent('backWord');
+}
+
+function handleSpace(): void {
+  if (!TestActive.get()) return;
+
+  if (TestInput.input.current === '') return;
+
+  const currentWord = TestWords.words.getCurrent();
+  if (Config.funbox === 'layoutfluid' && Config.mode !== 'time') {
+    // here I need to check if Config.customLayoutFluid exists because of my scuffed solution of returning whenever value is undefined in the setCustomLayoutfluid function
+    const layouts = Config.customLayoutfluid
+      ? Config.customLayoutfluid.split('#')
+      : ['qwerty', 'dvorak', 'colemak'];
+    let index = 0;
+    const outof = TestWords.words.length;
+    index = Math.floor((TestInput.input.history.length + 1) / (outof / layouts.length));
+  }
+  dontInsertSpace = true;
+
+  const burst = TestStats.calculateBurst();
+  TestInput.pushBurstToHistory(burst);
+
+  //correct word or in zen mode
+  const isWordCorrect = currentWord == TestInput.input.current || Config.mode == 'zen';
+  TestInput.incrementAccuracy(isWordCorrect);
+  if (isWordCorrect) {
+    TestInput.input.pushHistory();
+    TestWords.words.increaseCurrentIndex();
+    TestUI.setCurrentWordElementIndex(TestUI.currentWordElementIndex + 1);
+    TestUI.updateActiveElement();
+    Caret.updatePosition();
+    TestInput.incrementKeypressCount();
+    TestInput.pushKeypressWord(TestWords.words.currentIndex);
+    Replay.addReplayEvent('submitCorrectWord');
+  } else {
+    TestInput.pushMissedWord(TestWords.words.getCurrent());
+    TestInput.incrementKeypressErrors();
+    const cil = TestInput.input.current.length;
+    if (cil <= TestWords.words.getCurrent().length) {
+      if (cil >= TestInput.corrected.current.length) {
+        TestInput.corrected.current += '_';
+      } else {
+        TestInput.corrected.current =
+          TestInput.corrected.current.substring(0, cil) +
+          '_' +
+          TestInput.corrected.current.substring(cil + 1);
+      }
+    }
+    if (Config.stopOnError != 'off') {
+      if (Config.difficulty == 'expert' || Config.difficulty == 'master') {
+        //failed due to diff when pressing space
+        TestLogic.fail('difficulty');
+        return;
+      }
+      if (Config.stopOnError == 'word') {
+        dontInsertSpace = false;
+        Replay.addReplayEvent('incorrectLetter', '_');
+        TestUI.updateWordElement(true);
+        Caret.updatePosition();
+      }
+      return;
+    }
+    TestInput.input.pushHistory();
+    TestUI.highlightBadWord(TestUI.currentWordElementIndex, !Config.blindMode);
+    TestWords.words.increaseCurrentIndex();
+    TestUI.setCurrentWordElementIndex(TestUI.currentWordElementIndex + 1);
+    TestUI.updateActiveElement();
+    Caret.updatePosition();
+    TestInput.incrementKeypressCount();
+    TestInput.pushKeypressWord(TestWords.words.currentIndex);
+    TestInput.updateLastKeypress();
+    if (Config.difficulty == 'expert' || Config.difficulty == 'master') {
+      TestLogic.fail('difficulty');
+      return;
+    } else if (TestWords.words.currentIndex == TestWords.words.length) {
+      //submitted last word that is incorrect
+      TestLogic.finish();
+      return;
+    }
+    Replay.addReplayEvent('submitErrorWord');
+  }
+
+  let wordLength;
+  if (Config.mode === 'zen') {
+    wordLength = TestInput.input.current.length;
+  } else {
+    wordLength = TestWords.words.getCurrent().length;
+  }
+
+  const flex = Misc.whorf(Config.minBurstCustomSpeed, wordLength);
+
+  TestInput.corrected.pushHistory();
+
+  if (
+    !Config.showAllLines ||
+    Config.mode == 'time' ||
+    (CustomText.isWordRandom && CustomText.word == 0) ||
+    CustomText.isTimeRandom
+  ) {
+    const currentTop = Math.floor(
+      document.querySelectorAll<HTMLElement>('#words .word')[TestUI.currentWordElementIndex - 1]
+        .offsetTop
+    );
+    let nextTop;
+    try {
+      nextTop = Math.floor(
+        document.querySelectorAll<HTMLElement>('#words .word')[TestUI.currentWordElementIndex]
+          .offsetTop
+      );
+    } catch (e) {
+      nextTop = 0;
+    }
+
+    if (nextTop > currentTop && !TestUI.lineTransition) {
+      TestUI.lineJump(currentTop);
+    }
+  } //end of line wrap
+
+  if (
+    Config.mode === 'words' ||
+    Config.mode === 'custom' ||
+    Config.mode === 'quote' ||
+    Config.mode === 'zen'
+  ) {
+    TimerProgress.update();
+  }
+  if (
+    Config.mode == 'time' ||
+    Config.mode == 'words' ||
+    Config.mode == 'custom' ||
+    Config.mode == 'quote'
+  ) {
+    TestLogic.addWord();
+  }
+}
+
+function isCharCorrect(char: string, charIndex: number): boolean {
+  if (!correctShiftUsed) return false;
+
+  if (Config.mode == 'zen') {
+    return true;
+  }
+
+  const originalChar = TestWords.words.getCurrent()[charIndex];
+
+  if (originalChar == char) {
+    return true;
+  }
+
+  if (Config.language.split('_')[0] == 'russian') {
+    if ((char === 'е' || char === 'e') && originalChar == 'ё') {
+      return true;
+    }
+    if (char === 'ё' && (originalChar == 'е' || originalChar === 'e')) {
+      return true;
+    }
+  }
+
+  if (Config.funbox === 'arrows') {
+    if ((char === 'w' || char === 'ArrowUp') && originalChar == '↑') {
+      return true;
+    }
+    if ((char === 's' || char === 'ArrowDown') && originalChar == '↓') {
+      return true;
+    }
+    if ((char === 'a' || char === 'ArrowLeft') && originalChar == '←') {
+      return true;
+    }
+    if ((char === 'd' || char === 'ArrowRight') && originalChar == '→') {
+      return true;
+    }
+  }
+
+  if (
+    (char === `’` || char === '‘' || char === "'") &&
+    (originalChar == `’` || originalChar === '‘' || originalChar === "'")
+  ) {
+    return true;
+  }
+
+  if (
+    (char === `"` || char === '”' || char == '“' || char === '„') &&
+    (originalChar == `"` || originalChar === '”' || originalChar === '“' || originalChar === '„')
+  ) {
+    return true;
+  }
+
+  if (
+    (char === '–' || char === '—' || char == '-') &&
+    (originalChar == '-' || originalChar === '–' || originalChar === '—')
+  ) {
+    return true;
+  }
+
+  return false;
+}
+
+function handleChar(char: string, charIndex: number): void {
+  if (TestUI.resultCalculating || TestUI.resultVisible) {
+    return;
+  }
+
+  if (char === '…') {
+    for (let i = 0; i < 3; i++) {
+      handleChar('.', charIndex + i);
+    }
+
+    return;
+  }
+
+  if (char === '\n' && (Config.funbox === '58008' || Config.funbox === 'tenKeyMode')) {
+    char = ' ';
+  }
+
+  if (char !== '\n' && char !== '\t' && /\s/.test(char)) {
+    if (Config.funbox === 'nospace' || Config.funbox === 'arrows') return;
+    handleSpace();
+
+    //insert space for expert and master or strict space,
+    //or for stop on error set to word,
+    //otherwise dont do anything
+    if (
+      Config.difficulty !== 'normal' ||
+      (Config.strictSpace && Config.mode !== 'zen') ||
+      Config.stopOnError === 'word'
+    ) {
+      if (dontInsertSpace) {
+        dontInsertSpace = false;
+        return;
+      }
+    } else {
+      return;
+    }
+  }
+
+  if (Config.mode !== 'zen' && TestWords.words.getCurrent()[charIndex] !== '\n' && char === '\n') {
+    return;
+  }
+
+  //start the test
+  if (!TestActive.get() && !TestLogic.startTest()) {
+    return;
+  }
+
+  Focus.set(true);
+  Caret.stopAnimation();
+
+  const thisCharCorrect = isCharCorrect(char, charIndex);
+
+  if (thisCharCorrect && Config.mode !== 'zen') {
+    char = TestWords.words.getCurrent().charAt(charIndex);
+  }
+
+  if (!thisCharCorrect && char === '\n') {
+    if (TestInput.input.current === '') return;
+    char = ' ';
+  }
+
+  if (TestInput.input.current === '') {
+    TestInput.setBurstStart(performance.now());
+  }
+
+  const resultingWord =
+    TestInput.input.current.substring(0, charIndex) +
+    char +
+    TestInput.input.current.substring(charIndex + 1);
+
+  // If a trailing composed char is used, ignore it when counting accuracy
+  if (
+    !thisCharCorrect &&
+    Misc.trailingComposeChars.test(resultingWord) &&
+    CompositionState.getComposing()
+  ) {
+    TestInput.input.current = resultingWord;
+    TestUI.updateWordElement();
+    Caret.updatePosition();
+    return;
+  }
+
+  // MonkeyPower.addPower(thisCharCorrect);
+  TestInput.incrementAccuracy(thisCharCorrect);
+
+  if (!thisCharCorrect) {
+    TestInput.incrementKeypressErrors();
+    TestInput.pushMissedWord(TestWords.words.getCurrent());
+  }
+
+  WeakSpot.updateScore(
+    Config.mode === 'zen' ? char : TestWords.words.getCurrent()[charIndex],
+    thisCharCorrect
+  );
+
+  if (!correctShiftUsed && Config.difficulty != 'master') return;
+
+  //update current corrected version. if its empty then add the current char. if its not then replace the last character with the currently pressed one / add it
+  if (TestInput.corrected.current === '') {
+    TestInput.corrected.current += resultingWord;
+  } else {
+    if (charIndex >= TestInput.corrected.current.length) {
+      TestInput.corrected.current += char;
+    } else if (!thisCharCorrect) {
+      TestInput.corrected.current =
+        TestInput.corrected.current.substring(0, charIndex) +
+        char +
+        TestInput.corrected.current.substring(charIndex + 1);
+    }
+  }
+
+  TestInput.incrementKeypressCount();
+  TestInput.updateLastKeypress();
+  TestInput.pushKeypressWord(TestWords.words.currentIndex);
+
+  if (Config.difficulty !== 'master' && Config.stopOnError == 'letter' && !thisCharCorrect) {
+    return;
+  }
+
+  Replay.addReplayEvent(thisCharCorrect ? 'correctLetter' : 'incorrectLetter', char);
+
+  //update the active word top, but only once
+  if (TestInput.input.current.length === 1 && TestWords.words.currentIndex === 0) {
+    TestUI.setActiveWordTop((<HTMLElement>document.querySelector('#words .active'))?.offsetTop);
+  }
+
+  //max length of the input is 20 unless in zen mode then its 30
+  if (
+    (Config.mode === 'zen' && charIndex < 30) ||
+    (Config.mode !== 'zen' && charIndex < TestWords.words.getCurrent().length + 20)
+  ) {
+    TestInput.input.current = resultingWord;
+  }
+
+  if (!thisCharCorrect && Config.difficulty == 'master') {
+    TestInput.input.pushHistory();
+    TestInput.corrected.pushHistory();
+    TestLogic.fail('difficulty');
+    return;
+  }
+
+  if (Config.mode != 'zen') {
+    //not applicable to zen mode
+    //auto stop the test if the last word is correct
+    const currentWord = TestWords.words.getCurrent();
+    const lastindex = TestWords.words.currentIndex;
+    if (
+      (currentWord == TestInput.input.current ||
+        (Config.quickEnd &&
+          currentWord.length == TestInput.input.current.length &&
+          Config.stopOnError == 'off')) &&
+      lastindex == TestWords.words.length - 1
+    ) {
+      TestInput.input.pushHistory();
+      TestInput.corrected.pushHistory();
+      TestLogic.finish();
+      return;
+    }
+  }
+
+  const activeWordTopBeforeJump = document.querySelector<HTMLElement>('#words .word.active')
+    ?.offsetTop as number;
+  TestUI.updateWordElement();
+
+  if (!Config.hideExtraLetters) {
+    const newActiveTop = document.querySelector<HTMLElement>('#words .word.active')
+      ?.offsetTop as number;
+    //stop the word jump by slicing off the last character, update word again
+    if (
+      activeWordTopBeforeJump < newActiveTop &&
+      !TestUI.lineTransition &&
+      TestInput.input.current.length > 1
+    ) {
+      if (Config.mode == 'zen') {
+        const currentTop = Math.floor(
+          document.querySelectorAll<HTMLElement>('#words .word')[TestUI.currentWordElementIndex - 1]
+            ?.offsetTop
+        ) as number;
+        if (!Config.showAllLines) TestUI.lineJump(currentTop);
+      } else {
+        TestInput.input.current = TestInput.input.current.slice(0, -1);
+        TestUI.updateWordElement();
+      }
+    }
+  }
+
+  //simulate space press in nospace funbox
+  if (
+    ((Config.funbox === 'nospace' || Config.funbox === 'arrows') &&
+      TestInput.input.current.length === TestWords.words.getCurrent().length) ||
+    (char === '\n' && thisCharCorrect)
+  ) {
+    handleSpace();
+  }
+
+  if (char !== '\n') {
+    Caret.updatePosition();
+  }
+}
+
+function handleTab(
+  event: { preventDefault: () => void; shiftKey: any },
+  popupVisible: boolean
+): void {
+  if (TestUI.resultCalculating) {
+    event.preventDefault();
+    return;
+  }
+
+  let shouldInsertTabCharacter = false;
+
+  if ((Config.mode == 'zen' && !event.shiftKey) || (TestWords.hasTab && !event.shiftKey)) {
+    shouldInsertTabCharacter = true;
+  }
+}
+
+export function setWordsInputElement(wordsElement: HTMLInputElement) {
+  wordsInput = wordsElement;
+}
+
+export async function inputKeydown(event: any, wordsFocused: boolean) {
+  const allowTyping = !TestUI.resultVisible && (wordsFocused || event.key !== 'Enter');
+
+  //no space for tenKeyMode
+  if (Config.funbox === 'tenKeyMode' && event.keyCode === 32) {
+    event.preventDefault();
+  }
+
+  if (allowTyping && !wordsFocused && event.key !== 'Enter') {
+    TestUI.focusWords();
+    if (Config.showOutOfFocusWarning) {
+      event.preventDefault();
+    }
+  }
+
+  //tab
+  if (event.key == 'Tab') {
+    handleTab(event, false);
+  }
+
+  if (!allowTyping) return;
+
+  if (!event.isTrusted || TestUI.testRestarting) {
+    event.preventDefault();
+    return;
+  }
+
+  if (TestInput.spacingDebug) {
+    console.log(
+      'spacing debug',
+      'keypress',
+      event.key,
+      'length',
+      TestInput.keypressTimings.spacing.array.length
+    );
+  }
+  TestInput.recordKeypressSpacing();
+  TestInput.setKeypressDuration(performance.now());
+  TestInput.setKeypressNotAfk();
+
+  //blocking firefox from going back in history with backspace
+  if (event.key === 'Backspace') {
+    const t = /INPUT|SELECT|TEXTAREA/i;
+    if (!t.test((event.target as unknown as Element).tagName)) {
+      event.preventDefault();
+    }
+
+    if (Config.confidenceMode === 'max') {
+      event.preventDefault();
+      return;
+    }
+  }
+
+  if (Config.funbox !== 'arrows' && /Arrow/i.test(event.key)) {
+    event.preventDefault();
+    return;
+  }
+
+  if (event.key === 'Backspace' && TestInput.input.current.length === 0) {
+    backspaceToPrevious();
+    if (TestInput.input.current) {
+      setWordsInput(' ' + TestInput.input.current + ' ');
+    }
+  }
+
+  if (event.key === 'Enter') {
+    if (event.shiftKey && Config.mode == 'zen') {
+      TestLogic.finish();
+    } else if (
+      event.shiftKey &&
+      ((Config.mode == 'time' && Config.time === 0) ||
+        (Config.mode == 'words' && Config.words === 0))
+    ) {
+      TestInput.setBailout(true);
+      TestLogic.finish();
+    } else {
+      handleChar('\n', TestInput.input.current.length);
+      setWordsInput(' ' + TestInput.input.current);
+    }
+  }
+
+  //show dead keys
+  if (event.key === 'Dead' && !CompositionState.getComposing()) {
+    const word = document.querySelector<HTMLElement>('#words .word.active');
+    const len = TestInput.input.current.length; // have to do this because prettier wraps the line and causes an error
+
+    // Check to see if the letter actually exists to toggle it as dead
+    const deadLetter = word?.querySelectorAll('letter')[len];
+    if (deadLetter) {
+      deadLetter.classList.toggle('dead');
+    }
+  }
+
+  if (Config.funbox === 'arrows') {
+    let char = event.key;
+    if (['ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown'].includes(char)) {
+      if (char === 'ArrowLeft') char = 'a';
+      if (char === 'ArrowRight') char = 'd';
+      if (char === 'ArrowDown') char = 's';
+      if (char === 'ArrowUp') char = 'w';
+      event.preventDefault();
+      handleChar(char, TestInput.input.current.length);
+      updateUI();
+      setWordsInput(' ' + TestInput.input.current);
+    }
+  }
+}
+
+export function wordsInputKeyup(event: any) {
+  if (!event.isTrusted || TestUI.testRestarting) {
+    event.preventDefault();
+    return;
+  }
+
+  if (TestUI.resultVisible) return;
+  const now = performance.now();
+  if (TestInput.keypressTimings.duration.current !== -1) {
+    const diff = Math.abs(TestInput.keypressTimings.duration.current - now);
+    TestInput.pushKeypressDuration(diff);
+  }
+  TestInput.setKeypressDuration(now);
+}
+
+export function wordsInputBeforeinput(event: any) {
+  if (!event.isTrusted) return;
+  if ((event.target as HTMLInputElement).value === '') {
+    (event.target as HTMLInputElement).value = ' ';
+  }
+}
+
+export function wordsInputInput(event: any) {
+  if (!event.isTrusted || TestUI.testRestarting) {
+    (event.target as HTMLInputElement).value = ' ';
+    return;
+  }
+
+  TestInput.setKeypressNotAfk();
+
+  const realInputValue = (event.target as HTMLInputElement).value.normalize();
+  const inputValue = realInputValue.slice(1);
+
+  // input will be modified even with the preventDefault() in
+  // beforeinput/keydown if it's part of a compose sequence. this undoes
+  // the effects of that and takes the input out of compose mode.
+  if (Config.layout !== 'default' && inputValue.length >= TestInput.input.current.length) {
+    setWordsInput(' ' + TestInput.input.current);
+    return;
+  }
+
+  if (realInputValue.length === 0 && TestInput.input.current.length === 0) {
+    // fallback for when no Backspace keydown event (mobile)
+    backspaceToPrevious();
+  } else if (inputValue.length < TestInput.input.current.length) {
+    TestInput.input.current = inputValue;
+    TestUI.updateWordElement();
+    Caret.updatePosition();
+    if (!CompositionState.getComposing()) {
+      Replay.addReplayEvent('setLetterIndex', TestInput.input.current.length);
+    }
+  } else if (inputValue !== TestInput.input.current) {
+    let diffStart = 0;
+    while (inputValue[diffStart] === TestInput.input.current[diffStart]) {
+      diffStart++;
+    }
+
+    for (let i = diffStart; i < inputValue.length; i++) {
+      handleChar(inputValue[i], i);
+    }
+  }
+
+  setWordsInput(' ' + TestInput.input.current);
+  updateUI();
+
+  const statebefore = CompositionState.getComposing();
+  setTimeout(() => {
+    // checking composition state during the input event and on the next loop
+    // this is done because some browsers (e.g. Chrome) will fire the input
+    // event before the compositionend event.
+    // this ensures the UI is correct
+
+    const stateafter = CompositionState.getComposing();
+    if (statebefore !== stateafter) {
+      TestUI.updateWordElement();
+    }
+
+    // force caret at end of input
+    // doing it on next cycle because Chromium on Android won't let me edit
+    // the selection inside the input event
+    if (
+      (event.target as HTMLInputElement).selectionStart !==
+        (event.target as HTMLInputElement).value.length &&
+      (!Misc.trailingComposeChars.test((event.target as HTMLInputElement).value) ||
+        ((event.target as HTMLInputElement).selectionStart ?? 0) <
+          (event.target as HTMLInputElement).value.search(Misc.trailingComposeChars))
+    ) {
+      (event.target as HTMLInputElement).selectionStart = (
+        event.target as HTMLInputElement
+      ).selectionEnd = (event.target as HTMLInputElement).value.length;
+    }
+  }, 0);
+}
+
+export function wordsInputFocus(event: { target: HTMLInputElement }) {
+  (event.target as HTMLInputElement).selectionStart = (
+    event.target as HTMLInputElement
+  ).selectionEnd = (event.target as HTMLInputElement).value.length;
+}
+
+export function wordsInputCopy(event: { preventDefault: () => void }) {
+  event.preventDefault();
+}
+
+export function wordsInputPaste(event: { preventDefault: () => void }) {
+  event.preventDefault();
+}
+
+// Composing events
+export function wordsInputCompositionstart() {
+  CompositionState.setComposing(true);
+  CompositionState.setStartPos(TestInput.input.current.length);
+}
+
+export function wordsInputCompositionend() {
+  CompositionState.setComposing(false);
+}