Develop

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chytanka",
-  "version": "0.13.48",
+  "version": "0.13.50",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

scripts/list-tree.js

@@ -0,0 +1,22 @@
+const fs = require('fs');
+const path = require('path');
+
+function printTree(dir, prefix = '') {
+    const entries = fs.readdirSync(dir, { withFileTypes: true });
+    const lastIndex = entries.length - 1;
+
+    entries.forEach((entry, index) => {
+        const isLast = index === lastIndex;
+        const pointer = isLast ? '└─' : '├─';
+        console.log(`${prefix}${pointer} ${entry.name}`);
+
+        if (entry.isDirectory()) {
+            const newPrefix = prefix + (isLast ? '   ' : '│  ');
+            printTree(path.join(dir, entry.name), newPrefix);
+        }
+    });
+}
+
+const appDir = path.join(__dirname, '../src/app');
+console.log(appDir);
+printTree(appDir);

src/app/app.component.html

@@ -0,0 +1,4 @@
+<gamepad-cursor [cursorVisible]="gamepad.gamepad.cursorVisible()" [x]="gamepad.gamepad.x()" [y]="gamepad.gamepad.y()" />
+<div><router-outlet></router-outlet></div>
+<div><router-outlet name="right"></router-outlet></div>
+@defer{<sircle-blur [radius]="8" [samples]="12" />}

src/app/app.component.ts

@@ -1,167 +1,29 @@
-import { Component, HostListener, PLATFORM_ID, effect, inject } from '@angular/core';
-import { LangService } from './shared/data-access/lang.service';
+import { Component, effect, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { DOCUMENT, isPlatformBrowser, isPlatformServer } from '@angular/common';
-import { environment } from '../environments/environment';
-import { DISPLAY_MODES, LinkParserSettingsService } from './link-parser/data-access/link-parser-settings.service';
-import { GamepadService } from './shared/data-access/gamepad.service';
-import { GamepadButton } from './shared/models';
-import { deadzone } from './shared/utils';
-import { DomManipulationService } from './shared/data-access';
-
-const SCALE_GAP = 64;
+import { LanguageFacadeService, GamepadFacadeService } from './core/facades';
+import { DisplayModeService, ConsoleWelcomeService, ViewportService } from './core/services';
 
 @Component({
   selector: 'chtnk-root',
-  template: `<gamepad-cursor [cursorVisible]="gamepad.cursorVisible()" [x]="gamepad.x()" [y]="gamepad.y()" /><div><router-outlet></router-outlet></div><div><router-outlet name="right"></router-outlet></div>@defer{<sircle-blur [radius]="8" [samples]="12" />}`,
+  templateUrl: 'app.component.html',
   styles: [``],
-  standalone: false
+  standalone: false,
+  host: {
+    '(window:resize)': 'this.viewport.updateScaleDiff()'
+  }
 })
 export class AppComponent {
-  private readonly document = inject(DOCUMENT);
-  platformId = inject(PLATFORM_ID)
-  setts = inject(LinkParserSettingsService)
-  gamepad = inject(GamepadService);
-  dom = inject(DomManipulationService);
-
-  constructor(public lang: LangService, private route: ActivatedRoute) {
-    this.lang.updateManifest()
-    this.lang.updateTranslate()
-
-    this.handleLanguageQueryParams();
-
-    this.displayWelcomeMessage();
-
-    effect(() => {
-      // Update display mode based on settings
-      this.updateDisplayMode();
-      // Handle gamepad input
-      this.handleGamepadInput();
-    });
-  }
-
-  private handleLanguageQueryParams() {
-    this.route.pathFromRoot[0].queryParams.subscribe(async (q) => {
-      const l = q['lang'];
-
-      if (l) {
-        this.lang.setLang(l);
-      }
-
-      if (l && this.lang.manifests.has(l)) {
-        this.lang.updateManifest();
-      }
-    });
-  }
-
-  private displayWelcomeMessage() {
-    if (isPlatformBrowser(this.platformId) && window.console && environment.prod) {
-      const msg = `What are you looking for here? The plot twist is in the next volume!`;
-      console.log(`%c${msg}`, "background-color: #166496; color: #ffd60a; font-size: 4rem; font-family:  monospace; padding: 8px 16px");
-    }
-  }
-
-  private handleGamepadInput() {
-    // Move cursor based on left gamepad stick input
-    this.cursorMove(this.gamepad.leftStick());
-    this.showCursor(this.gamepad.leftStick());
-    this.scrollByStick(this.gamepad.rightStick());
-
-    // Imitate click if the Cross/A button is pressed
-    if (this.gamepad.buttons()[GamepadButton.Cross]?.pressed)
-      this.imitateClick({ x: this.gamepad.x(), y: this.gamepad.y() });
-
-    // Imitate Escape key press if the Circle/B button is pressed
-    if (this.gamepad.buttons()[GamepadButton.Circle]?.pressed)
-      this.imitateEscape();
-  }
-
-  private showCursor(coords: { x: number, y: number }) {
-    const { x, y } = coords;
-
-    if (Math.abs(x) > 0.01 || Math.abs(y) > 0.01) {
-      this.gamepad.showCursor();
-    }
-  }
-
-  private imitateEscape() {
-    const event = new KeyboardEvent('keydown', {
-      key: 'Escape',
-      code: 'Escape',
-      keyCode: 27,
-      which: 27,
-      bubbles: true
-    });
-
-    document.dispatchEvent(event);
-  }
-
-  private imitateClick(coords: { x: number, y: number }) {
-    const { x, y } = coords;
-    const el = document.elementFromPoint(x - window.scrollX, y - window.scrollY) as HTMLElement;
-    if (el) {
-      el.focus();
-      el.click();
-    }
-  }
-
-  private cursorMove(coords: { x: number, y: number }) {
-    if (isPlatformServer(this.platformId)) return;
-
-    const { x, y } = coords;
-    const speed = 16;
-    const halfCursor = 8;
-    this.gamepad.x.update(v => {
-      const result = v + x * speed;
-      return Math.max(halfCursor, Math.min(this.document.documentElement.scrollWidth - halfCursor, result));
-    });
-    this.gamepad.y.update(v => {
-      const result = v + y * speed;
-      return Math.max(halfCursor, Math.min(this.document.documentElement.scrollHeight - halfCursor, result));
-    });
-    this.dom.updateHover(this.gamepad.x() - window.scrollX, this.gamepad.y() - window.scrollY);
-  }
-
-  private scrollByStick(coords: { x: number, y: number }) {
-    if (isPlatformServer(this.platformId)) return;
-
-    const { x, y } = coords;
-    const target = this.document.elementFromPoint(this.gamepad.x(), this.gamepad.y()) as HTMLElement;
-    const scrollContainer = this.dom.getScrollableParent(target);
-    const scrollSpeed = 20 + Math.abs(y) * 60;
-    const scrollX = deadzone(x) * scrollSpeed;
-    const scrollY = deadzone(y) * scrollSpeed;
-
-    if (!scrollContainer || (scrollX === 0 && scrollY === 0)) return;
-
-    scrollContainer.scrollBy({
-      left: scrollX,
-      top: scrollY,
-    });
-  }
-
-  ngOnInit() {
-    this.initScaleDifference();
-    this.updateDisplayMode();
-  }
-
-  updateDisplayMode() {
-    if (this.setts.displayMode != undefined) {
-      for (const mode of DISPLAY_MODES) {
-        this.document.documentElement.classList.remove(mode);
-      }
-      this.document.documentElement.classList.add(this.setts.displayMode() + 'mode');
-    }
-  }
-
-  @HostListener('window:resize')
-  initScaleDifference() {
-    const w = this.document.documentElement.clientWidth;
-    const h = this.document.documentElement.clientHeight;
-    const scalex = 1 - ((w - SCALE_GAP) / w)
-    const scaley = 1 - ((h - SCALE_GAP) / h)
-
-    this.document.documentElement.style.setProperty('--scale-diff-x', scalex.toString())
-    this.document.documentElement.style.setProperty('--scale-diff-y', scaley.toString())
+  private route = inject(ActivatedRoute);
+  private lang = inject(LanguageFacadeService);
+  private display = inject(DisplayModeService);
+  private welcome = inject(ConsoleWelcomeService);
+  protected viewport = inject(ViewportService);
+  protected gamepad = inject(GamepadFacadeService);
+
+  constructor() {
+    this.lang.init(this.route);
+    this.welcome.show();
+
+    effect(() => this.display.update());
   }
 }

src/app/app.module.ts

@@ -28,12 +28,12 @@ registerLocaleData(localeUk)
         }),
         SharedModule],
     providers: [
-        provideZoneChangeDetection({ eventCoalescing: true }),
-        provideClientHydration(withEventReplay(),
-            withHttpTransferCacheOptions({
-                includePostRequests: false,
-            })
-        ),
+        // provideZoneChangeDetection({ eventCoalescing: true }),
+        // provideClientHydration(withEventReplay(),
+        //     withHttpTransferCacheOptions({
+        //         includePostRequests: false,
+        //     })
+        // ),
         provideHttpClient(withFetch())
     ]
 })

src/app/core/facades/gamepad-facade.service.ts

@@ -0,0 +1,41 @@
+import { effect, inject, Injectable, PLATFORM_ID } from '@angular/core';
+import { isPlatformServer } from '@angular/common';
+import { GamepadService } from '../../shared/data-access';
+import { GamepadButton } from '../../shared/models';
+import { ActionService, CursorService, ScrollService } from '../services';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class GamepadFacadeService {
+  private platformId = inject(PLATFORM_ID);
+  gamepad = inject(GamepadService);
+  private cursor = inject(CursorService);
+  private scroll = inject(ScrollService);
+  private actions = inject(ActionService);
+
+  constructor() {
+    effect(() => this.handle());
+  }
+
+  private handle() {
+    if (isPlatformServer(this.platformId)) return;
+
+    const left = this.gamepad.leftStick();
+    const right = this.gamepad.rightStick();
+    const buttons = this.gamepad.buttons();
+
+    this.cursor.move(left);
+    this.cursor.showIfNeeded(left);
+
+    this.scroll.scroll(right, this.gamepad.x(), this.gamepad.y());
+
+    if (buttons[GamepadButton.Cross]?.pressed) {
+      this.actions.click(this.gamepad.x(), this.gamepad.y());
+    }
+
+    if (buttons[GamepadButton.Circle]?.pressed) {
+      this.actions.escape();
+    }
+  }
+}

src/app/core/facades/index.ts

@@ -0,0 +1,2 @@
+export * from './gamepad-facade.service';
+export * from './language-facade.service';

src/app/core/facades/language-facade.service.ts

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { LangService } from '../../shared/data-access';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LanguageFacadeService {
+  constructor(private lang: LangService) { }
+
+  init(route: ActivatedRoute) {
+    this.lang.updateManifest();
+    this.lang.updateTranslate();
+
+    route.queryParams.subscribe(q => {
+      const l = q['lang'];
+
+      if (l) this.lang.setLang(l);
+      if (l && this.lang.manifests.has(l)) {
+        this.lang.updateManifest();
+      }
+    });
+  }
+}

src/app/core/services/action.service.ts

@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class ActionService {
+  click(x: number, y: number) {
+    const el = document.elementFromPoint(
+      x - window.scrollX,
+      y - window.scrollY
+    ) as HTMLElement;
+
+    if (el) {
+      el.focus();
+      el.click();
+    }
+  }
+
+  escape() {
+    document.dispatchEvent(
+      new KeyboardEvent('keydown', {
+        key: 'Escape',
+        code: 'Escape',
+        keyCode: 27,
+        which: 27,
+        bubbles: true,
+      })
+    );
+  }
+}

src/app/core/services/console-welcome.service.ts

@@ -0,0 +1,27 @@
+import { Injectable, inject, PLATFORM_ID } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { environment } from '../../../environments/environment';
+
+@Injectable({ providedIn: 'root' })
+export class ConsoleWelcomeService {
+  private platformId = inject(PLATFORM_ID);
+
+  show() {
+    if (!isPlatformBrowser(this.platformId)) return;
+    if (!environment.prod) return;
+    if (!window?.console) return;
+
+    const msg = `What are you looking for here? The plot twist is in the next volume!`;
+
+    console.log(
+      `%c${msg}`,
+      `
+      background-color: #166496;
+      color: #ffd60a;
+      font-size: 4rem;
+      font-family: monospace;
+      padding: 8px 16px;
+      `
+    );
+  }
+}