@devrongx/games 0.4.16 → 0.4.18

package/package.json

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

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

@@ -132,7 +132,7 @@ export const PreMatchBetsPopup = ({ poolId, matchId: _matchId, match: matchProp
       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,
+        (o) => (o.key ?? o.label.toLowerCase().replace(/\s+/g, "_")) === bet.selected_option,
       );
       if (oIdx < 0) continue;
       loaded[mIdx] = { optionIdx: oIdx, amount: bet.coin_amount, parlaySlot: null };
@@ -158,7 +158,7 @@ export const PreMatchBetsPopup = ({ poolId, matchId: _matchId, match: matchProp
       const mIdx = config.markets.findIndex((m) => m.backendChallengeId === d.challenge_id);
       if (mIdx < 0) continue;
       const optionIdx = config.markets[mIdx].options.findIndex(
-        (o) => o.label.toLowerCase().replace(/\s+/g, "_") === d.selected_option,
+        (o) => (o.key ?? o.label.toLowerCase().replace(/\s+/g, "_")) === d.selected_option,
       );
       if (optionIdx < 0) continue;
       restored[mIdx] = { optionIdx, amount: d.coin_amount, parlaySlot: null };
@@ -194,7 +194,7 @@ export const PreMatchBetsPopup = ({ poolId, matchId: _matchId, match: matchProp
             if (!option) return null;
             return {
               challenge_id: m.backendChallengeId,
-              selected_option: option.label.toLowerCase().replace(/\s+/g, "_"),
+              selected_option: option.key ?? option.label.toLowerCase().replace(/\s+/g, "_"),
               coin_amount: b.amount,
             };
           })
@@ -272,7 +272,7 @@ export const PreMatchBetsPopup = ({ poolId, matchId: _matchId, match: matchProp
           const market = config.markets[Number(mIdxStr)];
           return {
             challenge_id: market.backendChallengeId!,
-            selected_option: market.options[b.optionIdx].label.toLowerCase().replace(/\s+/g, "_"),
+            selected_option: market.options[b.optionIdx].key ?? market.options[b.optionIdx].label.toLowerCase().replace(/\s+/g, "_"),
             coin_amount: b.amount,
           };
         })

package/src/games/prematch-bets/config.ts

@@ -8,6 +8,7 @@ import seedrandom from "seedrandom";
 // ────── Types ──────
 
 export interface IChallengeOption {
+    key?: string;    // Backend option key (authoritative for API calls) — absent on hardcoded demo data
     label: string;
     odds: number;    // Decimal odds (e.g., 1.40 = 40% profit, 3.2 = 220% profit)
     entry: number;   // Points to bet on this option

package/src/matches/MatchCalendar.tsx

@@ -113,7 +113,7 @@ const GAME_TYPE_STYLE: Record<number, { icon: typeof Target; color: string; bg:
 };
 
 function PoolPill({ pool, onPress }: { pool: ITDPool; onPress: (pool: ITDPool) => void }) {
-  const style = GAME_TYPE_STYLE[pool.game_type] ?? { icon: Target, color: "#22E3E8", bg: "rgba(34,227,232,0.06)" };
+  const style = GAME_TYPE_STYLE[pool.game_type] ?? { icon: Target, color: "#22E3E8", bg: "rgba(34,227,232,0.06)", label: "Play" };
   const isClosed = pool.status === TDPoolStatus.CLOSED || pool.status === TDPoolStatus.RESOLVING || pool.status === TDPoolStatus.COMPLETE;
   const isOpen = pool.status === TDPoolStatus.OPEN;
 
@@ -131,20 +131,20 @@ function PoolPill({ pool, onPress }: { pool: ITDPool; onPress: (pool: ITDPool) =
         boxShadow: isOpen ? `0 0 8px ${style.color}18` : undefined,
       }}
     >
-      <span className="text-[10px] font-bold" style={{ ...OUTFIT, color: "#fff" }}>
-        {pool.display_price}
-      </span>
-      {pool.entry_count > 0 && (
-        <span className="text-[8px] font-medium" style={{ ...OUTFIT, color: "rgba(255,255,255,0.65)" }}>
-          {pool.entry_count > 999 ? `${(pool.entry_count / 1000).toFixed(1)}k` : pool.entry_count}
-        </span>
-      )}
       {isOpen && (
         <span className="relative flex h-1.5 w-1.5 shrink-0">
           <span className="animate-ping absolute inline-flex h-full w-full rounded-full opacity-60" style={{ backgroundColor: style.color }} />
           <span className="relative inline-flex rounded-full h-1.5 w-1.5" style={{ backgroundColor: style.color }} />
         </span>
       )}
+      <span className="text-[10px] font-bold tracking-wide" style={{ ...OUTFIT, color: "#fff" }}>
+        PLAY
+      </span>
+      {pool.entry_count > 0 && (
+        <span className="text-[8px] font-medium" style={{ ...OUTFIT, color: `${style.color}99` }}>
+          {pool.entry_count > 999 ? `${(pool.entry_count / 1000).toFixed(1)}k` : pool.entry_count} in
+        </span>
+      )}
     </motion.button>
   );
 }
@@ -430,17 +430,6 @@ export function MatchCalendar({ tournamentId, onPoolPress, partnerSource }: Matc
     }
   }, [scrollTargetIndex, days]);
 
-  // Stage groups
-  const stageGroups = useMemo(() => {
-    const stages = new Map<number, { name: string; orderNo: number }>();
-    for (const m of matches) {
-      if (m.stage && !stages.has(m.stage.id)) {
-        stages.set(m.stage.id, { name: m.stage.name, orderNo: m.stage.order_no });
-      }
-    }
-    return Array.from(stages.values()).sort((a, b) => a.orderNo - b.orderNo);
-  }, [matches]);
-
   const tournament = matches[0]?.tournament;
 
   if (isLoading) {
@@ -471,20 +460,8 @@ export function MatchCalendar({ tournamentId, onPoolPress, partnerSource }: Matc
               </span>
             )}
             <span className="text-[11px] text-white" style={OUTFIT}>
-              {matches.length} matches
+              {matches.length} matches announced
             </span>
-            {stageGroups.length > 0 && (
-              <span
-                className="text-[9px] barlowcondensedBold tracking-widest px-2 py-0.5 rounded-full"
-                style={{
-                  color: "#22E3E8",
-                  background: "rgba(34,227,232,0.08)",
-                  border: "1px solid rgba(34,227,232,0.15)",
-                }}
-              >
-                {stageGroups[0].name.toUpperCase()}
-              </span>
-            )}
           </div>
         </div>
       )}

package/src/pools/mapper.ts

@@ -33,6 +33,7 @@ export function buildPMBConfig(pool: ITDPoolDetail, match: ITDMatch): IChallenge
       category: c.category,
       backendChallengeId: c.id,
       options: c.options.map((o) => ({
+        key: o.key,
         label: o.label,
         odds: o.odds,
         entry: o.entry,