Extract UI overlay copy helpers

Author: rgilks

src/client/ui-screens.test.ts

@@ -1,6 +1,9 @@
 import { describe, expect, it } from 'vitest';
 
 import {
+  buildGameOverView,
+  buildReconnectView,
+  buildRematchPendingView,
   buildScreenVisibility,
   buildWaitingScreenCopy,
   toggleLogVisible,
@@ -50,6 +53,31 @@ describe('ui-screens', () => {
     });
   });
 
+  it('builds game-over, reconnect, and rematch-pending overlay copy', () => {
+    expect(buildGameOverView(true, 'Fleet eliminated!', {
+      turns: 12,
+      myShipsAlive: 2,
+      myShipsTotal: 3,
+      enemyShipsAlive: 0,
+      enemyShipsTotal: 2,
+    })).toEqual({
+      titleText: 'VICTORY',
+      reasonText: 'Fleet eliminated!\n\nTurns: 12 | Your ships: 2/3 | Enemy: 0/2',
+      rematchText: 'Rematch',
+      rematchDisabled: false,
+    });
+
+    expect(buildReconnectView(2, 5)).toEqual({
+      reconnectText: 'Connection lost',
+      attemptText: 'Attempt 2 of 5',
+    });
+
+    expect(buildRematchPendingView()).toEqual({
+      rematchText: 'Waiting...',
+      rematchDisabled: true,
+    });
+  });
+
   it('toggles game-log visibility', () => {
     expect(toggleLogVisible(true)).toBe(false);
     expect(toggleLogVisible(false)).toBe(true);

src/client/ui-screens.ts

@@ -26,6 +26,31 @@ export interface WaitingScreenCopy {
   statusText: string;
 }
 
+export interface GameOverStatsLike {
+  turns: number;
+  myShipsAlive: number;
+  myShipsTotal: number;
+  enemyShipsAlive: number;
+  enemyShipsTotal: number;
+}
+
+export interface GameOverView {
+  titleText: 'VICTORY' | 'DEFEAT';
+  reasonText: string;
+  rematchText: 'Rematch';
+  rematchDisabled: false;
+}
+
+export interface ReconnectView {
+  reconnectText: 'Connection lost';
+  attemptText: string;
+}
+
+export interface RematchPendingView {
+  rematchText: 'Waiting...';
+  rematchDisabled: true;
+}
+
 const HIDDEN_VISIBILITY: UIScreenVisibility = {
   menu: 'none',
   scenario: 'none',
@@ -89,6 +114,39 @@ export function buildWaitingScreenCopy(code: string, connecting: boolean): Waiti
     : { codeText: code, statusText: 'Waiting for opponent...' };
 }
 
+export function buildGameOverView(
+  won: boolean,
+  reason: string,
+  stats?: GameOverStatsLike,
+): GameOverView {
+  let reasonText = reason;
+  if (stats) {
+    reasonText += `\n\nTurns: ${stats.turns}`;
+    reasonText += ` | Your ships: ${stats.myShipsAlive}/${stats.myShipsTotal}`;
+    reasonText += ` | Enemy: ${stats.enemyShipsAlive}/${stats.enemyShipsTotal}`;
+  }
+  return {
+    titleText: won ? 'VICTORY' : 'DEFEAT',
+    reasonText,
+    rematchText: 'Rematch',
+    rematchDisabled: false,
+  };
+}
+
+export function buildRematchPendingView(): RematchPendingView {
+  return {
+    rematchText: 'Waiting...',
+    rematchDisabled: true,
+  };
+}
+
+export function buildReconnectView(attempt: number, maxAttempts: number): ReconnectView {
+  return {
+    reconnectText: 'Connection lost',
+    attemptText: `Attempt ${attempt} of ${maxAttempts}`,
+  };
+}
+
 export function toggleLogVisible(logVisible: boolean): boolean {
   return !logVisible;
 }

src/client/ui.ts

@@ -15,6 +15,9 @@ import {
 import { buildHUDView } from './ui-hud';
 import { deriveHudLayoutOffsets } from './ui-layout';
 import {
+  buildGameOverView,
+  buildReconnectView,
+  buildRematchPendingView,
   buildScreenVisibility,
   buildWaitingScreenCopy,
   toggleLogVisible,
@@ -508,32 +511,32 @@ export class UIManager {
   }
 
   showGameOver(won: boolean, reason: string, stats?: { turns: number; myShipsAlive: number; myShipsTotal: number; enemyShipsAlive: number; enemyShipsTotal: number }) {
+    const view = buildGameOverView(won, reason, stats);
     this.gameOverEl.style.display = 'flex';
-    document.getElementById('gameOverText')!.textContent = won ? 'VICTORY' : 'DEFEAT';
-    let reasonText = reason;
-    if (stats) {
-      reasonText += `\n\nTurns: ${stats.turns}`;
-      reasonText += ` | Your ships: ${stats.myShipsAlive}/${stats.myShipsTotal}`;
-      reasonText += ` | Enemy: ${stats.enemyShipsAlive}/${stats.enemyShipsTotal}`;
-    }
+    document.getElementById('gameOverText')!.textContent = view.titleText;
     const reasonEl = document.getElementById('gameOverReason')!;
-    reasonEl.textContent = reasonText;
+    reasonEl.textContent = view.reasonText;
     reasonEl.style.whiteSpace = 'pre-line';
-    document.getElementById('rematchBtn')!.textContent = 'Rematch';
-    document.getElementById('rematchBtn')!.removeAttribute('disabled');
+    const rematchBtn = document.getElementById('rematchBtn')!;
+    rematchBtn.textContent = view.rematchText;
+    rematchBtn.removeAttribute('disabled');
   }
 
   showRematchPending() {
+    const view = buildRematchPendingView();
     const btn = document.getElementById('rematchBtn')!;
-    btn.textContent = 'Waiting...';
-    btn.setAttribute('disabled', 'true');
+    btn.textContent = view.rematchText;
+    if (view.rematchDisabled) {
+      btn.setAttribute('disabled', 'true');
+    }
   }
 
   showReconnecting(attempt: number, maxAttempts: number, onCancel: () => void) {
+    const view = buildReconnectView(attempt, maxAttempts);
     const overlay = document.getElementById('reconnectOverlay')!;
     overlay.style.display = 'flex';
-    document.getElementById('reconnectText')!.textContent = 'Connection lost';
-    document.getElementById('reconnectAttempt')!.textContent = `Attempt ${attempt} of ${maxAttempts}`;
+    document.getElementById('reconnectText')!.textContent = view.reconnectText;
+    document.getElementById('reconnectAttempt')!.textContent = view.attemptText;
     const cancelBtn = document.getElementById('reconnectCancelBtn')!;
     cancelBtn.onclick = () => {
       this.hideReconnecting();