@devrongx/games 0.4.3 → 0.4.5

package/package.json

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

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

@@ -21,8 +21,8 @@ import { PreMatchLive } from "./PreMatchLive";
 import { PreMatchResults } from "./PreMatchResults";
 import { FullLeaderboard } from "./FullLeaderboard";
 import { useTDPool, useTDPoolEntry, useTDLeaderboard } from "../../pools/hooks";
-import { useTDMatches } from "../../matches/useTDMatches";
 import { buildPMBConfig } from "../../pools/mapper";
+import type { ITDMatch } from "../../matches/types";
 import { joinTDPool, placeTDBets } from "../../pools/actions";
 import type { ITDLeaderboardEntry } from "../../pools/types";
 import { TDPoolStatus } from "../../pools/types";
@@ -89,27 +89,28 @@ interface PreMatchBetsPopupProps {
   /** When provided, fetches real data. When absent, uses hardcoded CSK_VS_RCB demo. */
   poolId?: number;
   matchId?: number;
+  /** Pass the ITDMatch directly (from MatchCalendar's onPoolPress) to skip a redundant fetch. */
+  match?: ITDMatch;
 }
 
 // ─── Component ───────────────────────────────────────────────────────────────
 
-export const PreMatchBetsPopup = ({ poolId, matchId }: PreMatchBetsPopupProps) => {
+export const PreMatchBetsPopup = ({ poolId, matchId: _matchId, match: matchProp }: PreMatchBetsPopupProps) => {
   const { activeView: storeView } = useGamePopupStore();
 
   // ── Real API data (only when poolId provided) ────────────────────────────
   const { pool, loading: poolLoading, refetch: refetchPool } = useTDPool(poolId ?? 0);
   const { data: entryData, refetch: refetchEntry } = useTDPoolEntry(poolId ?? 0);
   const { rankings, refetch: refetchLB } = useTDLeaderboard(poolId ?? 0, { pollMs: poolId ? 30_000 : 0 });
-  const { matches } = useTDMatches(matchId !== undefined ? { tournamentId: undefined } : undefined);
-  const match = useMemo(() => matches.find((m) => m.id === matchId) ?? null, [matches, matchId]);
 
   // ── Config: real or fallback ─────────────────────────────────────────────
+  // matchProp is passed directly from MatchCalendar's onPoolPress — no extra fetch needed
   const config = useMemo(() => {
-    if (poolId && pool && match) {
-      try { return buildPMBConfig(pool, match); } catch { /* fall through */ }
+    if (poolId && pool && matchProp) {
+      try { return buildPMBConfig(pool, matchProp); } catch { /* fall through */ }
     }
     return poolId ? null : CSK_VS_RCB_CHALLENGE;
-  }, [poolId, pool, match]);
+  }, [poolId, pool, matchProp]);
 
   const fallbackPool = poolId ? null : CSK_VS_RCB_POOL;
 

package/src/matches/MatchCalendar.tsx

@@ -2,7 +2,7 @@
 "use client";
 
 import { useRef, useMemo, useEffect } from "react";
-import { motion } from "framer-motion";
+import { motion, AnimatePresence } from "framer-motion";
 import { Calendar, MapPin, Loader2, Trophy, Zap, Target, Users } from "lucide-react";
 import { useTDMatches } from "./useTDMatches";
 import { useTDPools } from "../pools/hooks";
@@ -114,26 +114,38 @@ 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 Icon = style.icon;
   const isClosed = pool.status === TDPoolStatus.CLOSED || pool.status === TDPoolStatus.RESOLVING || pool.status === TDPoolStatus.COMPLETE;
+  const isOpen = pool.status === TDPoolStatus.OPEN;
 
   return (
-    <button
+    <motion.button
       onClick={() => onPress(pool)}
-      className="flex items-center gap-1 px-1.5 py-0.5 rounded-md flex-shrink-0"
+      whileTap={{ scale: 0.93 }}
+      whileHover={{ scale: 1.04 }}
+      transition={{ type: "spring", stiffness: 500, damping: 25 }}
+      className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg flex-shrink-0"
       style={{
-        background: style.bg,
-        border: `1px solid ${style.color}20`,
-        opacity: isClosed ? 0.5 : 1,
+        background: isOpen ? style.bg.replace("0.06", "0.10") : style.bg,
+        border: `1px solid ${style.color}${isOpen ? "50" : "25"}`,
+        opacity: isClosed ? 0.45 : 1,
+        boxShadow: isOpen ? `0 0 8px ${style.color}18` : undefined,
       }}
     >
-      <span className="text-[7px] font-bold" style={{ ...OUTFIT, color: style.color }}>
+      <span className="text-[10px] font-bold" style={{ ...OUTFIT, color: "#fff" }}>
         {pool.display_price}
       </span>
       {pool.entry_count > 0 && (
-        <span className="text-[6px] text-white/30" style={OUTFIT}>·{pool.entry_count > 999 ? `${(pool.entry_count / 1000).toFixed(1)}k` : pool.entry_count}</span>
+        <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>
       )}
-    </button>
+    </motion.button>
   );
 }
 
@@ -164,21 +176,28 @@ function MatchGameSection({
   if (gameTypes.length === 0) return null;
 
   return (
-    <div className="flex flex-col gap-1 mt-1 pt-1.5" style={{ borderTop: "1px solid rgba(255,255,255,0.06)" }}>
+    <div className="flex flex-col gap-1.5 mt-1.5 pt-2" style={{ borderTop: "1px solid rgba(255,255,255,0.08)" }}>
       {gameTypes.map((gt) => {
         const style = GAME_TYPE_STYLE[gt];
         const Icon = style.icon;
         return (
-          <div key={gt} className="flex flex-col gap-0.5">
-            <div className="flex items-center gap-1 px-1">
-              <Icon size={8} style={{ color: style.color }} />
-              <span className="text-[7px] barlowcondensedBold tracking-wide text-white/60">
+          <div key={gt} className="flex flex-col gap-1">
+            <div className="flex items-center gap-1 px-0.5">
+              <Icon size={9} style={{ color: style.color }} />
+              <span className="text-[8px] barlowcondensedBold tracking-wide" style={{ color: "rgba(255,255,255,0.85)" }}>
                 {style.label}
               </span>
             </div>
-            <div className="flex gap-1 flex-wrap">
-              {grouped[gt].map((pool) => (
-                <PoolPill key={pool.id} pool={pool} onPress={onPoolPress ?? (() => {})} />
+            <div className="flex gap-1.5 flex-wrap">
+              {grouped[gt].map((pool, idx) => (
+                <motion.div
+                  key={pool.id}
+                  initial={{ opacity: 0, y: 6 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: idx * 0.04, duration: 0.25, ease: "easeOut" }}
+                >
+                  <PoolPill pool={pool} onPress={onPoolPress ?? (() => {})} />
+                </motion.div>
               ))}
             </div>
           </div>
@@ -190,7 +209,7 @@ function MatchGameSection({
 
 /* ── Match card with border shine animation ── */
 
-function MatchCard({ match, onPoolPress, partnerSource }: { match: ITDMatch; onPoolPress?: (pool: ITDPool) => void; partnerSource?: string }) {
+function MatchCard({ match, onPoolPress, partnerSource }: { match: ITDMatch; onPoolPress?: (pool: ITDPool, match: ITDMatch) => void; partnerSource?: string }) {
   const isLive = match.status === MATCH_STATUS.LIVE;
   const isCompleted = match.status === MATCH_STATUS.COMPLETED;
   const time = match.scheduled_start_at ? formatTime(toLocalDate(match.scheduled_start_at)) : "";
@@ -225,19 +244,23 @@ function MatchCard({ match, onPoolPress, partnerSource }: { match: ITDMatch; onP
         />
       )}
 
-      <div
-        className="relative flex flex-col gap-1.5 rounded-xl px-3 py-2.5"
+      <motion.div
+        className="relative flex flex-col gap-2 rounded-xl px-3.5 py-3"
         style={{
-          background: isLive ? "rgba(10,10,18,0.95)" : "rgba(10,10,18,0.98)",
+          background: isLive
+            ? "linear-gradient(160deg, rgba(14,10,24,0.98) 0%, rgba(10,8,20,0.98) 100%)"
+            : "rgba(10,10,18,0.98)",
         }}
+        whileHover={{ backgroundColor: "rgba(18,18,28,0.98)" }}
+        transition={{ duration: 0.2 }}
       >
         {/* Time + live indicator */}
-        <div className="flex items-center justify-between">
+        <div className="flex items-center justify-between gap-1">
           <span
-            className="text-[10px]"
+            className="text-[11px] font-semibold"
             style={{
               ...OUTFIT,
-              color: isLive ? "#f83cc5" : isCompleted ? "rgba(255,255,255,0.35)" : "#fff",
+              color: isLive ? "#f83cc5" : isCompleted ? "rgba(255,255,255,0.45)" : "#fff",
             }}
           >
             {time}
@@ -254,26 +277,26 @@ function MatchCard({ match, onPoolPress, partnerSource }: { match: ITDMatch; onP
             </div>
           )}
           {isCompleted && match.winner && (
-            <span className="text-[8px]" style={{ ...OUTFIT, color: "rgba(255,255,255,0.35)" }}>
+            <span className="text-[8px]" style={{ ...OUTFIT, color: "rgba(255,255,255,0.5)" }}>
               {match.winner.short_name || match.winner.name} won
             </span>
           )}
         </div>
 
         {/* Teams */}
-        <div className="flex items-center gap-1.5 justify-center">
+        <div className="flex items-center gap-2 justify-center">
           <span
-            className="barlowcondensedBold text-[20px] leading-none"
-            style={{ color: isCompleted ? "rgba(255,255,255,0.35)" : "#fff" }}
+            className="barlowcondensedBold text-[24px] leading-none tracking-wide"
+            style={{ color: isCompleted ? "rgba(255,255,255,0.4)" : "#fff" }}
           >
             {getTeamShortName(match, "a")}
           </span>
-          <span className="text-[9px]" style={{ color: "rgba(255,255,255,0.3)" }}>
-            v
+          <span className="text-[10px] font-semibold" style={{ ...OUTFIT, color: "rgba(255,255,255,0.5)" }}>
+            vs
           </span>
           <span
-            className="barlowcondensedBold text-[20px] leading-none"
-            style={{ color: isCompleted ? "rgba(255,255,255,0.35)" : "#fff" }}
+            className="barlowcondensedBold text-[24px] leading-none tracking-wide"
+            style={{ color: isCompleted ? "rgba(255,255,255,0.4)" : "#fff" }}
           >
             {getTeamShortName(match, "b")}
           </span>
@@ -282,10 +305,10 @@ function MatchCard({ match, onPoolPress, partnerSource }: { match: ITDMatch; onP
         {/* Venue */}
         {venue && (
           <div className="flex items-center gap-1 justify-center">
-            <MapPin size={8} style={{ color: "rgba(255,255,255,0.3)" }} />
+            <MapPin size={9} style={{ color: "rgba(255,255,255,0.55)" }} />
             <span
-              className="text-[8px] truncate max-w-[100px]"
-              style={{ ...OUTFIT, color: "rgba(255,255,255,0.3)" }}
+              className="text-[9px] truncate max-w-[130px]"
+              style={{ ...OUTFIT, color: "rgba(255,255,255,0.7)" }}
             >
               {venue}
             </span>
@@ -298,9 +321,9 @@ function MatchCard({ match, onPoolPress, partnerSource }: { match: ITDMatch; onP
             {Array.from({ length: Math.min(Math.ceil(match.rating_popularity / 2), 5) }).map((_, i) => (
               <Zap
                 key={i}
-                size={7}
+                size={8}
                 fill={isLive ? "#f83cc5" : "#22E3E8"}
-                style={{ color: isLive ? "#f83cc5" : "#22E3E8", opacity: 0.4 + i * 0.15 }}
+                style={{ color: isLive ? "#f83cc5" : "#22E3E8", opacity: 0.45 + i * 0.13 }}
               />
             ))}
           </div>
@@ -310,17 +333,17 @@ function MatchCard({ match, onPoolPress, partnerSource }: { match: ITDMatch; onP
         <MatchGameSection
           matchId={match.id}
           isCompleted={isCompleted}
-          onPoolPress={onPoolPress}
+          onPoolPress={onPoolPress ? (pool) => onPoolPress(pool, match) : undefined}
           partnerSource={partnerSource}
         />
-      </div>
+      </motion.div>
     </div>
   );
 }
 
 /* ── Day column ── */
 
-function DayColumn({ day, index, onPoolPress, partnerSource }: { day: IMatchDay; index: number; onPoolPress?: (pool: ITDPool) => void; partnerSource?: string }) {
+function DayColumn({ day, index, onPoolPress, partnerSource }: { day: IMatchDay; index: number; onPoolPress?: (pool: ITDPool, match: ITDMatch) => void; partnerSource?: string }) {
   const hasToday = day.label === "TODAY";
   const hasLive = day.matches.some((m) => m.status === MATCH_STATUS.LIVE);
   const allCompleted = day.matches.every((m) => m.status === MATCH_STATUS.COMPLETED);
@@ -329,32 +352,32 @@ function DayColumn({ day, index, onPoolPress, partnerSource }: { day: IMatchDay;
     <motion.div
       initial={{ opacity: 0, y: 10 }}
       animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.3, delay: index * 0.03 }}
-      className="shrink-0 flex flex-col gap-1.5"
-      style={{ scrollSnapAlign: "start", width: "140px" }}
+      transition={{ duration: 0.35, delay: index * 0.04, ease: [0.25, 0.46, 0.45, 0.94] }}
+      className="shrink-0 flex flex-col gap-2"
+      style={{ scrollSnapAlign: "start", width: "180px" }}
     >
       {/* Day header */}
-      <div className="flex flex-col items-center gap-0.5 pb-1">
+      <div className="flex flex-col items-center gap-0.5 pb-1.5">
         <span
-          className="text-[10px] barlowcondensedBold tracking-widest"
+          className="text-[11px] barlowcondensedBold tracking-widest"
           style={{
-            color: hasLive ? "#f83cc5" : hasToday ? "#22E3E8" : allCompleted ? "rgba(255,255,255,0.25)" : "#fff",
+            color: hasLive ? "#f83cc5" : hasToday ? "#22E3E8" : allCompleted ? "rgba(255,255,255,0.35)" : "rgba(255,255,255,0.9)",
           }}
         >
           {day.label}
         </span>
         <span
-          className="text-[12px] font-semibold"
+          className="text-[13px] font-semibold"
           style={{
             ...OUTFIT,
-            color: hasLive ? "#f83cc5" : hasToday ? "#22E3E8" : allCompleted ? "rgba(255,255,255,0.25)" : "#fff",
+            color: hasLive ? "#f83cc5" : hasToday ? "#22E3E8" : allCompleted ? "rgba(255,255,255,0.35)" : "#fff",
           }}
         >
           {day.dayMonth}
         </span>
         {(hasToday || hasLive) && (
           <div
-            className="w-5 h-[2px] rounded-full mt-0.5"
+            className="w-6 h-[2px] rounded-full mt-0.5"
             style={{ background: hasLive ? "#f83cc5" : "#22E3E8" }}
           />
         )}
@@ -372,8 +395,8 @@ function DayColumn({ day, index, onPoolPress, partnerSource }: { day: IMatchDay;
 
 interface MatchCalendarProps {
   tournamentId?: number;
-  /** Called when user taps a pool pill. Pass poolId + matchId to open the popup. */
-  onPoolPress?: (pool: ITDPool) => void;
+  /** Called when user taps a pool pill. Receives both the pool and its parent match. */
+  onPoolPress?: (pool: ITDPool, match: ITDMatch) => void;
   /** Filter pools to a specific partner source (e.g. "iamgame") */
   partnerSource?: string;
 }
@@ -467,18 +490,18 @@ export function MatchCalendar({ tournamentId, onPoolPress, partnerSource }: Matc
       )}
 
       {/* Section header */}
-      <div className="flex items-center gap-2 px-5 mb-2.5">
-        <Calendar size={12} style={{ color: "#22E3E8" }} />
-        <span className="barlowCondensedSemiBold text-[13px] tracking-wider text-white">
+      <div className="flex items-center gap-2 px-5 mb-3">
+        <Calendar size={13} style={{ color: "#22E3E8" }} />
+        <span className="barlowCondensedSemiBold text-[14px] tracking-wider text-white">
           SCHEDULE
         </span>
-        <div className="flex-1 h-px" style={{ background: "rgba(255,255,255,0.06)" }} />
+        <div className="flex-1 h-px" style={{ background: "rgba(255,255,255,0.08)" }} />
       </div>
 
       {/* Scrollable day columns */}
       <div
         ref={scrollRef}
-        className="flex gap-2.5 overflow-x-auto px-5 pb-3 scrollbar-hide"
+        className="flex gap-3 overflow-x-auto px-5 pb-4 scrollbar-hide"
         style={{ scrollSnapType: "x mandatory", WebkitOverflowScrolling: "touch" }}
       >
         {days.map((day, i) => (