@testgorilla/tgo-typing-test 1.0.0 → 2.0.0

package/src/lib/helpers/test/test-ui.ts

@@ -0,0 +1,370 @@
+import Config from '../../helpers/config';
+import * as TestWords from './test-words';
+import * as TestInput from './test-input';
+import * as Caret from './caret';
+import * as OutOfFocus from './out-of-focus';
+import * as Misc from '../../utils/misc';
+import * as CompositionState from '../states/composition';
+
+let wordsWrapper: HTMLElement;
+let wordsInput: HTMLInputElement;
+let words: HTMLElement;
+
+export let currentWordElementIndex = 0;
+export let resultVisible = false;
+export let activeWordTop = 0;
+export let testRestarting = false;
+export let testRestartingPromise: Promise<unknown>;
+export const lineTransition = false;
+export let currentTestLine = 0;
+export let resultCalculating = false;
+
+export function setWordsWrapperElement(wordsWrapperElem: HTMLElement) {
+  wordsWrapper = wordsWrapperElem;
+}
+
+export function setWordsInputElementTestUI(wordsElement: HTMLInputElement) {
+  wordsInput = wordsElement;
+}
+
+export function setWordsElement(wordsElem: HTMLElement) {
+  words = wordsElem;
+}
+
+export function setResultVisible(val: boolean): void {
+  resultVisible = val;
+}
+
+export function setCurrentWordElementIndex(val: number): void {
+  currentWordElementIndex = val;
+}
+
+export function setActiveWordTop(val: number): void {
+  activeWordTop = val;
+}
+
+let restartingResolve: null | ((value?: unknown) => void);
+export function setTestRestarting(val: boolean): void {
+  testRestarting = val;
+  if (val === true) {
+    testRestartingPromise = new Promise(resolve => {
+      restartingResolve = resolve;
+    });
+  } else {
+    if (restartingResolve) restartingResolve();
+    restartingResolve = null;
+  }
+}
+
+export function setResultCalculating(val: boolean): void {
+  resultCalculating = val;
+}
+
+export function reset(): void {
+  currentTestLine = 0;
+  currentWordElementIndex = 0;
+}
+
+export function focusWords(): void {
+  if (!wordsWrapper.classList.contains('hidden')) {
+    wordsInput.focus();
+  }
+}
+
+export function updateActiveElement(backspace?: boolean): void {
+  const active = document.querySelector('#words .active');
+  if (Config.mode == 'zen' && backspace) {
+    active?.remove();
+  } else if (active !== null) {
+    if (Config.highlightMode == 'word') {
+      active.querySelectorAll('letter').forEach(e => {
+        e.classList.remove('correct');
+      });
+    }
+    active.classList.remove('active');
+  }
+  try {
+    const activeWord = document.querySelectorAll('#words .word')[currentWordElementIndex];
+    activeWord.classList.add('active');
+    activeWord.classList.remove('error');
+    activeWordTop = (<HTMLElement>document.querySelector('#words .active')).offsetTop;
+    if (Config.highlightMode == 'word') {
+      activeWord.querySelectorAll('letter').forEach(e => {
+        e.classList.add('correct');
+      });
+    }
+  } catch (e) {
+    console.error(e);
+  }
+}
+
+function getWordHTML(word: string): string {
+  let newlineafter = false;
+  let retval = `<div class='word'>`;
+  for (let c = 0; c < word.length; c++) {
+    if (Config.funbox === 'tenKeyMode') {
+      newlineafter = true;
+    }
+    if (Config.funbox === 'arrows') {
+      if (word.charAt(c) === '↑') {
+        retval += `<letter><i class="fas fa-arrow-up"></i></letter>`;
+      }
+      if (word.charAt(c) === '↓') {
+        retval += `<letter><i class="fas fa-arrow-down"></i></letter>`;
+      }
+      if (word.charAt(c) === '←') {
+        retval += `<letter><i class="fas fa-arrow-left"></i></letter>`;
+      }
+      if (word.charAt(c) === '→') {
+        retval += `<letter><i class="fas fa-arrow-right"></i></letter>`;
+      }
+    } else if (word.charAt(c) === '\t') {
+      retval += `<letter class='tabChar'><i class="fas fa-long-arrow-alt-right"></i></letter>`;
+    } else if (word.charAt(c) === '\n') {
+      newlineafter = true;
+      retval += `<letter class='nlChar'><i class="fas fa-angle-down"></i></letter>`;
+    } else {
+      retval += '<letter>' + word.charAt(c) + '</letter>';
+    }
+  }
+  retval += '</div>';
+  if (newlineafter) retval += "<div class='newline'></div>";
+  return retval;
+}
+
+export function showWords(): void {
+  if (Config.indicateTypos === 'below') {
+    words.classList.add('indicateTyposBelow');
+    wordsWrapper.classList.add('indicateTyposBelow');
+  } else {
+    words.classList.remove('indicateTyposBelow');
+    wordsWrapper.classList.remove('indicateTyposBelow');
+  }
+
+  let wordsHTML = '';
+  for (let i = 0; i < TestWords.words.length; i++) {
+    wordsHTML += getWordHTML(<string>TestWords.words.get(i));
+  }
+
+  words.innerHTML = wordsHTML;
+
+  wordsWrapper.classList.remove('hidden');
+  const currentWord = <Element>document.querySelector('.word');
+  const currentWordStyle = window.getComputedStyle(currentWord);
+  const wordHeight =
+    parseFloat(currentWordStyle.marginTop) +
+    parseFloat(currentWordStyle.marginBottom) +
+    currentWord.getBoundingClientRect().height;
+
+  words.style.height = wordHeight * (Config.funbox === 'tenKeyMode' ? 5 : 4) + 'px';
+  words.style.overflow = 'hidden';
+  words.style.width = '100%';
+  words.style.marginLeft = 'unset';
+  wordsWrapper.style.height = wordHeight * (Config.funbox === 'tenKeyMode' ? 5 : 3) + 'px';
+  wordsWrapper.style.overflow = 'hidden';
+
+  updateActiveElement();
+  Caret.updatePosition();
+}
+
+export function addWord(word: string): void {
+  words.insertAdjacentHTML('beforeend', getWordHTML(word));
+}
+
+export function updateWordElement(showError = !Config.blindMode): void {
+  const input = TestInput.input.current;
+  const wordAtIndex = <Element>document.querySelector('#words .word.active');
+  const currentWord = TestWords.words.getCurrent();
+  if (!currentWord && Config.mode !== 'zen') return;
+
+  let ret = '';
+
+  let newlineafter = false;
+
+  if (Config.mode === 'zen') {
+    for (let i = 0; i < TestInput.input.current.length; i++) {
+      if (TestInput.input.current[i] === '\t') {
+        ret += `<letter class='tabChar correct' style="opacity: 0"><i class="fas fa-long-arrow-alt-right"></i></letter>`;
+      } else if (TestInput.input.current[i] === '\n') {
+        newlineafter = true;
+        ret += `<letter class='nlChar correct' style="opacity: 0"><i class="fas fa-angle-down"></i></letter>`;
+      } else {
+        ret += `<letter class="correct">${TestInput.input.current[i]}</letter>`;
+      }
+    }
+  } else {
+    let correctSoFar = false;
+
+    // slice earlier if input has trailing compose characters
+    const inputWithoutComposeLength = Misc.trailingComposeChars.test(input)
+      ? input.search(Misc.trailingComposeChars)
+      : input.length;
+    if (
+      input.search(Misc.trailingComposeChars) < currentWord.length &&
+      currentWord.slice(0, inputWithoutComposeLength) === input.slice(0, inputWithoutComposeLength)
+    ) {
+      correctSoFar = true;
+    }
+
+    let wordHighlightClassString = correctSoFar ? 'correct' : 'incorrect';
+    if (Config.blindMode) {
+      wordHighlightClassString = 'correct';
+    }
+
+    for (let i = 0; i < input.length; i++) {
+      const charCorrect = currentWord[i] == input[i];
+
+      let correctClass = 'correct';
+      if (Config.highlightMode == 'off') {
+        correctClass = '';
+      }
+
+      let currentLetter = currentWord[i];
+      let tabChar = '';
+      let nlChar = '';
+      if (Config.funbox === 'arrows') {
+        if (currentLetter === '↑') {
+          currentLetter = `<i class="fas fa-arrow-up"></i>`;
+        }
+        if (currentLetter === '↓') {
+          currentLetter = `<i class="fas fa-arrow-down"></i>`;
+        }
+        if (currentLetter === '←') {
+          currentLetter = `<i class="fas fa-arrow-left"></i>`;
+        }
+        if (currentLetter === '→') {
+          currentLetter = `<i class="fas fa-arrow-right"></i>`;
+        }
+      } else if (currentLetter === '\t') {
+        tabChar = 'tabChar';
+        currentLetter = `<i class="fas fa-long-arrow-alt-right"></i>`;
+      } else if (currentLetter === '\n') {
+        nlChar = 'nlChar';
+        currentLetter = `<i class="fas fa-angle-down"></i>`;
+      }
+
+      if (charCorrect) {
+        ret += `<letter class="${
+          Config.highlightMode == 'word' ? wordHighlightClassString : correctClass
+        } ${tabChar}${nlChar}">${currentLetter}</letter>`;
+      } else if (
+        currentLetter !== undefined &&
+        CompositionState.getComposing() &&
+        i >= CompositionState.getStartPos()
+      ) {
+        ret += `<letter class="${
+          Config.highlightMode == 'word' ? wordHighlightClassString : ''
+        } dead">${currentLetter}</letter>`;
+      } else if (!showError) {
+        if (currentLetter !== undefined) {
+          ret += `<letter class="${
+            Config.highlightMode == 'word' ? wordHighlightClassString : correctClass
+          } ${tabChar}${nlChar}">${currentLetter}</letter>`;
+        }
+      } else if (currentLetter === undefined) {
+        if (!Config.hideExtraLetters) {
+          let letter = input[i];
+          if (letter == ' ' || letter == '\t' || letter == '\n') {
+            letter = '_';
+          }
+          ret += `<letter class="${
+            Config.highlightMode == 'word' ? wordHighlightClassString : 'incorrect'
+          } extra ${tabChar}${nlChar}">${letter}</letter>`;
+        }
+      } else {
+        ret +=
+          `<letter class="${
+            Config.highlightMode == 'word' ? wordHighlightClassString : 'incorrect'
+          } ${tabChar}${nlChar}">` +
+          (Config.indicateTypos === 'replace'
+            ? input[i] == ' '
+              ? '_'
+              : input[i]
+            : currentLetter) +
+          (Config.indicateTypos === 'below' ? `<hint>${input[i]}</hint>` : '') +
+          '</letter>';
+      }
+    }
+
+    for (let i = input.length; i < currentWord.length; i++) {
+      if (Config.funbox === 'arrows') {
+        if (currentWord[i] === '↑') {
+          ret += `<letter><i class="fas fa-arrow-up"></i></letter>`;
+        }
+        if (currentWord[i] === '↓') {
+          ret += `<letter><i class="fas fa-arrow-down"></i></letter>`;
+        }
+        if (currentWord[i] === '←') {
+          ret += `<letter><i class="fas fa-arrow-left"></i></letter>`;
+        }
+        if (currentWord[i] === '→') {
+          ret += `<letter><i class="fas fa-arrow-right"></i></letter>`;
+        }
+      } else if (currentWord[i] === '\t') {
+        ret += `<letter class='tabChar'><i class="fas fa-long-arrow-alt-right"></i></letter>`;
+      } else if (currentWord[i] === '\n') {
+        ret += `<letter class='nlChar'><i class="fas fa-angle-down"></i></letter>`;
+      } else {
+        ret +=
+          `<letter class="${Config.highlightMode == 'word' ? wordHighlightClassString : ''}">` +
+          currentWord[i] +
+          '</letter>';
+      }
+    }
+
+    if (Config.highlightMode === 'letter' && Config.hideExtraLetters) {
+      if (input.length > currentWord.length && !Config.blindMode) {
+        wordAtIndex.classList.add('error');
+      } else if (input.length == currentWord.length) {
+        wordAtIndex.classList.remove('error');
+      }
+    }
+  }
+  wordAtIndex.innerHTML = ret;
+  if (newlineafter) words.insertAdjacentHTML('beforeend', "<div class='newline'></div>");
+}
+
+export function lineJump(currentTop: number): void {
+  if (
+    (Config.tapeMode === 'off' && currentTestLine > 0) ||
+    (Config.tapeMode !== 'off' && currentTestLine >= 0)
+  ) {
+    const hideBound = currentTop;
+
+    const toHide: any[] = [];
+    const wordElements = document.querySelectorAll('#words .word') as NodeListOf<HTMLElement>;
+    for (let i = 0; i < currentWordElementIndex; i++) {
+      if (wordElements[i].classList.contains('hidden')) continue;
+      const forWordTop = Math.floor(wordElements[i].offsetTop);
+      if (forWordTop < (Config.tapeMode === 'off' ? hideBound - 10 : hideBound + 10)) {
+        toHide.push(document.querySelectorAll('#words .word')[i]);
+      }
+    }
+    toHide.forEach(el => el.remove());
+    currentWordElementIndex -= toHide.length;
+  }
+  currentTestLine++;
+}
+
+export function highlightBadWord(index: number, showError: boolean): void {
+  if (!showError) return;
+  document.querySelectorAll('#words .word')[index].classList.add('error');
+}
+
+export function wordsInputFocusTestUI() {
+  if (!resultVisible && Config.showOutOfFocusWarning) {
+    OutOfFocus.hide();
+  }
+  Caret.show();
+}
+
+export function wordsInputFocusOut() {
+  if (!resultVisible && Config.showOutOfFocusWarning) {
+    OutOfFocus.show();
+  }
+  Caret.hide();
+}
+
+export function wordsWrapperClick() {
+  focusWords();
+}

package/src/lib/helpers/test/test-words.ts

@@ -0,0 +1,72 @@
+import { MonkeyTypes } from '../../types/types';
+class Words {
+  public list: string[];
+  public length: number;
+  public currentIndex: number;
+  constructor() {
+    this.list = [];
+    this.length = 0;
+    this.currentIndex = 0;
+  }
+  get(i?: undefined, raw?: boolean): string[];
+  get(i: number, raw?: boolean): string;
+  get(i?: number | undefined, raw = false): string | string[] {
+    if (i === undefined) {
+      return this.list;
+    } else {
+      if (raw) {
+        return this.list[i]?.replace(/[.?!":\-,]/g, "")?.toLowerCase();
+      } else {
+        return this.list[i];
+      }
+    }
+  }
+  getCurrent(): string {
+    return this.list[this.currentIndex];
+  }
+  getLast(): string {
+    return this.list[this.list.length - 1];
+  }
+  push(word: string): void {
+    this.list.push(word);
+    this.length = this.list.length;
+  }
+  reset(): void {
+    this.list = [];
+    this.currentIndex = 0;
+    this.length = this.list.length;
+  }
+  resetCurrentIndex(): void {
+    this.currentIndex = 0;
+  }
+  decreaseCurrentIndex(): void {
+    this.currentIndex--;
+  }
+  increaseCurrentIndex(): void {
+    this.currentIndex++;
+  }
+  clean(): void {
+    for (const s of this.list) {
+      if (/ +/.test(s)) {
+        const id = this.list.indexOf(s);
+        const tempList = s.split(" ");
+        this.list.splice(id, 1);
+        for (let i = 0; i < tempList.length; i++) {
+          this.list.splice(id + i, 0, tempList[i]);
+        }
+      }
+    }
+  }
+}
+
+export const words = new Words();
+export let hasTab = false;
+export let randomQuote = null as unknown as MonkeyTypes.Quote;
+
+export function setRandomQuote(rq: MonkeyTypes.Quote): void {
+  randomQuote = rq;
+}
+
+export function setHasTab(tf: boolean): void {
+  hasTab = tf;
+}

package/src/lib/helpers/test/timer-progress.ts

@@ -0,0 +1,16 @@
+import Config from '../../helpers/config';
+import * as Misc from '../../utils/misc';
+import * as Time from '../states/time';
+import { BehaviorSubject } from 'rxjs';
+
+export const timeLeft = new BehaviorSubject<string>('1:00');
+
+export function update(): void {
+  const time = Time.get();
+  const maxtime = Config.time;
+  let displayTime = Misc.secondsToString(maxtime - time);
+  if (maxtime === 0) {
+    displayTime = Misc.secondsToString(time);
+  }
+  timeLeft.next(displayTime);
+}

package/src/lib/helpers/test/tts.ts

@@ -0,0 +1,42 @@
+import Config from '../../helpers/config';
+import * as Misc from '../../utils/misc';
+import * as ConfigEvent from "../observables/config-event";
+
+let voice: SpeechSynthesisUtterance | undefined;
+
+export async function setLanguage(lang = Config.language): Promise<void> {
+  if (!voice) return;
+  const language = await Misc.getLanguage(lang);
+  const bcp = language.bcp47 ? language.bcp47 : "en-US";
+  voice.lang = bcp;
+}
+
+export async function init(): Promise<void> {
+  voice = new SpeechSynthesisUtterance();
+  setLanguage();
+}
+
+export function clear(): void {
+  voice = undefined;
+}
+
+export function speak(text: string): void {
+  window.speechSynthesis.cancel();
+  if (voice === undefined) init();
+
+  if (voice !== undefined) {
+    voice.text = text;
+    window.speechSynthesis.speak(voice);
+  }
+}
+
+ConfigEvent.subscribe((eventKey, eventValue) => {
+  if (eventKey === "funbox") {
+    if (eventValue === "none") {
+      clear();
+    } else if (eventValue === "tts") {
+      init();
+    }
+  }
+  if (eventKey === "language" && Config.funbox === "tts") setLanguage();
+});

package/src/lib/helpers/test/weak-spot.ts

@@ -0,0 +1,74 @@
+import * as TestInput from './test-input';
+import { Wordset } from './wordset';
+
+// Changes how quickly it 'learns' scores - very roughly the score for a char
+// is based on last perCharCount occurrences. Make it smaller to adjust faster.
+const perCharCount = 50;
+
+// Choose the highest scoring word from this many random words. Higher values
+// will choose words with more weak letters on average.
+const wordSamples = 20;
+
+// Score penatly (in milliseconds) for getting a letter wrong.
+const incorrectPenalty = 5000;
+
+const scores: { [char: string]: Score } = {};
+
+class Score {
+  public average: number;
+  public count: number;
+  constructor() {
+    this.average = 0.0;
+    this.count = 0;
+  }
+
+  update(score: number): void {
+    if (this.count < perCharCount) {
+      this.count++;
+    }
+    const adjustRate = 1.0 / this.count;
+    // Keep an exponential moving average of the score over time.
+    this.average = score * adjustRate + this.average * (1 - adjustRate);
+  }
+}
+
+export function updateScore(char: string, isCorrect: boolean): void {
+  const timings = TestInput.keypressTimings.spacing.array;
+  if (timings.length === 0 || typeof timings === 'string') {
+    return;
+  }
+  let score = timings[timings.length - 1];
+  if (!isCorrect) {
+    score += incorrectPenalty;
+  }
+  if (!(char in scores)) {
+    scores[char] = new Score();
+  }
+  scores[char].update(score);
+}
+
+function score(word: string): number {
+  let total = 0.0;
+  let numChars = 0;
+  for (const c of word) {
+    if (c in scores) {
+      total += scores[c].average;
+      numChars++;
+    }
+  }
+  return numChars == 0 ? 0.0 : total / numChars;
+}
+
+export function getWord(wordset: Wordset): string {
+  let highScore;
+  let randomWord = '';
+  for (let i = 0; i < wordSamples; i++) {
+    const newWord = wordset.randomWord();
+    const newScore = score(newWord);
+    if (i == 0 || highScore === undefined || newScore > highScore) {
+      randomWord = newWord;
+      highScore = newScore;
+    }
+  }
+  return randomWord;
+}

package/src/lib/helpers/test/wordset.ts

@@ -0,0 +1,109 @@
+import { randomElementFromArray, randomIntFromRange } from '../../utils/misc';
+
+let currentWordset: Wordset | null = null;
+let currentWordGenerator: WordGenerator | null = null;
+
+export class Wordset {
+  public words: string[];
+  public length: number;
+  constructor(words: string[]) {
+    this.words = words;
+    this.length = this.words.length;
+  }
+
+  public randomWord(): string {
+    return randomElementFromArray(this.words);
+  }
+}
+
+const prefixSize = 2;
+
+class CharDistribution {
+  public chars: { [char: string]: number };
+  public count: number;
+  constructor() {
+    this.chars = {};
+    this.count = 0;
+  }
+
+  public addChar(char: string): void {
+    this.count++;
+    if (char in this.chars) {
+      this.chars[char]++;
+    } else {
+      this.chars[char] = 1;
+    }
+  }
+
+  public randomChar(): string {
+    const randomIndex = randomIntFromRange(0, this.count - 1);
+    let runningCount = 0;
+    for (const [char, charCount] of Object.entries(this.chars)) {
+      runningCount += charCount;
+      if (runningCount > randomIndex) {
+        return char;
+      }
+    }
+
+    return Object.keys(this.chars)[0];
+  }
+}
+
+class WordGenerator extends Wordset {
+  public ngrams: { [prefix: string]: CharDistribution } = {};
+  constructor(words: string[]) {
+    super(words);
+    // Can generate an unbounded number of words in theory.
+    this.length = Infinity;
+
+    for (let word of words) {
+      // Mark the end of each word with a space.
+      word += " ";
+      let prefix = "";
+      for (const c of word) {
+        // Add `c` to the distribution of chars that can come after `prefix`.
+        if (!(prefix in this.ngrams)) {
+          this.ngrams[prefix] = new CharDistribution();
+        }
+        this.ngrams[prefix].addChar(c);
+        prefix = (prefix + c).substr(-prefixSize);
+      }
+    }
+  }
+
+  public override randomWord(): string {
+    let word = "";
+    for (;;) {
+      const prefix = word.substr(-prefixSize);
+      const charDistribution = this.ngrams[prefix];
+      if (!charDistribution) {
+        // This shouldn't happen if this.ngrams is complete. If it does
+        // somehow, start generating a new word.
+        word = "";
+        continue;
+      }
+      // Pick a random char from the distribution that comes after `prefix`.
+      const nextChar = charDistribution.randomChar();
+      if (nextChar == " ") {
+        // A space marks the end of the word, so stop generating and return.
+        break;
+      }
+      word += nextChar;
+    }
+    return word;
+  }
+}
+
+export function withWords(words: string[], funbox: string): Wordset {
+  if (funbox == "pseudolang") {
+    if (currentWordGenerator == null || words !== currentWordGenerator.words) {
+      currentWordGenerator = new WordGenerator(words);
+    }
+    return currentWordGenerator;
+  } else {
+    if (currentWordset == null || words !== currentWordset.words) {
+      currentWordset = new Wordset(words);
+    }
+    return currentWordset;
+  }
+}