@testgorilla/tgo-typing-test 1.0.0 → 2.0.0

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

@@ -0,0 +1,265 @@
+import config from '../../helpers/config';
+
+type ReplayAction =
+  | 'correctLetter'
+  | 'incorrectLetter'
+  | 'backWord'
+  | 'submitCorrectWord'
+  | 'submitErrorWord'
+  | 'setLetterIndex';
+
+interface Replay {
+  action: ReplayAction;
+  value?: string | number;
+  time: number;
+}
+
+let wordsList: string[] = [];
+let replayData: Replay[] = [];
+let replayStartTime = 0;
+let replayRecording = true;
+let wordPos = 0;
+let curPos = 0;
+let targetWordPos = 0;
+let targetCurPos = 0;
+let timeoutList: NodeJS.Timeout[] = [];
+let stopwatchList: NodeJS.Timeout[] = [];
+let toggleButton: Element;
+let replayStopwatch: HTMLElement;
+
+function setToggleButton(toggleButtonElement: HTMLElement) {
+  toggleButton = toggleButtonElement?.children[0];
+}
+
+function setReplayStopwatch(replayStopwatchElement: HTMLElement) {
+  replayStopwatch = replayStopwatchElement;
+}
+
+function replayGetWordsList(wordsListFromScript: string[]): void {
+  wordsList = wordsListFromScript;
+}
+
+function initializeReplayPrompt(): void {
+  const replayWordsElement = document.getElementById('replayWords');
+
+  if (replayWordsElement === null) return;
+
+  replayWordsElement.innerHTML = '';
+  let wordCount = 0;
+  replayData.forEach(item => {
+    if (item.action === 'backWord') {
+      wordCount--;
+    } else if (item.action === 'submitCorrectWord' || item.action === 'submitErrorWord') {
+      wordCount++;
+    }
+  });
+  wordsList.forEach((item, i) => {
+    if (i > wordCount) return;
+    const x = document.createElement('div');
+    x.className = 'word';
+    for (i = 0; i < item.length; i++) {
+      const letter = document.createElement('letter');
+      letter.innerHTML = item[i];
+      x.appendChild(letter);
+    }
+    replayWordsElement.appendChild(x);
+    if (config.funbox === 'tenKeyMode') {
+      const y = document.createElement('div');
+      y.className = 'newline';
+      replayWordsElement.appendChild(y);
+    }
+  });
+}
+
+export function pauseReplay(): void {
+  timeoutList.forEach(item => {
+    clearTimeout(item);
+  });
+  timeoutList = [];
+  stopwatchList.forEach(item => {
+    clearTimeout(item);
+  });
+  stopwatchList = [];
+  targetCurPos = curPos;
+  targetWordPos = wordPos;
+
+  if (toggleButton === undefined) return;
+
+  toggleButton.className = 'Play';
+  (toggleButton.parentNode as Element)?.setAttribute('aria-label', 'Resume replay');
+}
+
+function handleDisplayLogic(item: Replay, nosound = false): void {
+  let activeWord = document.getElementById('replayWords')?.children[wordPos];
+
+  if (activeWord === undefined) return;
+  if (activeWord.className == 'newline') {
+    curPos = 0;
+    wordPos++;
+    activeWord = document.getElementById('replayWords')?.children[wordPos];
+    if (activeWord === undefined) return;
+  }
+  if (item.action === 'correctLetter') {
+    // if (!nosound) playSound();
+    activeWord.children[curPos].classList.add('correct');
+    curPos++;
+  } else if (item.action === 'incorrectLetter') {
+    // if (!nosound) playSound(true);
+    let myElement;
+    if (curPos >= activeWord.children.length) {
+      //if letter is an extra
+      myElement = document.createElement('letter');
+      myElement.classList.add('extra');
+      myElement.innerHTML = item.value?.toString() ?? '';
+      activeWord.appendChild(myElement);
+    }
+    myElement = activeWord.children[curPos];
+    myElement.classList.add('incorrect');
+    curPos++;
+  } else if (item.action === 'setLetterIndex' && typeof item.value === 'number') {
+    curPos = item.value;
+    // remove all letters from cursor to end of word
+    for (const myElement of Array.from(activeWord.children).slice(curPos)) {
+      if (myElement.classList.contains('extra')) {
+        myElement.remove();
+      } else {
+        myElement.className = '';
+      }
+    }
+  } else if (item.action === 'submitCorrectWord') {
+    wordPos++;
+    curPos = 0;
+  } else if (item.action === 'submitErrorWord') {
+    activeWord.classList.add('error');
+    wordPos++;
+    curPos = 0;
+  } else if (item.action === 'backWord') {
+    wordPos--;
+
+    const replayWords = document.getElementById('replayWords');
+
+    if (replayWords !== null) activeWord = replayWords.children[wordPos];
+
+    curPos = activeWord.children.length;
+    while (activeWord.children[curPos - 1].className === '') curPos--;
+    activeWord.classList.remove('error');
+  }
+}
+
+function loadOldReplay(): number {
+  let startingIndex = 0;
+  curPos = 0;
+  wordPos = 0;
+  replayData.forEach((item, i) => {
+    if (wordPos < targetWordPos || (wordPos === targetWordPos && curPos < targetCurPos)) {
+      //quickly display everything up to the target
+      handleDisplayLogic(item, true);
+      startingIndex = i + 1;
+    }
+  });
+  const time = Math.floor((replayData[startingIndex]?.time || 0) / 1000);
+  replayStopwatch.innerText = time + 's';
+  return startingIndex;
+}
+
+function startReplayRecording(): void {
+  replayData = [];
+  replayStartTime = performance.now();
+  replayRecording = true;
+  targetCurPos = 0;
+  targetWordPos = 0;
+}
+
+function stopReplayRecording(): void {
+  replayRecording = false;
+}
+
+function addReplayEvent(action: ReplayAction, value?: number | string): void {
+  if (!replayRecording) {
+    return;
+  }
+
+  const timeDelta = performance.now() - replayStartTime;
+  replayData.push({ action: action, value: value, time: timeDelta });
+}
+
+function playReplay(): void {
+  curPos = 0;
+  wordPos = 0;
+
+  if (toggleButton === undefined) return;
+
+  toggleButton.className = 'Pause';
+  (toggleButton.parentNode as Element)?.setAttribute('aria-label', 'Pause replay');
+  initializeReplayPrompt();
+  const startingIndex = loadOldReplay();
+  const lastTime = replayData[startingIndex]?.time || 0;
+  let swTime = Math.round(lastTime / 1000); //starting time
+  const swEndTime = Math.round((replayData[replayData.length - 1]?.time || 0) / 1000);
+  while (swTime <= swEndTime) {
+    const time = swTime;
+    stopwatchList.push(
+      setTimeout(
+        () => {
+          replayStopwatch.innerText = time + 's';
+        },
+        time * 1000 - lastTime
+      )
+    );
+    swTime++;
+  }
+  replayData.forEach((item, i) => {
+    if (i < startingIndex) return;
+    timeoutList.push(
+      setTimeout(() => {
+        handleDisplayLogic(item);
+      }, item.time - lastTime)
+    );
+  });
+  timeoutList.push(
+    setTimeout(
+      () => {
+        //after the replay has finished, this will run
+        targetCurPos = 0;
+        targetWordPos = 0;
+        toggleButton.className = 'Play';
+        (toggleButton.parentNode as Element).setAttribute('aria-label', 'Start replay');
+      },
+      (replayData[replayData.length - 1]?.time || 0) - lastTime
+    )
+  );
+}
+
+function getReplayExport(): string {
+  return JSON.stringify({
+    replayData: replayData,
+    wordsList: wordsList,
+  });
+}
+
+function setReplayData(data: Replay[]) {
+  replayData = data;
+}
+
+function playpauseReplayButtonClick() {
+  if (toggleButton?.className === 'Play') {
+    playReplay();
+  } else if (toggleButton?.className === 'Pause') {
+    pauseReplay();
+  }
+}
+
+export {
+  addReplayEvent,
+  getReplayExport,
+  initializeReplayPrompt,
+  loadOldReplay,
+  playReplay,
+  playpauseReplayButtonClick,
+  replayGetWordsList,
+  setReplayData,
+  setReplayStopwatch,
+  setToggleButton,
+  startReplayRecording,
+  stopReplayRecording,
+};

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

@@ -0,0 +1,320 @@
+import * as TestWords from './test-words';
+import { roundTo2 } from '../../utils/misc';
+
+interface Keypress {
+  count: number;
+  errors: number;
+  words: number[];
+  afk: boolean;
+}
+
+interface KeypressTimings {
+  spacing: {
+    current: number;
+    array: number[] | 'toolong';
+  };
+  duration: {
+    current: number;
+    array: number[] | 'toolong';
+  };
+}
+
+class Input {
+  current: string;
+  history: string[];
+  historyLength: number;
+  length: number;
+  constructor() {
+    this.current = '';
+    this.history = [];
+    this.historyLength = 0;
+    this.length = 0;
+  }
+
+  reset(): void {
+    this.current = '';
+    this.history = [];
+    this.length = 0;
+  }
+
+  resetHistory(): void {
+    this.history = [];
+    this.length = 0;
+  }
+
+  setCurrent(val: string): void {
+    this.current = val;
+    this.length = this.current.length;
+  }
+
+  appendCurrent(val: string): void {
+    this.current += val;
+    this.length = this.current.length;
+  }
+
+  resetCurrent(): void {
+    this.current = '';
+  }
+
+  getCurrent(): string {
+    return this.current;
+  }
+
+  pushHistory(): void {
+    this.history.push(this.current);
+    this.historyLength = this.history.length;
+    this.resetCurrent();
+  }
+
+  popHistory(): string {
+    const ret = this.history.pop() ?? '';
+    this.historyLength = this.history.length;
+    return ret;
+  }
+
+  getHistory(i?: number): string | string[] {
+    if (i === undefined) {
+      return this.history;
+    } else {
+      return this.history[i];
+    }
+  }
+
+  getHistoryLast(): string | undefined {
+    return this.history[this.history.length - 1];
+  }
+}
+
+class Corrected {
+  current: string;
+  history: string[];
+  constructor() {
+    this.current = '';
+    this.history = [];
+  }
+  setCurrent(val: string): void {
+    this.current = val;
+  }
+
+  appendCurrent(val: string): void {
+    this.current += val;
+  }
+
+  resetCurrent(): void {
+    this.current = '';
+  }
+
+  resetHistory(): void {
+    this.history = [];
+  }
+
+  reset(): void {
+    this.resetCurrent();
+    this.resetHistory();
+  }
+
+  getHistory(i: number): string {
+    return this.history[i];
+  }
+
+  popHistory(): string {
+    return this.history.pop() ?? '';
+  }
+
+  pushHistory(): void {
+    this.history.push(this.current);
+    this.current = '';
+  }
+}
+
+export const input = new Input();
+export const corrected = new Corrected();
+
+export let keypressPerSecond: Keypress[] = [];
+export let currentKeypress: Keypress = {
+  count: 0,
+  errors: 0,
+  words: [],
+  afk: true,
+};
+export let lastKeypress: number;
+export let currentBurstStart = 0;
+export let missedWords: {
+  [word: string]: number;
+} = {};
+export let accuracy = {
+  correct: 0,
+  incorrect: 0,
+};
+export let keypressTimings: KeypressTimings = {
+  spacing: {
+    current: -1,
+    array: [],
+  },
+  duration: {
+    current: -1,
+    array: [],
+  },
+};
+export let wpmHistory: number[] = [];
+export let rawHistory: number[] = [];
+export let burstHistory: number[] = [];
+export let bailout = false;
+export function setBailout(tf: boolean): void {
+  bailout = tf;
+}
+
+export let spacingDebug = false;
+export function enableSpacingDebug(): void {
+  spacingDebug = true;
+  console.clear();
+}
+
+export function updateLastKeypress(): void {
+  lastKeypress = performance.now();
+}
+
+export function incrementKeypressCount(): void {
+  currentKeypress.count++;
+}
+
+export function setKeypressNotAfk(): void {
+  currentKeypress.afk = false;
+}
+
+export function incrementKeypressErrors(): void {
+  currentKeypress.errors++;
+}
+
+export function pushKeypressWord(wordIndex: number): void {
+  currentKeypress.words.push(wordIndex);
+}
+
+export function setBurstStart(time: number): void {
+  currentBurstStart = time;
+}
+
+export function pushKeypressesToHistory(): void {
+  keypressPerSecond.push(currentKeypress);
+  currentKeypress = {
+    count: 0,
+    errors: 0,
+    words: [],
+    afk: true,
+  };
+}
+
+export function incrementAccuracy(correctincorrect: boolean): void {
+  if (correctincorrect) {
+    accuracy.correct++;
+  } else {
+    accuracy.incorrect++;
+  }
+}
+
+export function setKeypressTimingsTooLong(): void {
+  keypressTimings.spacing.array = 'toolong';
+  keypressTimings.duration.array = 'toolong';
+}
+
+export function pushKeypressDuration(val: number): void {
+  (keypressTimings.duration.array as number[]).push(roundTo2(val));
+}
+
+export function setKeypressDuration(val: number): void {
+  keypressTimings.duration.current = roundTo2(val);
+}
+
+function pushKeypressSpacing(val: number): void {
+  (keypressTimings.spacing.array as number[]).push(roundTo2(val));
+}
+
+function setKeypressSpacing(val: number): void {
+  keypressTimings.spacing.current = roundTo2(val);
+}
+
+export function recordKeypressSpacing(): void {
+  const now = performance.now();
+  const diff = Math.abs(keypressTimings.spacing.current - now);
+  if (keypressTimings.spacing.current !== -1) {
+    pushKeypressSpacing(diff);
+    if (spacingDebug) {
+      console.log('spacing debug', 'push', diff, 'length', keypressTimings.spacing.array.length);
+    }
+  }
+  setKeypressSpacing(now);
+  if (spacingDebug) {
+    console.log('spacing debug', 'set', now, 'length', keypressTimings.spacing.array.length);
+  }
+  if (spacingDebug) {
+    console.log('spacing debug', 'recorded', 'length', keypressTimings.spacing.array.length);
+  }
+}
+
+export function resetKeypressTimings(): void {
+  keypressTimings = {
+    spacing: {
+      current: performance.now(),
+      array: [],
+    },
+    duration: {
+      current: performance.now(),
+      array: [],
+    },
+  };
+  if (spacingDebug) console.clear();
+}
+
+export function pushMissedWord(word: string): void {
+  if (!Object.keys(missedWords).includes(word)) {
+    missedWords[word] = 1;
+  } else {
+    missedWords[word]++;
+  }
+}
+
+export function pushToWpmHistory(wpm: number): void {
+  wpmHistory.push(wpm);
+}
+
+export function pushToRawHistory(raw: number): void {
+  rawHistory.push(raw);
+}
+
+export function pushBurstToHistory(speed: number): void {
+  if (burstHistory[TestWords.words.currentIndex] === undefined) {
+    burstHistory.push(speed);
+  } else {
+    //repeated word - override
+    burstHistory[TestWords.words.currentIndex] = speed;
+  }
+}
+
+export function restart(): void {
+  wpmHistory = [];
+  rawHistory = [];
+  burstHistory = [];
+  keypressPerSecond = [];
+  currentKeypress = {
+    count: 0,
+    errors: 0,
+    words: [],
+    afk: true,
+  };
+  currentBurstStart = 0;
+  missedWords = {};
+  accuracy = {
+    correct: 0,
+    incorrect: 0,
+  };
+  keypressTimings = {
+    spacing: {
+      current: -1,
+      array: [],
+    },
+    duration: {
+      current: -1,
+      array: [],
+    },
+  };
+}