@devrongx/games 0.4.12 → 0.4.13

package/package.json

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

@@ -120,6 +120,7 @@ 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);
@@ -141,6 +142,7 @@ export const PreMatchBetsPopup = ({ poolId, matchId: _matchId, match: matchProp
     }
     if (Object.keys(loaded).length === 0) return;
     setBets(loaded);
+    setSubmittedBets(loaded);
     setExpandedPicker(pickers);
     setUserFlowState("game");
     realBetsRestoredRef.current = true;
@@ -290,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) {
@@ -353,6 +358,7 @@ 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}
         />

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>