ddd-team1 0.0.1

package/src/infrastructure/tui/components/GameScreen.tsx

@@ -0,0 +1,184 @@
+import { Box, Text, useInput } from 'ink';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { UUID } from 'crypto';
+import type { EventDTO, PieceDTO } from '../../../application/GetGameStateQuery';
+import { GetGameStateQuery } from '../../../application/GetGameStateQuery';
+import { MakeMoveUseCase } from '../../../application/MakeMoveUseCase';
+import { useGameRepository } from '../GameRepositoryContext';
+import { BoardView } from './BoardView';
+import { type LogMessage, LogMessages } from './LogMessages';
+import { MoveInput } from './MoveInput';
+
+const MAX_LOG_MESSAGES = 8;
+
+function eventsToLogMessages(newEvents: EventDTO[], allEvents: EventDTO[]): LogMessage[] {
+  if (newEvents.length === 0) return [];
+  const maxNameLen = Math.max(...allEvents.map((e) => e.name.length));
+  return newEvents.map((e) => ({
+    text: e.payload
+      ? `${e.name.padEnd(maxNameLen)} ${e.payload}`
+      : e.name,
+    type: 'info' as const,
+  }));
+}
+
+interface GameScreenProps {
+  gameId: UUID;
+  gameNumber: number;
+  onBack: () => void;
+  onExit: () => void;
+  mode?: 'local' | 'online';
+  myColor?: 'white' | 'black';
+}
+
+export function GameScreen({ gameId, gameNumber, onBack, onExit, mode = 'local', myColor }: GameScreenProps) {
+  const { gameStateQuery, makeMoveUseCase, onlineGameService, createOnlineRepo } = useGameRepository();
+  const [boardState, setBoardState] = useState<(PieceDTO | null)[][] | null>(null);
+  const [currentPlayer, setCurrentPlayer] = useState<'white' | 'black'>('white');
+  const [logMessages, setLogMessages] = useState<LogMessage[]>([]);
+  const [hasGuest, setHasGuest] = useState(false);
+  const [logExpanded, setLogExpanded] = useState(false);
+  const loggedEventCount = useRef(0);
+
+  const onlineRepo = useMemo(() => {
+    if (mode === 'online') return createOnlineRepo(gameId);
+    return null;
+  }, [mode, gameId]);
+
+  const onlineMoveUseCase = useMemo(() => {
+    if (onlineRepo) return new MakeMoveUseCase(onlineRepo);
+    return null;
+  }, [onlineRepo]);
+
+  const onlineStateQuery = useMemo(() => {
+    if (onlineRepo) return new GetGameStateQuery(onlineRepo);
+    return null;
+  }, [onlineRepo]);
+
+  function applyState(board: (PieceDTO | null)[][], player: 'white' | 'black', events: EventDTO[]) {
+    setBoardState(board);
+    setCurrentPlayer(player);
+
+    const newEvents = events.slice(loggedEventCount.current);
+    if (newEvents.length > 0) {
+      setLogMessages((msgs) => [...msgs, ...eventsToLogMessages(newEvents, events)]);
+    }
+    loggedEventCount.current = events.length;
+  }
+
+  // Local mode: load initial state
+  useEffect(() => {
+    if (mode !== 'local') return;
+    gameStateQuery.execute(gameId).then((state) => {
+      applyState(state.board, state.currentPlayer, state.events);
+    });
+  }, [gameId, mode]);
+
+  // Online mode: track game info (guest joining)
+  useEffect(() => {
+    if (mode !== 'online' || !onlineGameService) return;
+
+    const unsubscribe = onlineGameService.onGameInfoChanged(gameId, (info) => {
+      setHasGuest(info.guestUid !== null);
+    });
+
+    return unsubscribe;
+  }, [gameId, mode, onlineGameService]);
+
+  // Online mode: subscribe to real-time events, rebuild state via query
+  useEffect(() => {
+    if (mode !== 'online' || !onlineGameService || !onlineStateQuery) return;
+
+    const unsubscribe = onlineGameService.onEventsChanged(gameId, () => {
+      onlineStateQuery.execute(gameId).then((state) => {
+        applyState(state.board, state.currentPlayer, state.events);
+      });
+    });
+
+    return unsubscribe;
+  }, [gameId, mode, onlineGameService, onlineStateQuery]);
+
+  const addLog = useCallback((text: string, type: LogMessage['type']) => {
+    setLogMessages((prev) => [...prev, { text, type }]);
+  }, []);
+
+  const handleMove = useCallback(async (standardAlgebraicNotation: string) => {
+    if (mode === 'online') {
+      if (!onlineMoveUseCase) return;
+      try {
+        await onlineMoveUseCase.execute(gameId, standardAlgebraicNotation);
+      } catch (e) {
+        const message = e instanceof Error ? e.message : String(e);
+        addLog(`${standardAlgebraicNotation} — ${message}`, 'error');
+      }
+    } else {
+      try {
+        await makeMoveUseCase.execute(gameId, standardAlgebraicNotation);
+        const updatedState = await gameStateQuery.execute(gameId);
+        applyState(updatedState.board, updatedState.currentPlayer, updatedState.events);
+      } catch (e) {
+        const message = e instanceof Error ? e.message : String(e);
+        addLog(`${standardAlgebraicNotation} — ${message}`, 'error');
+      }
+    }
+  }, [gameId, mode]);
+
+  useInput((_ch, key) => {
+    if (key.ctrl && _ch === 'o') {
+      setLogExpanded((prev) => !prev);
+    }
+  });
+
+  const handleCommand = useCallback((command: string) => {
+    switch (command) {
+      case '/menu':
+        onBack();
+        break;
+      case '/exit':
+        onExit();
+        break;
+    }
+  }, [onBack, onExit]);
+
+  if (!boardState) {
+    return <Text>Loading...</Text>;
+  }
+
+  const isMyTurn = mode === 'local' || (hasGuest && currentPlayer === myColor);
+  const disabledMessage = !isMyTurn
+    ? (mode === 'online' && !hasGuest
+      ? `Waiting for invitation to be accepted... Invite code: ${gameId}`
+      : `Waiting for opponent (${currentPlayer})...`)
+    : undefined;
+
+  return (
+    <Box flexDirection="column" padding={1}>
+      <Box>
+        <Text bold>Chess - DDD</Text>
+        <Text dimColor> — </Text>
+        {mode === 'online' ? (
+          <Text bold color="magenta">Online ({gameId.slice(0, 8)}) — you are {myColor === 'white' ? '♔' : '♚'} {myColor}</Text>
+        ) : (
+          <Text bold color="cyan">Game #{gameNumber} ({gameId})</Text>
+        )}
+      </Box>
+      <Box marginTop={1}>
+        <BoardView board={boardState} />
+      </Box>
+      <MoveInput
+        onMove={handleMove}
+        onCommand={handleCommand}
+        currentPlayer={currentPlayer}
+        onEscape={onBack}
+        disabled={!isMyTurn}
+        disabledMessage={disabledMessage}
+      />
+      <LogMessages
+        messages={logExpanded ? logMessages : logMessages.slice(-MAX_LOG_MESSAGES)}
+        totalCount={logMessages.length}
+        expanded={logExpanded}
+      />
+      <Text dimColor>Esc to go back to menu — type / for commands</Text>
+    </Box>
+  );
+}

package/src/infrastructure/tui/components/HostGameScreen.tsx

@@ -0,0 +1,83 @@
+import { Box, Text, useInput } from 'ink';
+import { useEffect, useState } from 'react';
+import type { GameInfo } from '../../../application/OnlineGameService';
+import { useGameRepository } from '../GameRepositoryContext';
+
+interface HostGameScreenProps {
+  onGameReady: (gameId: string, myColor: 'white' | 'black') => void;
+  onBack: () => void;
+}
+
+export function HostGameScreen({ onGameReady, onBack }: HostGameScreenProps) {
+  const { onlineGameService, playerUid } = useGameRepository();
+  const [gameInfo, setGameInfo] = useState<GameInfo | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useInput((_ch, key) => {
+    if (key.escape) onBack();
+  });
+
+  useEffect(() => {
+    if (!onlineGameService || !playerUid) return;
+
+    onlineGameService.createGame(playerUid).then((info) => {
+      setGameInfo(info);
+    }).catch((err) => {
+      setError(err.message);
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!gameInfo || !onlineGameService) return;
+
+    const unsubscribe = onlineGameService.onGameInfoChanged(gameInfo.gameId, (info) => {
+      if (info.status === 'active') {
+        unsubscribe();
+        onGameReady(info.gameId, info.hostColor);
+      }
+    });
+
+    return unsubscribe;
+  }, [gameInfo]);
+
+  if (error) {
+    return (
+      <Box flexDirection="column" padding={1}>
+        <Text color="red">Failed to create game: {error}</Text>
+        <Text dimColor>Press Esc to go back</Text>
+      </Box>
+    );
+  }
+
+  if (!gameInfo) {
+    return (
+      <Box padding={1}>
+        <Text>Creating game...</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" padding={1}>
+      <Text bold>Host Game</Text>
+      <Box marginTop={1} flexDirection="column">
+        <Text>Invite code:</Text>
+        <Box marginTop={1}>
+          <Text bold color="green">{gameInfo.gameId}</Text>
+        </Box>
+        <Box marginTop={1}>
+          <Text dimColor>Share this code with your opponent.</Text>
+        </Box>
+        <Box marginTop={1}>
+          <Text>You play as: <Text bold color={gameInfo.hostColor === 'white' ? '#fff' : '#aaa'}>{gameInfo.hostColor === 'white' ? '♔' : '♚'} {gameInfo.hostColor}</Text></Text>
+        </Box>
+      </Box>
+      <Box marginTop={1}>
+        <Text color="yellow">Waiting for opponent to join...</Text>
+      </Box>
+      <Box marginTop={1}>
+        <Text dimColor>Esc to go back</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/infrastructure/tui/components/JoinGameScreen.tsx

@@ -0,0 +1,84 @@
+import { Box, Text, useInput } from 'ink';
+import { useState } from 'react';
+import { useGameRepository } from '../GameRepositoryContext';
+
+interface JoinGameScreenProps {
+  onGameJoined: (gameId: string, myColor: 'white' | 'black') => void;
+  onBack: () => void;
+}
+
+export function JoinGameScreen({ onGameJoined, onBack }: JoinGameScreenProps) {
+  const { onlineGameService, playerUid } = useGameRepository();
+  const [input, setInput] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [joining, setJoining] = useState(false);
+
+  useInput((ch, key) => {
+    if (joining) return;
+
+    if (key.escape) {
+      if (input) {
+        setInput('');
+        setError(null);
+      } else {
+        onBack();
+      }
+      return;
+    }
+
+    if (key.return && input.trim()) {
+      if (!onlineGameService || !playerUid) return;
+
+      setJoining(true);
+      setError(null);
+
+      onlineGameService.joinGame(input.trim(), playerUid).then((info) => {
+        const myColor = info.hostColor === 'white' ? 'black' : 'white';
+        onGameJoined(info.gameId, myColor);
+      }).catch((err) => {
+        setError(err.message);
+        setJoining(false);
+      });
+      return;
+    }
+
+    if (key.backspace || key.delete) {
+      setInput((prev) => prev.slice(0, -1));
+      setError(null);
+      return;
+    }
+
+    if (ch) {
+      setInput((prev) => prev + ch);
+      setError(null);
+    }
+  });
+
+  return (
+    <Box flexDirection="column" padding={1}>
+      <Text bold>Join Game</Text>
+      <Box marginTop={1} flexDirection="column">
+        <Text dimColor>Enter the invite code:</Text>
+        <Box marginTop={1}>
+          <Text color="yellow">{'> '}</Text>
+          <Text bold color="cyan">{input}</Text>
+          {!input && <Text dimColor>(paste invite code)</Text>}
+          {input && <Text color="gray">█</Text>}
+        </Box>
+        {error && (
+          <Box marginTop={1}>
+            <Text color="red">{error}</Text>
+          </Box>
+        )}
+        {joining && (
+          <Box marginTop={1}>
+            <Text color="yellow">Joining game...</Text>
+          </Box>
+        )}
+      </Box>
+      <Box marginTop={1}>
+        <Text dimColor>Enter to join, Esc to go back</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/infrastructure/tui/components/LogMessages.tsx

@@ -0,0 +1,51 @@
+import { Box, Text } from 'ink';
+
+export interface LogMessage {
+  text: string;
+  type: 'info' | 'error' | 'success';
+}
+
+interface LogMessagesProps {
+  messages: LogMessage[];
+  totalCount?: number;
+  expanded?: boolean;
+}
+
+const COLOR_MAP: Record<LogMessage['type'], string> = {
+  info: 'blue',
+  error: 'red',
+  success: 'green',
+};
+
+const PREFIX_MAP: Record<LogMessage['type'], string> = {
+  info: 'ℹ',
+  error: '✗',
+  success: '✓',
+};
+
+export function LogMessages({ messages, totalCount = 0, expanded = false }: LogMessagesProps) {
+  const hidden = totalCount - messages.length;
+
+  return (
+    <Box flexDirection="column" marginTop={1} borderStyle="single" borderColor="gray" paddingX={1}>
+      <Box>
+        <Text bold color="gray">Log</Text>
+        {hidden > 0 && !expanded && (
+          <Text dimColor> ({hidden} hidden — Ctrl+O to expand)</Text>
+        )}
+        {expanded && totalCount > 0 && (
+          <Text dimColor> (expanded — Ctrl+O to collapse)</Text>
+        )}
+      </Box>
+      {messages.length === 0 ? (
+        <Text color="gray" dimColor>No messages yet</Text>
+      ) : (
+        messages.map((msg, i) => (
+          <Text key={i} color={COLOR_MAP[msg.type]}>
+            {PREFIX_MAP[msg.type]} {msg.text}
+          </Text>
+        ))
+      )}
+    </Box>
+  );
+}

package/src/infrastructure/tui/components/MoveInput.tsx

@@ -0,0 +1,140 @@
+import { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+
+interface Command {
+  name: string;
+  description: string;
+}
+
+const COMMANDS: Command[] = [
+  { name: '/menu', description: 'Go back to main menu' },
+  { name: '/exit', description: 'Exit' },
+];
+
+interface MoveInputProps {
+  onMove: (standardAlgebraicNotation: string) => void;
+  onCommand: (command: string) => void;
+  currentPlayer: 'white' | 'black';
+  onEscape?: () => void;
+  disabled?: boolean;
+  disabledMessage?: string;
+}
+
+const PIECE_ICON: Record<string, string> = {
+  white: '♔',
+  black: '♚',
+};
+
+export function MoveInput({ onMove, onCommand, currentPlayer, onEscape, disabled, disabledMessage }: MoveInputProps) {
+  const [input, setInput] = useState('');
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const isCommandMode = input.startsWith('/');
+  const matchingCommands = isCommandMode
+    ? COMMANDS.filter((cmd) => cmd.name.startsWith(input.toLowerCase()))
+    : [];
+
+  useInput((ch, key) => {
+    // Always allow escape and commands, even when disabled
+    if (key.escape) {
+      if (input) {
+        setInput('');
+        setSelectedIndex(0);
+      } else if (onEscape) {
+        onEscape();
+      }
+      return;
+    }
+
+    if (key.tab && isCommandMode && matchingCommands.length > 0) {
+      setInput(matchingCommands[selectedIndex]!.name);
+      return;
+    }
+
+    if (isCommandMode && key.upArrow) {
+      setSelectedIndex((prev) => Math.max(0, prev - 1));
+      return;
+    }
+
+    if (isCommandMode && key.downArrow) {
+      setSelectedIndex((prev) => Math.min(matchingCommands.length - 1, prev + 1));
+      return;
+    }
+
+    if (key.return) {
+      const trimmed = input.trim();
+      if (isCommandMode) {
+        const exact = COMMANDS.find((cmd) => cmd.name === trimmed);
+        if (exact) {
+          onCommand(exact.name);
+          setInput('');
+          setSelectedIndex(0);
+        } else if (matchingCommands.length === 1) {
+          onCommand(matchingCommands[0]!.name);
+          setInput('');
+          setSelectedIndex(0);
+        }
+      } else if (trimmed && !disabled) {
+        onMove(trimmed);
+        setInput('');
+      }
+      return;
+    }
+
+    if (key.backspace || key.delete) {
+      setInput((prev) => {
+        const next = prev.slice(0, -1);
+        setSelectedIndex(0);
+        return next;
+      });
+      return;
+    }
+
+    if (ch && !key.ctrl) {
+      setInput((prev) => {
+        const next = prev + ch;
+        setSelectedIndex(0);
+        return next;
+      });
+    }
+  });
+
+  const playerColor = currentPlayer === 'white' ? '#fff' : '#aaa';
+
+  return (
+    <Box marginTop={1} flexDirection="column">
+      <Box>
+        <Text color={playerColor}>{PIECE_ICON[currentPlayer]} </Text>
+        <Text bold color={playerColor}>{currentPlayer}</Text>
+        <Text dimColor> to move</Text>
+      </Box>
+      {disabled && disabledMessage ? (
+        <Box>
+          <Text color="yellow">{disabledMessage}</Text>
+        </Box>
+      ) : (
+        <Box>
+          <Text color="yellow">{'> '}</Text>
+          <Text bold color={isCommandMode ? 'cyan' : 'green'}>{input}</Text>
+          {!input && <Text dimColor>(e.g. Nf3, Bxe5, O-O — type / for commands)</Text>}
+          {input && <Text color="gray">█</Text>}
+        </Box>
+      )}
+      {isCommandMode && matchingCommands.length > 0 && (
+        <Box flexDirection="column" marginLeft={2}>
+          {matchingCommands.map((cmd, idx) => (
+            <Box key={cmd.name}>
+              <Text color={idx === selectedIndex ? 'yellow' : 'gray'}>
+                {idx === selectedIndex ? '> ' : '  '}
+              </Text>
+              <Text bold={idx === selectedIndex} color={idx === selectedIndex ? 'cyan' : undefined}>
+                {cmd.name}
+              </Text>
+              <Text dimColor> — {cmd.description}</Text>
+            </Box>
+          ))}
+        </Box>
+      )}
+    </Box>
+  );
+}

package/src/infrastructure/tui/components/SetupScreen.tsx

@@ -0,0 +1,85 @@
+import { Box, Text, useInput } from 'ink';
+import { useState } from 'react';
+import { decodeConnectionString, saveConfig } from '../../firebase/configStore';
+
+interface SetupScreenProps {
+  onComplete: () => void;
+  onBack: () => void;
+}
+
+export function SetupScreen({ onComplete, onBack }: SetupScreenProps) {
+  const [input, setInput] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+
+  useInput((ch, key) => {
+    if (success) return;
+
+    if (key.escape) {
+      if (input) {
+        setInput('');
+        setError(null);
+      } else {
+        onBack();
+      }
+      return;
+    }
+
+    if (key.return && input.trim()) {
+      try {
+        const config = decodeConnectionString(input.trim());
+        saveConfig(config);
+        setSuccess(true);
+        setError(null);
+        setTimeout(() => onComplete(), 500);
+      } catch (e) {
+        setError(e instanceof Error ? e.message : String(e));
+      }
+      return;
+    }
+
+    if (key.backspace || key.delete) {
+      setInput((prev) => prev.slice(0, -1));
+      setError(null);
+      return;
+    }
+
+    if (ch) {
+      setInput((prev) => prev + ch);
+      setError(null);
+    }
+  });
+
+  return (
+    <Box flexDirection="column" padding={1}>
+      <Text bold>Online Setup</Text>
+      <Box marginTop={1} flexDirection="column">
+        <Text>Paste the connection string to connect to a game server.</Text>
+        <Text dimColor>Ask the host for this string, or generate one from your Firebase project:</Text>
+        <Text dimColor>  echo -n '{`'{"apiKey":"...","projectId":"..."}'`}' | base64</Text>
+      </Box>
+      <Box marginTop={1} flexDirection="column">
+        <Text dimColor>Connection string:</Text>
+        <Box>
+          <Text color="yellow">{'> '}</Text>
+          <Text bold color="cyan">{input.length > 60 ? `...${input.slice(-57)}` : input}</Text>
+          {!input && <Text dimColor>(paste base64 string)</Text>}
+          {input && <Text color="gray">|</Text>}
+        </Box>
+      </Box>
+      {error && (
+        <Box marginTop={1}>
+          <Text color="red">{error}</Text>
+        </Box>
+      )}
+      {success && (
+        <Box marginTop={1}>
+          <Text color="green">Connected! Redirecting...</Text>
+        </Box>
+      )}
+      <Box marginTop={1}>
+        <Text dimColor>Enter to connect, Esc to go back</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/infrastructure/tui/index.tsx

@@ -0,0 +1,70 @@
+#!/usr/bin/env bun
+import { render } from 'ink';
+import { FileBasedGameRepository } from '../FileBasedGameRepository.ts';
+import { loadConfig, loadUid } from '../firebase/configStore.ts';
+import { initFirebase, isFirebaseInitialized } from '../firebase/firebaseConfig.ts';
+import { FirebaseAuthService } from '../firebase/FirebaseAuthService.ts';
+import { FirestoreOnlineGameService } from '../firebase/FirestoreOnlineGameService.ts';
+import { App } from './App';
+import { GameRepositoryProvider } from './GameRepositoryContext.tsx';
+
+const repo = new FileBasedGameRepository();
+
+let onlineGameService: FirestoreOnlineGameService | null = null;
+let playerUid: string | null = null;
+
+async function authenticateAndSetup(): Promise<void> {
+  const config = loadConfig();
+  if (!config) return;
+
+  initFirebase(config);
+  const authService = new FirebaseAuthService();
+  await authService.authenticate();
+
+  playerUid = authService.getUid();
+  onlineGameService = new FirestoreOnlineGameService();
+}
+
+function tryInitFromSavedConfig() {
+  const config = loadConfig();
+  if (!config) return;
+
+  // If we already have a uid, set it immediately so the menu can show games
+  const savedUid = loadUid();
+  if (savedUid) {
+    playerUid = savedUid;
+  }
+
+  authenticateAndSetup().then(() => {
+    rerender();
+  }).catch((err) => {
+    console.error('Firebase auth failed:', err.message);
+    rerender();
+  });
+}
+
+async function initOnline(): Promise<void> {
+  await authenticateAndSetup();
+  rerender();
+}
+
+// Try loading saved config on startup
+tryInitFromSavedConfig();
+
+function doRender() {
+  return render(
+    <GameRepositoryProvider repo={repo} onlineGameService={onlineGameService} playerUid={playerUid} initOnline={initOnline}>
+      <App onExit={() => { instance.unmount(); process.exit(0); }} />
+    </GameRepositoryProvider>
+  );
+}
+
+let instance = doRender();
+
+function rerender() {
+  instance.rerender(
+    <GameRepositoryProvider repo={repo} onlineGameService={onlineGameService} playerUid={playerUid} initOnline={initOnline}>
+      <App onExit={() => { instance.unmount(); process.exit(0); }} />
+    </GameRepositoryProvider>
+  );
+}