@testgorilla/tgo-typing-test 1.0.0 → 2.0.0

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

@@ -0,0 +1,183 @@
+import { subscribe } from '../observables/config-event';
+import { shuffle } from '../../utils/misc';
+import { MonkeyTypes } from '../../types/types';
+
+interface Quote {
+  text: string;
+  source: string;
+  length: number;
+  id: number;
+}
+
+interface QuoteData {
+  language: string;
+  quotes: Quote[];
+  groups: number[][];
+}
+
+interface QuoteCollection {
+  quotes: MonkeyTypes.Quote[];
+  length: number;
+  language: string | null;
+  groups: MonkeyTypes.Quote[][];
+}
+
+interface FilteredSources {
+  sources: string[];
+}
+
+const defaultQuoteCollection: QuoteCollection = {
+  quotes: [],
+  length: 0,
+  language: null,
+  groups: [],
+};
+
+function normalizeLanguage(language: string): string {
+  return language.replace(/_\d*k$/g, '');
+}
+
+class QuotesController {
+  private quoteCollection: QuoteCollection = defaultQuoteCollection;
+
+  private quoteQueue: MonkeyTypes.Quote[] = [];
+  private queueIndex = 0;
+
+  async getQuotes(
+    language: string,
+    testVersion: number,
+    quoteLengths?: number[]
+  ): Promise<QuoteCollection> {
+    const normalizedLanguage = normalizeLanguage(language);
+
+    if (this.quoteCollection.language !== normalizedLanguage) {
+      try {
+        const data: QuoteData = await fetch(
+          `/../assets/typing-test-languages/quotes/${normalizedLanguage}_version_${testVersion}.json`
+        ).then(res => res.json());
+
+        const filteredSources: FilteredSources = await fetch(
+          `/../assets/typing-test-languages/quotes/filtered_sources.json`
+        ).then(res => res.json());
+
+        if (data.quotes === undefined || data.quotes.length === 0) {
+          return defaultQuoteCollection;
+        }
+
+        this.quoteCollection = {
+          quotes: [],
+          length: data.quotes.length,
+          groups: [],
+          language: data.language,
+        };
+
+        // Transform JSON Quote schema to MonkeyTypes Quote schema
+        data.quotes.forEach((quote: Quote) => {
+          const monkeyTypeQuote: MonkeyTypes.Quote = {
+            text: quote.text,
+            source: quote.source,
+            length: quote.length,
+            id: quote.id,
+            language: data.language,
+            group: 0,
+          };
+
+          this.quoteCollection.quotes.push(monkeyTypeQuote);
+        });
+
+        if (filteredSources) {
+          this.quoteCollection.quotes = this.quoteCollection.quotes.filter(quote =>
+            filteredSources.sources.includes(quote.source)
+          );
+        }
+
+        data.groups.forEach((quoteGroup, groupIndex) => {
+          const lower = quoteGroup[0];
+          const upper = quoteGroup[1];
+
+          this.quoteCollection.groups[groupIndex] = this.quoteCollection.quotes.filter(quote => {
+            if (quote.length >= lower && quote.length <= upper) {
+              quote.group = groupIndex;
+              return true;
+            }
+            return false;
+          });
+        });
+
+        if (quoteLengths !== undefined) {
+          this.updateQuoteQueue(quoteLengths);
+        }
+      } catch (e) {
+        if (!defaultQuoteCollection.quotes.length) {
+          throw e;
+        }
+        return defaultQuoteCollection;
+      }
+    }
+
+    return this.quoteCollection;
+  }
+
+  getQuoteById(id: number): MonkeyTypes.Quote | undefined {
+    const targetQuote = this.quoteCollection.quotes.find((quote: MonkeyTypes.Quote) => {
+      return quote.id === id;
+    });
+
+    return targetQuote;
+  }
+
+  updateQuoteQueue(quoteGroups: number[]): void {
+    this.quoteQueue = [];
+
+    quoteGroups.forEach(group => {
+      if (group < 0) {
+        return;
+      }
+      this.quoteCollection.groups[group]?.forEach(quote => {
+        this.quoteQueue.push(quote);
+      });
+    });
+
+    shuffle(this.quoteQueue);
+    this.queueIndex = 0;
+  }
+
+  getRandomQuote(): MonkeyTypes.Quote | null {
+    if (this.quoteQueue.length === 0) {
+      return null;
+    }
+
+    if (this.queueIndex >= this.quoteQueue.length) {
+      this.queueIndex = 0;
+      shuffle(this.quoteQueue);
+    }
+
+    const randomQuote = this.quoteQueue[this.queueIndex];
+
+    this.queueIndex += 1;
+
+    return randomQuote;
+  }
+
+  getCurrentQuote(): MonkeyTypes.Quote | null {
+    if (this.quoteQueue.length === 0) {
+      return null;
+    }
+
+    return this.quoteQueue[this.queueIndex];
+  }
+
+  resetQuotes() {
+    this.quoteCollection = defaultQuoteCollection;
+  }
+}
+
+const quoteController = new QuotesController();
+
+subscribe((key, newValue) => {
+  if (key === 'quoteLength') {
+    quoteController.updateQuoteQueue(newValue as number[]);
+  }
+});
+
+export default quoteController;

package/src/lib/helpers/observables/banner-event.ts

@@ -0,0 +1,18 @@
+type SubscribeFunction = () => void;
+
+const subscribers: SubscribeFunction[] = [];
+
+export function subscribe(fn: SubscribeFunction): void {
+  subscribers.push(fn);
+}
+
+export function dispatch(): void {
+  subscribers.forEach((fn) => {
+    try {
+      fn();
+    } catch (e) {
+      console.error("Banner event subscriber threw an error");
+      console.error(e);
+    }
+  });
+}

package/src/lib/helpers/observables/config-event.ts

@@ -0,0 +1,31 @@
+import { MonkeyTypes } from '../../types/types';
+type SubscribeFunction = (
+  key: string,
+  newValue?: MonkeyTypes.ConfigValues,
+  nosave?: boolean,
+  previousValue?: MonkeyTypes.ConfigValues,
+  fullConfig?: MonkeyTypes.Config
+) => void;
+
+const subscribers: SubscribeFunction[] = [];
+
+export function subscribe(fn: SubscribeFunction): void {
+  subscribers.push(fn);
+}
+
+export function dispatch(
+  key: string,
+  newValue?: MonkeyTypes.ConfigValues,
+  nosave?: boolean,
+  previousValue?: MonkeyTypes.ConfigValues,
+  fullConfig?: MonkeyTypes.Config
+): void {
+  subscribers.forEach(fn => {
+    try {
+      fn(key, newValue, nosave, previousValue, fullConfig);
+    } catch (e) {
+      console.error('Config event subscriber threw an error');
+      console.error(e);
+    }
+  });
+}

package/src/lib/helpers/observables/timer-event.ts

@@ -0,0 +1,18 @@
+type SubscribeFunction = (key: string, value?: string, value2?: string) => void;
+
+const subscribers: SubscribeFunction[] = [];
+
+export function subscribe(fn: SubscribeFunction): void {
+  subscribers.push(fn);
+}
+
+export function dispatch(key: string, value?: string, value2?: string): void {
+  subscribers.forEach((fn) => {
+    try {
+      fn(key, value, value2);
+    } catch (e) {
+      console.error("Timer event subscriber threw an error");
+      console.error(e);
+    }
+  });
+}

package/src/lib/helpers/states/active-page.ts

@@ -0,0 +1,9 @@
+let activePage = 'test';
+
+export function get(): string {
+  return activePage;
+}
+
+export function set(active: string): void {
+  activePage = active;
+}

package/src/lib/helpers/states/composition.ts

@@ -0,0 +1,29 @@
+interface CompositionState {
+  composing: boolean;
+  startPos: number;
+}
+
+const compositionState = {
+  composing: false,
+  startPos: -1,
+};
+
+export function get(): CompositionState {
+  return compositionState;
+}
+
+export function getComposing(): boolean {
+  return compositionState.composing;
+}
+
+export function getStartPos(): number {
+  return compositionState.startPos;
+}
+
+export function setComposing(isComposing: boolean): void {
+  compositionState.composing = isComposing;
+}
+
+export function setStartPos(pos: number): void {
+  compositionState.startPos = pos;
+}

package/src/lib/helpers/states/page-transition.ts

@@ -0,0 +1,9 @@
+let transition = true;
+
+export function set(val: boolean): void {
+  transition = val;
+}
+
+export function get(): boolean {
+  return transition;
+}

package/src/lib/helpers/states/slow-timer.ts

@@ -0,0 +1,16 @@
+let slowTimer = false;
+
+export function set(): void {
+  if (slowTimer) return;
+  slowTimer = true;
+  console.error('Slow timer, disabling animations');
+  // Notifications.add("Slow timer detected", -1, 5);
+}
+
+export function clear(): void {
+  slowTimer = false;
+}
+
+export function get(): boolean {
+  return slowTimer;
+}

package/src/lib/helpers/states/test-active.ts

@@ -0,0 +1,9 @@
+let testActive = false;
+
+export function get(): boolean {
+  return testActive;
+}
+
+export function set(active: boolean): void {
+  testActive = active;
+}

package/src/lib/helpers/states/time.ts

@@ -0,0 +1,13 @@
+let time = 0;
+
+export function get(): number {
+  return time;
+}
+
+export function set(active: number): void {
+  time = active;
+}
+
+export function increment(): void {
+  time++;
+}

package/src/lib/helpers/test/caps-warning.ts

@@ -0,0 +1,50 @@
+import { BehaviorSubject } from 'rxjs';
+import Config from '../../helpers/config';
+export let capsState = false;
+
+export const showCaps = new BehaviorSubject<boolean>(false);
+
+function show(): void {
+  showCaps.next(true);
+}
+
+function hide(): void {
+  showCaps.next(false);
+}
+
+export function capsKeydown(event: KeyboardEvent) {
+  if (event.getModifierState('CapsLock')) {
+    capsState = true;
+  } else {
+    capsState = false;
+  }
+
+  try {
+    if (Config.capsLockWarning && capsState) {
+      show();
+    } else {
+      hide();
+    }
+  } catch {
+    console.error('Error showing caps warning');
+  }
+}
+
+export function capsKeyup(event: KeyboardEvent) {
+  // filthy fix but optional chaining refuses to work
+  if (event.getModifierState('CapsLock')) {
+    capsState = true;
+  } else {
+    capsState = false;
+  }
+
+  try {
+    if (Config.capsLockWarning && capsState) {
+      show();
+    } else {
+      hide();
+    }
+  } catch {
+    console.error('Error showing caps warning');
+  }
+}

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

@@ -0,0 +1,92 @@
+import * as Misc from '../../utils/misc';
+import Config from '../config';
+import * as TestInput from './test-input';
+import * as SlowTimer from '../states/slow-timer';
+import { BehaviorSubject } from 'rxjs';
+
+export let caretAnimating = true;
+export const caretShow = new BehaviorSubject<boolean>(true);
+export const caretAnimation = new BehaviorSubject<string>('caretFlashSmooth');
+export const caretLeft = new BehaviorSubject<number>(0);
+export const caretTop = new BehaviorSubject<number>(0);
+
+export function stopAnimation(): void {
+  if (caretAnimating === true) {
+    caretAnimation.next('none');
+    caretAnimating = false;
+  }
+}
+
+export function startAnimation(): void {
+  if (caretAnimating === false) {
+    if (Config.smoothCaret && !SlowTimer.get()) {
+      caretAnimation.next('caretFlashSmooth');
+    } else {
+      caretAnimation.next('caretFlashHard');
+    }
+    caretAnimating = true;
+  }
+}
+
+export function hide(): void {
+  caretShow.next(false);
+}
+
+export async function updatePosition(): Promise<void> {
+  let caretWidth = Math.round(document.querySelector('#caret')?.getBoundingClientRect().width ?? 0);
+
+  if (['block', 'outline', 'underline'].includes(Config.caretStyle)) {
+    caretWidth /= 3;
+  }
+
+  const inputLen = TestInput.input.current.length;
+
+  let currentLetterIndex = inputLen - 1;
+  if (currentLetterIndex == -1) {
+    currentLetterIndex = 0;
+  }
+
+  const currentWordNodeList = document?.querySelector('#words .active')?.querySelectorAll('letter');
+
+  if (!currentWordNodeList) return;
+
+  let currentLetter: HTMLElement = currentWordNodeList[currentLetterIndex] as HTMLElement;
+  if (inputLen > currentWordNodeList.length) {
+    currentLetter = currentWordNodeList[currentWordNodeList.length - 1] as HTMLElement;
+  }
+
+  const currentLanguage = await Misc.getCurrentLanguage(Config.language);
+  const isLanguageLeftToRight = currentLanguage.leftToRight;
+  const currentLetterPosLeft = isLanguageLeftToRight
+    ? currentLetter.offsetLeft
+    : currentLetter.offsetLeft + (currentLetter.getBoundingClientRect().width ?? 0);
+  const currentLetterPosTop = currentLetter.offsetTop;
+  const letterHeight = currentLetter.getBoundingClientRect().height as number;
+  let newTop = 0;
+  let newLeft = 0;
+
+  newTop = currentLetterPosTop - Math.round(letterHeight / 5);
+
+  if (inputLen == 0) {
+    newLeft = isLanguageLeftToRight
+      ? currentLetterPosLeft - caretWidth / 2
+      : currentLetterPosLeft + caretWidth / 2;
+  } else {
+    newLeft = isLanguageLeftToRight
+      ? currentLetterPosLeft +
+        (currentLetter.getBoundingClientRect().width as number) -
+        caretWidth / 2
+      : currentLetterPosLeft -
+        (currentLetter.getBoundingClientRect().width as number) +
+        caretWidth / 2;
+  }
+
+  caretTop.next(newTop);
+  caretLeft.next(newLeft);
+}
+
+export function show(): void {
+  caretShow.next(true);
+  updatePosition();
+  startAnimation();
+}

package/src/lib/helpers/test/custom-text.ts

@@ -0,0 +1,73 @@
+export let text = [
+  "The",
+  "quick",
+  "brown",
+  "fox",
+  "jumps",
+  "over",
+  "the",
+  "lazy",
+  "dog",
+];
+export let isWordRandom = false;
+export let isTimeRandom = false;
+export let word = -1;
+export let time = -1;
+export let delimiter = " ";
+
+export function setText(txt: string[]): void {
+  text = txt;
+}
+
+export function setIsWordRandom(val: boolean): void {
+  isWordRandom = val;
+}
+
+export function setIsTimeRandom(val: boolean): void {
+  isTimeRandom = val;
+}
+
+export function setTime(val: number): void {
+  time = val;
+}
+
+export function setWord(val: number): void {
+  word = val;
+}
+
+export function setDelimiter(val: string): void {
+  delimiter = val;
+}
+
+type CustomTextObject = Record<string, string>;
+
+export function getCustomText(name: string): string[] {
+  const customText = getCustomTextObject();
+
+  return customText[name].split(/ +/);
+}
+
+export function setCustomText(name: string, text: string | string[]): void {
+  const customText = getCustomTextObject();
+
+  if (typeof text === "string") customText[name] = text;
+  else customText[name] = text.join(" ");
+
+  window.localStorage.setItem("customText", JSON.stringify(customText));
+}
+
+export function deleteCustomText(name: string): void {
+  const customText = getCustomTextObject();
+
+  if (customText[name]) delete customText[name];
+
+  window.localStorage.setItem("customText", JSON.stringify(customText));
+}
+
+function getCustomTextObject(): CustomTextObject {
+  return JSON.parse(window.localStorage.getItem("customText") ?? "{}");
+}
+
+export function getCustomTextNames(): string[] {
+  return Object.keys(getCustomTextObject());
+}

package/src/lib/helpers/test/english-punctuation.ts

@@ -0,0 +1,38 @@
+let pairsList: string[] = [];
+
+export async function getList(): Promise<string[]> {
+  if (pairsList.length === 0) {
+    return fetch("/../assets/typing-test-languages/english_punctuation.json")
+        .then(res => res.json())
+        .then(json => {
+          pairsList = json;
+          return pairsList;
+        });
+  }
+  return pairsList;
+}
+
+// Check if word is in the group of pairs so it can be replaced
+export async function check(word: string): Promise<boolean> {
+  const list = await getList();
+  if (
+    list.find((a) => word.match(RegExp(`^([\\W]*${a[0]}[\\W]*)$`, "gi"))) ===
+    undefined
+  ) {
+    return false;
+  }
+  return true;
+}
+
+export async function replace(word: string): Promise<string> {
+  const list = await getList();
+  const replacement = list.find((a) =>
+    word.match(RegExp(`^([\\W]*${a[0]}[\\W]*)$`, "gi"))
+  );
+  return replacement
+    ? word.replace(
+        RegExp(`^(?:([\\W]*)(${replacement[0]})([\\W]*))$`, "gi"),
+        replacement[1]
+      )
+    : word;
+}

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

@@ -0,0 +1,39 @@
+import * as Caret from './caret';
+
+const unfocusPx = 3;
+let state = false;
+let middle: HTMLElement;
+let capsWarning: HTMLElement;
+
+export function setMiddleElement(middleElem: HTMLElement) {
+  middle = middleElem;
+}
+
+export function setCapsWarningElement(capsWarningElem: HTMLElement) {
+  capsWarning = capsWarningElem;
+}
+
+export function set(foc: boolean, withCursor = false): void {
+  if (foc && !state) {
+    state = true;
+    Caret.stopAnimation();
+    middle.classList.add('focus');
+    capsWarning.classList.add('focus');
+  } else if (!foc && state) {
+    state = false;
+    Caret.startAnimation();
+    middle.classList.remove('focus');
+    capsWarning.classList.remove('focus');
+  }
+}
+
+export function mousemove(event: { movementX: number; movementY: number }) {
+  if (!state) return;
+  // To avoid mouse/desk vibration from creating a flashy effect, we'll unfocus @ >5px instead of >0px
+  if (
+    middle.classList.contains('focus') &&
+    (event.movementX > unfocusPx || event.movementY > unfocusPx)
+  ) {
+    set(false);
+  }
+}

package/src/lib/helpers/test/manual-restart-tracker.ts

@@ -0,0 +1,13 @@
+let state = false;
+
+export function set(): void {
+  state = true;
+}
+
+export function reset(): void {
+  state = false;
+}
+
+export function get(): boolean {
+  return state;
+}

package/src/lib/helpers/test/out-of-focus.ts

@@ -0,0 +1,19 @@
+import { BehaviorSubject } from 'rxjs';
+import * as Misc from '../../utils/misc';
+
+const outOfFocusTimeouts: (number | NodeJS.Timeout)[] = [];
+
+export const outOfFocusShow = new BehaviorSubject<boolean>(false);
+
+export function hide(): void {
+  outOfFocusShow.next(false);
+  Misc.clearTimeouts(outOfFocusTimeouts);
+}
+
+export function show(): void {
+  outOfFocusTimeouts.push(
+    setTimeout(() => {
+      outOfFocusShow.next(true);
+    }, 1000)
+  );
+}