@testgorilla/tgo-typing-test 1.0.0 → 2.0.0

package/src/lib/components/tgo-typing-test/tgo-typing-test.component.ts

@@ -0,0 +1,287 @@
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  EventEmitter,
+  HostListener,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  Output,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core';
+import { BehaviorSubject, Observable, Subscription } from 'rxjs';
+import {
+  setCustomTGQuotes,
+  setFunbox,
+  setNumbers,
+  setPunctuation,
+  setTestVersionForSentences,
+  setTime,
+} from '../../helpers/config';
+import {
+  inputKeydown,
+  setWordsInputElement,
+  wordsInputBeforeinput,
+  wordsInputCompositionend,
+  wordsInputCompositionstart,
+  wordsInputCopy,
+  wordsInputFocus,
+  wordsInputInput,
+  wordsInputKeyup,
+  wordsInputPaste,
+} from '../../helpers/controllers/input-controller';
+import { capsKeydown, capsKeyup, showCaps } from '../../helpers/test/caps-warning';
+import { caretAnimation, caretLeft, caretShow, caretTop } from '../../helpers/test/caret';
+import { mousemove, setCapsWarningElement, setMiddleElement } from '../../helpers/test/focus';
+import { outOfFocusShow } from '../../helpers/test/out-of-focus';
+import { getReplayExport } from '../../helpers/test/replay';
+import * as TestLogic from '../../helpers/test/test-logic';
+import * as TestUI from '../../helpers/test/test-ui';
+import {
+  setWordsElement,
+  setWordsInputElementTestUI,
+  setWordsWrapperElement,
+  wordsInputFocusOut,
+  wordsInputFocusTestUI,
+  wordsWrapperClick,
+} from '../../helpers/test/test-ui';
+import { timeLeft } from '../../helpers/test/timer-progress';
+import { QuoteNetworkError$ } from '../../utils/misc';
+import * as TestActive from '../../helpers/states/test-active';
+import quoteController from '../../helpers/controllers/quotes-controller';
+import { disableCheckIfTimeIsUp } from '../../helpers/test/test-timer';
+import { CommonModule } from '@angular/common';
+
+@Component({
+    selector: 'tgo-typing-test',
+    imports: [CommonModule],
+    templateUrl: './tgo-typing-test.component.html',
+    styleUrl: '../../styles/index.scss',
+    animations: [
+        trigger('fadeIn', [
+            state('show', style({ opacity: 1 })),
+            state('hide', style({ opacity: 0 })),
+            transition('show => hide', [
+                animate('125ms')
+            ]),
+            transition('hide => show', [
+                animate('125ms')
+            ])
+        ]),
+        trigger('updatePositionCaret', [
+            state('true', style({
+                top: '{{caretTopPos}}px',
+                left: '{{caretLeftPos}}px'
+            }), {
+                params: { caretTopPos: 0, caretLeftPos: 0 }
+            }),
+            state('false', style({
+                top: '{{caretTopPos}}px',
+                left: '{{caretLeftPos}}px'
+            }), {
+                params: { caretTopPos: 0, caretLeftPos: 0 }
+            }),
+            transition('true => false', [
+                animate('100ms')
+            ]),
+            transition('false => true', [
+                animate('100ms')
+            ])
+        ])
+    ]
+})
+export class TgoTypingTestComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy {
+  showCaps$: BehaviorSubject<boolean>;
+  showCaret$: BehaviorSubject<boolean>;
+  caretAnimation$: BehaviorSubject<string>;
+  showTimer$: BehaviorSubject<boolean>;
+  timeLeft$: BehaviorSubject<string>;
+  caretLeft = 0;
+  caretTop = 0;
+  state = 'true';
+  outOfFocusShow$: BehaviorSubject<boolean>;
+
+  subscriptions: Subscription[] = [];
+  replayIntervalID: any;
+
+  @Output() resultEvent = new EventEmitter<any>();
+  @Output() replayExport = new EventEmitter<any>();
+  @Output() errorEvent = new EventEmitter<string>();
+
+  @Input() time = 180;
+  @Input() punctuation = false;
+  @Input() numbers = false;
+  @Input() funbox = 'none';
+  @Input() customTGQuotes = false;
+  @Input() showMiniTimerAndLiveWpm = true;
+  @Input() restartTest = false;
+  @Input() testVersion = 1;
+  @Input() testExpiration$?: Observable<void>;
+
+  constructor() {
+    this.showCaps$ = showCaps;
+    this.showCaret$ = caretShow;
+    this.caretAnimation$ = caretAnimation;
+    this.showTimer$ = TestLogic.startTestSubject;
+    this.outOfFocusShow$ = outOfFocusShow;
+    this.timeLeft$ = timeLeft;
+  }
+
+  @ViewChild('wordsInput') wordsInput!: ElementRef;
+  @ViewChild('wordsWrapper') wordsWrapper!: ElementRef;
+  @ViewChild('words') words!: ElementRef;
+  @ViewChild('middle') middle!: ElementRef;
+  @ViewChild('capsWarning') capsWarning!: ElementRef;
+
+  ngOnInit() {
+    TestUI.setResultCalculating(false);
+    TestUI.setResultVisible(false);
+    this.caretLeft = 0;
+    this.caretTop = 0;
+    setTime(this.time);
+    setPunctuation(this.punctuation);
+    setNumbers(this.numbers);
+    setFunbox(this.funbox);
+    setCustomTGQuotes(this.customTGQuotes);
+    setTestVersionForSentences(this.testVersion);
+    const caretLeftSub = caretLeft.subscribe(res => {
+      if (res !== this.caretLeft) {
+        this.caretLeft = res;
+        if (this.state == 'true') {
+          this.state = 'false';
+        } else {
+          this.state = 'true';
+        }
+      }
+    });
+
+    const caretTopSub = caretTop.subscribe(res => {
+      this.caretTop = res;
+    });
+
+    const testResultSub = TestLogic.resultSub.subscribe(res => {
+      this.replayExport.emit(getReplayExport());
+      this.resultEvent.emit(res);
+    });
+
+    const errorSub = QuoteNetworkError$.subscribe({
+      next: e => {
+        if (!e) return;
+        this.errorEvent.emit(e);
+        TestLogic.stopTest();
+      },
+    });
+
+    this.replayIntervalID = setInterval(() => {
+      this.replayExport.emit(getReplayExport());
+    }, 20000);
+
+    this.subscriptions.push(caretLeftSub, caretTopSub, testResultSub, errorSub);
+
+    if (this.testExpiration$) {
+      disableCheckIfTimeIsUp();
+      this.subscriptions.push(
+        this.testExpiration$.subscribe(() => {
+          TestLogic.finish();
+        })
+      );
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['restartTest']) {
+      if (!changes['restartTest'].isFirstChange()) {
+        this.restart();
+      }
+    }
+}
+
+  wordsInputKeyup(event: any) {
+    wordsInputKeyup(event);
+  }
+
+  wordsInputBeforeinput(event: any) {
+    wordsInputBeforeinput(event);
+  }
+
+  wordsInputInput(event: any) {
+    wordsInputInput(event);
+  }
+
+  wordsInputFocus(event: any) {
+    if (!TestActive.get()) return;
+    wordsInputFocus(event);
+    wordsInputFocusTestUI();
+  }
+
+  wordsInputFocusOut() {
+    if (!TestActive.get()) return;
+    wordsInputFocusOut();
+  }
+
+  wordsInputCopy(event: any) {
+    wordsInputCopy(event);
+  }
+
+  wordsInputPaste(event: any) {
+    wordsInputPaste(event);
+  }
+
+  wordsInputCompositionstart() {
+    wordsInputCompositionstart();
+  }
+
+  wordsInputCompositionend() {
+    wordsInputCompositionend();
+  }
+
+  wordsWrapperClick() {
+    wordsWrapperClick();
+  }
+
+  ngAfterViewInit() {
+    setWordsInputElement(this.wordsInput.nativeElement);
+    setWordsInputElementTestUI(this.wordsInput.nativeElement);
+    TestLogic.setWordsInputElementTestLogic(this.wordsInput.nativeElement);
+    setWordsWrapperElement(this.wordsWrapper.nativeElement);
+    setWordsElement(this.words.nativeElement);
+    setMiddleElement(this.middle.nativeElement);
+    setCapsWarningElement(this.capsWarning.nativeElement);
+    TestLogic.restart();
+  }
+
+  restart() {
+    TestUI.setResultCalculating(false);
+    TestUI.setResultVisible(false);
+    this.caretLeft = 0;
+    this.caretTop = 0;
+    TestLogic.restart();
+  }
+
+  @HostListener('document:keydown', ['$event'])
+  handleKeyboardDown(event: KeyboardEvent) {
+    capsKeydown(event);
+    inputKeydown(event, document.activeElement === this.wordsInput.nativeElement);
+  }
+
+  @HostListener('document:keyup', ['$event'])
+  handleKeyboardUp(event: KeyboardEvent) {
+    capsKeyup(event);
+  }
+
+  @HostListener('document:mousemove', ['$event'])
+  handleMouseMove(event: MouseEvent) {
+    mousemove(event);
+  }
+
+  ngOnDestroy(): void {
+    TestLogic.stopTest();
+    quoteController.resetQuotes();
+    clearInterval(this.replayIntervalID);
+    this.subscriptions.forEach(sub => sub.unsubscribe());
+  }
+}

package/src/lib/helpers/config.ts

@@ -0,0 +1,28 @@
+import DefaultConfig from "./constants/default-config";
+const config = {
+  ...DefaultConfig,
+};
+
+export function setNumbers(numb: boolean) {
+  config.numbers = numb;
+}
+export function setPunctuation(punc: boolean) {
+  config.punctuation = punc;
+}
+export function setTime(time: number) {
+  config.time = time;
+}
+
+export function setFunbox(funbox: string) {
+  config.funbox = funbox;
+}
+
+export function setCustomTGQuotes(customTGQuotes: boolean) {
+  config.customTGQuotes = customTGQuotes;
+}
+
+export function setTestVersionForSentences(testVersion: number) {
+  config.testVersion = testVersion;
+}
+
+export default config;

package/src/lib/helpers/constants/default-config.ts

@@ -0,0 +1,103 @@
+import { MonkeyTypes } from '../../types/types';
+export default <MonkeyTypes.Config>{
+  theme: 'serika_dark',
+  themeLight: 'serika',
+  themeDark: 'serika_dark',
+  autoSwitchTheme: false,
+  customTheme: false,
+  customThemeColors: [
+    '#323437',
+    '#e2b714',
+    '#e2b714',
+    '#646669',
+    '#2c2e31',
+    '#d1d0c5',
+    '#ca4754',
+    '#7e2a33',
+    '#ca4754',
+    '#7e2a33',
+  ],
+  favThemes: [],
+  showKeyTips: true,
+  showLiveWpm: false,
+  showTimerProgress: true,
+  smoothCaret: true,
+  quickRestart: 'off',
+  punctuation: false,
+  numbers: false,
+  words: 50,
+  time: 15,
+  mode: 'time',
+  quoteLength: [2],
+  language: 'english',
+  fontSize: '15',
+  freedomMode: false,
+  resultFilters: null,
+  difficulty: 'normal',
+  blindMode: false,
+  quickEnd: false,
+  caretStyle: 'default',
+  paceCaretStyle: 'default',
+  flipTestColors: false,
+  layout: 'default',
+  funbox: 'none',
+  confidenceMode: 'on',
+  indicateTypos: 'below',
+  timerStyle: 'mini',
+  colorfulMode: false,
+  randomTheme: 'off',
+  timerColor: 'main',
+  timerOpacity: '1',
+  stopOnError: 'off',
+  showAllLines: false,
+  keymapMode: 'off',
+  keymapStyle: 'staggered',
+  keymapLegendStyle: 'lowercase',
+  keymapLayout: 'overrideSync',
+  keymapShowTopRow: 'layout',
+  fontFamily: 'Roboto_Mono',
+  smoothLineScroll: false,
+  alwaysShowDecimalPlaces: false,
+  alwaysShowWordsHistory: false,
+  singleListCommandLine: 'manual',
+  capsLockWarning: true,
+  playSoundOnError: false,
+  playSoundOnClick: 'off',
+  soundVolume: '0.5',
+  startGraphsAtZero: true,
+  showOutOfFocusWarning: true,
+  paceCaret: 'off',
+  paceCaretCustomSpeed: 100,
+  repeatedPace: true,
+  pageWidth: '125',
+  chartAccuracy: true,
+  chartStyle: 'line',
+  minWpm: 'off',
+  minWpmCustomSpeed: 100,
+  highlightMode: 'letter',
+  alwaysShowCPM: false,
+  ads: 'result',
+  hideExtraLetters: false,
+  strictSpace: false,
+  minAcc: 'off',
+  minAccCustom: 90,
+  showLiveAcc: false,
+  showLiveBurst: false,
+  monkey: false,
+  repeatQuotes: 'off',
+  oppositeShiftMode: 'off',
+  customBackground: '',
+  customBackgroundSize: 'cover',
+  customBackgroundFilter: [0, 1, 1, 1, 1],
+  customLayoutfluid: 'qwerty#dvorak#colemak',
+  monkeyPowerLevel: 'off',
+  minBurst: 'off',
+  minBurstCustomSpeed: 100,
+  burstHeatmap: false,
+  britishEnglish: false,
+  lazyMode: false,
+  showAverage: 'off',
+  tapeMode: 'off',
+  customTGQuotes: false,
+  testVersion: 1,
+};