@devrongx/games 0.3.4 → 0.4.0

package/src/matches/MatchCalendar.tsx

@@ -3,8 +3,10 @@
 
 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 type { ITDMatch } from "./types";
 
 // TD match status enum values
@@ -101,9 +103,90 @@ function groupByDate(matches: ITDMatch[]): IMatchDay[] {
     }));
 }
 
+/* ── Pool pills for a match ── */
+
+const GAME_TYPE_STYLE: Record<string, { icon: typeof Target; color: string; bg: string }> = {
+  pre_match_bets: { icon: Target, color: "#22E3E8", bg: "rgba(34,227,232,0.06)" },
+  fantasy_11: { icon: Users, color: "#9945FF", bg: "rgba(153,69,255,0.06)" },
+};
+
+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 === "closed" || pool.status === "resolving" || pool.status === "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
+  const grouped: Record<string, ITDPool[]> = {};
+  for (const p of pools) {
+    (grouped[p.game_type] ??= []).push(p);
+  }
+
+  const gameTypes = Object.keys(grouped).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">
+                {gt === "pre_match_bets" ? "Pre-Match Bets" : gt === "fantasy_11" ? "Fantasy 11" : gt}
+              </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 +302,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 +316,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 +358,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 +368,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 +478,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 }),
+  });
+}

package/src/pools/hooks.ts

@@ -0,0 +1,173 @@
+// @devrongx/games — pools/hooks.ts
+"use client";
+
+import { useState, useEffect, useCallback, useRef } from "react";
+import {
+  fetchTDPools,
+  fetchTDPoolDetail,
+  fetchTDLeaderboard,
+  fetchTDMyEntry,
+} from "./fetcher";
+import type {
+  ITDPool,
+  ITDPoolDetail,
+  ITDMyEntryResponse,
+  ITDLeaderboardResponse,
+  ITDLeaderboardEntry,
+} from "./types";
+
+// ─── useTDPools ────────────────────────────────────────────────────────────────
+
+export interface UseTDPoolsResult {
+  pools: ITDPool[];
+  loading: boolean;
+  error: string | null;
+  refetch: () => void;
+}
+
+export function useTDPools(matchId: number, partnerSource?: string): UseTDPoolsResult {
+  const [pools, setPools] = useState<ITDPool[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await fetchTDPools(matchId, partnerSource);
+      setPools(data);
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "Failed to fetch pools");
+    } finally {
+      setLoading(false);
+    }
+  }, [matchId, partnerSource]);
+
+  useEffect(() => { load(); }, [load]);
+
+  return { pools, loading, error, refetch: load };
+}
+
+// ─── useTDPool ─────────────────────────────────────────────────────────────────
+
+export interface UseTDPoolResult {
+  pool: ITDPoolDetail | null;
+  loading: boolean;
+  error: string | null;
+  refetch: () => void;
+}
+
+export function useTDPool(poolId: number): UseTDPoolResult {
+  const [pool, setPool] = useState<ITDPoolDetail | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await fetchTDPoolDetail(poolId);
+      setPool(data);
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "Failed to fetch pool");
+    } finally {
+      setLoading(false);
+    }
+  }, [poolId]);
+
+  useEffect(() => { load(); }, [load]);
+
+  return { pool, loading, error, refetch: load };
+}
+
+// ─── useTDPoolEntry ─────────────────────────────────────────────────────────────
+
+export interface UseTDPoolEntryResult {
+  data: ITDMyEntryResponse | null;
+  loading: boolean;
+  error: string | null;
+  refetch: () => void;
+}
+
+export function useTDPoolEntry(poolId: number): UseTDPoolEntryResult {
+  const [data, setData] = useState<ITDMyEntryResponse | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetchTDMyEntry(poolId);
+      setData(res);
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "Failed to fetch entry");
+    } finally {
+      setLoading(false);
+    }
+  }, [poolId]);
+
+  useEffect(() => { load(); }, [load]);
+
+  return { data, loading, error, refetch: load };
+}
+
+// ─── useTDLeaderboard ──────────────────────────────────────────────────────────
+
+export interface UseTDLeaderboardOptions {
+  sort?: string;
+  order?: string;
+  limit?: number;
+  offset?: number;
+  pollMs?: number;   // Polling interval in ms (0 = disabled)
+}
+
+export interface UseTDLeaderboardResult {
+  rankings: ITDLeaderboardEntry[];
+  total: number;
+  loading: boolean;
+  error: string | null;
+  refetch: () => void;
+}
+
+export function useTDLeaderboard(
+  poolId: number,
+  options?: UseTDLeaderboardOptions,
+): UseTDLeaderboardResult {
+  const [result, setResult] = useState<ITDLeaderboardResponse | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const { sort, order, limit, offset, pollMs } = options ?? {};
+
+  const load = useCallback(async () => {
+    setError(null);
+    try {
+      const data = await fetchTDLeaderboard(poolId, { sort, order, limit, offset });
+      setResult(data);
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "Failed to fetch leaderboard");
+    } finally {
+      setLoading(false);
+    }
+  }, [poolId, sort, order, limit, offset]);
+
+  useEffect(() => {
+    setLoading(true);
+    load();
+
+    if (pollMs && pollMs > 0) {
+      pollRef.current = setInterval(load, pollMs);
+      return () => { if (pollRef.current) clearInterval(pollRef.current); };
+    }
+  }, [load, pollMs]);
+
+  return {
+    rankings: result?.leaderboard ?? [],
+    total: result?.total_entries ?? 0,
+    loading,
+    error,
+    refetch: load,
+  };
+}

package/src/pools/index.ts

@@ -0,0 +1,44 @@
+// @devrongx/games — pools/index.ts
+export type {
+  ITDCurrency,
+  ITDPool,
+  ITDPoolDetail,
+  ITDPMBConfig,
+  ITDPoolContentConfig,
+  ITDChallenge,
+  ITDChallengeOption,
+  ITDPayoutTier,
+  ITDLeaderboardEntry,
+  ITDLeaderboardResponse,
+  ITDPoolEntryRecord,
+  ITDPoolBet,
+  ITDPoolParlay,
+  ITDMyEntryResponse,
+  ITDBetInput,
+} from "./types";
+
+export {
+  fetchTDPools,
+  fetchTDPoolDetail,
+  fetchTDLeaderboard,
+  fetchTDMyEntry,
+} from "./fetcher";
+
+export {
+  useTDPools,
+  useTDPool,
+  useTDPoolEntry,
+  useTDLeaderboard,
+} from "./hooks";
+
+export type {
+  UseTDPoolsResult,
+  UseTDPoolResult,
+  UseTDPoolEntryResult,
+  UseTDLeaderboardResult,
+  UseTDLeaderboardOptions,
+} from "./hooks";
+
+export { joinTDPool, placeTDBets } from "./actions";
+
+export { buildPMBConfig } from "./mapper";

package/src/pools/mapper.ts

@@ -0,0 +1,85 @@
+// @devrongx/games — pools/mapper.ts
+// Converts ITDPoolDetail + ITDMatch → IChallengeConfig for the PMB UI.
+// This lets all existing PreMatchGame/Questions/Intro components consume real API data.
+
+import type { IChallengeConfig, IChallengeMarket, IChallengeSection } from "../games/prematch-bets/config";
+import type { ITDPoolDetail, ITDPMBConfig } from "./types";
+import type { ITDMatch } from "../matches/types";
+
+const DEFAULT_PARLAY_COLORS = ["#22E3E8", "#9945FF", "#f83cc5", "#f59e0b", "#22c55e", "#f97316"];
+const DEFAULT_BANNER = "/ipl/default_banner.jpg";
+const DEFAULT_PLAYER_IMAGES: [string, string] = ["/ipl/player1.jpg", "/ipl/player2.jpg"];
+
+function buildTeam(team: ITDMatch["team_a"]) {
+  return {
+    name: team.name,
+    shortName: team.short_name || team.name.slice(0, 3).toUpperCase(),
+    logo: `/ipl/${team.short_name?.toLowerCase() ?? "team"}.png`,
+    gradient: "linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 100%)",
+  };
+}
+
+export function buildPMBConfig(pool: ITDPoolDetail, match: ITDMatch): IChallengeConfig {
+  const config = pool.config as ITDPMBConfig;
+  const contentConfig = pool.content_config;
+
+  const markets: IChallengeMarket[] = pool.challenges
+    .sort((a, b) => a.sort_order - b.sort_order)
+    .map((c) => ({
+      id: c.category,
+      question: c.question,
+      icon: c.icon,
+      accent: c.accent_color,
+      category: c.category,
+      backendChallengeId: c.id,
+      options: c.options.map((o) => ({
+        label: o.label,
+        odds: o.odds,
+        entry: o.entry,
+        risk: o.risk,
+      })),
+    }));
+
+  const sections: IChallengeSection[] = (contentConfig?.sections ?? []).map((s) => ({
+    type: s.type as "info" | "challenge",
+    title: s.title,
+    content: s.content,
+  }));
+
+  return {
+    id: pool.machine_name ?? String(pool.id),
+    title: pool.name,
+    matchTitle: `${match.team_a.short_name ?? match.team_a.name} vs ${match.team_b.short_name ?? match.team_b.name}`,
+    tag: "STRATEGY",
+    teamA: buildTeam(match.team_a),
+    teamB: buildTeam(match.team_b),
+    venue: match.venue?.name ?? "",
+    bannerImage: contentConfig?.banner_image ?? DEFAULT_BANNER,
+    playerImages: (contentConfig?.player_images as [string, string] | undefined) ?? DEFAULT_PLAYER_IMAGES,
+    opponents: [buildTeam(match.team_a), buildTeam(match.team_b)],
+    matchStartTime: match.scheduled_start_at ?? "",
+    startingBalance: pool.starting_coins,
+    entryFee: pool.entry_fee,
+    totalEntries: pool.entry_count,
+    rakePercent: pool.rake_percentage / 100,
+    rankBrackets: (config.payout_tiers ?? []).map((t) => ({
+      from: t.rank_from,
+      to: t.rank_to,
+      poolPercent: t.payout_type === "percentage" ? t.value / 100 : 0,
+    })),
+    leaderboardSeed: `pool-${pool.id}`,
+    compoundMultipliers: config.compound_multipliers ?? [],
+    parlayConfig: {
+      maxSlots: config.parlay?.max_slots ?? 6,
+      minLegs: config.parlay?.min_legs ?? 2,
+      maxLegs: config.parlay?.max_legs ?? 14,
+      defaultStake: config.parlay?.default_stake ?? 100,
+      stakeIncrements: config.parlay?.stake_increments ?? 50,
+      colors: contentConfig?.colors?.parlay_slot_colors ?? DEFAULT_PARLAY_COLORS,
+    },
+    categoryLabels: config.category_labels ?? {},
+    games: [],
+    markets,
+    sections,
+  };
+}