test(frontend): connected screenreader-test to the mud

Author: mystiker

frontend/src/app/core/mud/components/mud-screenreader-client/mud-screenreader-client.component.ts

@@ -2,17 +2,20 @@ import {
   AfterViewInit,
   Component,
   ElementRef,
+  inject,
   OnDestroy,
   ViewChild,
 } from '@angular/core';
 import { FitAddon } from '@xterm/addon-fit';
 import { IDisposable, Terminal } from '@xterm/xterm';
+import { Subscription } from 'rxjs';
+
+import { MudService } from '../../services/mud.service';
 
 /**
- * Lightweight xterm wrapper that is decoupled from the backend and is optimized
- * for screen-reader experiments.  It renders a static intro text and mirrors any
- * user input back to the terminal, including a delayed echo so assistive tech can
- * be tested without talking to the backend.
+ * Lightweight xterm wrapper that streams directly to/from the backend for
+ * screen-reader experiments.  It forwards raw server output 1:1 to xterm and
+ * ships user input to the server on CR, echoing the submitted line locally.
  */
 @Component({
   selector: 'app-mud-screenreader-client',
@@ -23,6 +26,8 @@ import { IDisposable, Terminal } from '@xterm/xterm';
 export class MudScreenreaderClientComponent
   implements AfterViewInit, OnDestroy
 {
+  private readonly mudService = inject(MudService);
+
   private readonly terminal = new Terminal({
     fontFamily: 'JetBrainsMono, monospace',
     theme: { background: '#000', foreground: '#ccc' },
@@ -33,9 +38,9 @@ export class MudScreenreaderClientComponent
   private readonly fitAddon = new FitAddon();
   private readonly terminalDisposables: IDisposable[] = [];
   private readonly resizeObs = new ResizeObserver(() => this.handleResize());
+  private mudOutputSubscription?: Subscription;
 
   private currentInput = '';
-  private readonly pendingEchoTimeouts: number[] = [];
 
   @ViewChild('hostRef', { static: true })
   private readonly terminalRef!: ElementRef<HTMLDivElement>;
@@ -46,25 +51,37 @@ export class MudScreenreaderClientComponent
     this.fitAddon.fit();
     this.resizeObs.observe(this.terminalRef.nativeElement);
 
-    this.renderStaticIntro();
+    this.mudOutputSubscription = this.mudService.mudOutput$.subscribe(
+      ({ data }) => this.terminal.write(data),
+    );
+
     this.terminal.focus();
 
     this.terminalDisposables.push(
       this.terminal.onData((data) => this.handleInput(data)),
     );
+
+    this.connectToBackend();
   }
 
   ngOnDestroy(): void {
     this.resizeObs.disconnect();
-    this.pendingEchoTimeouts.forEach((timeoutId) => clearTimeout(timeoutId));
-    this.pendingEchoTimeouts.length = 0;
 
+    this.mudOutputSubscription?.unsubscribe();
     this.terminalDisposables.forEach((disposable) => disposable.dispose());
+    this.mudService.disconnect();
     this.terminal.dispose();
   }
 
   private handleResize(): void {
     this.fitAddon.fit();
+
+    const columns = this.terminal.cols;
+    const rows = this.terminal.rows;
+
+    if (Number.isFinite(columns) && Number.isFinite(rows)) {
+      this.mudService.updateViewportSize(columns, rows);
+    }
   }
 
   private handleInput(data: string): void {
@@ -104,38 +121,25 @@ export class MudScreenreaderClientComponent
   }
 
   private commitInput(): void {
-    this.terminal.write('\r\n');
+    // this.terminal.write('\r\n');
     const inputSnapshot = this.currentInput;
-    this.terminal.writeln(`Eingabe: ${inputSnapshot}`);
-    this.scheduleEcho(inputSnapshot);
+    // this.terminal.writeln(`Eingabe: ${inputSnapshot}`);
+    if (inputSnapshot.length > 0) {
+      this.mudService.sendMessage(inputSnapshot);
+    }
     this.currentInput = '';
     this.terminal.writeln('');
   }
 
-  private renderStaticIntro(): void {
-    this.terminal.writeln('Willkommen zum barrierefreien Testlauf.');
-    this.terminal.writeln('Die Verbindung zum Server ist deaktiviert.');
-    this.terminal.writeln('');
-    this.terminal.writeln(
-      'Tippen Sie Ihre Eingabe und bestaetigen Sie mit Enter.',
-    );
-    this.terminal.writeln('');
-  }
-
   private isPrintable(char: string): boolean {
     const code = char.charCodeAt(0);
     return code >= 0x20 && code !== 0x7f;
   }
 
-  private scheduleEcho(message: string): void {
-    const timeoutId = window.setTimeout(() => {
-      this.terminal.writeln(`Echo: ${message}`);
-      const idx = this.pendingEchoTimeouts.indexOf(timeoutId);
-      if (idx >= 0) {
-        this.pendingEchoTimeouts.splice(idx, 1);
-      }
-    }, 5000);
+  private connectToBackend(): void {
+    const columns = this.terminal.cols;
+    const rows = this.terminal.rows;
 
-    this.pendingEchoTimeouts.push(timeoutId);
+    this.mudService.connect({ columns, rows });
   }
 }

frontend/src/app/features/sockets/sockets.service.ts

@@ -47,7 +47,7 @@ export class SocketsService {
     this.sessionId = this.resolveSessionId();
     this.storageKey = this.buildOutputStorageKey(this.sessionId);
 
-    this.storedOutputCache = this.restoreStoredOutputs();
+    // this.storedOutputCache = this.restoreStoredOutputs();
     this.skipDuplicateOutputsQueue = [...this.storedOutputCache];
 
     const socketUrl = serverConfigService.getBackendUrl();
@@ -385,10 +385,7 @@ export class SocketsService {
           outputs.length - SocketsService.OUTPUT_STORAGE_LIMIT,
         );
 
-        this.localStorageRef.setItem(
-          this.storageKey,
-          JSON.stringify(trimmed),
-        );
+        this.localStorageRef.setItem(this.storageKey, JSON.stringify(trimmed));
 
         return trimmed;
       }

frontend/src/main.ts

@@ -1,4 +1,4 @@
-import { enableProdMode } from '@angular/core';
+import { enableProdMode, inject, provideAppInitializer } from '@angular/core';
 
 import { environment } from './environments/environment';
 import {
@@ -7,6 +7,7 @@ import {
 } from '@angular/common/http';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
+import { ServerConfigService } from 'src/app/features/serverconfig/server-config.service';
 
 if (environment.production) {
   enableProdMode();
@@ -15,10 +16,10 @@ if (environment.production) {
 bootstrapApplication(AppComponent, {
   providers: [
     provideHttpClient(withInterceptorsFromDi()),
-    // provideAppInitializer(() => {
-    //   const config = inject(ServerConfigService);
+    provideAppInitializer(() => {
+      const config = inject(ServerConfigService);
 
-    //   return config.load();
-    // }),
+      return config.load();
+    }),
   ],
 }).catch((err) => console.error(err));