@devrongx/games 0.4.11 → 0.4.13

package/package.json

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

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

@@ -16,7 +16,6 @@ import { GamePopupShell } from "../../core/GamePopupShell";
 import { PreMatchIntro } from "./PreMatchIntro";
 import { PreMatchQuestions } from "./PreMatchQuestions";
 import { PreMatchGame } from "./PreMatchGame";
-import { PreMatchSubmitted } from "./PreMatchSubmitted";
 import { PreMatchLive } from "./PreMatchLive";
 import { PreMatchResults } from "./PreMatchResults";
 import { FullLeaderboard } from "./FullLeaderboard";
@@ -34,7 +33,7 @@ const GAME_ID = "pre-match";
 // ─── View logic ────────────────────────────────────────────────────────────────
 
 type UserFlowState = "intro" | "questions" | "game";
-type ActiveView = UserFlowState | "submitted" | "live" | "results";
+type ActiveView = UserFlowState | "live" | "results";
 
 function getActiveView(
   poolStatus: number | undefined,
@@ -44,8 +43,7 @@ function getActiveView(
   if (poolStatus === undefined) return userFlowState;
   if (poolStatus === TDPoolStatus.COMPLETE || poolStatus === TDPoolStatus.CANCELLED) return "results";
   if (poolStatus === TDPoolStatus.CLOSED || poolStatus === TDPoolStatus.RESOLVING) return hasEntry ? "live" : "results";
-  // Pool is open
-  if (hasEntry) return "submitted";
+  // Pool is open — user can keep editing regardless
   return userFlowState;
 }
 
@@ -122,6 +120,33 @@ export const PreMatchBetsPopup = ({ poolId, matchId: _matchId, match: matchProp
   const [showFullLeaderboard, setShowFullLeaderboard] = useState(false);
   const [submitting, setSubmitting] = useState(false);
   const [submitError, setSubmitError] = useState<string | null>(null);
+  const [submittedBets, setSubmittedBets] = useState<IUserBets | null>(null);
+
+  // ── Real bets restore: when user has submitted bets, load them into game state ─
+  const realBetsRestoredRef = useRef(false);
+  useEffect(() => {
+    if (!poolId || !config || !entryData || realBetsRestoredRef.current) return;
+    if (entryData.bets.length === 0) return;
+    const loaded: IUserBets = {};
+    const pickers: Record<number, number> = {};
+    for (const bet of entryData.bets) {
+      if (bet.parlay_id !== null) continue;
+      const mIdx = config.markets.findIndex((m) => m.backendChallengeId === bet.challenge_id);
+      if (mIdx < 0) continue;
+      const oIdx = config.markets[mIdx].options.findIndex(
+        (o) => o.label.toLowerCase().replace(/\s+/g, "_") === bet.selected_option,
+      );
+      if (oIdx < 0) continue;
+      loaded[mIdx] = { optionIdx: oIdx, amount: bet.coin_amount, parlaySlot: null };
+      pickers[mIdx] = oIdx;
+    }
+    if (Object.keys(loaded).length === 0) return;
+    setBets(loaded);
+    setSubmittedBets(loaded);
+    setExpandedPicker(pickers);
+    setUserFlowState("game");
+    realBetsRestoredRef.current = true;
+  }, [poolId, config, entryData]);
 
   // ── Draft restore: when entry + config load, seed bets from draft_selections ─
   const draftRestoredRef = useRef(false);
@@ -267,6 +292,9 @@ export const PreMatchBetsPopup = ({ poolId, matchId: _matchId, match: matchProp
 
       await placeTDBets(poolId, betsToSubmit);
 
+      // Snapshot submitted state for change detection
+      setSubmittedBets({ ...bets });
+
       // Refresh data
       await Promise.all([refetchEntry(), refetchLB(), refetchPool()]);
     } catch (err: unknown) {
@@ -276,24 +304,6 @@ export const PreMatchBetsPopup = ({ poolId, matchId: _matchId, match: matchProp
     }
   }, [poolId, config, bets, hasEntry, refetchEntry, refetchLB, refetchPool]);
 
-  const handleAdjust = useCallback(async () => {
-    // Load server bets back into local state
-    if (entryData?.bets && config) {
-      const loaded: IUserBets = {};
-      for (const bet of entryData.bets) {
-        if (bet.parlay_id !== null) continue; // skip parlays for now
-        const mIdx = config.markets.findIndex((m) => m.backendChallengeId === bet.challenge_id);
-        if (mIdx >= 0) {
-          // Find option by matching the stored key to a label approximation
-          // (we store selected_option as the label key from the pool option)
-          const oIdx = config.markets[mIdx].options.findIndex((_, i) => i === 0); // fallback: first option
-          loaded[mIdx] = { optionIdx: oIdx, amount: bet.coin_amount, parlaySlot: null };
-        }
-      }
-      setBets(loaded);
-    }
-    setUserFlowState("game");
-  }, [entryData, config]);
 
   // ── Loading ────────────────────────────────────────────────────────────────
   if (poolId && (poolLoading || (!config && !poolLoading))) {
@@ -348,22 +358,12 @@ export const PreMatchBetsPopup = ({ poolId, matchId: _matchId, match: matchProp
           betSummary={betSummary}
           leaderboardRows={leaderboardRows}
           onSubmit={poolId ? handleSubmitBets : undefined}
+          submittedBets={poolId ? submittedBets : null}
           onViewLeaderboard={poolId ? () => setShowFullLeaderboard(true) : undefined}
           submitting={submitting}
         />
       )}
 
-      {activeView === "submitted" && (
-        <PreMatchSubmitted
-          config={config}
-          poolId={poolId!}
-          entryData={entryData}
-          rankings={rankings}
-          onAdjust={handleAdjust}
-          onViewLeaderboard={() => setShowFullLeaderboard(true)}
-        />
-      )}
-
       {activeView === "live" && (
         <PreMatchLive
           config={config}

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

@@ -4,7 +4,7 @@
 import { useState, useEffect, useMemo, useCallback } from "react";
 import Image from "next/image";
 import { motion, AnimatePresence, useSpring, useTransform, useMotionValue } from "framer-motion";
-import { ChevronDown, Info, X, Play, Send } from "lucide-react";
+import { ChevronDown, Info, X, Play, Check, Loader2 } from "lucide-react";
 import { IBetSummary, ILeaderboardEntry, IChallengeConfig, IUserBets, deriveParlayGroups, deriveMarketToParlay, calcDisplayReward, optionReward, calcParlayMultiplier } from "./config";
 import { OUTFIT, MARKET_ICONS, PointsIcon, SelectedCheck, AiInsightButton } from "./constants";
 import { useGamePopupStore } from "../../core/gamePopupStore";
@@ -37,8 +37,10 @@ interface PreMatchGameProps {
     leaderboardRows: ILeaderboardEntry[];
     /** Render only the markets section (no header/balance/leaderboard) — used for card preview */
     marketsOnly?: boolean;
-    /** Called when user taps Submit Bets. If provided, shows Submit button instead of Play. */
+    /** Called when user taps the action button to submit/re-submit bets. */
     onSubmit?: () => Promise<void> | void;
+    /** Snapshot of bets as last saved to the server — drives saved/changed button states. */
+    submittedBets?: IUserBets | null;
     /** Called when user taps "See Full Leaderboard" */
     onViewLeaderboard?: () => void;
     /** v1: parlays are cosmetic, shows "Coming in v2". Default = false (hides section) */
@@ -48,9 +50,23 @@ interface PreMatchGameProps {
 }
 
 
-export const PreMatchGame = ({ config, bets, onBetsChange, expandedPicker, onOptionClick, onAmountSelect, betSummary, leaderboardRows, marketsOnly, onSubmit, onViewLeaderboard, parlayEnabled = false, submitting = false }: PreMatchGameProps) => {
+export const PreMatchGame = ({ config, bets, onBetsChange, expandedPicker, onOptionClick, onAmountSelect, betSummary, leaderboardRows, marketsOnly, onSubmit, submittedBets, onViewLeaderboard, parlayEnabled = false, submitting = false }: PreMatchGameProps) => {
     const { selectedCount, compoundMultiplier, totalEntry, compoundedReward, remainingBalance, riskPercent } = betSummary;
 
+    // Button state: fresh (no prior submit), saved (submitted, no changes), changed (submitted, user modified)
+    const buttonState = useMemo<"fresh" | "saved" | "changed">(() => {
+        if (!submittedBets) return "fresh";
+        const subKeys = Object.keys(submittedBets);
+        const curKeys = Object.keys(bets);
+        if (subKeys.length !== curKeys.length) return "changed";
+        for (const k of curKeys) {
+            const cur = bets[Number(k)];
+            const sub = submittedBets[Number(k)];
+            if (!sub || cur.optionIdx !== sub.optionIdx || cur.amount !== sub.amount) return "changed";
+        }
+        return "saved";
+    }, [bets, submittedBets]);
+
     const goTo = useGamePopupStore(s => s.goTo);
 
     // Onboarding — visible whenever no points have been bet yet
@@ -583,49 +599,48 @@ export const PreMatchGame = ({ config, bets, onBetsChange, expandedPicker, onOpt
                             <AnimatePresence>
                                 {totalEntry > 0 && (() => {
                                     const spentPercent = totalEntry / config.startingBalance;
-                                    const fillPercent = 5 + spentPercent * 95;
-
-                                    if (onSubmit) {
-                                        return (
-                                            <motion.button
-                                                onClick={onSubmit}
-                                                disabled={submitting}
-                                                className="relative rounded-xl overflow-hidden flex-shrink-0 flex items-center justify-center gap-1.5 px-3"
-                                                style={{ background: submitting ? "rgba(34,227,232,0.3)" : "linear-gradient(135deg, #22E3E8, #9945FF, #f83cc5)", minWidth: 90, height: "100%" }}
-                                                initial={{ opacity: 0, width: 0 }}
-                                                animate={{ opacity: 1, width: "auto" }}
-                                                exit={{ opacity: 0, width: 0 }}
-                                                transition={{ width: { duration: 0.4, ease: "easeOut", delay: 0.8 }, opacity: { duration: 0.3, delay: 1 } }}
-                                            >
-                                                {submitting ? (
-                                                    <span className="text-[10px] font-bold text-white/70" style={OUTFIT}>Submitting…</span>
-                                                ) : (
-                                                    <>
-                                                        <Send size={14} className="text-white" />
-                                                        <span className="text-[11px] font-bold text-white" style={OUTFIT}>Submit Bets</span>
-                                                    </>
-                                                )}
-                                            </motion.button>
-                                        );
-                                    }
+                                    const fillPercent = buttonState === "saved" ? 100 : 5 + spentPercent * 95;
+                                    const fillColor = buttonState === "saved"
+                                        ? "linear-gradient(135deg, #22c55e, #16a34a)"
+                                        : "linear-gradient(135deg, #22E3E8, #9945FF, #f83cc5)";
+                                    const bgColor = buttonState === "saved"
+                                        ? "linear-gradient(135deg, rgba(34,197,94,0.2), rgba(22,163,74,0.2))"
+                                        : "linear-gradient(135deg, rgba(34,227,232,0.2), rgba(153,69,255,0.2), rgba(248,60,197,0.2))";
 
                                     return (
-                                        <motion.div
+                                        <motion.button
+                                            onClick={onSubmit && buttonState !== "saved" ? onSubmit : undefined}
+                                            disabled={submitting || buttonState === "saved"}
                                             className="relative w-[65px] rounded-xl overflow-hidden flex-shrink-0 flex items-center justify-center"
-                                            style={{ background: "linear-gradient(135deg, rgba(34,227,232,0.2), rgba(153,69,255,0.2), rgba(248,60,197,0.2))" }}
+                                            style={{ background: bgColor, cursor: buttonState === "saved" ? "default" : "pointer" }}
                                             initial={{ opacity: 0, width: 0 }}
                                             animate={{ opacity: 1, width: 65 }}
                                             exit={{ opacity: 0, width: 0 }}
                                             transition={{ width: { duration: 0.4, ease: "easeOut", delay: 0.8 }, opacity: { duration: 0.3, delay: 1 } }}
                                         >
+                                            {/* Fill bar */}
                                             <motion.div
                                                 className="absolute inset-y-0 left-0"
                                                 animate={{ width: `${fillPercent}%` }}
                                                 transition={{ type: "spring", stiffness: 120, damping: 20 }}
-                                                style={{ background: "linear-gradient(135deg, #22E3E8, #9945FF, #f83cc5)" }}
+                                                style={{ background: fillColor }}
                                             />
-                                            <Play size={26} fill="white" strokeWidth={0} className="relative z-10" />
-                                        </motion.div>
+                                            {/* Pulsing ring when there are unsaved changes */}
+                                            {buttonState === "changed" && (
+                                                <motion.div
+                                                    className="absolute inset-0 rounded-xl"
+                                                    animate={{ boxShadow: ["0 0 0px rgba(34,227,232,0)", "0 0 10px rgba(34,227,232,0.7)", "0 0 0px rgba(34,227,232,0)"] }}
+                                                    transition={{ duration: 1.4, repeat: Infinity, ease: "easeInOut" }}
+                                                />
+                                            )}
+                                            {/* Icon */}
+                                            {submitting
+                                                ? <Loader2 size={22} strokeWidth={2.5} className="relative z-10 animate-spin text-white/70" />
+                                                : buttonState === "saved"
+                                                    ? <Check size={24} strokeWidth={2.5} className="relative z-10 text-white" />
+                                                    : <Play size={26} fill="white" strokeWidth={0} className="relative z-10" />
+                                            }
+                                        </motion.button>
                                     );
                                 })()}
                             </AnimatePresence>