@devrongx/games 0.4.14 → 0.4.16

package/package.json

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

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

@@ -115,7 +115,6 @@ export const PreMatchBetsPopup = ({ poolId, matchId: _matchId, match: matchProp
 
   // ── Bet state ─────────────────────────────────────────────────────────────
   const [bets, setBets] = useState<IUserBets>({});
-  const [expandedPicker, setExpandedPicker] = useState<Record<number, number>>({});
   const [userFlowState, setUserFlowState] = useState<UserFlowState>("intro");
   const [showFullLeaderboard, setShowFullLeaderboard] = useState(false);
   const [submitting, setSubmitting] = useState(false);
@@ -128,7 +127,6 @@ export const PreMatchBetsPopup = ({ poolId, matchId: _matchId, match: matchProp
     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);
@@ -138,12 +136,10 @@ export const PreMatchBetsPopup = ({ poolId, matchId: _matchId, match: matchProp
       );
       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]);
@@ -238,11 +234,6 @@ export const PreMatchBetsPopup = ({ poolId, matchId: _matchId, match: matchProp
   // ── Handlers ─────────────────────────────────────────────────────────────
   const handleQuestionsComplete = useCallback((selections: IUserBets) => {
     setBets(selections);
-    const pickers: Record<number, number> = {};
-    for (const [mIdxStr, entry] of Object.entries(selections)) {
-      pickers[Number(mIdxStr)] = entry.optionIdx;
-    }
-    setExpandedPicker(pickers);
     setUserFlowState("game");
   }, []);
 
@@ -252,10 +243,8 @@ export const PreMatchBetsPopup = ({ poolId, matchId: _matchId, match: matchProp
       if (existing?.optionIdx === oIdx) {
         const next = { ...prev };
         delete next[mIdx];
-        setExpandedPicker((p) => { const n = { ...p }; delete n[mIdx]; return n; });
         return next;
       }
-      setExpandedPicker((p) => ({ ...p, [mIdx]: oIdx }));
       return {
         ...prev,
         [mIdx]: { optionIdx: oIdx, amount: existing?.amount ?? 0, parlaySlot: existing?.parlaySlot ?? null },
@@ -358,7 +347,6 @@ export const PreMatchBetsPopup = ({ poolId, matchId: _matchId, match: matchProp
           config={config}
           bets={bets}
           onBetsChange={setBets}
-          expandedPicker={expandedPicker}
           onOptionClick={handleOptionClick}
           onAmountSelect={handleAmountSelect}
           betSummary={betSummary}

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

@@ -1,7 +1,7 @@
 // @devrongx/games — games/prematch-bets/PreMatchGame.tsx
 "use client";
 
-import { useState, useEffect, useMemo, useCallback } from "react";
+import { useState, useEffect, useMemo, useCallback, useRef } from "react";
 import Image from "next/image";
 import { motion, AnimatePresence, useSpring, useTransform, useMotionValue } from "framer-motion";
 import { ChevronDown, Info, X, Play, Check, Loader2 } from "lucide-react";
@@ -30,7 +30,6 @@ interface PreMatchGameProps {
     config: IChallengeConfig;
     bets: IUserBets;
     onBetsChange?: (bets: IUserBets) => void;
-    expandedPicker: Record<number, number>;  // mIdx → oIdx for open pickers
     onOptionClick: (mIdx: number, oIdx: number) => void;
     onAmountSelect: (mIdx: number, oIdx: number, amount: number) => void;
     betSummary: IBetSummary;
@@ -50,7 +49,7 @@ interface PreMatchGameProps {
 }
 
 
-export const PreMatchGame = ({ config, bets, onBetsChange, expandedPicker, onOptionClick, onAmountSelect, betSummary, leaderboardRows, marketsOnly, onSubmit, submittedBets, onViewLeaderboard, parlayEnabled = false, submitting = false }: PreMatchGameProps) => {
+export const PreMatchGame = ({ config, bets, onBetsChange, 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)
@@ -87,6 +86,16 @@ export const PreMatchGame = ({ config, bets, onBetsChange, expandedPicker, onOpt
         });
     }, []);
 
+    // One-time: when bets are restored with amounts already set, auto-collapse those markets
+    const collapseInitializedRef = useRef(false);
+    useEffect(() => {
+        if (collapseInitializedRef.current) return;
+        const withAmounts = Object.entries(bets).filter(([, b]) => b.amount > 0);
+        if (withAmounts.length === 0) return;
+        setCollapsedMarkets(new Set(withAmounts.map(([k]) => Number(k))));
+        collapseInitializedRef.current = true;
+    }, [bets]);
+
     // Parlay edit mode: which slot is being edited (null = none)
     const [editingParlay, setEditingParlay] = useState<number | null>(null);
     // Parlay info popup: which slot's breakdown is shown (null = none)
@@ -175,7 +184,7 @@ export const PreMatchGame = ({ config, bets, onBetsChange, expandedPicker, onOpt
                 <div className="flex flex-col gap-3">
                     {config.markets.map((market, mIdx) => {
                         const selection = bets[mIdx];
-                        const isPickerOpenForMarket = mIdx in expandedPicker;
+                        const isPickerOpenForMarket = !collapsedMarkets.has(mIdx) && selection !== undefined;
                         const showCategoryHeader = categoryFirstIndices.has(mIdx);
 
                         // Available balance for picker: remaining + current bet on this market (it would be freed)
@@ -316,7 +325,7 @@ export const PreMatchGame = ({ config, bets, onBetsChange, expandedPicker, onOpt
                                 <div className="grid grid-cols-2 gap-1.5 px-1 pt-0.5 pb-1">
                                     {market.options.map((opt, j) => {
                                         const isSelected = selection?.optionIdx === j;
-                                        const isPickerOpen = isPickerOpenForMarket && expandedPicker[mIdx] === j;
+                                        const isPickerOpen = isPickerOpenForMarket && selection?.optionIdx === j;
                                         const showPickerRow = isPickerOpenForMarket;
                                         const displayReward = calcDisplayReward(opt, compoundMultiplier, isSelected, selectedCount, isSelected ? selection.amount : undefined);
                                         const baseReward = optionReward(opt);
@@ -407,11 +416,11 @@ export const PreMatchGame = ({ config, bets, onBetsChange, expandedPicker, onOpt
                                                 <div className="flex items-center gap-1.5 overflow-x-auto scrollbar-hide py-1 px-0.5">
                                                     <span className="text-[8px] text-white/60 font-semibold flex-shrink-0" style={OUTFIT}>Bet:</span>
                                                     {Array.from({ length: chipCount }, (_, i) => (i + 1) * config.parlayConfig.stakeIncrements).map(amt => {
-                                                        const isChipSelected = selection?.optionIdx === expandedPicker[mIdx] && selection?.amount === amt;
+                                                        const isChipSelected = selection?.amount === amt;
                                                         return (
                                                             <div
                                                                 key={amt}
-                                                                onClick={() => onAmountSelect(mIdx, expandedPicker[mIdx], amt)}
+                                                                onClick={() => onAmountSelect(mIdx, selection!.optionIdx, amt)}
                                                                 className="flex-shrink-0 flex items-center gap-0.5 px-2 py-[3px] rounded cursor-pointer transition-colors relative overflow-hidden"
                                                                 style={isChipSelected ? {
                                                                     background: "linear-gradient(135deg, #22E3E8, #9945FF, #f83cc5)",