@devrongx/games 0.4.25 → 0.4.27

package/package.json

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

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

@@ -462,6 +462,7 @@ export const PreMatchBetsPopup = ({ poolId, matchId: _matchId, match: matchProp
           editSubmitting={editSubmitting}
           savedBetSummary={savedBetSummary}
           hasUnsavedEdits={hasUnsavedEdits}
+          onGoToIntro={() => setUserFlowState("intro")}
         />
       )}
 

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

@@ -56,6 +56,7 @@ interface PreMatchGameProps {
     editSubmitting?: number | null;
     savedBetSummary?: IBetSummary | null;
     hasUnsavedEdits?: boolean;
+    onGoToIntro?: () => void;
 }
 
 // ─── Component ───────────────────────────────────────────────────────────────
@@ -66,7 +67,7 @@ export const PreMatchGame = ({
     parlayEnabled = false, submitting = false,
     ignoredMarkets: _ignoredMarkets, onToggleIgnore, editingMarkets: _editingMarkets,
     dirtyMarkets: _dirtyMarkets, onEditMarket, onConfirmMarketEdit, onCancelMarketEdit,
-    editSubmitting, savedBetSummary, hasUnsavedEdits = false,
+    editSubmitting, savedBetSummary, hasUnsavedEdits = false, onGoToIntro,
 }: PreMatchGameProps) => {
     const ignoredMarkets = _ignoredMarkets ?? EMPTY_SET;
     const editingMarkets = _editingMarkets ?? EMPTY_SET;
@@ -77,11 +78,6 @@ export const PreMatchGame = ({
     // Whether bets have been submitted to the server at least once
     const hasSubmitted = !!submittedBets && Object.keys(submittedBets).length > 0;
 
-    // Button state for initial submit flow (fresh = never submitted)
-    const buttonState = useMemo<"fresh" | "submitted">(() => {
-        return hasSubmitted ? "submitted" : "fresh";
-    }, [hasSubmitted]);
-
     const goTo = useGamePopupStore(s => s.goTo);
 
     // ── Onboarding — visible whenever no points have been bet yet ─────────────
@@ -144,11 +140,6 @@ export const PreMatchGame = ({
         });
     }, []);
 
-    const handleExpandAll = useCallback(() => setCollapsedMarkets(new Set()), []);
-    const handleCollapseAll = useCallback(() => {
-        setCollapsedMarkets(new Set(config.markets.map((_, i) => i)));
-    }, [config.markets]);
-
     // ── Computed: filtered/sorted market indices ─────────────────────────────
     const sortActive = activeFilters.has("bets_first") || activeFilters.has("unanswered_first");
 
@@ -165,17 +156,29 @@ export const PreMatchGame = ({
             });
         } else if (activeFilters.has("unanswered_first")) {
             indices.sort((a, b) => {
-                const aAns = bets[a] !== undefined ? 1 : 0;
-                const bAns = bets[b] !== undefined ? 1 : 0;
-                return aAns - bAns || a - b;
+                const aHasAmount = (bets[a]?.amount ?? 0) > 0 ? 1 : 0;
+                const bHasAmount = (bets[b]?.amount ?? 0) > 0 ? 1 : 0;
+                return aHasAmount - bHasAmount || a - b;
             });
         }
         return indices;
     }, [config.markets, activeFilters, ignoredMarkets, bets]);
 
-    // Computed expand/collapse "active" states for the pills
-    const allExpanded = visibleMarketIndices.length > 0 && visibleMarketIndices.every(i => !collapsedMarkets.has(i));
-    const allCollapsed = visibleMarketIndices.length > 0 && visibleMarketIndices.every(i => collapsedMarkets.has(i));
+    const handleExpandAll = useCallback(() => {
+        setCollapsedMarkets(prev => {
+            const next = new Set(prev);
+            for (const i of visibleMarketIndices) next.delete(i);
+            return next;
+        });
+    }, [visibleMarketIndices]);
+
+    const handleCollapseAll = useCallback(() => {
+        setCollapsedMarkets(prev => {
+            const next = new Set(prev);
+            for (const i of visibleMarketIndices) next.add(i);
+            return next;
+        });
+    }, [visibleMarketIndices]);
 
     // Category headers — only shown when no sort is active
     const categoryForIndex = useMemo(() => {
@@ -249,7 +252,7 @@ export const PreMatchGame = ({
                     {/* How to Play + Filter pills */}
                     <div className="pt-2 flex items-center gap-2 overflow-x-auto scrollbar-hide">
                         <button
-                            onClick={() => goTo("intro")}
+                            onClick={() => { onGoToIntro ? onGoToIntro() : goTo("intro"); }}
                             className="flex-shrink-0 flex items-center gap-1.5 px-3 py-1.5 rounded-full border border-[#22E3E8]/20 bg-[#22E3E8]/[0.06]"
                         >
                             <Play size={10} fill="#22E3E8" strokeWidth={0} className="text-[#22E3E8]" />
@@ -259,8 +262,8 @@ export const PreMatchGame = ({
                         <FilterPill label="Bets first" active={activeFilters.has("bets_first")} onClick={() => toggleFilter("bets_first")} />
                         <FilterPill label="Unanswered first" active={activeFilters.has("unanswered_first")} onClick={() => toggleFilter("unanswered_first")} />
                         <FilterPill label="Hide ignored" active={activeFilters.has("hide_ignored")} onClick={() => toggleFilter("hide_ignored")} />
-                        <FilterPill label="Expand all" active={allExpanded} onClick={handleExpandAll} />
-                        <FilterPill label="Collapse all" active={allCollapsed} onClick={handleCollapseAll} />
+                        <FilterPill label="Expand all" active={false} onClick={handleExpandAll} />
+                        <FilterPill label="Collapse all" active={false} onClick={handleCollapseAll} />
                     </div>
                 </>
             )}
@@ -277,7 +280,6 @@ export const PreMatchGame = ({
             {/* Markets */}
             <div className="w-full">
                 <div className="flex flex-col gap-3">
-                    <AnimatePresence initial={false}>
                         {visibleMarketIndices.map((mIdx) => {
                             const market = config.markets[mIdx];
                             const selection = bets[mIdx];
@@ -300,14 +302,7 @@ export const PreMatchGame = ({
                             const hasSubmittedBet = !!submittedBets?.[mIdx];
 
                             return (
-                                <motion.div
-                                    key={market.id}
-                                    layout="position"
-                                    initial={{ opacity: 0, height: 0 }}
-                                    animate={{ opacity: 1, height: "auto" }}
-                                    exit={{ opacity: 0, height: 0 }}
-                                    transition={{ layout: { type: "spring", stiffness: 300, damping: 30 }, opacity: { duration: 0.2 } }}
-                                >
+                                <div key={market.id}>
                                     {/* Category header */}
                                     {showCategoryHeader && (
                                         <div className="px-1 pt-1 pb-1.5">
@@ -558,10 +553,9 @@ export const PreMatchGame = ({
                                             </motion.div>
                                         )}
                                     </AnimatePresence>
-                                </motion.div>
+                                </div>
                             );
                         })}
-                    </AnimatePresence>
                 </div>
             </div>
 
@@ -588,9 +582,9 @@ export const PreMatchGame = ({
                                     )}
                                 </AnimatePresence>
 
-                                {/* Saved max outcome */}
+                                {/* Saved max outcome — only visible when editing creates a diff */}
                                 <AnimatePresence>
-                                    {savedBetSummary && savedBetSummary.totalEntry > 0 && (
+                                    {savedBetSummary && hasUnsavedEdits && savedBetSummary.totalEntry > 0 && (
                                         <motion.div className="overflow-hidden" initial={{ height: 0, opacity: 0 }} animate={{ height: "auto", opacity: 1 }} exit={{ height: 0, opacity: 0 }}
                                             transition={{ height: { duration: 0.35, ease: "easeOut" }, opacity: { duration: 0.3, delay: 0.1 } }}>
                                             <div className="flex items-baseline gap-1 flex-nowrap">
@@ -605,14 +599,14 @@ export const PreMatchGame = ({
                                     )}
                                 </AnimatePresence>
 
-                                {/* Current/unsaved max outcome */}
+                                {/* Max outcome — always visible when there are bets */}
                                 <AnimatePresence>
-                                    {totalEntry > 0 && (!hasSubmitted || hasUnsavedEdits) && (
+                                    {totalEntry > 0 && (
                                         <motion.div className="overflow-hidden" initial={{ height: 0, opacity: 0 }} animate={{ height: "auto", opacity: 1 }} exit={{ height: 0, opacity: 0 }}
                                             transition={{ height: { duration: 0.35, ease: "easeOut" }, opacity: { duration: 0.3, delay: 0.1 } }}>
                                             <div className="flex items-baseline gap-1 flex-nowrap">
                                                 <span className="text-[13px] text-white font-medium leading-none flex-shrink-0" style={OUTFIT}>
-                                                    {hasSubmitted ? "Pending" : "Max outcome"}
+                                                    {hasSubmitted && hasUnsavedEdits ? "Pending" : "Max outcome"}
                                                 </span>
                                                 <Image src="/iamgame_square_logo.jpg" alt="" width={18} height={18} className="rounded-[2px] flex-shrink-0" />
                                                 <AnimatedNumber value={totalEntry} className="text-[22px] text-white font-bold leading-none" style={OUTFIT} />
@@ -644,9 +638,9 @@ export const PreMatchGame = ({
                                 </AnimatePresence>
                             </div>
 
-                            {/* Right — action button */}
+                            {/* Right — play button (fresh only) */}
                             <AnimatePresence>
-                                {buttonState === "fresh" && totalEntry > 0 && (
+                                {!hasSubmitted && totalEntry > 0 && (
                                     <motion.button
                                         onClick={onSubmit ? onSubmit : undefined}
                                         disabled={submitting}
@@ -665,18 +659,6 @@ export const PreMatchGame = ({
                                             : <Play size={26} fill="white" strokeWidth={0} className="relative z-10" />}
                                     </motion.button>
                                 )}
-                                {buttonState === "submitted" && (
-                                    <motion.div
-                                        className="w-[54px] min-h-[54px] rounded-xl flex-shrink-0 flex items-center justify-center"
-                                        style={{ background: "rgba(34,197,94,0.12)", border: "1px solid rgba(34,197,94,0.3)" }}
-                                        initial={{ opacity: 0, scale: 0.8 }}
-                                        animate={{ opacity: 1, scale: 1 }}
-                                        transition={{ type: "spring", stiffness: 300, damping: 20 }}>
-                                        <div className="w-[28px] h-[28px] rounded-full flex items-center justify-center" style={{ background: "rgba(34,197,94,0.25)" }}>
-                                            <Check size={16} className="text-green-400" />
-                                        </div>
-                                    </motion.div>
-                                )}
                             </AnimatePresence>
                         </div>