@devrongx/games 0.4.39 → 0.4.41

package/package.json

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

package/src/matches/MatchCalendar.tsx

@@ -3,192 +3,155 @@
 
 import { useRef, useMemo, useEffect } from "react";
 import { motion } from "framer-motion";
-import { Calendar, MapPin, Loader2, Trophy, Target, Users, Zap } from "lucide-react";
+import { Calendar, MapPin, Loader2, Trophy, Target, Users, Zap, Check } from "lucide-react";
 import { useTDMatches } from "./useTDMatches";
 import { useTDPools } from "../pools/hooks";
 import type { ITDPool } from "../pools/types";
 import { TDGameType, TDPoolStatus } from "../pools/types";
 import type { ITDMatch } from "./types";
 
-const MATCH_STATUS = { UPCOMING: 1, LIVE: 2, COMPLETED: 5 } as const;
-const OUTFIT = { fontFamily: "Outfit, sans-serif" };
+const MS = { UPCOMING: 1, LIVE: 2, COMPLETED: 5 } as const;
+const O = { fontFamily: "Outfit, sans-serif" };
 
-/* ── Date helpers ── */
+/* ── helpers ── */
 
-function toLocalDate(iso: string): Date { return new Date(iso); }
+function toLocal(iso: string) { return new Date(iso); }
+function fmtDay(d: Date) { return `${d.getDate()} ${d.toLocaleString("en-US", { month: "short" }).toUpperCase()}`; }
+function fmtWeekday(d: Date) { return d.toLocaleString("en-US", { weekday: "short" }).toUpperCase(); }
+function fmtTime(d: Date) { return d.toLocaleString("en-US", { hour: "numeric", minute: "2-digit", hour12: true }); }
+function sameDay(a: Date, b: Date) { return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate(); }
+function today(d: Date) { return sameDay(d, new Date()); }
+function tomorrow(d: Date) { const t = new Date(); t.setDate(t.getDate() + 1); return sameDay(d, t); }
+function dayLabel(d: Date) { return today(d) ? "TODAY" : tomorrow(d) ? "TOMORROW" : fmtWeekday(d); }
+function teamShort(m: ITDMatch, t: "a" | "b") { const x = t === "a" ? m.team_a : m.team_b; return x.short_name || x.name.slice(0, 3).toUpperCase(); }
+function shineOp(p: number) { return p <= 0 ? 0 : Math.min(p / 10, 1); }
+function hCount(n: number) { return n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(n); }
+function isFree(p: ITDPool) { const d = (p.display_price || "").toLowerCase().trim(); return d === "" || d === "free"; }
 
-function formatDayMonth(d: Date): string {
-  return `${d.getDate()} ${d.toLocaleString("en-US", { month: "short" }).toUpperCase()}`;
-}
-
-function formatWeekday(d: Date): string {
-  return d.toLocaleString("en-US", { weekday: "short" }).toUpperCase();
-}
-
-function formatTime(d: Date): string {
-  return d.toLocaleString("en-US", { hour: "numeric", minute: "2-digit", hour12: true });
-}
-
-function isSameDay(a: Date, b: Date): boolean {
-  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
-}
-
-function isToday(d: Date): boolean { return isSameDay(d, new Date()); }
-
-function isTomorrow(d: Date): boolean {
-  const t = new Date();
-  t.setDate(t.getDate() + 1);
-  return isSameDay(d, t);
-}
-
-function getDayLabel(d: Date): string {
-  if (isToday(d)) return "TODAY";
-  if (isTomorrow(d)) return "TOMORROW";
-  return formatWeekday(d);
-}
-
-function getTeamShortName(match: ITDMatch, team: "a" | "b"): string {
-  const t = team === "a" ? match.team_a : match.team_b;
-  return t.short_name || t.name.slice(0, 3).toUpperCase();
-}
-
-function getShineOpacity(popularity: number): number {
-  if (popularity <= 0) return 0;
-  return Math.min(popularity / 10, 1);
-}
-
-function humanizeCount(n: number): string {
-  if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;
-  return String(n);
-}
-
-function isFreePool(pool: ITDPool): boolean {
-  const dp = (pool.display_price || "").toLowerCase().trim();
-  return dp === "" || dp === "free" || (pool.entry_fee === 0 && !dp);
-}
-
-/* ── Grouping: by date ── */
-
-interface IMatchDay {
-  dateKey: string;
-  date: Date;
-  label: string;
-  dayMonth: string;
-  matches: ITDMatch[];
-}
+interface IMatchDay { dateKey: string; date: Date; label: string; dayMonth: string; matches: ITDMatch[]; }
 
 function groupByDate(matches: ITDMatch[]): IMatchDay[] {
   const map = new Map<string, { date: Date; matches: ITDMatch[] }>();
   for (const m of matches) {
     if (!m.scheduled_start_at) continue;
-    const d = toLocalDate(m.scheduled_start_at);
-    const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
-    const existing = map.get(key);
-    if (existing) { existing.matches.push(m); }
-    else { map.set(key, { date: d, matches: [m] }); }
+    const d = toLocal(m.scheduled_start_at);
+    const k = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+    const e = map.get(k);
+    if (e) e.matches.push(m); else map.set(k, { date: d, matches: [m] });
   }
   return Array.from(map.entries())
     .sort(([a], [b]) => a.localeCompare(b))
-    .map(([dateKey, { date, matches: dayMatches }]) => ({
-      dateKey, date, label: getDayLabel(date), dayMonth: formatDayMonth(date), matches: dayMatches,
-    }));
+    .map(([dateKey, { date, matches }]) => ({ dateKey, date, label: dayLabel(date), dayMonth: fmtDay(date), matches }));
 }
 
-/* ── Pool display ── */
+/* ── game type config ── */
 
-const GAME_TYPE_STYLE: Record<number, { icon: typeof Target; color: string; label: string }> = {
+const GT: Record<number, { icon: typeof Target; color: string; label: string }> = {
   [TDGameType.PRE_MATCH_BETS]: { icon: Target, color: "#22E3E8", label: "Pre-Match Bets" },
   [TDGameType.FANTASY_11]: { icon: Users, color: "#9945FF", label: "Fantasy 11" },
   [TDGameType.BALL_SEQUENCE]: { icon: Zap, color: "#FF9945", label: "Ball Sequence" },
 };
 
-/** Tiny inline pill for a single pool */
+/* ── USDC icon (inline SVG) ── */
+
+function UsdcIcon({ size = 10 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="shrink-0">
+      <path d="M12 22C17.5417 22 22 17.5417 22 12C22 6.4583 17.5417 2 12 2C6.4583 2 2 6.4583 2 12C2 17.5417 6.4583 22 12 22Z" fill="#2775CA"/>
+      <path d="M14.7493 13.582C14.7493 12.1237 13.8743 11.6237 12.1243 11.4154C10.8743 11.2487 10.6243 10.9154 10.6243 10.332C10.6243 9.74863 11.041 9.37373 11.8743 9.37373C12.6243 9.37373 13.041 9.62373 13.2493 10.2487C13.291 10.3737 13.416 10.457 13.541 10.457H14.2076C14.3743 10.457 14.4993 10.332 14.4993 10.1654V10.1237C14.3326 9.20703 13.5826 8.49873 12.6243 8.41543V7.41543C12.6243 7.24873 12.4993 7.12373 12.291 7.08203H11.666C11.4993 7.08203 11.3743 7.20703 11.3326 7.41543V8.37373C10.0826 8.54043 9.29102 9.37373 9.29102 10.4154C9.29102 11.7904 10.1243 12.332 11.8743 12.5404C13.041 12.7487 13.416 12.9987 13.416 13.6654C13.416 14.3321 12.8326 14.7904 12.041 14.7904C10.9576 14.7904 10.5826 14.332 10.4576 13.707C10.416 13.5404 10.291 13.457 10.166 13.457H9.45762C9.29102 13.457 9.16602 13.582 9.16602 13.7487V13.7904C9.33262 14.832 9.99932 15.582 11.3743 15.7904V16.7904C11.3743 16.957 11.4993 17.082 11.7076 17.1237H12.3326C12.4993 17.1237 12.6243 16.9987 12.666 16.7904V15.7904C13.916 15.582 14.7493 14.707 14.7493 13.582Z" fill="white"/>
+      <path d="M9.87581 17.9596C6.62581 16.793 4.95911 13.168 6.16751 9.95957C6.79251 8.20957 8.16751 6.87627 9.87581 6.25127C10.0425 6.16797 10.1258 6.04297 10.1258 5.83457V5.25127C10.1258 5.08457 10.0425 4.95957 9.87581 4.91797C9.83411 4.91797 9.75081 4.91797 9.70911 4.95957C5.75081 6.20957 3.58411 10.418 4.83411 14.3763C5.58411 16.7096 7.37581 18.5013 9.70911 19.2513C9.87581 19.3346 10.0425 19.2513 10.0841 19.0846C10.1258 19.043 10.1258 19.0013 10.1258 18.918V18.3346C10.1258 18.2096 10.0008 18.043 9.87581 17.9596ZM14.2925 4.95957C14.1258 4.87627 13.9591 4.95957 13.9175 5.12627C13.8758 5.16797 13.8758 5.20957 13.8758 5.29297V5.87627C13.8758 6.04297 14.0008 6.20957 14.1258 6.29297C17.3758 7.45957 19.0425 11.0846 17.8341 14.293C17.2091 16.043 15.8341 17.3763 14.1258 18.0013C13.9591 18.0846 13.8758 18.2096 13.8758 18.418V19.0013C13.8758 19.168 13.9591 19.293 14.1258 19.3346C14.1675 19.3346 14.2508 19.3346 14.2925 19.293C18.2508 18.043 20.4175 13.8346 19.1675 9.87627C18.4175 7.50127 16.5841 5.70957 14.2925 4.95957Z" fill="white"/>
+    </svg>
+  );
+}
+
+/* ── pool chip ── */
+
 function PoolChip({ pool, color, onPress }: { pool: ITDPool; color: string; onPress: (p: ITDPool) => void }) {
-  const isClosed = pool.status === TDPoolStatus.CLOSED || pool.status === TDPoolStatus.RESOLVING || pool.status === TDPoolStatus.COMPLETE;
-  const isOpen = pool.status === TDPoolStatus.OPEN;
-  const free = isFreePool(pool);
+  const closed = pool.status === TDPoolStatus.CLOSED || pool.status === TDPoolStatus.RESOLVING || pool.status === TDPoolStatus.COMPLETE;
+  const open = pool.status === TDPoolStatus.OPEN;
+  const free = isFree(pool);
+  const joined = pool.has_entry === true;
+  const paid = !free;
 
   return (
     <motion.button
       onClick={() => onPress(pool)}
       whileTap={{ scale: 0.92 }}
-      className="flex items-center gap-1 px-2 py-1 rounded-md shrink-0"
+      className="relative flex items-center gap-1 shrink-0 rounded-md overflow-hidden"
       style={{
-        background: `${color}${isOpen ? "14" : "0a"}`,
-        border: `1px solid ${color}${isOpen ? "40" : "20"}`,
-        opacity: isClosed ? 0.4 : 1,
+        padding: "4px 8px",
+        background: joined ? `${color}22` : `${color}0a`,
+        border: `1px solid ${joined ? `${color}60` : `${color}${open ? "30" : "18"}`}`,
+        opacity: closed ? 0.4 : 1,
       }}
     >
-      {isOpen && (
+      {/* Joined checkmark */}
+      {joined && (
+        <Check size={8} strokeWidth={3} style={{ color }} className="shrink-0" />
+      )}
+
+      {/* USDC icon for paid pools (not joined) */}
+      {paid && !joined && <UsdcIcon size={10} />}
+
+      {/* Live dot for free pools (only if open and not joined) */}
+      {free && open && !joined && (
         <span className="relative flex h-1 w-1 shrink-0">
           <span className="animate-ping absolute inline-flex h-full w-full rounded-full opacity-50" style={{ backgroundColor: color }} />
           <span className="relative inline-flex rounded-full h-1 w-1" style={{ backgroundColor: color }} />
         </span>
       )}
-      <span className="text-[9px] font-bold" style={{ ...OUTFIT, color: free ? "rgba(255,255,255,0.8)" : "#fff" }}>
+
+      {/* Price label */}
+      <span className="text-[9px] font-semibold leading-none" style={{ ...O, color: free ? "rgba(255,255,255,0.7)" : "#fff" }}>
         {free ? "Free" : pool.display_price}
       </span>
+
+      {/* Entry count */}
       {pool.entry_count > 0 && (
-        <span className="text-[7px]" style={{ ...OUTFIT, color: `${color}90` }}>
-          {humanizeCount(pool.entry_count)}
+        <span className="text-[7px] leading-none" style={{ ...O, color: `${color}80` }}>
+          {hCount(pool.entry_count)}
         </span>
       )}
     </motion.button>
   );
 }
 
-function MatchGameSection({
-  matchId, isCompleted, onPoolPress, partnerSource,
-}: {
-  matchId: number;
-  isCompleted: boolean;
-  onPoolPress?: (pool: ITDPool) => void;
-  partnerSource?: string;
+/* ── pools section inside a match card ── */
+
+function MatchPools({ matchId, isCompleted, onPoolPress, partnerSource }: {
+  matchId: number; isCompleted: boolean; onPoolPress?: (p: ITDPool) => void; partnerSource?: string;
 }) {
   const { pools, loading } = useTDPools(matchId, partnerSource);
   if (isCompleted || loading || pools.length === 0) return null;
 
+  // Group by game_type
   const grouped: Record<number, ITDPool[]> = {};
-  for (const p of pools) { (grouped[p.game_type] ??= []).push(p); }
+  for (const p of pools) (grouped[p.game_type] ??= []).push(p);
 
-  const gameTypes = (Object.keys(grouped) as unknown as number[])
-    .map(Number)
-    .filter((gt) => gt in GAME_TYPE_STYLE);
-  if (gameTypes.length === 0) return null;
+  const types = (Object.keys(grouped) as unknown as number[]).map(Number).filter(t => t in GT);
+  if (types.length === 0) return null;
 
   return (
-    <div className="flex flex-col gap-1.5 mt-1.5 pt-1.5" style={{ borderTop: "1px solid rgba(255,255,255,0.07)" }}>
-      {gameTypes.map((gt) => {
-        const style = GAME_TYPE_STYLE[gt];
-        const Icon = style.icon;
-        // Sort: free first, then by display_price
-        const sorted = [...grouped[gt]].sort((a, b) => {
-          const af = isFreePool(a) ? 0 : 1;
-          const bf = isFreePool(b) ? 0 : 1;
-          if (af !== bf) return af - bf;
-          return a.entry_fee - b.entry_fee;
-        });
-        // Deduplicate: keep only one free pool per game type
+    <div className="flex flex-col gap-1.5 mt-1 pt-1.5" style={{ borderTop: "1px solid rgba(255,255,255,0.06)" }}>
+      {types.map(t => {
+        const s = GT[t]; const Icon = s.icon;
+        // Deduplicate: one free, then paid by price. Backend already sorts correctly.
         const seen = new Set<string>();
-        const deduped = sorted.filter((p) => {
-          const key = isFreePool(p) ? "free" : p.display_price;
-          if (seen.has(key)) return false;
-          seen.add(key);
+        const deduped = grouped[t].filter(p => {
+          const k = isFree(p) ? "free" : p.display_price;
+          if (seen.has(k)) return false;
+          seen.add(k);
           return true;
         });
 
         return (
-          <div key={gt} className="flex flex-col gap-1">
-            <div className="flex items-center gap-1">
-              <Icon size={8} style={{ color: style.color }} />
-              <span className="text-[7px] barlowcondensedBold tracking-wider uppercase" style={{ color: `${style.color}cc` }}>
-                {style.label}
-              </span>
+          <div key={t}>
+            <div className="flex items-center gap-1 mb-1">
+              <Icon size={8} style={{ color: s.color }} />
+              <span className="text-[7px] font-bold tracking-wider uppercase" style={{ ...O, color: `${s.color}bb` }}>{s.label}</span>
             </div>
             <div className="flex gap-1 flex-wrap">
-              {deduped.map((pool) => (
-                <PoolChip key={pool.id} pool={pool} color={style.color} onPress={onPoolPress ?? (() => {})} />
-              ))}
+              {deduped.map(p => <PoolChip key={p.id} pool={p} color={s.color} onPress={onPoolPress ?? (() => {})} />)}
             </div>
           </div>
         );
@@ -197,135 +160,92 @@ function MatchGameSection({
   );
 }
 
-/* ── Match card ── */
+/* ── match card ── */
 
-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)) : "";
+function MatchCard({ match, onPoolPress, partnerSource }: { match: ITDMatch; onPoolPress?: (p: ITDPool, m: ITDMatch) => void; partnerSource?: string }) {
+  const live = match.status === MS.LIVE;
+  const done = match.status === MS.COMPLETED;
+  const time = match.scheduled_start_at ? fmtTime(toLocal(match.scheduled_start_at)) : "";
   const venue = match.venue?.city?.trim() || match.venue?.name;
-  const shineOpacity = getShineOpacity(match.rating_popularity);
-  const showShine = shineOpacity > 0 && !isCompleted;
+  const so = shineOp(match.rating_popularity);
+  const shine = so > 0 && !done;
 
   return (
     <div className="relative w-full rounded-xl p-[1px] overflow-hidden">
-      {showShine && (
-        <div
-          className="absolute inset-[-50%] pointer-events-none"
-          style={{
-            background: isLive
-              ? `conic-gradient(from 0deg, transparent 0%, transparent 65%, rgba(248,60,197,${shineOpacity * 0.6}) 75%, rgba(255,255,255,${shineOpacity * 0.7}) 80%, rgba(248,60,197,${shineOpacity * 0.6}) 85%, transparent 95%, transparent 100%)`
-              : `conic-gradient(from 0deg, transparent 0%, transparent 70%, rgba(34,227,232,${shineOpacity * 0.5}) 78%, rgba(255,255,255,${shineOpacity * 0.6}) 80%, rgba(34,227,232,${shineOpacity * 0.5}) 82%, transparent 90%, transparent 100%)`,
-            animation: `borderShine ${6 - shineOpacity * 2}s linear infinite`,
-          }}
-        />
-      )}
-      {!showShine && (
-        <div className="absolute inset-0 rounded-xl" style={{ border: isCompleted ? "1px solid rgba(255,255,255,0.06)" : "1px solid rgba(255,255,255,0.08)" }} />
+      {shine && (
+        <div className="absolute inset-[-50%] pointer-events-none" style={{
+          background: live
+            ? `conic-gradient(from 0deg, transparent 0%, transparent 65%, rgba(248,60,197,${so * 0.6}) 75%, rgba(255,255,255,${so * 0.7}) 80%, rgba(248,60,197,${so * 0.6}) 85%, transparent 95%, transparent 100%)`
+            : `conic-gradient(from 0deg, transparent 0%, transparent 70%, rgba(34,227,232,${so * 0.5}) 78%, rgba(255,255,255,${so * 0.6}) 80%, rgba(34,227,232,${so * 0.5}) 82%, transparent 90%, transparent 100%)`,
+          animation: `borderShine ${6 - so * 2}s linear infinite`,
+        }} />
       )}
+      {!shine && <div className="absolute inset-0 rounded-xl" style={{ border: done ? "1px solid rgba(255,255,255,0.05)" : "1px solid rgba(255,255,255,0.08)" }} />}
 
-      <motion.div
+      <div
         className="relative flex flex-col gap-1 rounded-xl px-2.5 py-2"
-        style={{
-          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)",
-        }}
+        style={{ background: live ? "linear-gradient(160deg, rgba(14,10,24,0.98), rgba(10,8,20,0.98))" : "rgba(10,10,18,0.98)" }}
       >
-        {/* Time row */}
+        {/* time */}
         <div className="flex items-center justify-between">
-          <span className="text-[9px] font-semibold" style={{ ...OUTFIT, color: isLive ? "#f83cc5" : isCompleted ? "rgba(255,255,255,0.4)" : "rgba(255,255,255,0.6)" }}>
-            {time}
-          </span>
-          {isLive && (
+          <span className="text-[9px] font-medium" style={{ ...O, color: live ? "#f83cc5" : done ? "rgba(255,255,255,0.35)" : "rgba(255,255,255,0.55)" }}>{time}</span>
+          {live && (
             <div className="flex items-center gap-1">
-              <span className="relative flex h-1.5 w-1.5">
-                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#f83cc5] opacity-75" />
-                <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-[#f83cc5]" />
-              </span>
-              <span className="text-[7px] barlowcondensedBold tracking-widest" style={{ color: "#f83cc5" }}>LIVE</span>
+              <span className="relative flex h-1.5 w-1.5"><span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#f83cc5] opacity-75" /><span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-[#f83cc5]" /></span>
+              <span className="text-[7px] font-bold tracking-widest" style={{ ...O, color: "#f83cc5" }}>LIVE</span>
             </div>
           )}
-          {isCompleted && match.winner && (
-            <span className="text-[7px]" style={{ ...OUTFIT, color: "rgba(255,255,255,0.45)" }}>
-              {match.winner.short_name || match.winner.name} won
-            </span>
-          )}
+          {done && match.winner && <span className="text-[7px]" style={{ ...O, color: "rgba(255,255,255,0.4)" }}>{match.winner.short_name || match.winner.name} won</span>}
         </div>
 
-        {/* Teams */}
-        <div className="flex items-center gap-1.5 justify-center">
-          <span className="barlowcondensedBold text-[18px] leading-none tracking-wide" style={{ color: isCompleted ? "rgba(255,255,255,0.4)" : "#fff" }}>
-            {getTeamShortName(match, "a")}
-          </span>
-          <span className="text-[8px] font-semibold" style={{ ...OUTFIT, color: "rgba(255,255,255,0.4)" }}>vs</span>
-          <span className="barlowcondensedBold text-[18px] leading-none tracking-wide" style={{ color: isCompleted ? "rgba(255,255,255,0.4)" : "#fff" }}>
-            {getTeamShortName(match, "b")}
-          </span>
+        {/* teams */}
+        <div className="flex items-center gap-1.5 justify-center py-0.5">
+          <span className="barlowcondensedBold text-[18px] leading-none tracking-wide" style={{ color: done ? "rgba(255,255,255,0.35)" : "#fff" }}>{teamShort(match, "a")}</span>
+          <span className="text-[8px] font-medium" style={{ ...O, color: "rgba(255,255,255,0.35)" }}>vs</span>
+          <span className="barlowcondensedBold text-[18px] leading-none tracking-wide" style={{ color: done ? "rgba(255,255,255,0.35)" : "#fff" }}>{teamShort(match, "b")}</span>
         </div>
 
-        {/* Venue */}
+        {/* venue */}
         {venue && (
           <div className="flex items-center gap-0.5 justify-center">
-            <MapPin size={7} style={{ color: "rgba(255,255,255,0.4)" }} />
-            <span className="text-[7px] truncate max-w-[110px]" style={{ ...OUTFIT, color: "rgba(255,255,255,0.55)" }}>
-              {venue}
-            </span>
+            <MapPin size={7} style={{ color: "rgba(255,255,255,0.35)" }} />
+            <span className="text-[7px] truncate max-w-[110px]" style={{ ...O, color: "rgba(255,255,255,0.5)" }}>{venue}</span>
           </div>
         )}
 
-        {/* Pools */}
-        <MatchGameSection
-          matchId={match.id}
-          isCompleted={isCompleted}
-          onPoolPress={onPoolPress ? (pool) => onPoolPress(pool, match) : undefined}
-          partnerSource={partnerSource}
-        />
-      </motion.div>
+        {/* pools */}
+        <MatchPools matchId={match.id} isCompleted={done} onPoolPress={onPoolPress ? p => onPoolPress(p, match) : undefined} partnerSource={partnerSource} />
+      </div>
     </div>
   );
 }
 
-/* ── Day column ── */
+/* ── day column ── */
 
-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);
+function DayCol({ day, idx, onPoolPress, ps }: { day: IMatchDay; idx: number; onPoolPress?: (p: ITDPool, m: ITDMatch) => void; ps?: string }) {
+  const isToday = day.label === "TODAY";
+  const hasLive = day.matches.some(m => m.status === MS.LIVE);
+  const allDone = day.matches.every(m => m.status === MS.COMPLETED);
 
   return (
     <motion.div
-      initial={{ opacity: 0, y: 10 }}
+      initial={{ opacity: 0, y: 8 }}
       animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.35, delay: index * 0.04, ease: [0.25, 0.46, 0.45, 0.94] }}
+      transition={{ duration: 0.3, delay: idx * 0.03 }}
       className="shrink-0 flex flex-col gap-1.5"
       style={{ scrollSnapAlign: "start", width: "150px" }}
     >
-      <div className="flex flex-col items-center gap-0.5 pb-1">
-        <span
-          className="text-[9px] barlowcondensedBold tracking-widest"
-          style={{ color: hasLive ? "#f83cc5" : hasToday ? "#22E3E8" : allCompleted ? "rgba(255,255,255,0.3)" : "rgba(255,255,255,0.85)" }}
-        >
-          {day.label}
-        </span>
-        <span
-          className="text-[11px] font-semibold"
-          style={{ ...OUTFIT, color: hasLive ? "#f83cc5" : hasToday ? "#22E3E8" : allCompleted ? "rgba(255,255,255,0.3)" : "#fff" }}
-        >
-          {day.dayMonth}
-        </span>
-        {(hasToday || hasLive) && (
-          <div className="w-4 h-[1.5px] rounded-full mt-0.5" style={{ background: hasLive ? "#f83cc5" : "#22E3E8" }} />
-        )}
+      <div className="flex flex-col items-center pb-1">
+        <span className="text-[9px] font-bold tracking-widest" style={{ ...O, color: hasLive ? "#f83cc5" : isToday ? "#22E3E8" : allDone ? "rgba(255,255,255,0.25)" : "rgba(255,255,255,0.8)" }}>{day.label}</span>
+        <span className="text-[11px] font-semibold" style={{ ...O, color: hasLive ? "#f83cc5" : isToday ? "#22E3E8" : allDone ? "rgba(255,255,255,0.25)" : "#fff" }}>{day.dayMonth}</span>
+        {(isToday || hasLive) && <div className="w-4 h-[1.5px] rounded-full mt-0.5" style={{ background: hasLive ? "#f83cc5" : "#22E3E8" }} />}
       </div>
-      {day.matches.map((match) => (
-        <MatchCard key={match.id} match={match} onPoolPress={onPoolPress} partnerSource={partnerSource} />
-      ))}
+      {day.matches.map(m => <MatchCard key={m.id} match={m} onPoolPress={onPoolPress} partnerSource={ps} />)}
     </motion.div>
   );
 }
 
-/* ── Main calendar ── */
+/* ── main ── */
 
 interface MatchCalendarProps {
   tournamentId?: number;
@@ -334,53 +254,41 @@ interface MatchCalendarProps {
 }
 
 export function MatchCalendar({ tournamentId, onPoolPress, partnerSource }: MatchCalendarProps) {
-  const scrollRef = useRef<HTMLDivElement>(null);
+  const ref = useRef<HTMLDivElement>(null);
   const { matches, isLoading, error } = useTDMatches({ tournamentId, limit: 100 });
   const days = useMemo(() => groupByDate(matches), [matches]);
 
-  const scrollTargetIndex = useMemo(() => {
-    const tIdx = days.findIndex((d) => isToday(d.date));
-    if (tIdx >= 0) return tIdx;
+  const scrollIdx = useMemo(() => {
+    const ti = days.findIndex(d => today(d.date));
+    if (ti >= 0) return ti;
     const now = new Date();
-    const uIdx = days.findIndex((d) => d.date >= now);
-    if (uIdx >= 0) return Math.max(0, uIdx);
-    return 0;
+    const ui = days.findIndex(d => d.date >= now);
+    return ui >= 0 ? Math.max(0, ui) : 0;
   }, [days]);
 
   useEffect(() => {
-    if (scrollRef.current && scrollTargetIndex > 0) {
-      const target = scrollRef.current.children[scrollTargetIndex] as HTMLElement;
-      if (target) scrollRef.current.scrollTo({ left: target.offsetLeft - 16, behavior: "smooth" });
+    if (ref.current && scrollIdx > 0) {
+      const t = ref.current.children[scrollIdx] as HTMLElement;
+      if (t) ref.current.scrollTo({ left: t.offsetLeft - 16, behavior: "smooth" });
     }
-  }, [scrollTargetIndex, days]);
-
-  const tournament = matches[0]?.tournament;
+  }, [scrollIdx, days]);
 
-  if (isLoading) {
-    return (
-      <div className="flex items-center justify-center py-6">
-        <Loader2 size={16} className="animate-spin" style={{ color: "rgba(255,255,255,0.3)" }} />
-      </div>
-    );
-  }
+  const tourney = matches[0]?.tournament;
 
+  if (isLoading) return <div className="flex items-center justify-center py-6"><Loader2 size={16} className="animate-spin" style={{ color: "rgba(255,255,255,0.3)" }} /></div>;
   if (error || matches.length === 0) return null;
 
   return (
     <div className="relative z-30 w-full mt-5 mb-3">
-      {tournament && (
+      {tourney && (
         <div className="px-5 mb-2.5">
           <div className="flex items-center gap-2 mb-0.5">
             <Trophy size={13} style={{ color: "#22E3E8" }} />
-            <span className="barlowcondensedBold text-[15px] tracking-wide text-white">{tournament.name}</span>
+            <span className="barlowcondensedBold text-[15px] tracking-wide text-white">{tourney.name}</span>
           </div>
           <div className="flex items-center gap-3">
-            {tournament.start_date && tournament.end_date && (
-              <span className="text-[10px] text-white/50" style={OUTFIT}>
-                {formatDayMonth(toLocalDate(tournament.start_date))} – {formatDayMonth(toLocalDate(tournament.end_date))}
-              </span>
-            )}
-            <span className="text-[10px] text-white/50" style={OUTFIT}>{matches.length} matches</span>
+            {tourney.start_date && tourney.end_date && <span className="text-[10px] text-white/50" style={O}>{fmtDay(toLocal(tourney.start_date))} – {fmtDay(toLocal(tourney.end_date))}</span>}
+            <span className="text-[10px] text-white/50" style={O}>{matches.length} matches</span>
           </div>
         </div>
       )}
@@ -388,17 +296,11 @@ export function MatchCalendar({ tournamentId, onPoolPress, partnerSource }: Matc
       <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">SCHEDULE</span>
-        <div className="flex-1 h-px" style={{ background: "rgba(255,255,255,0.07)" }} />
+        <div className="flex-1 h-px" style={{ background: "rgba(255,255,255,0.06)" }} />
       </div>
 
-      <div
-        ref={scrollRef}
-        className="flex gap-2.5 overflow-x-auto px-5 pb-3 scrollbar-hide"
-        style={{ scrollSnapType: "x mandatory", WebkitOverflowScrolling: "touch" }}
-      >
-        {days.map((day, i) => (
-          <DayColumn key={day.dateKey} day={day} index={i} onPoolPress={onPoolPress} partnerSource={partnerSource} />
-        ))}
+      <div ref={ref} className="flex gap-2.5 overflow-x-auto px-5 pb-3 scrollbar-hide" style={{ scrollSnapType: "x mandatory", WebkitOverflowScrolling: "touch" }}>
+        {days.map((d, i) => <DayCol key={d.dateKey} day={d} idx={i} onPoolPress={onPoolPress} ps={partnerSource} />)}
       </div>
     </div>
   );

package/src/pools/types.ts

@@ -60,6 +60,7 @@ export interface ITDPool {
   entry_count: number;
   challenge_count: number;
   currency: ITDCurrency;
+  has_entry?: boolean;
 }
 
 // ─── Challenge option (nested in pool detail) ────────────────────────────────