@devrongx/games 0.3.5 → 0.4.1

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

@@ -0,0 +1,183 @@
+// @devrongx/games — games/prematch-bets/PreMatchSubmitted.tsx
+// Shows after bets are submitted, while the pool is still OPEN (match hasn't started).
+"use client";
+
+import { useState, useEffect } from "react";
+import { CheckCircle2, Clock, ArrowRight, Edit2 } from "lucide-react";
+import { IChallengeConfig } from "./config";
+import { LeaderboardRow } from "./LeaderboardRow";
+import { OUTFIT, MARKET_ICONS } from "./constants";
+import type { ITDMyEntryResponse, ITDLeaderboardEntry } from "../../pools/types";
+
+// Countdown hook
+function useCountdown(targetIso: string): string {
+  const [text, setText] = useState("");
+  useEffect(() => {
+    if (!targetIso) return;
+    const tick = () => {
+      const diff = new Date(targetIso).getTime() - Date.now();
+      if (diff <= 0) { setText("LIVE NOW"); return; }
+      const d = Math.floor(diff / 86400000);
+      const h = Math.floor((diff % 86400000) / 3600000);
+      const m = Math.floor((diff % 3600000) / 60000);
+      const s = Math.floor((diff % 60000) / 1000);
+      if (d > 0) setText(`${d}d ${h}h ${m}m`);
+      else if (h > 0) setText(`${h}h ${m}m ${s}s`);
+      else setText(`${m}m ${s}s`);
+    };
+    tick();
+    const id = setInterval(tick, 1000);
+    return () => clearInterval(id);
+  }, [targetIso]);
+  return text;
+}
+
+interface PreMatchSubmittedProps {
+  config: IChallengeConfig;
+  poolId: number;
+  entryData: ITDMyEntryResponse | null;
+  rankings: ITDLeaderboardEntry[];
+  onAdjust: () => void;
+  onViewLeaderboard: () => void;
+}
+
+export function PreMatchSubmitted({
+  config,
+  entryData,
+  rankings,
+  onAdjust,
+  onViewLeaderboard,
+}: PreMatchSubmittedProps) {
+  const countdown = useCountdown(config.matchStartTime);
+  const entry = entryData?.entry;
+  const bets = entryData?.bets ?? [];
+
+  // Only show individual (non-parlay) bets
+  const individualBets = bets.filter((b) => b.parlay_id === null);
+
+  const totalSpent = individualBets.reduce((s, b) => s + b.coin_amount, 0);
+  const totalPotential = individualBets.reduce((s, b) => s + b.potential_return, 0);
+
+  // Mini leaderboard (top 3)
+  const miniRankings = rankings.slice(0, 5);
+
+  return (
+    <div className="w-full flex flex-col gap-4 px-4 pb-8">
+      {/* Success header */}
+      <div className="flex flex-col items-center gap-2 pt-6 pb-4">
+        <div className="flex items-center justify-center w-12 h-12 rounded-full" style={{ background: "rgba(34,197,94,0.15)" }}>
+          <CheckCircle2 size={24} style={{ color: "#22c55e" }} />
+        </div>
+        <p className="text-[18px] font-bold text-white text-center" style={OUTFIT}>Bets Submitted!</p>
+        {countdown && (
+          <div className="flex items-center gap-1.5 px-3 py-1 rounded-full" style={{ background: "rgba(255,255,255,0.06)" }}>
+            <Clock size={11} style={{ color: "rgba(255,255,255,0.5)" }} />
+            <span className="text-[11px] text-white/60" style={OUTFIT}>Match starts in <span className="text-white font-bold">{countdown}</span></span>
+          </div>
+        )}
+      </div>
+
+      <div className="h-px" style={{ background: "rgba(255,255,255,0.06)" }} />
+
+      {/* Your bets */}
+      {individualBets.length > 0 && (
+        <div>
+          <p className="text-[10px] font-semibold uppercase tracking-wider text-white/50 mb-2" style={OUTFIT}>
+            YOUR BETS ({individualBets.length} markets)
+          </p>
+          <div className="flex flex-col gap-1.5">
+            {individualBets.map((bet, i) => {
+              const market = config.markets.find((m) => m.backendChallengeId === bet.challenge_id);
+              const Icon = MARKET_ICONS[market?.icon ?? "coin"];
+              return (
+                <div
+                  key={bet.id}
+                  className="flex items-center gap-2 px-3 py-2 rounded-lg"
+                  style={{ background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.06)" }}
+                >
+                  {Icon && <Icon size={11} style={{ color: market?.accent ?? "#22E3E8", flexShrink: 0 }} />}
+                  <span className="flex-1 text-[10px] text-white/70 font-medium truncate" style={OUTFIT}>
+                    {market?.question ?? `Challenge #${bet.challenge_id}`}
+                  </span>
+                  <span className="text-[9px] font-bold" style={{ ...OUTFIT, color: "#22E3E8" }}>
+                    {bet.odds_at_bet}x
+                  </span>
+                  <span className="text-[9px] text-white/50" style={OUTFIT}>—</span>
+                  <span className="text-[9px] font-semibold text-white" style={OUTFIT}>{bet.coin_amount} pts</span>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      <div className="h-px" style={{ background: "rgba(255,255,255,0.06)" }} />
+
+      {/* Summary */}
+      {entry && (
+        <div className="flex flex-col gap-1">
+          <p className="text-[10px] font-semibold uppercase tracking-wider text-white/50 mb-1" style={OUTFIT}>Summary</p>
+          <div className="flex items-center justify-between">
+            <span className="text-[11px] text-white/50" style={OUTFIT}>Points spent</span>
+            <span className="text-[11px] font-semibold text-white" style={OUTFIT}>{totalSpent} / {config.startingBalance.toLocaleString()}</span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-[11px] text-white/50" style={OUTFIT}>Points remaining</span>
+            <span className="text-[11px] font-semibold text-white" style={OUTFIT}>{entry.current_coins.toLocaleString()}</span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-[11px] text-white/50" style={OUTFIT}>Max potential</span>
+            <span className="text-[11px] font-bold" style={{ ...OUTFIT, color: "#22E3E8" }}>{Math.round(totalPotential + entry.current_coins).toLocaleString()}</span>
+          </div>
+        </div>
+      )}
+
+      {/* Adjust bets button */}
+      <button
+        onClick={onAdjust}
+        className="flex items-center justify-center gap-1.5 w-full py-2.5 rounded-xl"
+        style={{ background: "rgba(255,255,255,0.06)", border: "1px solid rgba(255,255,255,0.1)" }}
+      >
+        <Edit2 size={12} style={{ color: "rgba(255,255,255,0.5)" }} />
+        <span className="text-[11px] font-semibold text-white/60" style={OUTFIT}>Adjust Bets</span>
+      </button>
+
+      <div className="h-px" style={{ background: "rgba(255,255,255,0.06)" }} />
+
+      {/* Mini leaderboard */}
+      {miniRankings.length > 0 && (
+        <div>
+          <p className="text-[10px] font-semibold uppercase tracking-wider text-white/50 mb-2" style={OUTFIT}>Leaderboard</p>
+          <div className="flex items-center gap-2 px-3 mb-1">
+            <span className="w-[28px] text-right text-[8px] text-white/30 uppercase tracking-wide" style={OUTFIT}>#</span>
+            <span className="flex-1 text-[8px] text-white/30 uppercase tracking-wide" style={OUTFIT}>Player</span>
+            <span className="w-[52px] text-right text-[8px] text-white/30 uppercase tracking-wide" style={OUTFIT}>Pts</span>
+          </div>
+          <div className="flex flex-col">
+            {miniRankings.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}
+              />
+            ))}
+          </div>
+          <button
+            onClick={onViewLeaderboard}
+            className="mt-2 flex items-center justify-center gap-1 w-full text-[9px] font-semibold"
+            style={{ ...OUTFIT, color: "rgba(34,227,232,0.6)" }}
+          >
+            See Full Leaderboard <ArrowRight size={10} />
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/games/prematch-bets/config.ts

@@ -20,6 +20,7 @@ export interface IChallengeMarket {
     icon: string;
     accent: string;
     category: string;   // "toss" | "match" | "csk_innings" | "rcb_innings" | "match_level"
+    backendChallengeId?: number;  // Maps to challenges.id in the TD DB — required for API bet placement
     options: IChallengeOption[];
     userBet?: IBetEntry; // Present when API returns a logged-in user's saved bet for this market
 }

package/src/index.ts

@@ -12,3 +12,19 @@ export type { IChallengeConfig, IChallengeMarket, IChallengeOption, IChallengeTe
 // Matches — TD match calendar, data fetching, and types
 export { configureTDClient, fetchTDMatches, useTDMatches, MatchCalendar } from "./matches";
 export type { ITDClientConfig, ITDMatch, ITDTeam, ITDPlayer, ITDVenue, ITDTournament, ITDStage, ITDMatchesResponse, ITDMatchesParams, UseTDMatchesResult } from "./matches";
+
+// Pools — real API data layer
+export {
+  useTDPools, useTDPool, useTDPoolEntry, useTDLeaderboard,
+  joinTDPool, placeTDBets,
+  fetchTDPools, fetchTDPoolDetail, fetchTDLeaderboard, fetchTDMyEntry,
+  buildPMBConfig,
+} from "./pools";
+export type {
+  ITDPool, ITDPoolDetail, ITDChallenge, ITDChallengeOption, ITDCurrency,
+  ITDPMBConfig, ITDPoolContentConfig, ITDPayoutTier,
+  ITDLeaderboardEntry, ITDLeaderboardResponse,
+  ITDPoolEntryRecord, ITDPoolBet, ITDPoolParlay, ITDMyEntryResponse,
+  ITDBetInput,
+  UseTDPoolsResult, UseTDPoolResult, UseTDPoolEntryResult, UseTDLeaderboardResult, UseTDLeaderboardOptions,
+} from "./pools";

package/src/matches/MatchCalendar.tsx

@@ -3,8 +3,11 @@
 
 import { useRef, useMemo, useEffect } from "react";
 import { motion } from "framer-motion";
-import { Calendar, MapPin, Loader2, Trophy, Zap, Target, Users, Volume2 } from "lucide-react";
+import { Calendar, MapPin, Loader2, Trophy, Zap, Target, Users } from "lucide-react";
 import { useTDMatches } from "./useTDMatches";
+import { useTDPools } from "../pools/hooks";
+import type { ITDPool } from "../pools/types";
+import { TDGameType, TDPoolStatus } from "../pools/types";
 import type { ITDMatch } from "./types";
 
 // TD match status enum values
@@ -101,9 +104,93 @@ function groupByDate(matches: ITDMatch[]): IMatchDay[] {
     }));
 }
 
+/* ── Pool pills for a match ── */
+
+const GAME_TYPE_STYLE: Record<number, { icon: typeof Target; color: string; bg: string; label: string }> = {
+  [TDGameType.PRE_MATCH_BETS]: { icon: Target, color: "#22E3E8", bg: "rgba(34,227,232,0.06)", label: "Pre-Match Bets" },
+  [TDGameType.FANTASY_11]: { icon: Users, color: "#9945FF", bg: "rgba(153,69,255,0.06)", label: "Fantasy 11" },
+  [TDGameType.BALL_SEQUENCE]: { icon: Zap, color: "#FF9945", bg: "rgba(255,153,69,0.06)", label: "Ball Sequence" },
+};
+
+function PoolPill({ pool, onPress }: { pool: ITDPool; onPress: (pool: ITDPool) => void }) {
+  const style = GAME_TYPE_STYLE[pool.game_type] ?? { icon: Target, color: "#22E3E8", bg: "rgba(34,227,232,0.06)" };
+  const Icon = style.icon;
+  const isClosed = pool.status === TDPoolStatus.CLOSED || pool.status === TDPoolStatus.RESOLVING || pool.status === TDPoolStatus.COMPLETE;
+
+  return (
+    <button
+      onClick={() => onPress(pool)}
+      className="flex items-center gap-1 px-1.5 py-0.5 rounded-md flex-shrink-0"
+      style={{
+        background: style.bg,
+        border: `1px solid ${style.color}20`,
+        opacity: isClosed ? 0.5 : 1,
+      }}
+    >
+      <span className="text-[7px] font-bold" style={{ ...OUTFIT, color: style.color }}>
+        {pool.display_price}
+      </span>
+      {pool.entry_count > 0 && (
+        <span className="text-[6px] text-white/30" style={OUTFIT}>·{pool.entry_count > 999 ? `${(pool.entry_count / 1000).toFixed(1)}k` : pool.entry_count}</span>
+      )}
+    </button>
+  );
+}
+
+function MatchGameSection({
+  matchId,
+  isCompleted,
+  onPoolPress,
+  partnerSource,
+}: {
+  matchId: number;
+  isCompleted: boolean;
+  onPoolPress?: (pool: ITDPool) => void;
+  partnerSource?: string;
+}) {
+  const { pools, loading } = useTDPools(matchId, partnerSource);
+
+  if (isCompleted || loading || pools.length === 0) return null;
+
+  // Group by game_type (integer)
+  const grouped: Record<number, ITDPool[]> = {};
+  for (const p of pools) {
+    (grouped[p.game_type] ??= []).push(p);
+  }
+
+  const gameTypes = (Object.keys(grouped) as unknown as number[])
+    .map(Number)
+    .filter((gt) => gt in GAME_TYPE_STYLE);
+  if (gameTypes.length === 0) return null;
+
+  return (
+    <div className="flex flex-col gap-1 mt-1 pt-1.5" style={{ borderTop: "1px solid rgba(255,255,255,0.06)" }}>
+      {gameTypes.map((gt) => {
+        const style = GAME_TYPE_STYLE[gt];
+        const Icon = style.icon;
+        return (
+          <div key={gt} className="flex flex-col gap-0.5">
+            <div className="flex items-center gap-1 px-1">
+              <Icon size={8} style={{ color: style.color }} />
+              <span className="text-[7px] barlowcondensedBold tracking-wide text-white/60">
+                {style.label}
+              </span>
+            </div>
+            <div className="flex gap-1 flex-wrap">
+              {grouped[gt].map((pool) => (
+                <PoolPill key={pool.id} pool={pool} onPress={onPoolPress ?? (() => {})} />
+              ))}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
 /* ── Match card with border shine animation ── */
 
-function MatchCard({ match }: { match: ITDMatch }) {
+function MatchCard({ match, onPoolPress, partnerSource }: { match: ITDMatch; onPoolPress?: (pool: ITDPool) => void; partnerSource?: string }) {
   const isLive = match.status === MATCH_STATUS.LIVE;
   const isCompleted = match.status === MATCH_STATUS.COMPLETED;
   const time = match.scheduled_start_at ? formatTime(toLocalDate(match.scheduled_start_at)) : "";
@@ -219,50 +306,13 @@ function MatchCard({ match }: { match: ITDMatch }) {
           </div>
         )}
 
-        {/* Game modes */}
-        {!isCompleted && (
-          <div className="flex flex-col gap-1 mt-1 pt-1.5" style={{ borderTop: "1px solid rgba(255,255,255,0.06)" }}>
-            <div
-              className="flex items-center gap-1.5 px-2 py-1 rounded-lg"
-              style={{ background: "rgba(34,227,232,0.06)" }}
-            >
-              <Target size={9} style={{ color: "#22E3E8" }} />
-              <span className="text-[8px] barlowcondensedBold tracking-wide text-white flex-1">
-                Pre-Match Bets
-              </span>
-              <span className="flex items-center gap-0.5">
-                <svg width="8" height="8" viewBox="0 0 32 32" fill="none"><circle cx="16" cy="16" r="16" fill="#2775CA"/><path d="M20.5 18.2c0-2.1-1.3-2.8-3.8-3.1-1.8-.3-2.2-.7-2.2-1.5s.7-1.3 1.8-1.3c1 0 1.6.4 1.9 1.1.1.1.2.2.3.2h.7c.2 0 .3-.1.3-.3-.3-1-1-1.8-2.1-2v-1.2c0-.2-.1-.3-.3-.3h-.6c-.2 0-.3.1-.3.3v1.2c-1.5.2-2.5 1.2-2.5 2.4 0 2 1.2 2.7 3.7 3 1.7.3 2.3.8 2.3 1.6 0 1-.8 1.6-2 1.6-1.5 0-2-.6-2.2-1.4 0-.1-.2-.2-.3-.2h-.7c-.2 0-.3.1-.3.3.3 1.2 1 2 2.5 2.3v1.2c0 .2.1.3.3.3h.6c.2 0 .3-.1.3-.3v-1.2c1.6-.2 2.6-1.3 2.6-2.6z" fill="#fff"/></svg>
-                <span className="text-[7px] text-white" style={OUTFIT}>0.4</span>
-              </span>
-            </div>
-            <div
-              className="flex items-center gap-1.5 px-2 py-1 rounded-lg"
-              style={{ background: "rgba(153,69,255,0.06)" }}
-            >
-              <Users size={9} style={{ color: "#9945FF" }} />
-              <span className="text-[8px] barlowcondensedBold tracking-wide text-white flex-1">
-                Fantasy 11
-              </span>
-              <span className="flex items-center gap-0.5">
-                <svg width="8" height="8" viewBox="0 0 32 32" fill="none"><circle cx="16" cy="16" r="16" fill="#2775CA"/><path d="M20.5 18.2c0-2.1-1.3-2.8-3.8-3.1-1.8-.3-2.2-.7-2.2-1.5s.7-1.3 1.8-1.3c1 0 1.6.4 1.9 1.1.1.1.2.2.3.2h.7c.2 0 .3-.1.3-.3-.3-1-1-1.8-2.1-2v-1.2c0-.2-.1-.3-.3-.3h-.6c-.2 0-.3.1-.3.3v1.2c-1.5.2-2.5 1.2-2.5 2.4 0 2 1.2 2.7 3.7 3 1.7.3 2.3.8 2.3 1.6 0 1-.8 1.6-2 1.6-1.5 0-2-.6-2.2-1.4 0-.1-.2-.2-.3-.2h-.7c-.2 0-.3.1-.3.3.3 1.2 1 2 2.5 2.3v1.2c0 .2.1.3.3.3h.6c.2 0 .3-.1.3-.3v-1.2c1.6-.2 2.6-1.3 2.6-2.6z" fill="#fff"/></svg>
-                <span className="text-[7px] text-white" style={OUTFIT}>0.4</span>
-              </span>
-            </div>
-            <div
-              className="flex items-center gap-1.5 px-2 py-1 rounded-lg"
-              style={{ background: "rgba(248,60,197,0.06)" }}
-            >
-              <Volume2 size={9} style={{ color: "#f83cc5" }} />
-              <span className="text-[8px] barlowcondensedBold tracking-wide text-white flex-1">
-                Crowd is Wrong
-              </span>
-              <span className="flex items-center gap-0.5">
-                <svg width="8" height="8" viewBox="0 0 32 32" fill="none"><circle cx="16" cy="16" r="16" fill="#2775CA"/><path d="M20.5 18.2c0-2.1-1.3-2.8-3.8-3.1-1.8-.3-2.2-.7-2.2-1.5s.7-1.3 1.8-1.3c1 0 1.6.4 1.9 1.1.1.1.2.2.3.2h.7c.2 0 .3-.1.3-.3-.3-1-1-1.8-2.1-2v-1.2c0-.2-.1-.3-.3-.3h-.6c-.2 0-.3.1-.3.3v1.2c-1.5.2-2.5 1.2-2.5 2.4 0 2 1.2 2.7 3.7 3 1.7.3 2.3.8 2.3 1.6 0 1-.8 1.6-2 1.6-1.5 0-2-.6-2.2-1.4 0-.1-.2-.2-.3-.2h-.7c-.2 0-.3.1-.3.3.3 1.2 1 2 2.5 2.3v1.2c0 .2.1.3.3.3h.6c.2 0 .3-.1.3-.3v-1.2c1.6-.2 2.6-1.3 2.6-2.6z" fill="#fff"/></svg>
-                <span className="text-[7px] text-white" style={OUTFIT}>0.4</span>
-              </span>
-            </div>
-          </div>
-        )}
+        {/* Game modes — driven by real pools */}
+        <MatchGameSection
+          matchId={match.id}
+          isCompleted={isCompleted}
+          onPoolPress={onPoolPress}
+          partnerSource={partnerSource}
+        />
       </div>
     </div>
   );
@@ -270,7 +320,7 @@ function MatchCard({ match }: { match: ITDMatch }) {
 
 /* ── Day column ── */
 
-function DayColumn({ day, index }: { day: IMatchDay; index: number }) {
+function DayColumn({ day, index, onPoolPress, partnerSource }: { day: IMatchDay; index: number; onPoolPress?: (pool: ITDPool) => void; partnerSource?: string }) {
   const hasToday = day.label === "TODAY";
   const hasLive = day.matches.some((m) => m.status === MATCH_STATUS.LIVE);
   const allCompleted = day.matches.every((m) => m.status === MATCH_STATUS.COMPLETED);
@@ -312,7 +362,7 @@ function DayColumn({ day, index }: { day: IMatchDay; index: number }) {
 
       {/* Match cards for the day */}
       {day.matches.map((match) => (
-        <MatchCard key={match.id} match={match} />
+        <MatchCard key={match.id} match={match} onPoolPress={onPoolPress} partnerSource={partnerSource} />
       ))}
     </motion.div>
   );
@@ -322,9 +372,13 @@ function DayColumn({ day, index }: { day: IMatchDay; index: number }) {
 
 interface MatchCalendarProps {
   tournamentId?: number;
+  /** Called when user taps a pool pill. Pass poolId + matchId to open the popup. */
+  onPoolPress?: (pool: ITDPool) => void;
+  /** Filter pools to a specific partner source (e.g. "iamgame") */
+  partnerSource?: string;
 }
 
-export function MatchCalendar({ tournamentId }: MatchCalendarProps) {
+export function MatchCalendar({ tournamentId, onPoolPress, partnerSource }: MatchCalendarProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
   const { matches, isLoading, error } = useTDMatches({
     tournamentId,
@@ -428,7 +482,7 @@ export function MatchCalendar({ tournamentId }: MatchCalendarProps) {
         style={{ scrollSnapType: "x mandatory", WebkitOverflowScrolling: "touch" }}
       >
         {days.map((day, i) => (
-          <DayColumn key={day.dateKey} day={day} index={i} />
+          <DayColumn key={day.dateKey} day={day} index={i} onPoolPress={onPoolPress} partnerSource={partnerSource} />
         ))}
       </div>
     </div>

package/src/pools/actions.ts

@@ -0,0 +1,19 @@
+// @devrongx/games — pools/actions.ts
+// Imperative API actions for pool participation.
+
+import { joinTDPoolApi, placeTDBetsApi } from "./fetcher";
+import type { ITDBetInput } from "./types";
+
+// Join a pool. For partner_payout pools, TD verifies the pass with IAG server-to-server.
+// The frontend doesn't need to know the difference.
+export async function joinTDPool(poolId: number): Promise<{ id: number }> {
+  return joinTDPoolApi(poolId);
+}
+
+// Place individual bets. v1: parlay slots are cosmetic only; send individual bets here.
+export async function placeTDBets(
+  poolId: number,
+  bets: ITDBetInput[],
+): Promise<void> {
+  return placeTDBetsApi(poolId, bets);
+}

package/src/pools/fetcher.ts

@@ -0,0 +1,90 @@
+// @devrongx/games — pools/fetcher.ts
+// Fetch functions for pool endpoints.
+// Reads config (baseURL, getToken) from the same Zustand store as matches/fetcher.ts.
+
+import { useTDClientStore } from "../matches/store";
+import type {
+  ITDPool,
+  ITDPoolDetail,
+  ITDMyEntryResponse,
+  ITDLeaderboardResponse,
+  ITDBetInput,
+} from "./types";
+
+// Shared fetch helper — adds auth header if token exists
+async function tdFetch<T>(path: string, init?: RequestInit): Promise<T> {
+  const { baseURL, getToken } = useTDClientStore.getState();
+  const url = `${baseURL}${path}`;
+  const token = getToken();
+  const headers: Record<string, string> = {
+    Accept: "application/json",
+    "Content-Type": "application/json",
+    ...(init?.headers as Record<string, string>),
+  };
+  if (token) headers["Authorization"] = `Bearer ${token}`;
+
+  const res = await fetch(url, { ...init, headers });
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({}));
+    throw new Error(
+      (body as { error?: { message?: string } }).error?.message ??
+        `TD API error: ${res.status} ${res.statusText}`,
+    );
+  }
+  return res.json() as Promise<T>;
+}
+
+// GET /api/pools/match/:matchId?partner_source=...
+export async function fetchTDPools(
+  matchId: number,
+  partnerSource?: string,
+): Promise<ITDPool[]> {
+  const qs = partnerSource ? `?partner_source=${encodeURIComponent(partnerSource)}` : "";
+  return tdFetch<ITDPool[]>(`/api/pools/match/${matchId}${qs}`);
+}
+
+// GET /api/pools/:id
+export async function fetchTDPoolDetail(poolId: number): Promise<ITDPoolDetail> {
+  return tdFetch<ITDPoolDetail>(`/api/pools/${poolId}`);
+}
+
+// GET /api/pools/:id/leaderboard
+export async function fetchTDLeaderboard(
+  poolId: number,
+  params?: { sort?: string; order?: string; limit?: number; offset?: number },
+): Promise<ITDLeaderboardResponse> {
+  const url = new URL(`/api/pools/${poolId}/leaderboard`, "http://placeholder");
+  if (params) {
+    for (const [k, v] of Object.entries(params)) {
+      if (v !== undefined) url.searchParams.set(k, String(v));
+    }
+  }
+  return tdFetch<ITDLeaderboardResponse>(`/api/pools/${poolId}/leaderboard${url.search}`);
+}
+
+// GET /api/pools/:id/my-entry
+export async function fetchTDMyEntry(poolId: number): Promise<ITDMyEntryResponse | null> {
+  try {
+    return await tdFetch<ITDMyEntryResponse>(`/api/pools/${poolId}/my-entry`);
+  } catch (err: unknown) {
+    // 404 means no entry yet — return null
+    if (err instanceof Error && err.message.includes("404")) return null;
+    throw err;
+  }
+}
+
+// POST /api/pools/:id/join
+export async function joinTDPoolApi(poolId: number): Promise<{ id: number }> {
+  return tdFetch<{ id: number }>(`/api/pools/${poolId}/join`, { method: "POST", body: "{}" });
+}
+
+// POST /api/pools/:id/bets
+export async function placeTDBetsApi(
+  poolId: number,
+  bets: ITDBetInput[],
+): Promise<void> {
+  await tdFetch<unknown>(`/api/pools/${poolId}/bets`, {
+    method: "POST",
+    body: JSON.stringify({ bets }),
+  });
+}