@devrongx/games 0.3.4 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devrongx/games",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "description": "Game UI components for sports prediction markets",
   "license": "MIT",
   "main": "./src/index.ts",

package/src/games/prematch-bets/FullLeaderboard.tsx

@@ -0,0 +1,149 @@
+// @devrongx/games — games/prematch-bets/FullLeaderboard.tsx
+// Full paginated leaderboard with sort tabs and pinned user rank.
+"use client";
+
+import { useState } from "react";
+import { ArrowLeft, Loader2 } from "lucide-react";
+import { IChallengeConfig } from "./config";
+import { LeaderboardRow } from "./LeaderboardRow";
+import { OUTFIT } from "./constants";
+import { useTDLeaderboard } from "../../pools/hooks";
+
+const PAGE_SIZE = 50;
+
+const SORT_TABS = [
+  { key: "current_coins", label: "Score" },
+  { key: "total_risked", label: "Risk" },
+  { key: "max_possible", label: "Max" },
+  { key: "questions_left", label: "Left" },
+] as const;
+
+interface FullLeaderboardProps {
+  poolId: number;
+  config: IChallengeConfig;
+  onBack: () => void;
+}
+
+export function FullLeaderboard({ poolId, config, onBack }: FullLeaderboardProps) {
+  const [sortBy, setSortBy] = useState<string>("current_coins");
+  const [page, setPage] = useState(0);
+
+  const { rankings, total, loading } = useTDLeaderboard(poolId, {
+    sort: sortBy,
+    limit: PAGE_SIZE,
+    offset: page * PAGE_SIZE,
+    pollMs: 15_000,
+  });
+
+  return (
+    <div className="w-full flex flex-col">
+      {/* Header */}
+      <div className="flex items-center gap-3 px-4 pt-4 pb-3" style={{ borderBottom: "1px solid rgba(255,255,255,0.06)" }}>
+        <button onClick={onBack} className="flex items-center justify-center w-7 h-7 rounded-lg" style={{ background: "rgba(255,255,255,0.06)" }}>
+          <ArrowLeft size={14} className="text-white/60" />
+        </button>
+        <div className="flex-1">
+          <p className="text-[14px] font-bold text-white" style={OUTFIT}>Leaderboard</p>
+          <p className="text-[10px] text-white/40" style={OUTFIT}>{total.toLocaleString()} players</p>
+        </div>
+      </div>
+
+      {/* Sort tabs */}
+      <div className="flex gap-1 px-4 py-2" style={{ borderBottom: "1px solid rgba(255,255,255,0.06)" }}>
+        {SORT_TABS.map((tab) => (
+          <button
+            key={tab.key}
+            onClick={() => { setSortBy(tab.key); setPage(0); }}
+            className="flex-1 py-1.5 rounded-lg text-[10px] font-semibold transition-all"
+            style={{
+              ...OUTFIT,
+              background: sortBy === tab.key ? "rgba(34,227,232,0.15)" : "rgba(255,255,255,0.04)",
+              color: sortBy === tab.key ? "#22E3E8" : "rgba(255,255,255,0.4)",
+              border: sortBy === tab.key ? "1px solid rgba(34,227,232,0.3)" : "1px solid transparent",
+            }}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Column headers */}
+      <div className="flex items-center gap-2 px-4 py-1.5" style={{ borderBottom: "1px solid rgba(255,255,255,0.04)" }}>
+        <span className="w-[28px] text-right text-[8px] text-white/25 uppercase tracking-wide" style={OUTFIT}>#</span>
+        <span className="flex-1 text-[8px] text-white/25 uppercase tracking-wide" style={OUTFIT}>Player</span>
+        <span className="w-[52px] text-right text-[8px] text-white/25 uppercase tracking-wide" style={OUTFIT}>Score</span>
+        <span className="w-[52px] text-right text-[8px] text-white/25 uppercase tracking-wide" style={OUTFIT}>Payout</span>
+      </div>
+
+      {/* Rows */}
+      {loading ? (
+        <div className="flex items-center justify-center py-10">
+          <Loader2 size={18} className="animate-spin" style={{ color: "rgba(255,255,255,0.3)" }} />
+        </div>
+      ) : (
+        <div className="flex flex-col overflow-y-auto" style={{ maxHeight: "55vh" }}>
+          {rankings.map((r) => (
+            <LeaderboardRow
+              key={r.entry_id}
+              entry={{
+                wallet: r.partner_ext_id ?? `User #${r.user_id}`,
+                pts: r.current_coins,
+                payout: 0,
+                isYou: false,
+                rank: r.rank,
+              }}
+              rank={r.rank}
+              isLast={false}
+            />
+          ))}
+          {!loading && rankings.length === 0 && (
+            <div className="flex items-center justify-center py-10">
+              <p className="text-[11px] text-white/30" style={OUTFIT}>No entries yet</p>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Pagination */}
+      <div className="flex items-center justify-center gap-3 px-4 py-3" style={{ borderTop: "1px solid rgba(255,255,255,0.06)" }}>
+        <button
+          onClick={() => setPage((p) => Math.max(0, p - 1))}
+          disabled={page === 0}
+          className="text-[10px] font-semibold px-3 py-1.5 rounded-lg disabled:opacity-30"
+          style={{ ...OUTFIT, background: "rgba(255,255,255,0.06)", color: "rgba(255,255,255,0.6)" }}
+        >
+          ← Prev
+        </button>
+        <span className="text-[10px] text-white/40" style={OUTFIT}>
+          {page * PAGE_SIZE + 1}–{Math.min((page + 1) * PAGE_SIZE, total)} of {total}
+        </span>
+        <button
+          onClick={() => setPage((p) => p + 1)}
+          disabled={(page + 1) * PAGE_SIZE >= total}
+          className="text-[10px] font-semibold px-3 py-1.5 rounded-lg disabled:opacity-30"
+          style={{ ...OUTFIT, background: "rgba(255,255,255,0.06)", color: "rgba(255,255,255,0.6)" }}
+        >
+          Next →
+        </button>
+      </div>
+
+      {/* Payout brackets */}
+      {config.rankBrackets.length > 0 && (
+        <div className="px-4 pb-4">
+          <p className="text-[9px] text-white/30 font-semibold uppercase tracking-wider mb-1.5" style={OUTFIT}>Payout Brackets</p>
+          <div className="flex flex-wrap gap-1">
+            {config.rankBrackets.map((b, i) => (
+              <span
+                key={i}
+                className="text-[8px] font-medium px-2 py-0.5 rounded-full"
+                style={{ background: "rgba(255,255,255,0.04)", color: "rgba(255,255,255,0.4)", border: "1px solid rgba(255,255,255,0.08)" }}
+              >
+                #{b.from}{b.to > b.from ? `–${b.to}` : ""}: {(b.poolPercent * 100).toFixed(0)}%
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/games/prematch-bets/PreMatchBetsPopup.tsx

@@ -2,96 +2,326 @@
 "use client";
 
 import { useState, useCallback, useMemo } from "react";
+import { Loader2 } from "lucide-react";
 import { useGamePopupStore } from "../../core/gamePopupStore";
-import { CSK_VS_RCB_CHALLENGE, CSK_VS_RCB_POOL, IUserBets, calcBetSummary, buildPoolLeaderboard } from "./config";
+import {
+  CSK_VS_RCB_CHALLENGE,
+  CSK_VS_RCB_POOL,
+  IUserBets,
+  calcBetSummary,
+  buildPoolLeaderboard,
+  ILeaderboardEntry,
+} from "./config";
 import { GamePopupShell } from "../../core/GamePopupShell";
 import { PreMatchIntro } from "./PreMatchIntro";
 import { PreMatchQuestions } from "./PreMatchQuestions";
 import { PreMatchGame } from "./PreMatchGame";
+import { PreMatchSubmitted } from "./PreMatchSubmitted";
+import { PreMatchLive } from "./PreMatchLive";
+import { PreMatchResults } from "./PreMatchResults";
+import { FullLeaderboard } from "./FullLeaderboard";
+import { useTDPool, useTDPoolEntry, useTDLeaderboard } from "../../pools/hooks";
+import { useTDMatches } from "../../matches/useTDMatches";
+import { buildPMBConfig } from "../../pools/mapper";
+import { joinTDPool, placeTDBets } from "../../pools/actions";
+import type { ITDLeaderboardEntry } from "../../pools/types";
+import { calcRankPayout } from "./config";
 
 const GAME_ID = "pre-match";
-const config = CSK_VS_RCB_CHALLENGE;
-const pool = CSK_VS_RCB_POOL;
 
-export const PreMatchBetsPopup = () => {
-    const { activeView } = useGamePopupStore();
+// ─── View logic ────────────────────────────────────────────────────────────────
 
-    // Unified bet state
-    const [bets, setBets] = useState<IUserBets>({});
+type UserFlowState = "intro" | "questions" | "game";
+type ActiveView = UserFlowState | "submitted" | "live" | "results";
 
-    // Picker state: which market has its amount picker open, and for which option
-    const [expandedPicker, setExpandedPicker] = useState<Record<number, number>>({});
+function getActiveView(
+  poolStatus: string | undefined,
+  hasEntry: boolean,
+  userFlowState: UserFlowState,
+): ActiveView {
+  if (!poolStatus) return userFlowState;
+  if (poolStatus === "complete" || poolStatus === "cancelled") return "results";
+  if (poolStatus === "closed" || poolStatus === "resolving") return hasEntry ? "live" : "results";
+  // Pool is open
+  if (hasEntry) return "submitted";
+  return userFlowState;
+}
 
-    // Compute summary and leaderboard from bets
-    const betSummary = useMemo(() => calcBetSummary(bets, config), [bets]);
-    const leaderboard = useMemo(
-        () => buildPoolLeaderboard(pool, betSummary.potentialBalance, config),
-        [betSummary.potentialBalance],
-    );
+// Build a mini leaderboard from real API data
+function buildMiniLeaderboard(
+  rankings: ITDLeaderboardEntry[],
+  userEntryId: number | null,
+): ILeaderboardEntry[] {
+  const rows: ILeaderboardEntry[] = [];
+  const top = rankings.slice(0, 3);
+  top.forEach((r) => {
+    rows.push({
+      wallet: r.partner_ext_id ?? `User #${r.user_id}`,
+      pts: r.current_coins,
+      payout: 0,
+      isYou: r.entry_id === userEntryId,
+      rank: r.rank,
+    });
+  });
+  if (userEntryId !== null) {
+    const userIdx = rankings.findIndex((r) => r.entry_id === userEntryId);
+    if (userIdx >= 3) {
+      rows.push({ wallet: "", pts: 0, payout: 0, isYou: false, gapAbove: true });
+      if (userIdx > 3) {
+        const above = rankings[userIdx - 1];
+        rows.push({ wallet: above.partner_ext_id ?? `User #${above.user_id}`, pts: above.current_coins, payout: 0, isYou: false, rank: userIdx });
+      }
+      const me = rankings[userIdx];
+      rows.push({ wallet: me.partner_ext_id ?? "You", pts: me.current_coins, payout: 0, isYou: true, rank: userIdx + 1 });
+      if (userIdx < rankings.length - 1) {
+        const below = rankings[userIdx + 1];
+        rows.push({ wallet: below.partner_ext_id ?? `User #${below.user_id}`, pts: below.current_coins, payout: 0, isYou: false, rank: userIdx + 2 });
+      }
+    }
+  }
+  return rows;
+}
+
+// ─── Props ────────────────────────────────────────────────────────────────────
+
+interface PreMatchBetsPopupProps {
+  /** When provided, fetches real data. When absent, uses hardcoded CSK_VS_RCB demo. */
+  poolId?: number;
+  matchId?: number;
+}
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+export const PreMatchBetsPopup = ({ poolId, matchId }: PreMatchBetsPopupProps) => {
+  const { activeView: storeView } = useGamePopupStore();
+
+  // ── Real API data (only when poolId provided) ────────────────────────────
+  const { pool, loading: poolLoading, refetch: refetchPool } = useTDPool(poolId ?? 0);
+  const { data: entryData, refetch: refetchEntry } = useTDPoolEntry(poolId ?? 0);
+  const { rankings, refetch: refetchLB } = useTDLeaderboard(poolId ?? 0, { pollMs: poolId ? 30_000 : 0 });
+  const { matches } = useTDMatches(matchId !== undefined ? { tournamentId: undefined } : undefined);
+  const match = useMemo(() => matches.find((m) => m.id === matchId) ?? null, [matches, matchId]);
+
+  // ── Config: real or fallback ─────────────────────────────────────────────
+  const config = useMemo(() => {
+    if (poolId && pool && match) {
+      try { return buildPMBConfig(pool, match); } catch { /* fall through */ }
+    }
+    return poolId ? null : CSK_VS_RCB_CHALLENGE;
+  }, [poolId, pool, match]);
+
+  const fallbackPool = poolId ? null : CSK_VS_RCB_POOL;
+
+  // ── Bet state ─────────────────────────────────────────────────────────────
+  const [bets, setBets] = useState<IUserBets>({});
+  const [expandedPicker, setExpandedPicker] = useState<Record<number, number>>({});
+  const [userFlowState, setUserFlowState] = useState<UserFlowState>("intro");
+  const [showFullLeaderboard, setShowFullLeaderboard] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+
+  const betSummary = useMemo(
+    () => config ? calcBetSummary(bets, config) : { selectedCount: 0, compoundMultiplier: 0, totalEntry: 0, compoundedReward: 0, remainingBalance: 0, riskPercent: 0, potentialBalance: 0, prizes: [] },
+    [bets, config],
+  );
+
+  const leaderboardRows = useMemo(() => {
+    if (poolId && rankings.length > 0) {
+      return buildMiniLeaderboard(rankings, entryData?.entry.id ?? null);
+    }
+    if (fallbackPool && config) {
+      return buildPoolLeaderboard(fallbackPool, betSummary.potentialBalance, config).rows;
+    }
+    return [];
+  }, [poolId, rankings, entryData, fallbackPool, config, betSummary.potentialBalance]);
+
+  // ── View routing ──────────────────────────────────────────────────────────
+  const hasEntry = !!entryData?.entry;
+  const poolStatus = poolId ? pool?.status : undefined;
+  const activeView: ActiveView = poolId
+    ? getActiveView(poolStatus, hasEntry, userFlowState)
+    : (storeView as UserFlowState) || "intro";
+
+  // ── Handlers ─────────────────────────────────────────────────────────────
+  const handleQuestionsComplete = useCallback((selections: IUserBets) => {
+    setBets(selections);
+    const pickers: Record<number, number> = {};
+    for (const [mIdxStr, entry] of Object.entries(selections)) {
+      pickers[Number(mIdxStr)] = entry.optionIdx;
+    }
+    setExpandedPicker(pickers);
+  }, []);
+
+  const handleOptionClick = useCallback((mIdx: number, oIdx: number) => {
+    setBets((prev) => {
+      const existing = prev[mIdx];
+      if (existing?.optionIdx === oIdx) {
+        const next = { ...prev };
+        delete next[mIdx];
+        setExpandedPicker((p) => { const n = { ...p }; delete n[mIdx]; return n; });
+        return next;
+      }
+      setExpandedPicker((p) => ({ ...p, [mIdx]: oIdx }));
+      return {
+        ...prev,
+        [mIdx]: { optionIdx: oIdx, amount: existing?.amount ?? 0, parlaySlot: existing?.parlaySlot ?? null },
+      };
+    });
+  }, []);
+
+  const handleAmountSelect = useCallback((mIdx: number, oIdx: number, amount: number) => {
+    setBets((prev) => ({
+      ...prev,
+      [mIdx]: { optionIdx: oIdx, amount, parlaySlot: prev[mIdx]?.parlaySlot ?? null },
+    }));
+  }, []);
+
+  const handleSubmitBets = useCallback(async () => {
+    if (!poolId || !config) return;
+    setSubmitting(true);
+    setSubmitError(null);
+    try {
+      // Build bets payload — only individual bets with amount > 0
+      const betsToSubmit = Object.entries(bets)
+        .filter(([, b]) => b.amount > 0 && b.parlaySlot === null)
+        .map(([mIdxStr, b]) => {
+          const market = config.markets[Number(mIdxStr)];
+          return {
+            challenge_id: market.backendChallengeId!,
+            selected_option: market.options[b.optionIdx].label.toLowerCase().replace(/\s+/g, "_"),
+            coin_amount: b.amount,
+          };
+        })
+        .filter((b) => b.challenge_id !== undefined);
 
-    // Questions completion callback
-    const handleQuestionsComplete = useCallback((selections: IUserBets) => {
-        setBets(selections);
-        // Open pickers for all selected markets
-        const pickers: Record<number, number> = {};
-        for (const [mIdxStr, entry] of Object.entries(selections)) {
-            pickers[Number(mIdxStr)] = entry.optionIdx;
+      if (betsToSubmit.length === 0) return;
+
+      // Join pool if not already in
+      if (!hasEntry) {
+        await joinTDPool(poolId);
+      }
+
+      await placeTDBets(poolId, betsToSubmit);
+
+      // Refresh data
+      await Promise.all([refetchEntry(), refetchLB(), refetchPool()]);
+    } catch (err: unknown) {
+      setSubmitError(err instanceof Error ? err.message : "Failed to submit bets");
+    } finally {
+      setSubmitting(false);
+    }
+  }, [poolId, config, bets, hasEntry, refetchEntry, refetchLB, refetchPool]);
+
+  const handleAdjust = useCallback(async () => {
+    // Load server bets back into local state
+    if (entryData?.bets && config) {
+      const loaded: IUserBets = {};
+      for (const bet of entryData.bets) {
+        if (bet.parlay_id !== null) continue; // skip parlays for now
+        const mIdx = config.markets.findIndex((m) => m.backendChallengeId === bet.challenge_id);
+        if (mIdx >= 0) {
+          // Find option by matching the stored key to a label approximation
+          // (we store selected_option as the label key from the pool option)
+          const oIdx = config.markets[mIdx].options.findIndex((_, i) => i === 0); // fallback: first option
+          loaded[mIdx] = { optionIdx: oIdx, amount: bet.coin_amount, parlaySlot: null };
         }
-        setExpandedPicker(pickers);
-    }, []);
-
-    // Option click: toggle selection + open/close picker
-    const handleOptionClick = useCallback((mIdx: number, oIdx: number) => {
-        setBets(prev => {
-            const existing = prev[mIdx];
-            if (existing?.optionIdx === oIdx) {
-                // Deselect
-                const next = { ...prev };
-                delete next[mIdx];
-                setExpandedPicker(p => { const n = { ...p }; delete n[mIdx]; return n; });
-                return next;
-            }
-            // Select new option — open picker
-            setExpandedPicker(p => ({ ...p, [mIdx]: oIdx }));
-            return {
-                ...prev,
-                [mIdx]: { optionIdx: oIdx, amount: existing?.amount ?? 0, parlaySlot: existing?.parlaySlot ?? null },
-            };
-        });
-    }, []);
-
-    // Amount select from chip picker
-    const handleAmountSelect = useCallback((mIdx: number, oIdx: number, amount: number) => {
-        setBets(prev => ({
-            ...prev,
-            [mIdx]: { optionIdx: oIdx, amount, parlaySlot: prev[mIdx]?.parlaySlot ?? null },
-        }));
-    }, []);
+      }
+      setBets(loaded);
+    }
+    setUserFlowState("game");
+  }, [entryData, config]);
+
+  // ── Loading ────────────────────────────────────────────────────────────────
+  if (poolId && (poolLoading || (!config && !poolLoading))) {
+    return (
+      <GamePopupShell gameId={GAME_ID} title="Pre-Match Bets" hideHeaderViews={["intro"]}>
+        <div className="flex-1 flex items-center justify-center py-20">
+          <Loader2 size={24} className="animate-spin" style={{ color: "rgba(255,255,255,0.3)" }} />
+        </div>
+      </GamePopupShell>
+    );
+  }
+
+  if (!config) return null;
 
+  // ── Full leaderboard overlay ───────────────────────────────────────────────
+  if (showFullLeaderboard) {
     return (
-        <GamePopupShell
-            gameId={GAME_ID}
-            title="Pre-Match Bets"
-            hideHeaderViews={["intro"]}
-        >
-            {activeView === "intro" && (
-                <PreMatchIntro config={config} />
-            )}
-            {activeView === "questions" && (
-                <PreMatchQuestions config={config} onComplete={handleQuestionsComplete} />
-            )}
-            {activeView === "game" && (
-                <PreMatchGame
-                    config={config}
-                    bets={bets}
-                    onBetsChange={setBets}
-                    expandedPicker={expandedPicker}
-                    onOptionClick={handleOptionClick}
-                    onAmountSelect={handleAmountSelect}
-                    betSummary={betSummary}
-                    leaderboardRows={leaderboard.rows}
-                />
-            )}
-        </GamePopupShell>
+      <GamePopupShell gameId={GAME_ID} title="Leaderboard" hideHeaderViews={[]} >
+        <FullLeaderboard
+          poolId={poolId ?? 0}
+          config={config}
+          onBack={() => setShowFullLeaderboard(false)}
+        />
+      </GamePopupShell>
     );
+  }
+
+  return (
+    <GamePopupShell gameId={GAME_ID} title="Pre-Match Bets" hideHeaderViews={["intro"]}>
+      {submitError && (
+        <div className="mx-4 mt-2 px-3 py-2 rounded-lg text-[11px] font-medium" style={{ background: "rgba(239,68,68,0.15)", color: "#f87171" }}>
+          {submitError}
+        </div>
+      )}
+
+      {activeView === "intro" && (
+        <PreMatchIntro config={config} />
+      )}
+
+      {activeView === "questions" && (
+        <PreMatchQuestions config={config} onComplete={handleQuestionsComplete} />
+      )}
+
+      {activeView === "game" && (
+        <PreMatchGame
+          config={config}
+          bets={bets}
+          onBetsChange={setBets}
+          expandedPicker={expandedPicker}
+          onOptionClick={handleOptionClick}
+          onAmountSelect={handleAmountSelect}
+          betSummary={betSummary}
+          leaderboardRows={leaderboardRows}
+          onSubmit={poolId ? handleSubmitBets : undefined}
+          onViewLeaderboard={poolId ? () => setShowFullLeaderboard(true) : undefined}
+          submitting={submitting}
+        />
+      )}
+
+      {activeView === "submitted" && (
+        <PreMatchSubmitted
+          config={config}
+          poolId={poolId!}
+          entryData={entryData}
+          rankings={rankings}
+          onAdjust={handleAdjust}
+          onViewLeaderboard={() => setShowFullLeaderboard(true)}
+        />
+      )}
+
+      {activeView === "live" && (
+        <PreMatchLive
+          config={config}
+          poolId={poolId!}
+          pool={pool}
+          entryData={entryData}
+          rankings={rankings}
+          onRefresh={() => { refetchPool(); refetchEntry(); refetchLB(); }}
+          onViewFullLeaderboard={() => setShowFullLeaderboard(true)}
+        />
+      )}
+
+      {activeView === "results" && (
+        <PreMatchResults
+          config={config}
+          poolId={poolId ?? 0}
+          pool={pool ?? undefined}
+          entryData={entryData}
+          rankings={rankings}
+          onViewFullLeaderboard={() => setShowFullLeaderboard(true)}
+        />
+      )}
+    </GamePopupShell>
+  );
 };