dorkfuncli 0.0.1

package/src/tui/screens/WatchGame.tsx

@@ -0,0 +1,182 @@
+import React, { useEffect, useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { WsMessage, Observation, formatAddress } from "@dorkfun/core";
+import { getGameUI } from "@dorkfun/game-ui";
+import { colors } from "../theme.js";
+import { ColoredBoard } from "../components/ColoredBoard.js";
+import { useEnsNames } from "../hooks/useEnsNames.js";
+import { GameWebSocket } from "../../transport/wsClient.js";
+
+interface WatchGameProps {
+  matchId: string;
+  gameId: string;
+  onBack: () => void;
+}
+
+export function WatchGame({ matchId, gameId, onBack }: WatchGameProps) {
+  const [publicData, setPublicData] = useState<Record<string, unknown>>({});
+  const [currentPlayer, setCurrentPlayer] = useState("");
+  const [players, setPlayers] = useState<string[]>([]);
+  const [turnNumber, setTurnNumber] = useState(0);
+  const [status, setStatus] = useState<string>("connecting");
+  const [gameOver, setGameOver] = useState(false);
+  const [winner, setWinner] = useState<string | null>(null);
+  const [reason, setReason] = useState("");
+  const [error, setError] = useState("");
+  const [wsRef] = useState(() => new GameWebSocket());
+
+  const allAddresses = [...players, winner, currentPlayer].filter(Boolean) as string[];
+  const ensNames = useEnsNames(allAddresses);
+
+  const ui = getGameUI(gameId);
+  const shortId = matchId.slice(0, 8);
+
+  useEffect(() => {
+    const connect = async () => {
+      try {
+        await wsRef.connect(matchId, "spectate");
+        setStatus("connected");
+
+        wsRef.sendSpectateJoin(matchId, "spectator");
+
+        wsRef.on("SPECTATE_STATE", (msg: WsMessage) => {
+          const payload = msg.payload as any;
+          if (payload.observation) {
+            applyObservation(payload.observation);
+          }
+          if (payload.players) setPlayers(payload.players);
+          if (payload.status) setStatus(payload.status);
+        });
+
+        wsRef.on("STEP_RESULT", (msg: WsMessage) => {
+          const payload = msg.payload as any;
+          if (payload.observation) {
+            applyObservation(payload.observation);
+          }
+          if (payload.nextPlayer) {
+            setCurrentPlayer(payload.nextPlayer);
+          }
+        });
+
+        wsRef.on("GAME_STATE", (msg: WsMessage) => {
+          const payload = msg.payload as any;
+          if (payload.observation) {
+            applyObservation(payload.observation);
+          }
+        });
+
+        wsRef.on("GAME_OVER", (msg: WsMessage) => {
+          const payload = msg.payload as { winner: string | null; reason: string; draw?: boolean };
+          setGameOver(true);
+          setWinner(payload.winner);
+          setReason(payload.reason);
+          setStatus("finished");
+        });
+
+        wsRef.on("close", () => {
+          setStatus("disconnected");
+        });
+
+        wsRef.on("reconnecting", () => {
+          setStatus("reconnecting");
+        });
+      } catch (err: any) {
+        setError(`Connection failed: ${err.message}`);
+        setStatus("disconnected");
+      }
+    };
+
+    connect();
+    return () => wsRef.close();
+  }, [matchId]);
+
+  function applyObservation(obs: Observation) {
+    if (obs.publicData) setPublicData(obs.publicData);
+    if (obs.currentPlayer) setCurrentPlayer(obs.currentPlayer);
+    if (obs.players?.length) setPlayers(obs.players);
+    if (obs.turnNumber !== undefined) setTurnNumber(obs.turnNumber);
+  }
+
+  useInput((_input, key) => {
+    if (key.escape) onBack();
+  });
+
+  const boardHtml = ui?.renderBoard(publicData) || `[No renderer for ${gameId}]`;
+  const statusStr = ui?.renderStatus(publicData);
+  const turnDisplay = ui?.maxTurns ? `${turnNumber}/${ui.maxTurns}` : `${turnNumber}`;
+
+  return (
+    <Box flexDirection="column" paddingX={2} paddingY={1}>
+      <Text>
+        <Text color={colors.primary}>{"$ "}</Text>
+        <Text>watch {shortId}</Text>
+      </Text>
+
+      <Text>
+        <Text color={colors.dimmed}>{"> game: "}</Text>
+        <Text>{gameId}</Text>
+      </Text>
+
+      {players.length > 0 && ui && (
+        <Text>
+          <Text color={colors.dimmed}>{"> players: "}</Text>
+          <Text color={colors.cyan}>
+            {formatAddress(players[0], ensNames[players[0]], "medium")} ({ui.getPlayerLabel(players[0], publicData)})
+          </Text>
+          <Text color={colors.dimmed}>{" vs "}</Text>
+          <Text color={colors.secondary}>
+            {formatAddress(players[1], ensNames[players[1]], "medium")} ({ui.getPlayerLabel(players[1], publicData)})
+          </Text>
+        </Text>
+      )}
+
+      <Text>
+        <Text color={colors.dimmed}>{"> move: "}</Text>
+        <Text>{turnDisplay}</Text>
+      </Text>
+
+      <Text>{""}</Text>
+
+      {error ? (
+        <Text color={colors.error}>{error}</Text>
+      ) : (
+        <Box flexDirection="column">
+          <ColoredBoard html={boardHtml} />
+
+          {statusStr && (
+            <Text color={colors.warning} bold>{statusStr}</Text>
+          )}
+
+          <Text>{""}</Text>
+
+          {gameOver ? (
+            <Text>
+              <Text color={colors.primary}>{"> "}</Text>
+              <Text color={colors.secondary} bold>
+                {"GAME OVER - "}
+                {winner
+                  ? `Winner: ${formatAddress(winner, ensNames[winner], "medium")} (${reason})`
+                  : `Draw (${reason})`}
+              </Text>
+            </Text>
+          ) : status === "connected" || status === "ACTIVE" ? (
+            <Text>
+              <Text color={colors.primary}>{"> "}</Text>
+              <Text color={colors.dimmed}>
+                {"waiting for "}
+                {currentPlayer ? formatAddress(currentPlayer, ensNames[currentPlayer], "medium") : "..."}
+                {"... "}
+              </Text>
+              <Text>{"█"}</Text>
+            </Text>
+          ) : (
+            <Text color={colors.error}>{"connecting..."}</Text>
+          )}
+        </Box>
+      )}
+
+      <Text>{""}</Text>
+      <Text color={colors.dimmed}>{"Press Esc to return to lobby"}</Text>
+    </Box>
+  );
+}

package/src/tui/screens/WatchList.tsx

@@ -0,0 +1,99 @@
+import React, { useEffect, useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { formatAddress } from "@dorkfun/core";
+import { colors } from "../theme.js";
+import { useEnsNames } from "../hooks/useEnsNames.js";
+import * as api from "../../transport/httpClient.js";
+
+interface MatchSummary {
+  matchId: string;
+  gameId: string;
+  status: string;
+  players: string[];
+  createdAt: string;
+}
+
+interface WatchListProps {
+  onSelect: (matchId: string, gameId: string) => void;
+  onBack: () => void;
+}
+
+export function WatchList({ onSelect, onBack }: WatchListProps) {
+  const [matches, setMatches] = useState<MatchSummary[]>([]);
+  const [selected, setSelected] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    api
+      .listMatches()
+      .then((res) => {
+        setMatches(res.matches);
+        setLoading(false);
+      })
+      .catch((err: Error) => {
+        setError(err.message);
+        setLoading(false);
+      });
+  }, []);
+
+  useInput((_input, key) => {
+    if (key.escape) {
+      onBack();
+      return;
+    }
+    if (matches.length === 0) return;
+    if (key.upArrow) setSelected((s) => Math.max(0, s - 1));
+    if (key.downArrow) setSelected((s) => Math.min(matches.length - 1, s + 1));
+    if (key.return) {
+      const m = matches[selected];
+      if (m) onSelect(m.matchId, m.gameId);
+    }
+  });
+
+  const allPlayers = matches.flatMap((m) => m.players);
+  const ensNames = useEnsNames(allPlayers);
+  const formatPlayer = (addr: string) => formatAddress(addr, ensNames[addr]);
+
+  return (
+    <Box flexDirection="column" paddingX={2} paddingY={1}>
+      <Text color={colors.primary} bold>
+        {"═══ LIVE GAMES ═══"}
+      </Text>
+      <Text color={colors.dimmed}>{""}</Text>
+
+      {loading && <Text color={colors.dimmed}>Loading matches...</Text>}
+
+      {error && <Text color={colors.error}>Error: {error}</Text>}
+
+      {!loading && !error && matches.length === 0 && (
+        <Text color={colors.warning}>No active games to watch right now.</Text>
+      )}
+
+      {matches.map((m, i) => (
+        <Box key={m.matchId} flexDirection="row">
+          <Text color={i === selected ? colors.primary : colors.dimmed}>
+            {i === selected ? " ▸ " : "   "}
+          </Text>
+          <Text color={i === selected ? colors.primary : colors.text}>
+            {m.gameId}
+          </Text>
+          <Text color={colors.dimmed}>
+            {"  "}
+            {m.players.map(formatPlayer).join(" vs ")}
+          </Text>
+          <Text color={colors.dimmed}>
+            {"  "}[{m.status}]
+          </Text>
+        </Box>
+      ))}
+
+      <Text color={colors.dimmed}>{""}</Text>
+      <Text color={colors.dimmed}>
+        {matches.length > 0
+          ? "Use ↑↓ to select, Enter to watch, Esc to go back"
+          : "Press Esc to go back"}
+      </Text>
+    </Box>
+  );
+}

package/src/tui/theme.ts

@@ -0,0 +1,31 @@
+export const colors = {
+  primary: "#00ff41",      // Matrix green
+  secondary: "#ffb000",    // Amber
+  dimmed: "#666666",
+  error: "#ff3333",
+  warning: "#ffaa00",
+  text: "#cccccc",
+  bg: "#0a0a0a",
+  border: "#333333",
+  white: "#ffffff",
+  cyan: "#00ffff",
+};
+
+export const symbols = {
+  topLeft: "┌",
+  topRight: "┐",
+  bottomLeft: "└",
+  bottomRight: "┘",
+  horizontal: "─",
+  vertical: "│",
+  cross: "┼",
+  tee: "├",
+  teeRight: "┤",
+  teeDown: "┬",
+  teeUp: "┴",
+  bullet: "●",
+  arrow: "▸",
+  check: "✔",
+  x: "✘",
+  spinner: ["◐", "◓", "◑", "◒"],
+};

package/src/wallet/signer.ts

@@ -0,0 +1,54 @@
+import { Wallet, JsonRpcProvider, Contract } from "ethers";
+import { getConfig } from "../config/runtime.js";
+
+const ESCROW_ABI = [
+  "function depositStake(bytes32 matchId) external payable",
+];
+
+let wallet: Wallet | null = null;
+
+export function getWallet(): Wallet {
+  if (!wallet) {
+    const { privateKey } = getConfig();
+    if (!privateKey) {
+      throw new Error(
+        "Private key not set. Run 'dork config' to set one up.",
+      );
+    }
+    wallet = new Wallet(privateKey);
+  }
+  return wallet;
+}
+
+export function getAddress(): string {
+  return getWallet().address;
+}
+
+export async function signMessage(message: string): Promise<string> {
+  return getWallet().signMessage(message);
+}
+
+/**
+ * Submit an escrow deposit transaction on-chain.
+ * Returns the transaction hash.
+ */
+export async function sendEscrowDeposit(escrow: {
+  address: string;
+  stakeWei: string;
+  matchIdBytes32: string;
+}): Promise<string> {
+  const { rpcUrl, privateKey } = getConfig();
+  if (!privateKey) {
+    throw new Error("Private key not set. Run 'dork config' to set one up.");
+  }
+
+  const provider = new JsonRpcProvider(rpcUrl);
+  const signer = new Wallet(privateKey, provider);
+  const contract = new Contract(escrow.address, ESCROW_ABI, signer);
+
+  const tx = await contract.depositStake(escrow.matchIdBytes32, {
+    value: escrow.stakeWei,
+  });
+  const receipt = await tx.wait();
+  return receipt.hash as string;
+}

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
+    "declaration": true,
+    "outDir": "dist",
+    "rootDir": "./src",
+    "strict": true,
+    "jsx": "react-jsx",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true
+  }
+}