@devrongx/games 0.4.39 → 0.4.40

package/package.json

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

package/src/matches/MatchCalendar.tsx

@@ -3,192 +3,139 @@
 
 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 */
+/* ── 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;
 
   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" />
+      )}
+
+      {/* 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>
       )}
-      <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 +144,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 +238,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]);
+  }, [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-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 +280,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) ────────────────────────────────