create partially functioning area for practising typing

Author: AvidDollars

frontend/src/app/main-area/main-area.component.html

@@ -1 +1,38 @@
-<p>main-area works!</p>
+<!-- RETRIEVE FOCUS ON TEXTAREA -->
+{{ textareaFocus$ | async }}
+
+<!-- VARIABLES -->
+@let error = textLoaderService.error();
+@let isLoading = textLoaderService.isLoading$ | async;
+@let statusCSS = "text-3xl centered-content";
+@let finished = finishedTyping();
+
+<!-- HTML -->
+@if (isLoading) {
+  <p [class]="statusCSS">loading...</p>
+}
+
+@else if (error) {
+  <p [class]="statusCSS">error...</p>
+}
+
+@else if (finished) {
+  <p [class]="statusCSS">show stats after the session</p>
+}
+
+@else {
+  <p
+    #textElement
+    class="opacity-35"
+    [style.min-height.px]="hostElement.getBoundingClientRect().height"
+  >{{ loadedText() }}</p>
+
+  <textarea
+    #textarea
+    class="p-2 border-0 absolute top-0 left-0 w-full outline-none resize-none no-scrollbar"
+    spellcheck="false"
+    autofocus
+    [disabled]="finishedTyping()"
+    [style.height.px]="textElement.getBoundingClientRect().height"
+  ></textarea>
+}

frontend/src/app/main-area/main-area.component.scss

@@ -0,0 +1,4 @@
+// TODO: disable text selection with "Ctrl + Shift + Left arrow" / "Ctrl + A"
+textarea::selection {
+  background-color: transparent;
+}

frontend/src/app/main-area/main-area.component.spec.ts

@@ -1,14 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { MainAreaComponent } from './main-area.component';
+import { provideExperimentalZonelessChangeDetection } from '@angular/core';
 
 describe('MainAreaComponent', () => {
   let component: MainAreaComponent;
   let fixture: ComponentFixture<MainAreaComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MainAreaComponent]
+      imports: [MainAreaComponent],
+      providers: [
+        provideExperimentalZonelessChangeDetection()
+      ]
     })
     .compileComponents();
 

frontend/src/app/main-area/main-area.component.ts

@@ -1,15 +1,91 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, effect, ElementRef, inject, OnDestroy, OnInit, signal, viewChild } from '@angular/core';
+import { filter, fromEvent, map, scan, takeWhile, finalize, timer } from 'rxjs';
+import { AsyncPipe } from '@angular/common';
+import { TextLoaderService } from './text-loader.service';
+import { discardIrrelevantKeys, extractKey } from './utils';
+import JSConfetti from 'js-confetti';
+import { toObservable } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'app-main-area',
-  imports: [],
+  imports: [AsyncPipe],
   templateUrl: './main-area.component.html',
   styleUrl: './main-area.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
-    class: "bg-bg-light col-start-2 col-span-4 row-span-5 rounded-xl p-2"
+    class: `
+      overflow-scroll no-scrollbar
+      relative bg-light rounded-xl p-2
+      col-start-3 col-span-2 row-span-5
+      border-5 border-double border-secondary
+    `,
+    "[style.fontFamily]": "'Roboto Mono'",
   }
 })
-export class MainAreaComponent {
+export class MainAreaComponent implements OnInit, OnDestroy {
 
+  hostElement = inject(ElementRef).nativeElement as HTMLElement;
+  textareaElement = viewChild<ElementRef<HTMLTextAreaElement>>("textarea");
+  textareaFocus$ = toObservable(this.textareaElement).pipe( // to retrieve lost focus on textarea
+    filter(value => value != undefined),
+    map(textarea => textarea.nativeElement.focus()),
+  );
+
+  // TODO: create confetti service
+  confetti = new JSConfetti(); // confetti at the end of typing session
+
+  textLoaderService = inject(TextLoaderService);
+  loadedText = this.textLoaderService.text;
+  characterArray: string[] = [];
+  finishedTyping = signal(false);
+
+  // TYPING STREAM
+  typing$ = fromEvent<KeyboardEvent>(this.hostElement, "keydown").pipe(
+    filter(discardIrrelevantKeys), // to filter out "Shift" / "CapsLock" / etc...
+    map(extractKey),
+    scan((acc, key) => {
+      let index = (key === "Backspace") ? --acc[0] : ++acc[0];
+      index = (index < 0) ? -1 : index; // min index: -1
+      return [index, key] as [number, string];
+    }, [-1, ""] as [number, string]),
+    takeWhile(([index, _key]) => index < this.characterArray.length - 1), // TODO: you must add extra char to finish the session
+    map(([index, char]) => {
+      return [index, char, this.characterArray[index] === char] as [number, string, boolean];
+    }),
+    scan((error_counter, [_index, key, isCorrectKey]) => {
+      if (!isCorrectKey && key !== "Backspace") {
+        error_counter.set(key, (error_counter.get(key) ?? 0) + 1)
+      };
+      return error_counter;
+    }, new Map(this.characterArray.map(char => [char, 0]))),
+    finalize(() => {
+      timer(200).subscribe(() => {
+        this.finishedTyping.set(true);
+        this.confetti.addConfetti();
+      });
+      timer(5000).subscribe(() => {
+        this.confetti.destroyCanvas();
+      })
+    }),
+  );
+
+  constructor() {
+    // TODO: computed / linkedSignal instead?
+    effect(() => { // new text -> new character array
+      let text = this.loadedText() ?? "";
+      this.characterArray = [...text];
+    });
+  }
+
+  ngOnInit() {
+    this.hostElement.scrollTo({ top: 0, behavior: "smooth" });
+    this.typing$.subscribe(v => console.log("v: ", v));
+
+    // TODO: autoscrolling
+    //interval(50).pipe(delay(2_000)).subscribe(val => this.host.scrollTo({top: val / 5, behavior: "smooth"}))
+  }
+
+  ngOnDestroy() {
+    this.confetti.destroyCanvas();
+  }
 }