dorkfuncli 0.0.1

package/src/tui/screens/GameOver.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import { Box, Text, useInput } from "ink";
+import { formatEther } from "ethers";
+import { formatAddress } from "@dorkfun/core";
+import { colors } from "../theme.js";
+import { useEnsNames } from "../hooks/useEnsNames.js";
+
+interface GameOverProps {
+  winner: string | null;
+  reason: string;
+  playerId: string;
+  stakeWei?: string;
+  onRematch: () => void;
+  onQuit: () => void;
+}
+
+export function GameOver({ winner, reason, playerId, stakeWei, onRematch, onQuit }: GameOverProps) {
+  const ensNames = useEnsNames(winner ? [winner] : []);
+  const isWinner = winner === playerId;
+  const isDraw = winner === null;
+  const isStaked = stakeWei && stakeWei !== "0";
+  const stakeDisplay = isStaked ? formatEther(stakeWei) : null;
+
+  useInput((input) => {
+    if (input === "r") onRematch();
+    if (input === "q") onQuit();
+  });
+
+  return (
+    <Box flexDirection="column" paddingX={2} paddingY={1} alignItems="center">
+      <Text color={colors.primary} bold>
+        {"═══════════════════"}
+      </Text>
+      <Text color={colors.primary} bold>
+        {"    GAME OVER    "}
+      </Text>
+      <Text color={colors.primary} bold>
+        {"═══════════════════"}
+      </Text>
+
+      <Text>{""}</Text>
+
+      {isDraw ? (
+        <Text color={colors.secondary} bold>
+          DRAW - {reason}
+        </Text>
+      ) : isWinner ? (
+        <Text color={colors.primary} bold>
+          YOU WIN! 🎉
+        </Text>
+      ) : (
+        <Text color={colors.error} bold>
+          YOU LOSE
+        </Text>
+      )}
+
+      {isStaked && (
+        <>
+          <Text>{""}</Text>
+          {isDraw ? (
+            <Text color={colors.secondary}>Stake returned: {stakeDisplay} ETH</Text>
+          ) : isWinner ? (
+            <Text color={colors.primary}>Won: +{stakeDisplay} ETH</Text>
+          ) : (
+            <Text color={colors.error}>Lost: -{stakeDisplay} ETH</Text>
+          )}
+        </>
+      )}
+
+      <Text>{""}</Text>
+
+      {winner && (
+        <Text color={colors.dimmed}>
+          Winner: {formatAddress(winner, ensNames[winner], "medium")}
+        </Text>
+      )}
+      <Text color={colors.dimmed}>Reason: {reason}</Text>
+
+      <Text>{""}</Text>
+      <Text color={colors.dimmed}>[R] Rematch  [Q] Quit to lobby</Text>
+    </Box>
+  );
+}

package/src/tui/screens/Leaderboard.tsx

@@ -0,0 +1,196 @@
+import React, { useEffect, useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { formatAddress } from "@dorkfun/core";
+import { colors } from "../theme.js";
+import * as api from "../../transport/httpClient.js";
+
+interface LeaderboardEntry {
+  rank: number;
+  address: string;
+  displayName: string;
+  ensName?: string | null;
+  rating: number;
+  gamesPlayed: number;
+  gamesWon: number;
+  gamesDrawn: number;
+  gamesLost: number;
+  totalEarningsWei: string;
+}
+
+interface LeaderboardProps {
+  onBack: () => void;
+}
+
+interface Tab {
+  id: string;
+  label: string;
+}
+
+type SortBy = "rating" | "earnings";
+
+const PAGE_SIZE = 20;
+
+export function Leaderboard({ onBack }: LeaderboardProps) {
+  const [tabs, setTabs] = useState<Tab[]>([{ id: "overall", label: "Overall" }]);
+  const [activeTab, setActiveTab] = useState(0);
+  const [entries, setEntries] = useState<LeaderboardEntry[]>([]);
+  const [selectedRow, setSelectedRow] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+  const [page, setPage] = useState(0);
+  const [total, setTotal] = useState(0);
+  const [sortBy, setSortBy] = useState<SortBy>("rating");
+
+  // Fetch game list on mount to populate tabs
+  useEffect(() => {
+    api
+      .listGames()
+      .then((res) => {
+        const gameTabs = (res.games || []).map((g: any) => ({
+          id: g.id,
+          label: g.name,
+        }));
+        setTabs([{ id: "overall", label: "Overall" }, ...gameTabs]);
+      })
+      .catch(() => {});
+  }, []);
+
+  // Fetch leaderboard data when tab, page, or sort changes
+  useEffect(() => {
+    setLoading(true);
+    setError("");
+    const currentTab = tabs[activeTab];
+    if (!currentTab) return;
+
+    const fetchFn =
+      currentTab.id === "overall"
+        ? api.getLeaderboard(PAGE_SIZE, page * PAGE_SIZE, sortBy)
+        : api.getGameLeaderboard(currentTab.id, PAGE_SIZE, page * PAGE_SIZE, sortBy);
+
+    fetchFn
+      .then((res) => {
+        setEntries(res.players || []);
+        setTotal(res.total || 0);
+        setSelectedRow(0);
+        setLoading(false);
+      })
+      .catch((err: Error) => {
+        setError(err.message);
+        setLoading(false);
+      });
+  }, [activeTab, page, tabs, sortBy]);
+
+  useInput((input, key) => {
+    if (key.escape) {
+      onBack();
+      return;
+    }
+
+    // Tab switching
+    if (key.tab || key.rightArrow) {
+      setActiveTab((t) => (t + 1) % tabs.length);
+      setPage(0);
+      return;
+    }
+    if (key.leftArrow) {
+      setActiveTab((t) => (t - 1 + tabs.length) % tabs.length);
+      setPage(0);
+      return;
+    }
+
+    // Row navigation
+    if (key.upArrow) setSelectedRow((s) => Math.max(0, s - 1));
+    if (key.downArrow) setSelectedRow((s) => Math.min(entries.length - 1, s + 1));
+
+    // Pagination
+    if (input === "n" && (page + 1) * PAGE_SIZE < total) setPage((p) => p + 1);
+    if (input === "p" && page > 0) setPage((p) => p - 1);
+
+    // Sort toggle
+    if (input === "s") {
+      setSortBy((s) => (s === "rating" ? "earnings" : "rating"));
+      setPage(0);
+    }
+  });
+
+  const formatWei = (wei: string) => {
+    try {
+      const eth = (Number(wei) / 1e18).toFixed(6);
+      return eth.replace(/\.?0+$/, "");
+    } catch {
+      return "0";
+    }
+  };
+
+  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
+
+  return (
+    <Box flexDirection="column" paddingX={2} paddingY={1}>
+      <Text color={colors.primary} bold>
+        {"═══ LEADERBOARD ═══"}
+      </Text>
+      <Text>{""}</Text>
+
+      {/* Tab bar */}
+      <Box flexDirection="row" gap={2}>
+        {tabs.map((tab, i) => (
+          <Text
+            key={tab.id}
+            color={i === activeTab ? colors.primary : colors.dimmed}
+            bold={i === activeTab}
+          >
+            {i === activeTab ? `[${tab.label}]` : ` ${tab.label} `}
+          </Text>
+        ))}
+        <Text color={colors.dimmed}> | </Text>
+        <Text
+          color={sortBy === "rating" ? colors.primary : colors.dimmed}
+          bold={sortBy === "rating"}
+        >
+          {sortBy === "rating" ? "[Rating]" : " Rating "}
+        </Text>
+        <Text
+          color={sortBy === "earnings" ? colors.primary : colors.dimmed}
+          bold={sortBy === "earnings"}
+        >
+          {sortBy === "earnings" ? "[Earnings]" : " Earnings "}
+        </Text>
+      </Box>
+      <Text>{""}</Text>
+
+      {/* Header row */}
+      <Text color={colors.secondary} bold>
+        {"     #  Player           Rating    W    D    L   GP   Earnings"}
+      </Text>
+      <Text color={colors.border}>
+        {"   ─── ─────────────── ────── ──── ──── ──── ──── ──────────"}
+      </Text>
+
+      {loading && <Text color={colors.dimmed}>  Loading...</Text>}
+      {error && <Text color={colors.error}>  Error: {error}</Text>}
+
+      {!loading && !error && entries.length === 0 && (
+        <Text color={colors.warning}>  No players ranked yet.</Text>
+      )}
+
+      {!loading &&
+        !error &&
+        entries.map((e, i) => {
+          const earnings = e.totalEarningsWei !== "0" ? formatWei(e.totalEarningsWei) + " ETH" : "-";
+          return (
+            <Box key={e.address} flexDirection="row">
+              <Text color={i === selectedRow ? colors.primary : colors.text}>
+                {i === selectedRow ? " ▸ " : "   "}
+                {String(e.rank).padStart(3)}  {(e.ensName || e.displayName || formatAddress(e.address)).padEnd(15)} {String(e.rating).padStart(6)}  {String(e.gamesWon).padStart(3)}  {String(e.gamesDrawn).padStart(3)}  {String(e.gamesLost).padStart(3)}  {String(e.gamesPlayed).padStart(3)}  {earnings.padStart(10)}
+              </Text>
+            </Box>
+          );
+        })}
+
+      <Text>{""}</Text>
+      <Text color={colors.dimmed}>
+        {"  "}Page {page + 1}/{totalPages} | ←→/Tab: switch view | ↑↓: navigate | n/p: page | s: sort ({sortBy}) | Esc: back
+      </Text>
+    </Box>
+  );
+}

package/src/tui/screens/Lobby.tsx

@@ -0,0 +1,197 @@
+import React, { useEffect, useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { formatEther, parseEther } from "ethers";
+import { colors } from "../theme.js";
+import * as api from "../../transport/httpClient.js";
+
+interface LobbyProps {
+  defaultStakeWei?: string;
+  onPlay: (gameId: string, stakeWei?: string) => void;
+  onWatch: () => void;
+  onLeaderboard: () => void;
+}
+
+interface GameSummary {
+  id: string;
+  name: string;
+  description: string;
+  stakingEnabled?: boolean;
+}
+
+export function Lobby({ defaultStakeWei, onPlay, onWatch, onLeaderboard }: LobbyProps) {
+  const [games, setGames] = useState<GameSummary[]>([]);
+  const [selected, setSelected] = useState(0);
+  const [error, setError] = useState("");
+  const [statusMsg, setStatusMsg] = useState("");
+
+  // Stake input sub-state
+  const [stakeMode, setStakeMode] = useState(false);
+  const [stakeGameId, setStakeGameId] = useState("");
+  const [stakeInput, setStakeInput] = useState(
+    defaultStakeWei ? formatEther(defaultStakeWei) : ""
+  );
+
+  // Stake confirmation sub-state
+  const [confirmMode, setConfirmMode] = useState(false);
+  const [pendingStakeWei, setPendingStakeWei] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    api
+      .listGames()
+      .then((res) => setGames(res.games))
+      .catch((err: Error) => setError(err.message));
+  }, []);
+
+  const handleWatch = async () => {
+    setStatusMsg("");
+    try {
+      const result = await api.listMatches();
+      if (result.matches.length === 0) {
+        setStatusMsg("No active games to watch right now.");
+        return;
+      }
+      onWatch();
+    } catch (err: any) {
+      setStatusMsg(`Failed to fetch matches: ${err.message}`);
+    }
+  };
+
+  const handleSelectGame = (gameId: string) => {
+    setStakeGameId(gameId);
+    setStakeMode(true);
+    setStatusMsg("");
+  };
+
+  const handleConfirmStake = () => {
+    const trimmed = stakeInput.trim();
+    if (!trimmed || trimmed === "0") {
+      onPlay(stakeGameId);
+      return;
+    }
+
+    // Check if staking is available for this game
+    const game = games.find((g) => g.id === stakeGameId);
+    if (game && game.stakingEnabled === false) {
+      setStatusMsg("Staking is not available for this game (settlement not configured on server).");
+      return;
+    }
+
+    try {
+      const wei = parseEther(trimmed).toString();
+      setPendingStakeWei(wei);
+      setConfirmMode(true);
+    } catch {
+      setStatusMsg(`Invalid amount: "${trimmed}". Enter a decimal ETH value (e.g. 0.01)`);
+    }
+  };
+
+  const handleFinalConfirm = () => {
+    onPlay(stakeGameId, pendingStakeWei);
+  };
+
+  const handleCancelConfirm = () => {
+    setConfirmMode(false);
+    setPendingStakeWei(undefined);
+  };
+
+  const options = [
+    ...games.map((g) => ({ label: `Play ${g.name}`, action: () => handleSelectGame(g.id) })),
+    { label: "Watch live games", action: handleWatch },
+    { label: "Leaderboard", action: () => onLeaderboard() },
+  ];
+
+  useInput((input, key) => {
+    if (confirmMode) {
+      if (input === "y" || input === "Y") {
+        handleFinalConfirm();
+      } else if (input === "n" || input === "N" || key.escape) {
+        handleCancelConfirm();
+      }
+      return;
+    }
+
+    if (stakeMode) {
+      if (key.return) {
+        handleConfirmStake();
+      } else if (key.escape) {
+        setStakeMode(false);
+        setStakeInput(defaultStakeWei ? formatEther(defaultStakeWei) : "");
+        setStatusMsg("");
+      } else if (key.backspace || key.delete) {
+        setStakeInput((prev) => prev.slice(0, -1));
+      } else if (input && !key.ctrl && !key.meta) {
+        setStakeInput((prev) => prev + input);
+      }
+      return;
+    }
+
+    if (key.upArrow) setSelected((s) => Math.max(0, s - 1));
+    if (key.downArrow) setSelected((s) => Math.min(options.length - 1, s + 1));
+    if (key.return) options[selected]?.action();
+  });
+
+  return (
+    <Box flexDirection="column" paddingX={2} paddingY={1}>
+      <Text color={colors.primary} bold>
+        {"═══ LOBBY ═══"}
+      </Text>
+      <Text color={colors.dimmed}>{""}</Text>
+
+      {confirmMode && pendingStakeWei ? (
+        <Box flexDirection="column">
+          <Text color={colors.warning} bold>
+            Confirm Stake
+          </Text>
+          <Text>{""}</Text>
+          <Text color={colors.white}>
+            You are about to enter matchmaking with a stake of {formatEther(pendingStakeWei)} ETH
+          </Text>
+          <Text color={colors.error}>
+            If you lose the game, you will lose {formatEther(pendingStakeWei)} ETH
+          </Text>
+          <Text>{""}</Text>
+          <Text color={colors.primary} bold>
+            Press [Y] to confirm, [N] to go back
+          </Text>
+        </Box>
+      ) : stakeMode ? (
+        <Box flexDirection="column">
+          <Text color={colors.white}>Stake for {stakeGameId}:</Text>
+          <Text color={colors.dimmed}>Enter ETH amount (or press Enter for free play)</Text>
+          <Text>{""}</Text>
+          <Box>
+            <Text color={colors.secondary}>{"> "}</Text>
+            <Text color={colors.text}>{stakeInput || "0"}</Text>
+            <Text color={colors.dimmed}> ETH</Text>
+            <Text color={colors.dimmed}>{"_"}</Text>
+          </Box>
+          <Text>{""}</Text>
+          <Text color={colors.dimmed}>Enter to confirm, Esc to go back</Text>
+        </Box>
+      ) : error ? (
+        <Text color={colors.error}>Error: {error}</Text>
+      ) : (
+        options.map((opt, i) => (
+          <Text key={i} color={i === selected ? colors.primary : colors.dimmed}>
+            {i === selected ? " ▸ " : "   "}
+            {opt.label}
+          </Text>
+        ))
+      )}
+
+      {statusMsg && (
+        <>
+          <Text color={colors.dimmed}>{""}</Text>
+          <Text color={colors.warning}>  {statusMsg}</Text>
+        </>
+      )}
+
+      {!stakeMode && (
+        <>
+          <Text color={colors.dimmed}>{""}</Text>
+          <Text color={colors.dimmed}>Use ↑↓ to select, Enter to confirm, q to quit</Text>
+        </>
+      )}
+    </Box>
+  );
+}

package/src/tui/screens/Matchmaking.tsx

@@ -0,0 +1,107 @@
+import React, { useEffect, useState } from "react";
+import { Box, Text } from "ink";
+import { formatEther } from "ethers";
+import Spinner from "ink-spinner";
+import { colors } from "../theme.js";
+import * as api from "../../transport/httpClient.js";
+
+interface MatchmakingProps {
+  playerId: string;
+  gameId: string;
+  stakeWei?: string;
+  onMatched: (matchId: string, wsToken: string, opponent: string) => void;
+  onCancel: () => void;
+}
+
+export function Matchmaking({ playerId, gameId, stakeWei, onMatched, onCancel }: MatchmakingProps) {
+  const [status, setStatus] = useState("Searching for opponent...");
+  const [elapsed, setElapsed] = useState(0);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    let cancelled = false;
+    let ticket = "";
+
+    const poll = async () => {
+      try {
+        const result = await api.joinQueue(playerId, gameId, undefined, stakeWei);
+
+        if (result.status === "matched") {
+          if (!cancelled) {
+            onMatched(result.matchId, result.wsToken, result.opponent);
+          }
+        } else {
+          ticket = result.ticket;
+          setStatus("In queue, waiting for opponent...");
+
+          // Poll every 2 seconds, reusing the same ticket
+          const interval = setInterval(async () => {
+            if (cancelled) {
+              clearInterval(interval);
+              return;
+            }
+            try {
+              const retry = await api.joinQueue(playerId, gameId, ticket, stakeWei);
+              if (retry.status === "matched") {
+                clearInterval(interval);
+                if (!cancelled) {
+                  onMatched(retry.matchId, retry.wsToken, retry.opponent);
+                }
+              }
+            } catch {
+              // Ignore poll errors
+            }
+          }, 2000);
+        }
+      } catch (err: any) {
+        setError(err.message);
+      }
+    };
+
+    poll();
+
+    const timer = setInterval(() => {
+      if (!cancelled) setElapsed((e) => e + 1);
+    }, 1000);
+
+    return () => {
+      cancelled = true;
+      clearInterval(timer);
+      if (ticket) api.leaveQueue(ticket).catch(() => {});
+    };
+  }, [playerId, gameId, stakeWei]);
+
+  const stakeDisplay = stakeWei ? `${formatEther(stakeWei)} ETH` : "free";
+
+  return (
+    <Box flexDirection="column" paddingX={2} paddingY={1}>
+      <Text color={colors.primary} bold>
+        {"═══ MATCHMAKING ═══"}
+      </Text>
+      <Text>{""}</Text>
+
+      {error ? (
+        <Text color={colors.error}>Error: {error}</Text>
+      ) : (
+        <Box>
+          <Text color={colors.secondary}>
+            <Spinner type="dots" />
+          </Text>
+          <Text color={colors.white}> {status} ({elapsed}s)</Text>
+        </Box>
+      )}
+
+      <Text>{""}</Text>
+      <Text color={colors.dimmed}>Game: {gameId}</Text>
+      {stakeWei && stakeWei !== "0" ? (
+        <Text color={colors.warning} bold>Stake: {stakeDisplay}</Text>
+      ) : (
+        <Text color={colors.dimmed}>Stake: {stakeDisplay}</Text>
+      )}
+      {stakeWei && stakeWei !== "0" && (
+        <Text color={colors.dimmed}>Only opponents with matching stake will be paired</Text>
+      )}
+      <Text color={colors.dimmed}>Press Ctrl+C to cancel</Text>
+    </Box>
+  );
+}