@devrongx/games 0.4.38 → 0.4.40

package/package.json

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

package/src/matches/MatchCalendar.tsx

@@ -3,226 +3,139 @@
 
 import { useRef, useMemo, useEffect } from "react";
 import { motion } from "framer-motion";
-import { Calendar, MapPin, Loader2, Trophy, Zap, Target, Users } 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";
 
-// TD match status enum values
-const MATCH_STATUS = {
-  UPCOMING: 1,
-  LIVE: 2,
-  COMPLETED: 5,
-} as const;
+const MS = { UPCOMING: 1, LIVE: 2, COMPLETED: 5 } as const;
+const O = { fontFamily: "Outfit, sans-serif" };
 
-const OUTFIT = { fontFamily: "Outfit, sans-serif" };
+/* ── helpers ── */
 
-/* ── Date helpers ── */
+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 toLocalDate(iso: string): Date {
-  return new Date(iso);
-}
-
-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();
-}
-
-/** Map popularity 0-10 to border shine opacity (0 = no shine, 10 = full intensity) */
-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);
-}
-
-/** Determine if a pool is free based on display_price and entry_fee */
-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 row item ── */
+/* ── game type config ── */
 
-const GAME_TYPE_STYLE: Record<number, { icon: typeof Target; color: string; bg: string; label: string }> = {
-  [TDGameType.PRE_MATCH_BETS]: { icon: Target, color: "#22E3E8", bg: "rgba(34,227,232,0.06)", label: "Pre-Match Bets" },
-  [TDGameType.FANTASY_11]: { icon: Users, color: "#9945FF", bg: "rgba(153,69,255,0.06)", label: "Fantasy 11" },
-  [TDGameType.BALL_SEQUENCE]: { icon: Zap, color: "#FF9945", bg: "rgba(255,153,69,0.06)", label: "Ball Sequence" },
+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" },
 };
 
-function PoolRow({ 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)", label: "Play" };
-  const isClosed = pool.status === TDPoolStatus.CLOSED || pool.status === TDPoolStatus.RESOLVING || pool.status === TDPoolStatus.COMPLETE;
-  const isOpen = pool.status === TDPoolStatus.OPEN;
-  const free = isFreePool(pool);
+/* ── pool chip ── */
+
+function PoolChip({ pool, color, onPress }: { pool: ITDPool; color: string; onPress: (p: ITDPool) => void }) {
+  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;
 
   return (
     <motion.button
       onClick={() => onPress(pool)}
-      whileTap={{ scale: 0.96 }}
-      className="flex items-center gap-1.5 w-full px-2 py-1.5 rounded-lg"
+      whileTap={{ scale: 0.92 }}
+      className="relative flex items-center gap-1 shrink-0 rounded-md overflow-hidden"
       style={{
-        background: isOpen ? style.bg.replace("0.06", "0.08") : style.bg,
-        border: `1px solid ${style.color}${isOpen ? "30" : "18"}`,
-        opacity: isClosed ? 0.45 : 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,
       }}
     >
-      {/* Live dot */}
-      {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 }} />
+      {/* Joined checkmark */}
+      {joined && (
+        <Check size={8} strokeWidth={3} style={{ color }} className="shrink-0" />
+      )}
+
+      {/* Live dot (only if open and not joined) */}
+      {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>
       )}
 
-      {/* Label: "Play for Free" or cost */}
-      <span className="flex-1 text-left text-[9px] font-bold tracking-wide" style={{ ...OUTFIT, color: free ? "rgba(255,255,255,0.9)" : "#fff" }}>
-        {free ? "Play for Free" : pool.display_price}
+      {/* 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 for non-free pools, or always if there are entries */}
+      {/* Entry count */}
       {pool.entry_count > 0 && (
-        <span className="text-[8px] font-medium shrink-0" style={{ ...OUTFIT, color: `${style.color}99` }}>
-          {humanizeCount(pool.entry_count)} in
+        <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 (integer)
+  // 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-2 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;
-        // Sort: free pools first, then by display_price ascending
-        const sorted = [...grouped[gt]].sort((a, b) => {
-          const aFree = isFreePool(a) ? 0 : 1;
-          const bFree = isFreePool(b) ? 0 : 1;
-          if (aFree !== bFree) return aFree - bFree;
-          return a.entry_fee - b.entry_fee;
+    <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 = 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">
-            {/* Game type pill header */}
-            <div className="flex items-center gap-1 px-0.5 mb-0.5">
-              <Icon size={9} style={{ color: style.color }} />
-              <span className="text-[8px] barlowcondensedBold tracking-wide" style={{ color: style.color }}>
-                {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>
-            {/* Pool rows */}
-            <div className="flex flex-col gap-1">
-              {sorted.map((pool, idx) => (
-                <motion.div
-                  key={pool.id}
-                  initial={{ opacity: 0, y: 4 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ delay: idx * 0.03, duration: 0.2, ease: "easeOut" }}
-                >
-                  <PoolRow pool={pool} onPress={onPoolPress ?? (() => {})} />
-                </motion.div>
-              ))}
+            <div className="flex gap-1 flex-wrap">
+              {deduped.map(p => <PoolChip key={p.id} pool={p} color={s.color} onPress={onPoolPress ?? (() => {})} />)}
             </div>
           </div>
         );
@@ -231,269 +144,147 @@ function MatchGameSection({
   );
 }
 
-/* ── Match card with border shine animation ── */
+/* ── 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">
-      {/* Spinning border shine — intensity based on popularity */}
-      {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`,
-          }}
-        />
+      {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)" }} />}
 
-      {/* Static border for no-shine / completed */}
-      {!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)",
-          }}
-        />
-      )}
-
-      <motion.div
-        className="relative flex flex-col gap-1.5 rounded-xl px-3 py-2.5"
-        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)",
-        }}
-        whileHover={{ backgroundColor: "rgba(18,18,28,0.98)" }}
-        transition={{ duration: 0.2 }}
+      <div
+        className="relative flex flex-col gap-1 rounded-xl px-2.5 py-2"
+        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 + live indicator */}
-        <div className="flex items-center justify-between gap-1">
-          <span
-            className="text-[10px] font-semibold"
-            style={{
-              ...OUTFIT,
-              color: isLive ? "#f83cc5" : isCompleted ? "rgba(255,255,255,0.45)" : "rgba(255,255,255,0.7)",
-            }}
-          >
-            {time}
-          </span>
-          {isLive && (
+        {/* time */}
+        <div className="flex items-center justify-between">
+          <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-[8px] 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-[8px]" style={{ ...OUTFIT, color: "rgba(255,255,255,0.5)" }}>
-              {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-2 justify-center">
-          <span
-            className="barlowcondensedBold text-[20px] leading-none tracking-wide"
-            style={{ color: isCompleted ? "rgba(255,255,255,0.4)" : "#fff" }}
-          >
-            {getTeamShortName(match, "a")}
-          </span>
-          <span className="text-[9px] font-semibold" style={{ ...OUTFIT, color: "rgba(255,255,255,0.45)" }}>
-            vs
-          </span>
-          <span
-            className="barlowcondensedBold text-[20px] 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-1 justify-center">
-            <MapPin size={8} style={{ color: "rgba(255,255,255,0.45)" }} />
-            <span
-              className="text-[8px] truncate max-w-[120px]"
-              style={{ ...OUTFIT, color: "rgba(255,255,255,0.6)" }}
-            >
-              {venue}
-            </span>
+          <div className="flex items-center gap-0.5 justify-center">
+            <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>
         )}
 
-        {/* Game modes — driven by real 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] }}
-      className="shrink-0 flex flex-col gap-2"
-      style={{ scrollSnapAlign: "start", width: "160px" }}
+      transition={{ duration: 0.3, delay: idx * 0.03 }}
+      className="shrink-0 flex flex-col gap-1.5"
+      style={{ scrollSnapAlign: "start", width: "150px" }}
     >
-      {/* Day header */}
-      <div className="flex flex-col items-center gap-0.5 pb-1">
-        <span
-          className="text-[10px] barlowcondensedBold tracking-widest"
-          style={{
-            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"
-          style={{
-            ...OUTFIT,
-            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"
-            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>
-
-      {/* Match cards for the day */}
-      {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 component ── */
+/* ── main ── */
 
 interface MatchCalendarProps {
   tournamentId?: number;
-  /** 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;
 }
 
 export function MatchCalendar({ tournamentId, onPoolPress, partnerSource }: MatchCalendarProps) {
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const { matches, isLoading, error } = useTDMatches({
-    tournamentId,
-    limit: 100,
-  });
-
+  const ref = useRef<HTMLDivElement>(null);
+  const { matches, isLoading, error } = useTDMatches({ tournamentId, limit: 100 });
   const days = useMemo(() => groupByDate(matches), [matches]);
 
-  // Auto-scroll to today or first upcoming day
-  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 container = scrollRef.current;
-      const target = container.children[scrollTargetIndex] as HTMLElement;
-      if (target) {
-        container.scrollTo({ left: target.offsetLeft - 20, 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]);
+  }, [scrollIdx, days]);
 
-  const tournament = 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>
-    );
-  }
+  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-6 mb-4">
-      {/* Tournament info header */}
-      {tournament && (
-        <div className="px-5 mb-3">
-          <div className="flex items-center gap-2 mb-1">
-            <Trophy size={14} style={{ color: "#22E3E8" }} />
-            <span className="barlowcondensedBold text-[16px] tracking-wide text-white">
-              {tournament.name}
-            </span>
+    <div className="relative z-30 w-full mt-5 mb-3">
+      {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">{tourney.name}</span>
           </div>
           <div className="flex items-center gap-3">
-            {tournament.start_date && tournament.end_date && (
-              <span className="text-[11px] text-white" style={OUTFIT}>
-                {formatDayMonth(toLocalDate(tournament.start_date))} – {formatDayMonth(toLocalDate(tournament.end_date))}
-              </span>
-            )}
-            <span className="text-[11px] text-white" style={OUTFIT}>
-              {matches.length} matches announced
-            </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>
       )}
 
-      {/* Section header */}
-      <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.08)" }} />
+      <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.06)" }} />
       </div>
 
-      {/* Scrollable day columns */}
-      <div
-        ref={scrollRef}
-        className="flex gap-3 overflow-x-auto px-5 pb-4 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) ────────────────────────────────