@devrongx/games 0.4.5 → 0.4.7

package/package.json

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

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

@@ -1,7 +1,7 @@
 // @devrongx/games — games/prematch-bets/PreMatchBetsPopup.tsx
 "use client";
 
-import { useState, useCallback, useMemo } from "react";
+import { useState, useCallback, useMemo, useEffect, useRef } from "react";
 import { Loader2 } from "lucide-react";
 import { useGamePopupStore } from "../../core/gamePopupStore";
 import {
@@ -24,6 +24,7 @@ import { useTDPool, useTDPoolEntry, useTDLeaderboard } from "../../pools/hooks";
 import { buildPMBConfig } from "../../pools/mapper";
 import type { ITDMatch } from "../../matches/types";
 import { joinTDPool, placeTDBets } from "../../pools/actions";
+import { saveTDDraftBetsApi } from "../../pools/fetcher";
 import type { ITDLeaderboardEntry } from "../../pools/types";
 import { TDPoolStatus } from "../../pools/types";
 import { calcRankPayout } from "./config";
@@ -122,6 +123,60 @@ export const PreMatchBetsPopup = ({ poolId, matchId: _matchId, match: matchProp
   const [submitting, setSubmitting] = useState(false);
   const [submitError, setSubmitError] = useState<string | null>(null);
 
+  // ── Draft restore: when entry + config load, seed bets from draft_selections ─
+  const draftRestoredRef = useRef(false);
+  useEffect(() => {
+    if (!poolId || !config || !entryData || draftRestoredRef.current) return;
+    const draft = entryData.entry.draft_selections;
+    if (!draft || draft.length === 0) return;
+    if (entryData.bets.length > 0) return; // real bets already placed — don't overwrite
+    const restored: IUserBets = {};
+    for (const d of draft) {
+      const mIdx = config.markets.findIndex((m) => m.backendChallengeId === d.challenge_id);
+      if (mIdx < 0) continue;
+      const optionIdx = config.markets[mIdx].options.findIndex(
+        (o) => o.label.toLowerCase().replace(/\s+/g, "_") === d.selected_option,
+      );
+      if (optionIdx < 0) continue;
+      restored[mIdx] = { optionIdx, amount: d.coin_amount, parlaySlot: null };
+    }
+    if (Object.keys(restored).length > 0) {
+      setBets(restored);
+      setUserFlowState("game");
+    }
+    draftRestoredRef.current = true;
+  }, [poolId, config, entryData]);
+
+  // ── Debounced draft save: persists bets to backend 1s after last change ───
+  const saveDraftTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(() => {
+    if (!poolId || Object.keys(bets).length === 0 || !config) return;
+    if (saveDraftTimerRef.current) clearTimeout(saveDraftTimerRef.current);
+    saveDraftTimerRef.current = setTimeout(async () => {
+      try {
+        const selections = config.markets
+          .map((m, mIdx) => {
+            const b = bets[mIdx];
+            if (!b || !m.backendChallengeId) return null;
+            const option = m.options[b.optionIdx];
+            if (!option) return null;
+            return {
+              challenge_id: m.backendChallengeId,
+              selected_option: option.label.toLowerCase().replace(/\s+/g, "_"),
+              coin_amount: b.amount,
+            };
+          })
+          .filter((b): b is NonNullable<typeof b> => b !== null);
+        if (selections.length > 0) {
+          await saveTDDraftBetsApi(poolId, selections);
+        }
+      } catch {
+        // Silent — draft save is best-effort
+      }
+    }, 1000);
+    return () => { if (saveDraftTimerRef.current) clearTimeout(saveDraftTimerRef.current); };
+  }, [bets, poolId, config]);
+
   const betSummary = useMemo(
     () => config ? calcBetSummary(bets, config) : { selectedCount: 0, compoundMultiplier: 0, totalEntry: 0, baseReward: 0, compoundedReward: 0, remainingBalance: 0, riskPercent: 0, potentialBalance: 0 },
     [bets, config],
@@ -152,6 +207,7 @@ export const PreMatchBetsPopup = ({ poolId, matchId: _matchId, match: matchProp
       pickers[Number(mIdxStr)] = entry.optionIdx;
     }
     setExpandedPicker(pickers);
+    setUserFlowState("game");
   }, []);
 
   const handleOptionClick = useCallback((mIdx: number, oIdx: number) => {
@@ -268,7 +324,7 @@ export const PreMatchBetsPopup = ({ poolId, matchId: _matchId, match: matchProp
       )}
 
       {activeView === "intro" && (
-        <PreMatchIntro config={config} />
+        <PreMatchIntro config={config} onComplete={() => setUserFlowState("questions")} />
       )}
 
       {activeView === "questions" && (

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

@@ -1,16 +1,13 @@
 // @devrongx/games — games/prematch-bets/PreMatchIntro.tsx
 "use client";
 
-import { useState, useEffect, useCallback, useRef } from "react";
+import { useState, useEffect, useCallback, useRef, useMemo } from "react";
 import Image from "next/image";
 import { motion, AnimatePresence } from "framer-motion";
-import { Coins, Trophy, Play, Pause, Rewind, FastForward, RotateCcw } from "lucide-react";
-import { useGamePopupStore } from "../../core/gamePopupStore";
+import { Coins, Trophy, Pause, Rewind, FastForward, RotateCcw } from "lucide-react";
 import { IChallengeConfig } from "./config";
 
 const OUTFIT = { fontFamily: "Outfit, sans-serif" };
-const TOTAL_SLIDES = 6;
-const SLIDE_DURATIONS = [5500, 5000, 5500, 7000, 5500, 5500];
 
 // Countdown hook for match start
 const useCountdown = (targetIso: string) => {
@@ -34,8 +31,8 @@ const useCountdown = (targetIso: string) => {
     return text;
 };
 
-// Slide props — all slides receive config
-interface SlideProps { config: IChallengeConfig }
+// Slide props — all slides receive config + onComplete
+interface SlideProps { config: IChallengeConfig; onComplete: () => void }
 
 // ── Slide 0: Logo reveal + match info + countdown ──
 const LogoSlide = ({ config }: SlideProps) => {
@@ -61,7 +58,7 @@ const LogoSlide = ({ config }: SlideProps) => {
         >
             <svg width="44" height="44" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <g clipPath="url(#clip_intro_logo)">
-                    <path d="M14.0024 12.5249C19.1884 12.5249 22.4314 13.6319 23.4234 14.4939C20.9354 15.1919 17.6354 15.6219 14.0024 15.6219C10.3694 15.6219 7.06937 15.1919 4.58137 14.4939C5.57337 13.6319 8.81637 12.5249 14.0024 12.5249ZM20.0574 3.43286C20.1079 3.17257 20.2598 2.94303 20.4796 2.79469C20.6994 2.64636 20.9691 2.59139 21.2294 2.64186L25.1564 3.40586C25.4125 3.46068 25.6368 3.61378 25.7813 3.83225C25.9257 4.05073 25.9786 4.31714 25.9287 4.57424C25.8788 4.83134 25.7301 5.0586 25.5144 5.20719C25.2987 5.35577 25.0334 5.41382 24.7754 5.36886L24.0024 5.21886V6.75386C23.3684 6.56786 22.7024 6.40086 22.0024 6.25686V4.82986L20.8484 4.60586C20.588 4.55506 20.3584 4.40298 20.2101 4.18304C20.0618 3.9631 20.0069 3.69328 20.0574 3.43286ZM11.0024 3.00586C11.0024 2.74064 11.1077 2.48629 11.2953 2.29875C11.4828 2.11122 11.7371 2.00586 12.0024 2.00586H16.0024C16.2676 2.00586 16.5219 2.11122 16.7095 2.29875C16.897 2.48629 17.0024 2.74064 17.0024 3.00586C17.0024 3.27108 16.897 3.52543 16.7095 3.71297C16.5219 3.9005 16.2676 4.00586 16.0024 4.00586H15.0024V5.52186C14.3358 5.50186 13.6689 5.50186 13.0024 5.52186V4.00586H12.0024C11.7371 4.00586 11.4828 3.9005 11.2953 3.71297C11.1077 3.52543 11.0024 3.27108 11.0024 3.00586ZM2.05737 4.57886C2.00687 4.31843 2.06182 4.04862 2.21014 3.82868C2.35845 3.60874 2.588 3.45666 2.84837 3.40586L6.77537 2.64186C6.90432 2.61684 7.03695 2.61747 7.16566 2.64371C7.29438 2.66995 7.41666 2.72128 7.52554 2.79478C7.63442 2.86827 7.72775 2.9625 7.80021 3.07207C7.87268 3.18163 7.92285 3.3044 7.94787 3.43336C7.97288 3.56232 7.97225 3.69494 7.94602 3.82366C7.91978 3.95237 7.86845 4.07466 7.79495 4.18353C7.72145 4.29241 7.62723 4.38575 7.51766 4.45821C7.40809 4.53067 7.28532 4.58084 7.15637 4.60586L6.00237 4.82986V6.25686C5.30237 6.39986 4.63637 6.56786 4.00237 6.75386V5.21886L3.23037 5.36886C3.10147 5.39401 2.96889 5.39352 2.84018 5.36743C2.71148 5.34134 2.58917 5.29016 2.48025 5.2168C2.37133 5.14344 2.27792 5.04935 2.20536 4.93989C2.1328 4.83043 2.08251 4.70775 2.05737 4.57886Z" fill="url(#paint0_intro_logo)" />
+                    <path d="M14.0024 12.5249C19.1884 12.5249 22.4314 13.6319 23.4234 14.4939C20.9354 15.1919 17.6354 15.6219 14.0024 15.6219C10.3694 15.6219 7.06937 15.1919 4.58137 14.4939C5.57337 13.6319 8.81637 12.5249 14.0024 12.5249ZM20.0574 3.43286C20.1079 3.17257 20.2598 2.94303 20.4796 2.79469C20.6994 2.64636 20.9691 2.59139 21.2294 2.64186L25.1564 3.40586C25.4125 3.46068 25.6368 3.61378 25.7813 3.83225C25.9257 4.05073 25.9786 4.31714 25.9287 4.57424C25.8788 4.83134 25.7301 5.0586 25.5144 5.20719C25.2987 5.35577 25.0334 5.41382 24.7754 5.36886L24.0024 5.21886V6.75386C23.3684 6.56786 22.7024 6.40086 22.0024 6.25686V4.82986L20.8484 4.60586C20.588 4.55506 20.3584 4.40298 20.2101 4.18304C20.0618 3.9631 20.0069 3.69328 20.0574 3.43286ZM11.0024 3.00586C11.0024 2.74064 11.1077 2.48629 11.2953 2.29875C11.4828 2.11122 11.7371 2.00586 12.0024 2.00586H16.0024C16.2676 2.00586 16.5219 2.11122 16.7095 2.29875C16.897 2.48629 17.0024 2.74064 17.0024 3.00586C17.0024 3.27108 16.897 3.52543 16.7095 3.71297C16.5219 3.9005 16.2676 4.00586 16.0024 4.00586H15.0024V5.52186C14.3358 5.50186 13.6689 5.50186 13.0024 5.52186V4.00586H12.0024C11.7371 4.00586 11.4828 3.9005 11.2953 3.71297C11.1077 3.52543 11.0024 3.27108 11.0024 3.00586ZM2.05737 4.57886C2.00687 4.31843 2.06182 4.04862 2.21014 3.82868C2.35845 3.60874 2.588 3.45666 2.84837 3.40586L6.77537 2.64186C6.90432 2.61684 7.03695 2.61747 7.16566 2.64371C7.29438 2.66995 7.41666 2.72128 7.52554 2.79478C7.63442 2.86827 7.72775 2.9625 7.80021 3.07207C7.92285 3.18163 7.92285 3.3044 7.94787 3.43336C7.97288 3.56232 7.97225 3.69494 7.94602 3.82366C7.91978 3.95237 7.86845 4.07466 7.79495 4.18353C7.72145 4.29241 7.62723 4.38575 7.51766 4.45821C7.40809 4.53067 7.28532 4.58084 7.15637 4.60586L6.00237 4.82986V6.25686C5.30237 6.39986 4.63637 6.56786 4.00237 6.75386V5.21886L3.23037 5.36886C3.10147 5.39401 2.96889 5.39352 2.84018 5.36743C2.71148 5.34134 2.58917 5.29016 2.48025 5.2168C2.37133 5.14344 2.27792 5.04935 2.20536 4.93989C2.1328 4.83043 2.08251 4.70775 2.05737 4.57886Z" fill="url(#paint0_intro_logo)" />
                     <path d="M28 11.3139C28 12.3309 26.849 13.2629 24.934 13.9999C23.684 12.0439 18.821 11.0249 14 11.0249C9.179 11.0249 4.316 12.0439 3.066 13.9999C1.151 13.2629 0 12.3309 0 11.3139C0 8.93486 6.268 7.00586 14 7.00586C21.732 7.00586 28 8.93486 28 11.3139Z" fill="url(#paint1_intro_logo)" />
                     <path d="M14 17.122C8.484 17.122 2.667 16.126 0 13.998V21.699C0 23.761 4.712 25.482 11.001 25.905V21.006C11.001 20.7408 11.1064 20.4865 11.2939 20.2989C11.4814 20.1114 11.7358 20.006 12.001 20.006H16.002C16.2672 20.006 16.5216 20.1114 16.7091 20.2989C16.8966 20.4865 17.002 20.7408 17.002 21.006V25.904C23.29 25.481 28 23.76 28 21.699V13.998C25.333 16.126 19.516 17.122 14 17.122Z" fill="url(#paint2_intro_logo)" />
                 </g>
@@ -119,30 +116,11 @@ const LogoSlide = ({ config }: SlideProps) => {
                 {countdown}
             </span>
         </motion.div>
-        {/* Title — appears last, with cyan fill sweep */}
-        <motion.p
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.5, delay: 2.8 }}
-            className="text-[18px] font-bold tracking-wider uppercase mt-4"
-            style={{
-                ...OUTFIT,
-                background: "linear-gradient(90deg, #22E3E8 0%, #22E3E8 50%, rgba(255,255,255,0.35) 50.1%, rgba(255,255,255,0.35) 100%)",
-                backgroundSize: "200% 100%",
-                backgroundPosition: "100% 0",
-                WebkitBackgroundClip: "text",
-                WebkitTextFillColor: "transparent",
-                backgroundClip: "text",
-                animation: "textFillSweep 2s ease-out 3.3s forwards",
-            }}
-        >
-            {config.title}
-        </motion.p>
     </motion.div>
     );
 };
 
-// ── Slide 1: Buy in with a match pass ──
+// ── Slide 1: Buy in with a match pass (only shown when entryFee > 0) ──
 const EntrySlide = ({ config }: SlideProps) => (
     <motion.div
         className="flex flex-col items-center gap-4"
@@ -150,7 +128,6 @@ const EntrySlide = ({ config }: SlideProps) => (
         animate="animate"
         exit="exit"
     >
-        {/* Headline — appears first */}
         <motion.p
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
@@ -160,7 +137,6 @@ const EntrySlide = ({ config }: SlideProps) => (
         >
             Buy in with a match pass
         </motion.p>
-        {/* Price + USDC — appears after reading the headline */}
         <motion.div
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
@@ -170,7 +146,6 @@ const EntrySlide = ({ config }: SlideProps) => (
             <span className="text-[52px] font-bold text-white leading-none" style={OUTFIT}>${config.entryFee}</span>
             <Image src="/icons/ic_usdc_hd.png" alt="USDC" width={52} height={52} className="rounded-full" />
         </motion.div>
-        {/* Subtitle — appears last */}
         <motion.p
             initial={{ opacity: 0, y: 16 }}
             animate={{ opacity: 1, y: 0 }}
@@ -183,7 +158,7 @@ const EntrySlide = ({ config }: SlideProps) => (
     </motion.div>
 );
 
-// ── Slide 2: Get 1,000 points ──
+// ── Slide 2: Get prediction points ──
 const PointsSlide = ({ config }: SlideProps) => (
     <motion.div
         className="flex flex-col items-center"
@@ -191,7 +166,6 @@ const PointsSlide = ({ config }: SlideProps) => (
         animate="animate"
         exit="exit"
     >
-        {/* "You get" — appears first */}
         <motion.p
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
@@ -201,7 +175,6 @@ const PointsSlide = ({ config }: SlideProps) => (
         >
             You get
         </motion.p>
-        {/* Big number + logo — appears after "You get" is read */}
         <motion.div
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
@@ -222,7 +195,6 @@ const PointsSlide = ({ config }: SlideProps) => (
                 {config.startingBalance.toLocaleString()}
             </span>
         </motion.div>
-        {/* "prediction points" — appears after the number lands */}
         <motion.p
             initial={{ opacity: 0, y: 16 }}
             animate={{ opacity: 1, y: 0 }}
@@ -232,7 +204,6 @@ const PointsSlide = ({ config }: SlideProps) => (
         >
             prediction points to bet with
         </motion.p>
-        {/* Delayed tip — appears last */}
         <motion.p
             initial={{ opacity: 0, y: 10 }}
             animate={{ opacity: 1, y: 0 }}
@@ -251,8 +222,8 @@ const MarketsSlide = ({ config }: SlideProps) => {
 
     useEffect(() => {
         const timers = [
-            setTimeout(() => setDemoStep(1), 2800),  // option highlights — after card appears
-            setTimeout(() => setDemoStep(2), 4200),  // chip selected
+            setTimeout(() => setDemoStep(1), 2800),
+            setTimeout(() => setDemoStep(2), 4200),
         ];
         return () => timers.forEach(clearTimeout);
     }, []);
@@ -264,7 +235,6 @@ const MarketsSlide = ({ config }: SlideProps) => {
             animate="animate"
             exit="exit"
         >
-            {/* Headline — appears first */}
             <motion.p
                 initial={{ opacity: 0, y: 20 }}
                 animate={{ opacity: 1, y: 0 }}
@@ -275,7 +245,6 @@ const MarketsSlide = ({ config }: SlideProps) => {
                 {config.markets.length} markets to predict
             </motion.p>
 
-            {/* Floating market card — appears after headline is read */}
             <motion.div
                 initial={{ opacity: 0, y: 20 }}
                 animate={{ opacity: 1, y: 0 }}
@@ -286,28 +255,19 @@ const MarketsSlide = ({ config }: SlideProps) => {
                     border: "1px solid rgba(255,255,255,0.08)",
                 }}
             >
-                {/* Market question */}
                 <div className="flex items-center gap-2 mb-2.5">
                     <Coins size={14} className="text-[#22E3E8]/50 flex-shrink-0" />
                     <span className="text-[13px] text-white font-semibold" style={OUTFIT}>
                         Who wins the toss?
                     </span>
                 </div>
-                {/* Options */}
                 <div className="grid grid-cols-2 gap-2">
-                    {/* CSK option — gets selected */}
                     <div
                         className="flex items-center justify-between px-2.5 py-2 rounded-sm transition-all duration-500"
                         style={{
-                            background: demoStep >= 1
-                                ? "linear-gradient(135deg, #22E3E8, #9945FF)"
-                                : "transparent",
-                            borderLeft: demoStep >= 1
-                                ? "1px solid transparent"
-                                : "1px solid rgba(255,255,255,0.12)",
-                            borderBottom: demoStep >= 1
-                                ? "1px solid transparent"
-                                : "1px solid rgba(255,255,255,0.06)",
+                            background: demoStep >= 1 ? "linear-gradient(135deg, #22E3E8, #9945FF)" : "transparent",
+                            borderLeft: demoStep >= 1 ? "1px solid transparent" : "1px solid rgba(255,255,255,0.12)",
+                            borderBottom: demoStep >= 1 ? "1px solid transparent" : "1px solid rgba(255,255,255,0.06)",
                             borderTop: "1px solid transparent",
                             borderRight: "1px solid transparent",
                         }}
@@ -330,7 +290,6 @@ const MarketsSlide = ({ config }: SlideProps) => {
                             1.4x
                         </span>
                     </div>
-                    {/* RCB option — stays default */}
                     <div
                         className="flex items-center justify-between px-2.5 py-2 rounded-sm"
                         style={{
@@ -344,7 +303,6 @@ const MarketsSlide = ({ config }: SlideProps) => {
                         <span className="text-[10px] font-bold text-[#22E3E8]" style={OUTFIT}>1.4x</span>
                     </div>
                 </div>
-                {/* Amount picker — appears at step 2 */}
                 <AnimatePresence>
                     {demoStep >= 2 && (
                         <motion.div
@@ -369,15 +327,6 @@ const MarketsSlide = ({ config }: SlideProps) => {
                                         border: "1px solid rgba(34,227,232,0.2)",
                                     }}
                                 >
-                                    {amt === 100 && (
-                                        <div
-                                            className="absolute inset-0 pointer-events-none animate-shine"
-                                            style={{
-                                                background: "linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%)",
-                                                backgroundSize: "200% 100%",
-                                            }}
-                                        />
-                                    )}
                                     <Image src="/iamgame_square_logo.jpg" alt="" width={7} height={7} className="rounded-[1px] relative z-[1]" />
                                     <span
                                         className={`text-[9px] font-bold relative z-[1] ${amt === 100 ? "text-black" : "text-[#22E3E8]"}`}
@@ -392,7 +341,6 @@ const MarketsSlide = ({ config }: SlideProps) => {
                 </AnimatePresence>
             </motion.div>
 
-            {/* Subtitle — appears after demo plays */}
             <motion.p
                 initial={{ opacity: 0, y: 16 }}
                 animate={{ opacity: 1, y: 0 }}
@@ -414,7 +362,6 @@ const MultiplierSlide = ({ config }: SlideProps) => (
         animate="animate"
         exit="exit"
     >
-        {/* First line — appears immediately */}
         <motion.p
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
@@ -424,7 +371,6 @@ const MultiplierSlide = ({ config }: SlideProps) => (
         >
             Stack predictions.
         </motion.p>
-        {/* Second line — after first is read */}
         <motion.p
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
@@ -434,7 +380,6 @@ const MultiplierSlide = ({ config }: SlideProps) => (
         >
             Multiply your odds.
         </motion.p>
-        {/* Big number — the reveal moment */}
         <motion.div
             initial={{ opacity: 0, scale: 0.8 }}
             animate={{ opacity: 1, scale: 1 }}
@@ -453,7 +398,6 @@ const MultiplierSlide = ({ config }: SlideProps) => (
                 {config.compoundMultipliers[config.compoundMultipliers.length - 1]}x
             </span>
         </motion.div>
-        {/* Label — after number lands */}
         <motion.p
             initial={{ opacity: 0, y: 16 }}
             animate={{ opacity: 1, y: 0 }}
@@ -466,25 +410,33 @@ const MultiplierSlide = ({ config }: SlideProps) => (
     </motion.div>
 );
 
+// Free leaderboard payouts: ranks 1-10, $25 down to $2.5 in $2.5 steps
+const FREE_PAYOUTS = Array.from({ length: 10 }, (_, i) => ({
+    rank: i + 1,
+    usdc: 25 - i * 2.5,
+}));
+
 // ── Slide 5: Win USDC ──
-const WinSlide = ({ config: _config }: SlideProps) => {
-    const goTo = useGamePopupStore(s => s.goTo);
+const WinSlide = ({ config, onComplete }: SlideProps) => {
+    const isFree = config.entryFee === 0;
+
     return (
         <motion.div
-            className="flex flex-col items-center gap-4"
+            className="flex flex-col items-center gap-3 w-full max-w-[280px]"
             initial="initial"
             animate="animate"
             exit="exit"
         >
-            {/* Trophy — appears first */}
+            {/* Trophy */}
             <motion.div
                 initial={{ opacity: 0, y: 20 }}
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.5, delay: 0.2 }}
             >
-                <Trophy size={36} className="text-[#FFD700]" />
+                <Trophy size={32} className="text-[#FFD700]" />
             </motion.div>
-            {/* Headline — after trophy */}
+
+            {/* Headline */}
             <motion.p
                 initial={{ opacity: 0, y: 20 }}
                 animate={{ opacity: 1, y: 0 }}
@@ -494,34 +446,80 @@ const WinSlide = ({ config: _config }: SlideProps) => {
             >
                 Top the leaderboard.
             </motion.p>
-            {/* Win real USDC — after headline is read */}
-            <motion.div
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.6, delay: 1.8 }}
-                className="flex items-center gap-2"
-            >
-                <span className="text-[18px] text-white/70 font-medium" style={OUTFIT}>Win real</span>
-                <Image src="/icons/ic_usdc_hd.png" alt="USDC" width={22} height={22} className="rounded-full" />
-                <span className="text-[18px] text-[#2775CA] font-bold" style={OUTFIT}>USDC</span>
-            </motion.div>
-            {/* Tagline — after USDC line */}
-            <motion.p
-                initial={{ opacity: 0, y: 16 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: 2.8 }}
-                className="text-[13px] text-white/40 font-medium"
-                style={OUTFIT}
-            >
-                Take the money home.
-            </motion.p>
-            {/* CTA button — appears last */}
+
+            {isFree ? (
+                /* Free game: rank/reward table */
+                <motion.div
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.6, delay: 1.4 }}
+                    className="w-full rounded-xl overflow-hidden"
+                    style={{ border: "1px solid rgba(255,255,255,0.08)", background: "rgba(255,255,255,0.02)" }}
+                >
+                    {/* Table header */}
+                    <div className="flex items-center justify-between px-3 py-1.5" style={{ borderBottom: "1px solid rgba(255,255,255,0.06)", background: "rgba(255,255,255,0.03)" }}>
+                        <span className="text-[9px] font-bold text-white/50 uppercase tracking-widest" style={OUTFIT}>Rank</span>
+                        <div className="flex items-center gap-1">
+                            <Image src="/icons/ic_usdc_hd.png" alt="USDC" width={11} height={11} className="rounded-full" />
+                            <span className="text-[9px] font-bold text-white/50 uppercase tracking-widest" style={OUTFIT}>Reward</span>
+                        </div>
+                    </div>
+                    {/* Rows */}
+                    {FREE_PAYOUTS.map((row, idx) => (
+                        <motion.div
+                            key={row.rank}
+                            initial={{ opacity: 0, x: -8 }}
+                            animate={{ opacity: 1, x: 0 }}
+                            transition={{ delay: 1.6 + idx * 0.06, duration: 0.2 }}
+                            className="flex items-center justify-between px-3 py-1.5"
+                            style={{
+                                borderBottom: idx < FREE_PAYOUTS.length - 1 ? "1px solid rgba(255,255,255,0.04)" : "none",
+                                background: idx === 0 ? "rgba(255,215,0,0.04)" : idx < 3 ? "rgba(255,255,255,0.015)" : "transparent",
+                            }}
+                        >
+                            <div className="flex items-center gap-2">
+                                {idx === 0 && <span style={{ fontSize: 11 }}>🥇</span>}
+                                {idx === 1 && <span style={{ fontSize: 11 }}>🥈</span>}
+                                {idx === 2 && <span style={{ fontSize: 11 }}>🥉</span>}
+                                {idx >= 3 && (
+                                    <span className="text-[10px] text-white/40 font-semibold w-[14px] text-center" style={OUTFIT}>#{row.rank}</span>
+                                )}
+                                {idx < 3 && (
+                                    <span className="text-[10px] font-semibold" style={{ ...OUTFIT, color: idx === 0 ? "#FFD700" : idx === 1 ? "#C0C0C0" : "#CD7F32" }}>
+                                        #{row.rank}
+                                    </span>
+                                )}
+                            </div>
+                            <span
+                                className="text-[11px] font-bold"
+                                style={{ ...OUTFIT, color: idx === 0 ? "#FFD700" : idx < 3 ? "rgba(255,255,255,0.85)" : "rgba(255,255,255,0.6)" }}
+                            >
+                                ${row.usdc.toFixed(2)}
+                            </span>
+                        </motion.div>
+                    ))}
+                </motion.div>
+            ) : (
+                /* Paid game: "Win real USDC" */
+                <motion.div
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.6, delay: 1.8 }}
+                    className="flex items-center gap-2"
+                >
+                    <span className="text-[18px] text-white/70 font-medium" style={OUTFIT}>Win real</span>
+                    <Image src="/icons/ic_usdc_hd.png" alt="USDC" width={22} height={22} className="rounded-full" />
+                    <span className="text-[18px] text-[#2775CA] font-bold" style={OUTFIT}>USDC</span>
+                </motion.div>
+            )}
+
+            {/* CTA button */}
             <motion.button
                 initial={{ opacity: 0, y: 16 }}
                 animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: 3.5 }}
-                onClick={() => goTo("questions")}
-                className="mt-4 px-6 py-2.5 rounded-full cursor-pointer"
+                transition={{ duration: 0.5, delay: isFree ? 3.4 : 3.5 }}
+                onClick={onComplete}
+                className="mt-2 px-6 py-2.5 rounded-full cursor-pointer"
                 style={{ background: "linear-gradient(135deg, #22E3E8, #9945FF)" }}
             >
                 <span className="text-[14px] font-bold text-black" style={OUTFIT}>Build Your Bets</span>
@@ -531,30 +529,43 @@ const WinSlide = ({ config: _config }: SlideProps) => {
 };
 
 
-export const PreMatchIntro = ({ config }: { config: IChallengeConfig }) => {
-    const goTo = useGamePopupStore(s => s.goTo);
+export const PreMatchIntro = ({ config, onComplete }: { config: IChallengeConfig; onComplete: () => void }) => {
     const [slideIdx, setSlideIdx] = useState(0);
     const [direction, setDirection] = useState(1);
     const [paused, setPaused] = useState(false);
     const [slideFill, setSlideFill] = useState(0);
     const [finished, setFinished] = useState(false);
 
+    // Dynamic slide list — skip EntrySlide when entry fee is 0
+    const slides = useMemo(() => {
+        type SlideEntry = { component: React.ComponentType<SlideProps>; duration: number };
+        const all: SlideEntry[] = [
+            { component: LogoSlide,       duration: 5500 },
+            { component: EntrySlide,      duration: 5000 },
+            { component: PointsSlide,     duration: 5500 },
+            { component: MarketsSlide,    duration: 7000 },
+            { component: MultiplierSlide, duration: 5500 },
+            { component: WinSlide,        duration: 5500 },
+        ];
+        return config.entryFee === 0 ? all.filter((_, i) => i !== 1) : all;
+    }, [config.entryFee]);
+
+    const totalSlides = slides.length;
+
     // Refs for timing
     const slideStartRef = useRef(Date.now());
-    const pausedElapsedRef = useRef(0); // how much time had elapsed when paused
+    const pausedElapsedRef = useRef(0);
     const rafRef = useRef<number>(0);
     const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-    // Clear auto-advance timer
     const clearAutoTimer = useCallback(() => {
         if (timerRef.current) { clearTimeout(timerRef.current); timerRef.current = null; }
     }, []);
 
-    // Start auto-advance timer for remaining duration
     const startAutoTimer = useCallback((remainingMs: number) => {
         clearAutoTimer();
         timerRef.current = setTimeout(() => {
-            if (slideIdx < TOTAL_SLIDES - 1) {
+            if (slideIdx < totalSlides - 1) {
                 setDirection(1);
                 setSlideIdx(prev => prev + 1);
             } else {
@@ -562,23 +573,22 @@ export const PreMatchIntro = ({ config }: { config: IChallengeConfig }) => {
                 setPaused(true);
             }
         }, remainingMs);
-    }, [slideIdx, clearAutoTimer]);
+    }, [slideIdx, totalSlides, clearAutoTimer]);
 
-    // Progress fill RAF — respects paused state on slide change
     useEffect(() => {
         setSlideFill(0);
         pausedElapsedRef.current = 0;
         slideStartRef.current = Date.now();
 
-        if (paused) return; // stay paused at 0 fill on new slide
+        if (paused) return;
 
         const tick = () => {
             const elapsed = Date.now() - slideStartRef.current;
-            setSlideFill(Math.min(elapsed / SLIDE_DURATIONS[slideIdx], 1));
+            setSlideFill(Math.min(elapsed / slides[slideIdx].duration, 1));
             rafRef.current = requestAnimationFrame(tick);
         };
         rafRef.current = requestAnimationFrame(tick);
-        startAutoTimer(SLIDE_DURATIONS[slideIdx]);
+        startAutoTimer(slides[slideIdx].duration);
 
         return () => {
             cancelAnimationFrame(rafRef.current);
@@ -586,28 +596,25 @@ export const PreMatchIntro = ({ config }: { config: IChallengeConfig }) => {
         };
     }, [slideIdx]); // eslint-disable-line react-hooks/exhaustive-deps
 
-    // Handle pause/resume
     const togglePause = useCallback(() => {
         if (paused) {
-            // Resume: restart RAF and timer from where we left off
-            const remaining = SLIDE_DURATIONS[slideIdx] - pausedElapsedRef.current;
+            const remaining = slides[slideIdx].duration - pausedElapsedRef.current;
             slideStartRef.current = Date.now() - pausedElapsedRef.current;
             const tick = () => {
                 const elapsed = Date.now() - slideStartRef.current;
-                setSlideFill(Math.min(elapsed / SLIDE_DURATIONS[slideIdx], 1));
+                setSlideFill(Math.min(elapsed / slides[slideIdx].duration, 1));
                 rafRef.current = requestAnimationFrame(tick);
             };
             rafRef.current = requestAnimationFrame(tick);
             startAutoTimer(remaining);
             setPaused(false);
         } else {
-            // Pause: freeze everything
             cancelAnimationFrame(rafRef.current);
             clearAutoTimer();
             pausedElapsedRef.current = Date.now() - slideStartRef.current;
             setPaused(true);
         }
-    }, [paused, slideIdx, startAutoTimer, clearAutoTimer]);
+    }, [paused, slideIdx, slides, startAutoTimer, clearAutoTimer]);
 
     const replay = useCallback(() => {
         cancelAnimationFrame(rafRef.current);
@@ -621,14 +628,14 @@ export const PreMatchIntro = ({ config }: { config: IChallengeConfig }) => {
     const seekNext = useCallback(() => {
         cancelAnimationFrame(rafRef.current);
         clearAutoTimer();
-        if (slideIdx < TOTAL_SLIDES - 1) {
+        if (slideIdx < totalSlides - 1) {
             setFinished(false);
             setDirection(1);
             setSlideIdx(prev => prev + 1);
         } else {
-            goTo("questions");
+            onComplete();
         }
-    }, [slideIdx, goTo, clearAutoTimer]);
+    }, [slideIdx, totalSlides, onComplete, clearAutoTimer]);
 
     const seekBack = useCallback(() => {
         cancelAnimationFrame(rafRef.current);
@@ -646,16 +653,16 @@ export const PreMatchIntro = ({ config }: { config: IChallengeConfig }) => {
         exit: (dir: number) => ({ opacity: 0, x: dir * -60 }),
     };
 
-    const SLIDES = [LogoSlide, EntrySlide, PointsSlide, MarketsSlide, MultiplierSlide, WinSlide] as const;
-    const SlideComponent = SLIDES[slideIdx] as React.ComponentType<SlideProps>;
+    const { component: SlideComponent } = slides[slideIdx];
+    const isLastSlide = slideIdx === totalSlides - 1;
 
     return (
         <div className="relative w-full h-full flex flex-col bg-black">
             {/* Skip button */}
             <div className="flex justify-end px-4 pt-3">
                 <button
-                    onClick={() => goTo("questions")}
-                    className="text-[10px] text-white/25 uppercase tracking-wider font-semibold"
+                    onClick={onComplete}
+                    className="text-[10px] text-white/25 uppercase tracking-wider font-semibold cursor-pointer"
                     style={OUTFIT}
                 >
                     Skip
@@ -663,7 +670,7 @@ export const PreMatchIntro = ({ config }: { config: IChallengeConfig }) => {
             </div>
 
             {/* Slide content — centered */}
-            <div className="flex-1 flex items-center justify-center px-6">
+            <div className="flex-1 flex items-center justify-center px-6 overflow-y-auto">
                 <AnimatePresence mode="wait" custom={direction}>
                     <motion.div
                         key={slideIdx}
@@ -673,9 +680,9 @@ export const PreMatchIntro = ({ config }: { config: IChallengeConfig }) => {
                         animate="center"
                         exit="exit"
                         transition={{ duration: 0.3, ease: [0.4, 0, 0.2, 1] }}
-                        className="w-full flex justify-center"
+                        className="w-full flex justify-center py-4"
                     >
-                        <SlideComponent config={config} />
+                        <SlideComponent config={config} onComplete={onComplete} />
                     </motion.div>
                 </AnimatePresence>
             </div>
@@ -687,7 +694,7 @@ export const PreMatchIntro = ({ config }: { config: IChallengeConfig }) => {
                     {finished ? (
                         <button
                             onClick={replay}
-                            className="flex items-center gap-1.5 p-1.5"
+                            className="flex items-center gap-1.5 p-1.5 cursor-pointer"
                             style={{ opacity: 0.5 }}
                         >
                             <RotateCcw size={16} className="text-white" />
@@ -698,23 +705,27 @@ export const PreMatchIntro = ({ config }: { config: IChallengeConfig }) => {
                             <button
                                 onClick={seekBack}
                                 disabled={slideIdx === 0}
-                                className="p-1.5"
+                                className="p-1.5 cursor-pointer"
                                 style={{ opacity: slideIdx === 0 ? 0.15 : 0.5 }}
                             >
                                 <Rewind size={18} className="text-white" />
                             </button>
-                            <button
-                                onClick={togglePause}
-                                className="p-1.5"
-                            >
-                                {paused
-                                    ? <Play size={18} className="text-white" style={{ marginLeft: 2 }} />
-                                    : <Pause size={18} className="text-white" />
-                                }
-                            </button>
+                            {/* Hide play/pause on last slide — user should use Build Your Bets button */}
+                            {!isLastSlide && (
+                                <button
+                                    onClick={togglePause}
+                                    className="p-1.5 cursor-pointer"
+                                >
+                                    {paused
+                                        ? <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><polygon points="5,3 15,9 5,15" fill="white" style={{ marginLeft: 2 }} /></svg>
+                                        : <Pause size={18} className="text-white" />
+                                    }
+                                </button>
+                            )}
+                            {isLastSlide && <div style={{ width: 18 + 12 }} />}
                             <button
                                 onClick={seekNext}
-                                className="p-1.5"
+                                className="p-1.5 cursor-pointer"
                                 style={{ opacity: 0.5 }}
                             >
                                 <FastForward size={18} className="text-white" />
@@ -723,14 +734,14 @@ export const PreMatchIntro = ({ config }: { config: IChallengeConfig }) => {
                     )}
                 </div>
 
-                {/* Segmented progress bar with checkpoint circles */}
+                {/* Segmented progress bar */}
                 <div style={{ display: "flex", alignItems: "center", width: "100%", gap: 6 }}>
-                    {Array.from({ length: TOTAL_SLIDES }).map((_, i) => {
+                    {Array.from({ length: totalSlides }).map((_, i) => {
                         const filled = i < slideIdx;
                         const active = i === slideIdx;
                         const passed = i <= slideIdx;
                         return (
-                            <div key={i} style={{ display: "flex", alignItems: "center", flex: i < TOTAL_SLIDES - 1 ? 1 : "none", gap: 6 }}>
+                            <div key={i} style={{ display: "flex", alignItems: "center", flex: i < totalSlides - 1 ? 1 : "none", gap: 6 }}>
                                 <div
                                     style={{
                                         width: 7, height: 7, borderRadius: "50%", flexShrink: 0,
@@ -738,7 +749,7 @@ export const PreMatchIntro = ({ config }: { config: IChallengeConfig }) => {
                                         boxShadow: passed ? "0 0 6px rgba(34,227,232,0.4)" : "none",
                                     }}
                                 />
-                                {i < TOTAL_SLIDES - 1 && (
+                                {i < totalSlides - 1 && (
                                     <div style={{ flex: 1, height: 3, borderRadius: 2, background: "rgba(255,255,255,0.08)", overflow: "hidden" }}>
                                         <div
                                             style={{

package/src/pools/fetcher.ts

@@ -9,6 +9,7 @@ import type {
   ITDMyEntryResponse,
   ITDLeaderboardResponse,
   ITDBetInput,
+  ITDDraftSelection,
 } from "./types";
 
 // Shared fetch helper — adds auth header if token exists
@@ -78,6 +79,17 @@ export async function joinTDPoolApi(poolId: number): Promise<{ id: number }> {
   return tdFetch<{ id: number }>(`/api/pools/${poolId}/join`, { method: "POST", body: "{}" });
 }
 
+// PUT /api/pools/:id/draft-bets
+export async function saveTDDraftBetsApi(
+  poolId: number,
+  selections: ITDDraftSelection[],
+): Promise<void> {
+  await tdFetch<unknown>(`/api/pools/${poolId}/draft-bets`, {
+    method: "PUT",
+    body: JSON.stringify({ selections }),
+  });
+}
+
 // POST /api/pools/:id/bets
 export async function placeTDBetsApi(
   poolId: number,

package/src/pools/types.ts

@@ -163,6 +163,12 @@ export interface ITDLeaderboardResponse {
 
 // ─── Pool entry (GET /api/pools/:id/my-entry) ─────────────────────────────────
 
+export interface ITDDraftSelection {
+  challenge_id: number;
+  selected_option: string;
+  coin_amount: number;
+}
+
 export interface ITDPoolEntryRecord {
   id: number;
   pool_id: number;
@@ -178,6 +184,7 @@ export interface ITDPoolEntryRecord {
   questions_left: number;
   questions_total: number;
   active_parlays: number;
+  draft_selections: ITDDraftSelection[] | null;
   created_at: string;
 }