dorkfuncli 0.0.1

package/src/tui/components/ChatPanel.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { formatAddress } from "@dorkfun/core";
+import { colors } from "../theme.js";
+
+export interface ChatMessage {
+  sender: string;
+  message: string;
+  timestamp?: number;
+}
+
+interface ChatPanelProps {
+  messages: ChatMessage[];
+  maxLines?: number;
+  players?: string[];
+}
+
+export function ChatPanel({ messages, maxLines = 8, players }: ChatPanelProps) {
+  const visible = messages.slice(-maxLines);
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="single"
+      borderColor={colors.border}
+      paddingX={1}
+      width={30}
+    >
+      <Text color={colors.dimmed} bold>
+        CHAT
+      </Text>
+      {visible.length === 0 ? (
+        <Text color={colors.dimmed}>No messages yet</Text>
+      ) : (
+        visible.map((msg, i) => {
+          const senderColor = players
+            ? msg.sender === players[0]
+              ? colors.cyan
+              : msg.sender === players[1]
+                ? colors.secondary
+                : colors.dimmed
+            : colors.secondary;
+          return (
+            <Text key={i}>
+              <Text color={senderColor}>{msg.sender.startsWith("0x") ? formatAddress(msg.sender) : msg.sender}: </Text>
+              <Text color={colors.white}>{msg.message}</Text>
+            </Text>
+          );
+        })
+      )}
+    </Box>
+  );
+}

package/src/tui/components/ColoredBoard.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+import { Box, Text } from "ink";
+
+/**
+ * Maps CSS classes from game UI renderBoard() output to terminal colors.
+ * These match the definitions in apps/web/src/styles/terminal.css.
+ */
+const CLASS_STYLES: Record<string, { color?: string; bold?: boolean }> = {
+  // Chess
+  "chess-white": { color: "#00ffff" },
+  "chess-black": { color: "#ffb000" },
+  "chess-last-move": { bold: true },
+  // Tic-tac-toe
+  "ttt-x": { color: "#00ffff" },
+  "ttt-o": { color: "#ffb000" },
+  // Connect Four
+  "c4-r": { color: "#00ffff" },
+  "c4-y": { color: "#ffb000" },
+  // Othello
+  "oth-b": { color: "#00ffff" },
+  "oth-w": { color: "#ffb000" },
+  // Hex
+  "hex-r": { color: "#00ffff" },
+  "hex-b": { color: "#ffb000" },
+  // Checkers
+  "ck-black": { color: "#00ffff" },
+  "ck-white": { color: "#ffb000" },
+  // Sudoku
+  "sudoku-clue": { color: "#00ff41", bold: true },
+  "sudoku-player": { color: "#00ffff" },
+  "sudoku-error": { color: "#ff3333" },
+};
+
+interface Segment {
+  text: string;
+  color?: string;
+  bold?: boolean;
+}
+
+function parseSegments(line: string): Segment[] {
+  const segments: Segment[] = [];
+  const regex = /<span class="([^"]*)">(.*?)<\/span>/g;
+  let lastIndex = 0;
+  let match;
+
+  while ((match = regex.exec(line)) !== null) {
+    if (match.index > lastIndex) {
+      segments.push({ text: line.slice(lastIndex, match.index) });
+    }
+
+    const classes = match[1].split(/\s+/);
+    const content = match[2];
+    let color: string | undefined;
+    let bold: boolean | undefined;
+
+    for (const cls of classes) {
+      const style = CLASS_STYLES[cls];
+      if (style) {
+        if (style.color) color = style.color;
+        if (style.bold) bold = true;
+      }
+    }
+
+    segments.push({ text: content, color, bold });
+    lastIndex = match.index + match[0].length;
+  }
+
+  if (lastIndex < line.length) {
+    segments.push({ text: line.slice(lastIndex) });
+  }
+
+  return segments;
+}
+
+/**
+ * Renders board HTML (with <span class="..."> tags) as colored Ink text.
+ * Falls back to plain text for any content without spans.
+ */
+export function ColoredBoard({ html }: { html: string }) {
+  const lines = html.split("\n");
+
+  return (
+    <Box flexDirection="column">
+      {lines.map((line, i) => {
+        const segments = parseSegments(line);
+        return (
+          <Text key={i}>
+            {segments.map((seg, j) => (
+              <Text key={j} color={seg.color} bold={seg.bold}>
+                {seg.text}
+              </Text>
+            ))}
+          </Text>
+        );
+      })}
+    </Box>
+  );
+}

package/src/tui/components/PlayerInfo.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { formatAddress } from "@dorkfun/core";
+import { colors } from "../theme.js";
+
+interface PlayerInfoProps {
+  address: string;
+  ensName?: string | null;
+  label: string;
+  playerIndex: number;
+  isCurrentTurn: boolean;
+  isYou?: boolean;
+}
+
+export function PlayerInfo({ address, ensName, label, playerIndex, isCurrentTurn, isYou }: PlayerInfoProps) {
+  const display = formatAddress(address, ensName);
+  const labelColor = playerIndex === 0 ? colors.cyan : colors.secondary;
+
+  return (
+    <Box flexDirection="row" gap={1}>
+      <Text color={labelColor} bold>
+        [{label}]
+      </Text>
+      <Text color={isCurrentTurn ? colors.primary : colors.dimmed}>
+        {display}
+        {isYou ? " (you)" : ""}
+        {isCurrentTurn ? " ◀" : ""}
+      </Text>
+    </Box>
+  );
+}

package/src/tui/components/StatusBar.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { formatAddress } from "@dorkfun/core";
+import { colors } from "../theme.js";
+import { useEnsNames } from "../hooks/useEnsNames.js";
+
+interface StatusBarProps {
+  playerAddress: string;
+  serverUrl: string;
+  connected: boolean;
+}
+
+export function StatusBar({ playerAddress, serverUrl, connected }: StatusBarProps) {
+  const ensNames = useEnsNames(playerAddress ? [playerAddress] : []);
+  const shortAddr = playerAddress
+    ? formatAddress(playerAddress, ensNames[playerAddress])
+    : "Not connected";
+
+  return (
+    <Box
+      borderStyle="single"
+      borderColor={colors.border}
+      paddingX={1}
+      flexDirection="row"
+      justifyContent="space-between"
+    >
+      <Text color={colors.primary} bold>
+        DORK.FUN v0.1.0
+      </Text>
+      <Text color={colors.dimmed}>
+        {connected ? "●" : "○"} {shortAddr} | {serverUrl}
+      </Text>
+    </Box>
+  );
+}

package/src/tui/hooks/useEnsNames.ts

@@ -0,0 +1,35 @@
+import { useState, useEffect } from "react";
+import * as api from "../../transport/httpClient.js";
+
+const cache = new Map<string, string | null>();
+
+/**
+ * React hook that resolves ENS names for a list of addresses via the server API.
+ * Caches results in memory across hook instances.
+ */
+export function useEnsNames(addresses: string[]): Record<string, string | null> {
+  const [names, setNames] = useState<Record<string, string | null>>(() => {
+    const initial: Record<string, string | null> = {};
+    for (const a of addresses) {
+      if (cache.has(a)) initial[a] = cache.get(a)!;
+    }
+    return initial;
+  });
+
+  useEffect(() => {
+    const unresolved = addresses.filter((a) => a && !cache.has(a));
+    if (unresolved.length === 0) return;
+
+    api
+      .resolveEns(unresolved)
+      .then((result) => {
+        for (const [addr, name] of Object.entries(result)) {
+          cache.set(addr, name);
+        }
+        setNames((prev) => ({ ...prev, ...result }));
+      })
+      .catch(() => {});
+  }, [addresses.join(",")]);
+
+  return names;
+}

package/src/tui/screens/GameBoard.tsx

@@ -0,0 +1,434 @@
+import React, { useEffect, useRef, useState, useCallback } from "react";
+import { Box, Text, useInput } from "ink";
+import { formatEther } from "ethers";
+import Spinner from "ink-spinner";
+import { WsMessage, Observation } from "@dorkfun/core";
+import { getGameUI } from "@dorkfun/game-ui";
+import { colors } from "../theme.js";
+import { ChatPanel, ChatMessage } from "../components/ChatPanel.js";
+import { ColoredBoard } from "../components/ColoredBoard.js";
+import { PlayerInfo } from "../components/PlayerInfo.js";
+import { useEnsNames } from "../hooks/useEnsNames.js";
+import { GameWebSocket } from "../../transport/wsClient.js";
+import { sendEscrowDeposit } from "../../wallet/signer.js";
+
+interface GameBoardProps {
+  matchId: string;
+  wsToken: string;
+  playerId: string;
+  gameId: string;
+  stakeWei?: string;
+  onGameOver: (winner: string | null, reason: string) => void;
+}
+
+type InputMode = "game" | "chat";
+type DepositPhase = "none" | "confirm" | "depositing" | "waiting" | "confirmed";
+
+export function GameBoard({ matchId, wsToken, playerId, gameId, stakeWei, onGameOver }: GameBoardProps) {
+  const [publicData, setPublicData] = useState<Record<string, unknown>>({});
+  const [currentPlayer, setCurrentPlayer] = useState("");
+  const [isMyTurn, setIsMyTurn] = useState(false);
+  const [players, setPlayers] = useState<string[]>([]);
+  const ensNames = useEnsNames(players);
+  const [chatMessages, setChatMessages] = useState<ChatMessage[]>([]);
+  const [error, setError] = useState("");
+  const [connectionStatus, setConnectionStatus] = useState<"connecting" | "connected" | "reconnecting" | "disconnected">("connecting");
+  const [gameReady, setGameReady] = useState(false);
+  const [inputMode, setInputMode] = useState<InputMode>("game");
+  const [inputBuffer, setInputBuffer] = useState("");
+  const [chatInput, setChatInput] = useState("");
+  const [wsRef] = useState(() => new GameWebSocket());
+
+  // Deposit state
+  const [depositPhase, setDepositPhase] = useState<DepositPhase>("none");
+  const [depositTxHash, setDepositTxHash] = useState("");
+  const [escrowPayload, setEscrowPayload] = useState<{
+    escrowAddress: string;
+    stakeWei: string;
+    matchIdBytes32: string;
+  } | null>(null);
+  const depositInitiated = useRef(false);
+
+  const ui = getGameUI(gameId);
+
+  // Ref to avoid stale closures in the sync interval
+  const isMyTurnRef = useRef(false);
+  useEffect(() => {
+    isMyTurnRef.current = isMyTurn;
+  }, [isMyTurn]);
+
+  useEffect(() => {
+    const connect = async () => {
+      try {
+        await wsRef.connect(matchId);
+        setConnectionStatus("connected");
+        wsRef.sendHello(wsToken, playerId);
+
+        wsRef.on("GAME_STATE", (msg: WsMessage) => {
+          const payload = msg.payload as any;
+          if (payload.observation) {
+            const obs = payload.observation as Observation;
+            if (obs.publicData) setPublicData(obs.publicData);
+            setCurrentPlayer(obs.currentPlayer);
+            setPlayers(obs.players);
+            setGameReady(true);
+          }
+          if (payload.yourTurn !== undefined) {
+            setIsMyTurn(payload.yourTurn);
+          }
+          if (payload.event === "player_disconnected") {
+            setChatMessages((prev) => [...prev, {
+              sender: "system",
+              message: payload.message,
+              timestamp: Date.now(),
+            }]);
+          }
+        });
+
+        wsRef.on("STEP_RESULT", (msg: WsMessage) => {
+          const payload = msg.payload as any;
+          if (payload.observation?.publicData) {
+            setPublicData(payload.observation.publicData);
+          }
+        });
+
+        wsRef.on("GAME_OVER", (msg: WsMessage) => {
+          const payload = msg.payload as { winner: string | null; reason: string };
+          onGameOver(payload.winner, payload.reason);
+        });
+
+        wsRef.on("CHAT", (msg: WsMessage) => {
+          const payload = msg.payload as ChatMessage;
+          setChatMessages((prev) => [...prev, payload]);
+        });
+
+        wsRef.on("ERROR", (msg: WsMessage) => {
+          setError((msg.payload as { error: string }).error);
+          setIsMyTurn(true);
+        });
+
+        // Handle deposit gating for staked matches - show confirmation first
+        wsRef.on("DEPOSIT_REQUIRED", (msg: WsMessage) => {
+          const payload = msg.payload as {
+            escrowAddress: string;
+            stakeWei: string;
+            matchIdBytes32: string;
+          };
+          setEscrowPayload(payload);
+          setDepositPhase("confirm");
+        });
+
+        wsRef.on("DEPOSITS_CONFIRMED", () => {
+          setDepositPhase("confirmed");
+        });
+
+        wsRef.on("SYNC_RESPONSE", (msg: WsMessage) => {
+          const payload = msg.payload as {
+            yourTurn: boolean;
+            currentPlayer: string;
+            matchStatus: string;
+          };
+          if (payload.matchStatus === "completed") return;
+
+          setIsMyTurn((current) => {
+            if (current !== payload.yourTurn) {
+              setCurrentPlayer(payload.currentPlayer);
+              if (payload.yourTurn) setError("");
+              return payload.yourTurn;
+            }
+            return current;
+          });
+        });
+
+        wsRef.on("reconnecting", () => {
+          setConnectionStatus("reconnecting");
+        });
+
+        wsRef.on("close", () => {
+          setConnectionStatus("disconnected");
+        });
+      } catch (err: any) {
+        setError(`Connection failed: ${err.message}`);
+        setConnectionStatus("disconnected");
+      }
+    };
+
+    connect();
+
+    return () => wsRef.close();
+  }, [matchId, wsToken, playerId]);
+
+  // Periodic state sync to recover from stuck turn states
+  useEffect(() => {
+    if (!gameReady || connectionStatus !== "connected") return;
+
+    const syncIntervalId = setInterval(() => {
+      if (wsRef.isConnected) {
+        wsRef.sendSyncRequest(matchId, isMyTurnRef.current);
+      }
+    }, 8000);
+
+    return () => clearInterval(syncIntervalId);
+  }, [gameReady, connectionStatus, matchId]);
+
+  const handleSubmitMove = useCallback(() => {
+    if (!isMyTurn || !ui || !inputBuffer.trim()) return;
+
+    const action = ui.parseInput(inputBuffer.trim(), publicData);
+    if (action) {
+      wsRef.sendAction(matchId, action);
+      setIsMyTurn(false);
+      setError("");
+      setInputBuffer("");
+    } else {
+      setError("Invalid move. " + ui.inputHint);
+      setInputBuffer("");
+    }
+  }, [isMyTurn, inputBuffer, publicData, matchId, ui]);
+
+  const handleSendChat = useCallback(() => {
+    if (chatInput.trim()) {
+      wsRef.sendChat(matchId, chatInput.trim());
+      setChatInput("");
+    }
+    setInputMode("game");
+  }, [chatInput, matchId]);
+
+  const handleDepositConfirm = useCallback(() => {
+    if (!escrowPayload || depositInitiated.current) return;
+    depositInitiated.current = true;
+
+    setDepositPhase("depositing");
+    sendEscrowDeposit({
+      address: escrowPayload.escrowAddress,
+      stakeWei: escrowPayload.stakeWei,
+      matchIdBytes32: escrowPayload.matchIdBytes32,
+    })
+      .then((txHash) => {
+        setDepositTxHash(txHash);
+        setDepositPhase("waiting");
+      })
+      .catch((err: Error) => {
+        setError(`Deposit failed: ${err.message}`);
+        setDepositPhase("none");
+        depositInitiated.current = false;
+      });
+  }, [escrowPayload]);
+
+  const handleDepositDecline = useCallback(() => {
+    wsRef.close();
+    onGameOver(null, "Deposit declined");
+  }, [onGameOver]);
+
+  useInput((input, key) => {
+    // Deposit confirmation input
+    if (depositPhase === "confirm") {
+      if (input === "y" || input === "Y") {
+        handleDepositConfirm();
+      } else if (input === "n" || input === "N") {
+        handleDepositDecline();
+      }
+      return;
+    }
+
+    if (inputMode === "chat") {
+      if (key.return) {
+        handleSendChat();
+      } else if (key.escape) {
+        setChatInput("");
+        setInputMode("game");
+      } else if (key.backspace || key.delete) {
+        setChatInput((prev) => prev.slice(0, -1));
+      } else if (input && !key.ctrl && !key.meta) {
+        setChatInput((prev) => prev + input);
+      }
+      return;
+    }
+
+    // Game mode
+    if (input === "/" && !inputBuffer) {
+      setInputMode("chat");
+      return;
+    }
+
+    if (key.return) {
+      handleSubmitMove();
+      return;
+    }
+
+    if (key.escape) {
+      setInputBuffer("");
+      setError("");
+      return;
+    }
+
+    if (key.backspace || key.delete) {
+      setInputBuffer((prev) => prev.slice(0, -1));
+      return;
+    }
+
+    if (input && !key.ctrl && !key.meta) {
+      setInputBuffer((prev) => prev + input);
+      if (error) setError("");
+    }
+  });
+
+  // Deposit confirmation UI - user must explicitly approve before funds leave wallet
+  if (depositPhase === "confirm") {
+    const stakeDisplay = escrowPayload ? formatEther(escrowPayload.stakeWei) : (stakeWei ? formatEther(stakeWei) : "?");
+    return (
+      <Box flexDirection="column" paddingX={2} paddingY={1}>
+        <Text color={colors.primary} bold>
+          Match: {matchId.slice(0, 8)} - Stake Deposit Required
+        </Text>
+        <Text>{""}</Text>
+        <Text color={colors.warning} bold>
+          This match requires a stake of {stakeDisplay} ETH
+        </Text>
+        <Text>{""}</Text>
+        <Text color={colors.white}>
+          Your stake will be deposited to the on-chain escrow contract.
+        </Text>
+        <Text color={colors.error}>
+          If you lose, you will lose your stake.
+        </Text>
+        <Text color={colors.white}>
+          If you win, you receive your stake plus your opponent{"'"}s.
+        </Text>
+        <Text>{""}</Text>
+        <Text color={colors.primary} bold>
+          Press [Y] to deposit and play, [N] to decline and forfeit
+        </Text>
+      </Box>
+    );
+  }
+
+  // Deposit phase UI (depositing / waiting for opponent)
+  if (depositPhase !== "none" && depositPhase !== "confirmed") {
+    const stakeDisplay = stakeWei ? formatEther(stakeWei) : "?";
+    return (
+      <Box flexDirection="column" paddingX={2} paddingY={1}>
+        <Text color={colors.primary} bold>
+          Match: {matchId.slice(0, 8)} - Escrow Deposit
+        </Text>
+        <Text>{""}</Text>
+
+        {depositPhase === "depositing" && (
+          <Box>
+            <Text color={colors.secondary}>
+              <Spinner type="dots" />
+            </Text>
+            <Text color={colors.white}> Depositing {stakeDisplay} ETH to escrow...</Text>
+          </Box>
+        )}
+
+        {depositPhase === "waiting" && (
+          <Box flexDirection="column">
+            <Text color={colors.primary}>Deposit confirmed on-chain!</Text>
+            <Text color={colors.dimmed}>TX: {depositTxHash.slice(0, 16)}...</Text>
+            <Text>{""}</Text>
+            <Box>
+              <Text color={colors.secondary}>
+                <Spinner type="dots" />
+              </Text>
+              <Text color={colors.white}> Waiting for opponent deposit...</Text>
+            </Box>
+          </Box>
+        )}
+
+        {error && (
+          <>
+            <Text>{""}</Text>
+            <Text color={colors.error}>{error}</Text>
+          </>
+        )}
+
+        <Text>{""}</Text>
+        <Text color={colors.dimmed}>Stake: {stakeDisplay} ETH</Text>
+      </Box>
+    );
+  }
+
+  const myLabel = gameReady ? (ui?.getPlayerLabel(playerId, publicData) || "?") : "?";
+  const boardHtml = gameReady ? (ui?.renderBoard(publicData) || `[No renderer for ${gameId}]`) : "Waiting for game state...";
+  const statusStr = gameReady ? ui?.renderStatus(publicData) : null;
+
+  return (
+    <Box flexDirection="column" paddingX={2} paddingY={1}>
+      <Box flexDirection="row" justifyContent="space-between">
+        <Text color={colors.primary} bold>
+          Match: {matchId.slice(0, 8)}
+          {stakeWei ? ` [${formatEther(stakeWei)} ETH]` : ""}
+        </Text>
+        <Box>
+          {connectionStatus === "reconnecting" && (
+            <Text color={colors.warning}>Reconnecting...</Text>
+          )}
+          {connectionStatus === "disconnected" && (
+            <Text color={colors.error}>Disconnected</Text>
+          )}
+          <Text color={colors.dimmed}> You: {myLabel}</Text>
+        </Box>
+      </Box>
+
+      <Text>{""}</Text>
+
+      <Box flexDirection="row">
+        <Box flexDirection="column" marginRight={2}>
+          {players.map((p, i) => (
+            <PlayerInfo
+              key={p}
+              address={p}
+              ensName={ensNames[p]}
+              label={ui?.getPlayerLabel(p, publicData) || "?"}
+              playerIndex={i}
+              isCurrentTurn={p === currentPlayer}
+              isYou={p === playerId}
+            />
+          ))}
+
+          <Text>{""}</Text>
+
+          <ColoredBoard html={boardHtml} />
+
+          {statusStr && (
+            <Text color={colors.warning} bold>{statusStr}</Text>
+          )}
+
+          <Text>{""}</Text>
+
+          {error && <Text color={colors.error}>{error}</Text>}
+          {isMyTurn ? (
+            <Box flexDirection="column">
+              <Text color={colors.primary} bold>
+                YOUR TURN - {ui?.inputHint || "Enter your move"}
+              </Text>
+              <Box>
+                <Text color={colors.secondary}>{"> "}</Text>
+                <Text color={colors.text}>{inputBuffer}</Text>
+                <Text color={colors.dimmed}>{"_"}</Text>
+              </Box>
+            </Box>
+          ) : !error ? (
+            <Text color={colors.dimmed}>Waiting for opponent...</Text>
+          ) : null}
+
+          <Text color={colors.dimmed}>
+            {inputMode === "game" ? "Press '/' to chat" : ""}
+          </Text>
+        </Box>
+
+        <Box flexDirection="column">
+          <ChatPanel messages={chatMessages} players={players} />
+          {inputMode === "chat" && (
+            <Box>
+              <Text color={colors.secondary}>{"> "}</Text>
+              <Text color={colors.text}>{chatInput}</Text>
+              <Text color={colors.dimmed}>{"_"}</Text>
+            </Box>
+          )}
+        </Box>
+      </Box>
+    </Box>
+  );
+}