@devrongx/games 0.4.26 → 0.4.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devrongx/games",
-  "version": "0.4.26",
+  "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,14 +156,30 @@ 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]);
 
+    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(() => {
         const map = new Map<number, string>();
@@ -245,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]" />
@@ -631,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}
@@ -652,16 +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(74,222,128,0.10)" }}
-                                        initial={{ opacity: 0, scale: 0.8 }}
-                                        animate={{ opacity: 1, scale: 1 }}
-                                        transition={{ type: "spring", stiffness: 300, damping: 20 }}>
-                                        <Check size={22} strokeWidth={2.5} className="text-white" />
-                                    </motion.div>
-                                )}
                             </AnimatePresence>
                         </div>