@devrongx/games 0.4.6 → 0.4.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devrongx/games",
-  "version": "0.4.6",
+  "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) => {

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;
 }