@devrongx/games 0.2.0 → 0.3.0

package/package.json

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

package/src/index.ts

@@ -11,4 +11,4 @@ export type { IChallengeConfig, IChallengeMarket, IChallengeOption, IChallengeTe
 
 // Matches — TD match calendar, data fetching, and types
 export { configureTDClient, fetchTDMatches, useTDMatches, MatchCalendar } from "./matches";
-export type { ITDClientConfig, ITDMatch, ITDTeam, ITDPlayer, ITDVenue, ITDTournament, ITDMatchesResponse, ITDMatchesParams, UseTDMatchesResult } from "./matches";
+export type { ITDClientConfig, ITDMatch, ITDTeam, ITDPlayer, ITDVenue, ITDTournament, ITDStage, ITDMatchesResponse, ITDMatchesParams, UseTDMatchesResult } from "./matches";

package/src/matches/MatchCalendar.tsx

@@ -1,14 +1,12 @@
 // @devrongx/games — matches/MatchCalendar.tsx
 "use client";
 
-import { useRef } from "react";
+import { useRef, useMemo } from "react";
 import { motion } from "framer-motion";
-import { Calendar, MapPin, Loader2 } from "lucide-react";
+import { Calendar, MapPin, Loader2, Zap, ChevronRight } from "lucide-react";
 import { useTDMatches } from "./useTDMatches";
 import type { ITDMatch } from "./types";
 
-const OUTFIT = { fontFamily: "Outfit, sans-serif" };
-
 // TD match status enum values
 const MATCH_STATUS = {
   UPCOMING: 1,
@@ -16,20 +14,42 @@ const MATCH_STATUS = {
   COMPLETED: 5,
 } as const;
 
-function formatMatchDate(iso: string): { day: string; month: string; time: string; weekday: string } {
-  const d = new Date(iso);
-  return {
-    day: d.getDate().toString(),
-    month: d.toLocaleString("en-US", { month: "short" }).toUpperCase(),
-    time: d.toLocaleString("en-US", { hour: "numeric", minute: "2-digit", hour12: true }),
-    weekday: d.toLocaleString("en-US", { weekday: "short" }).toUpperCase(),
-  };
+/* ── Date helpers ── */
+
+function toLocalDate(iso: string): Date {
+  return new Date(iso);
 }
 
-function getStatusLabel(match: ITDMatch): { text: string; color: string } {
-  if (match.status === MATCH_STATUS.LIVE) return { text: "LIVE", color: "#f83cc5" };
-  if (match.status === MATCH_STATUS.COMPLETED) return { text: "COMPLETED", color: "rgba(255,255,255,0.35)" };
-  return { text: "UPCOMING", color: "#22E3E8" };
+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 {
@@ -37,86 +57,200 @@ function getTeamShortName(match: ITDMatch, team: "a" | "b"): string {
   return t.short_name || t.name.slice(0, 3).toUpperCase();
 }
 
-interface MatchCardProps {
-  match: ITDMatch;
+/* ── Grouping: by date ── */
+
+interface IMatchDay {
+  dateKey: string; // YYYY-MM-DD
+  date: Date;
+  label: string; // "TODAY", "TOMORROW", "SAT", etc
+  dayMonth: string; // "28 MAR"
+  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] });
+    }
+  }
+
+  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,
+    }));
 }
 
-function MatchCard({ match }: MatchCardProps) {
-  const status = getStatusLabel(match);
-  const date = match.scheduled_start_at ? formatMatchDate(match.scheduled_start_at) : null;
+/* ── Mini match row inside a day column ── */
+
+function MatchRow({ match }: { match: ITDMatch }) {
+  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)) : "";
+  const venue = match.venue?.city || match.venue?.name;
 
   return (
     <div
-      className="shrink-0 w-[160px] rounded-xl p-[1px] overflow-hidden"
+      className="flex flex-col gap-1 rounded-xl px-3 py-2.5"
       style={{
-        background: isCompleted
-          ? "rgba(255,255,255,0.08)"
-          : "linear-gradient(135deg, rgba(34,227,232,0.3), rgba(153,69,255,0.3))",
+        background: isLive
+          ? "rgba(248,60,197,0.08)"
+          : isCompleted
+            ? "rgba(255,255,255,0.02)"
+            : "rgba(255,255,255,0.03)",
+        border: isLive
+          ? "1px solid rgba(248,60,197,0.2)"
+          : "1px solid rgba(255,255,255,0.04)",
       }}
     >
-      <div
-        className="flex flex-col items-center rounded-xl px-3 py-3 h-full"
-        style={{ background: isCompleted ? "rgba(10,10,18,0.85)" : "rgba(10,10,18,0.95)" }}
-      >
-        {/* Date */}
-        {date && (
-          <div className="flex items-center gap-1.5 mb-2">
-            <Calendar size={10} className="text-white/40" />
-            <span className="text-[10px] text-white/50 tracking-wide" style={OUTFIT}>
-              {date.weekday} {date.day} {date.month} &middot; {date.time}
+      {/* Time + status row */}
+      <div className="flex items-center justify-between">
+        <span
+          className="text-[10px]"
+          style={{
+            fontFamily: "Outfit, sans-serif",
+            color: isLive ? "#f83cc5" : isCompleted ? "rgba(255,255,255,0.2)" : "rgba(255,255,255,0.4)",
+          }}
+        >
+          {time}
+        </span>
+        {isLive && (
+          <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>
           </div>
         )}
-
-        {/* Teams */}
-        <div className="flex items-center gap-2 w-full justify-center">
-          <span className="barlowcondensedBold text-[20px] text-white leading-none">
-            {getTeamShortName(match, "a")}
-          </span>
-          <span className="text-[10px] text-white/30 barlowCondensedSemiBold">VS</span>
-          <span className="barlowcondensedBold text-[20px] text-white leading-none">
-            {getTeamShortName(match, "b")}
+        {isCompleted && match.winner && (
+          <span
+            className="text-[8px] tracking-wide"
+            style={{ fontFamily: "Outfit, sans-serif", color: "rgba(255,255,255,0.2)" }}
+          >
+            {match.winner.short_name || match.winner.name} won
           </span>
-        </div>
-
-        {/* Venue */}
-        {match.venue && (
-          <div className="flex items-center gap-1 mt-1.5">
-            <MapPin size={8} className="text-white/30 shrink-0" />
-            <span
-              className="text-[9px] text-white/30 truncate max-w-[130px]"
-              style={OUTFIT}
-            >
-              {match.venue.city || match.venue.name}
-            </span>
-          </div>
         )}
+      </div>
 
-        {/* Status badge */}
-        <div
-          className="mt-2 px-2 py-0.5 rounded-full"
-          style={{ background: `${status.color}15` }}
+      {/* Teams */}
+      <div className="flex items-center gap-1.5 justify-center">
+        <span
+          className="barlowcondensedBold text-[18px] leading-none"
+          style={{ color: isCompleted ? "rgba(255,255,255,0.3)" : "#fff" }}
         >
+          {getTeamShortName(match, "a")}
+        </span>
+        <span className="text-[9px]" style={{ color: "rgba(255,255,255,0.2)" }}>
+          v
+        </span>
+        <span
+          className="barlowcondensedBold text-[18px] leading-none"
+          style={{ color: isCompleted ? "rgba(255,255,255,0.3)" : "#fff" }}
+        >
+          {getTeamShortName(match, "b")}
+        </span>
+      </div>
+
+      {/* Venue */}
+      {venue && (
+        <div className="flex items-center gap-1 justify-center">
+          <MapPin size={7} style={{ color: "rgba(255,255,255,0.15)" }} />
           <span
-            className="text-[9px] barlowcondensedBold tracking-wider"
-            style={{ color: status.color }}
+            className="text-[8px] truncate max-w-[100px]"
+            style={{ fontFamily: "Outfit, sans-serif", color: "rgba(255,255,255,0.15)" }}
           >
-            {status.text}
+            {venue}
           </span>
         </div>
+      )}
+    </div>
+  );
+}
 
-        {/* Score for completed matches */}
-        {isCompleted && match.innings_summaries_json && Array.isArray(match.innings_summaries_json) && (
-          <div className="mt-1.5 text-[9px] text-white/40" style={OUTFIT}>
-            {match.winner ? `${match.winner.short_name || match.winner.name} won` : "No result"}
-          </div>
+/* ── Day column ── */
+
+function DayColumn({ day, index }: { day: IMatchDay; index: number }) {
+  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);
+
+  return (
+    <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: "130px" }}
+    >
+      {/* 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.15)"
+                  : "rgba(255,255,255,0.4)",
+          }}
+        >
+          {day.label}
+        </span>
+        <span
+          className="text-[11px] font-semibold"
+          style={{
+            fontFamily: "Outfit, sans-serif",
+            color: hasLive
+              ? "rgba(248,60,197,0.8)"
+              : hasToday
+                ? "rgba(34,227,232,0.7)"
+                : allCompleted
+                  ? "rgba(255,255,255,0.15)"
+                  : "rgba(255,255,255,0.5)",
+          }}
+        >
+          {day.dayMonth}
+        </span>
+        {/* Indicator dot */}
+        {(hasToday || hasLive) && (
+          <div
+            className="w-5 h-[2px] rounded-full mt-0.5"
+            style={{
+              background: hasLive
+                ? "#f83cc5"
+                : "#22E3E8",
+            }}
+          />
         )}
       </div>
-    </div>
+
+      {/* Match cards for the day */}
+      {day.matches.map((match) => (
+        <MatchRow key={match.id} match={match} />
+      ))}
+    </motion.div>
   );
 }
 
+/* ── Main calendar component ── */
+
 interface MatchCalendarProps {
   tournamentId?: number;
 }
@@ -125,13 +259,53 @@ export function MatchCalendar({ tournamentId }: MatchCalendarProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
   const { matches, isLoading, error } = useTDMatches({
     tournamentId,
-    limit: 20,
+    limit: 100,
   });
 
+  const days = useMemo(() => groupByDate(matches), [matches]);
+
+  // Find the index of today or the first upcoming day to auto-scroll
+  const todayIndex = useMemo(() => {
+    const now = new Date();
+    // Find today
+    const tIdx = days.findIndex((d) => isToday(d.date));
+    if (tIdx >= 0) return tIdx;
+    // Find first upcoming day (date >= today)
+    const uIdx = days.findIndex((d) => d.date >= now);
+    if (uIdx >= 0) return Math.max(0, uIdx - 1); // show one before so user sees context
+    return 0;
+  }, [days]);
+
+  // Stage info from first match (all matches in a tournamentId query share same stage typically)
+  const stageGroups = useMemo(() => {
+    const stages = new Map<number, { name: string; orderNo: number; days: IMatchDay[] }>();
+    for (const day of days) {
+      for (const m of day.matches) {
+        if (m.stage) {
+          if (!stages.has(m.stage.id)) {
+            stages.set(m.stage.id, { name: m.stage.name, orderNo: m.stage.order_no, days: [] });
+          }
+        }
+      }
+      // Assign day to stage (use first match's stage)
+      const firstStage = day.matches.find((m) => m.stage)?.stage;
+      if (firstStage && stages.has(firstStage.id)) {
+        const group = stages.get(firstStage.id);
+        if (group && !group.days.includes(day)) {
+          group.days.push(day);
+        }
+      }
+    }
+    return Array.from(stages.values()).sort((a, b) => a.orderNo - b.orderNo);
+  }, [days]);
+
+  // Tournament date range from first match
+  const tournament = matches[0]?.tournament;
+
   if (isLoading) {
     return (
-      <div className="flex items-center justify-center py-6">
-        <Loader2 size={18} className="animate-spin text-white/30" />
+      <div className="flex items-center justify-center py-4">
+        <Loader2 size={16} className="animate-spin" style={{ color: "rgba(255,255,255,0.2)" }} />
       </div>
     );
   }
@@ -139,35 +313,57 @@ export function MatchCalendar({ tournamentId }: MatchCalendarProps) {
   if (error || matches.length === 0) return null;
 
   return (
-    <div className="relative z-30 w-full mb-4">
+    <div className="relative z-30 w-full mb-2 mt-2">
       {/* Section header */}
-      <div className="flex items-center gap-2 px-5 mb-3">
-        <Calendar size={14} className="text-[#22E3E8]" />
-        <span className="barlowCondensedSemiBold text-[15px] text-white/70 tracking-wide">
-          MATCH CALENDAR
+      <div className="flex items-center gap-2 px-5 mb-1">
+        <Calendar size={12} style={{ color: "rgba(34,227,232,0.6)" }} />
+        <span className="barlowCondensedSemiBold text-[13px] tracking-wider" style={{ color: "rgba(255,255,255,0.45)" }}>
+          SCHEDULE
         </span>
-        <div className="flex-1 h-px bg-white/5" />
-        <span className="text-[11px] text-white/30" style={OUTFIT}>
+        {/* Tournament date range */}
+        {tournament?.start_date && tournament?.end_date && (
+          <>
+            <ChevronRight size={10} style={{ color: "rgba(255,255,255,0.15)" }} />
+            <span className="text-[10px]" style={{ fontFamily: "Outfit, sans-serif", color: "rgba(255,255,255,0.2)" }}>
+              {formatDayMonth(toLocalDate(tournament.start_date))} – {formatDayMonth(toLocalDate(tournament.end_date))}
+            </span>
+          </>
+        )}
+        <div className="flex-1" />
+        <span className="text-[10px]" style={{ fontFamily: "Outfit, sans-serif", color: "rgba(255,255,255,0.2)" }}>
           {matches.length} matches
         </span>
       </div>
 
-      {/* Scrollable match strip */}
+      {/* Stage label if exists */}
+      {stageGroups.length > 0 && stageGroups[0].name && (
+        <div className="px-5 mb-2">
+          <span
+            className="text-[9px] barlowcondensedBold tracking-widest px-2 py-0.5 rounded-full"
+            style={{
+              color: "rgba(34,227,232,0.5)",
+              background: "rgba(34,227,232,0.06)",
+              border: "1px solid rgba(34,227,232,0.1)",
+            }}
+          >
+            {stageGroups[0].name.toUpperCase()}
+          </span>
+        </div>
+      )}
+
+      {/* Scrollable day columns */}
       <div
         ref={scrollRef}
-        className="flex gap-3 overflow-x-auto px-5 pb-2 scrollbar-hidden"
-        style={{ scrollSnapType: "x mandatory", WebkitOverflowScrolling: "touch" }}
+        className="flex gap-2 overflow-x-auto px-5 pb-2 scrollbar-hidden"
+        style={{
+          scrollSnapType: "x mandatory",
+          WebkitOverflowScrolling: "touch",
+          // Auto-scroll to today/upcoming
+          ...(todayIndex > 0 ? {} : {}),
+        }}
       >
-        {matches.map((match) => (
-          <motion.div
-            key={match.id}
-            initial={{ opacity: 0, scale: 0.95 }}
-            animate={{ opacity: 1, scale: 1 }}
-            transition={{ duration: 0.3 }}
-            style={{ scrollSnapAlign: "start" }}
-          >
-            <MatchCard match={match} />
-          </motion.div>
+        {days.map((day, i) => (
+          <DayColumn key={day.dateKey} day={day} index={i} />
         ))}
       </div>
     </div>

package/src/matches/index.ts

@@ -11,6 +11,7 @@ export type {
   ITDPlayer,
   ITDVenue,
   ITDTournament,
+  ITDStage,
   ITDMatchesResponse,
   ITDMatchesParams,
 } from "./types";

package/src/matches/types.ts

@@ -1,7 +1,8 @@
 // @devrongx/games — matches/types.ts
 // Types matching the Prisma response from TD's GET /api/v2/matches exactly.
 // listMatches includes: { team_a: true, team_b: true, winner: true, venue: true,
-//   man_of_the_match: true, tournament: { select: { id, name } } }
+//   man_of_the_match: true, tournament: { select: { id, name, start_date, end_date } },
+//   stage: { select: { id, name, stage_type, order_no } } }
 
 // ── Prisma `teams` model (full row, returned by `include: { team_a: true }`) ──
 export interface ITDTeam {
@@ -52,10 +53,20 @@ export interface ITDVenue {
   updated_at: string;
 }
 
-// ── Prisma `tournaments` model (partial, returned by `select: { id, name }`) ──
+// ── Prisma `tournaments` model (partial, returned by `select: { id, name, start_date, end_date }`) ──
 export interface ITDTournament {
   id: number;
   name: string;
+  start_date: string | null;
+  end_date: string | null;
+}
+
+// ── Prisma `stages` model (partial, returned by `select: { id, name, stage_type, order_no }`) ──
+export interface ITDStage {
+  id: number;
+  name: string;
+  stage_type: number;
+  order_no: number;
 }
 
 // ── Prisma `matches` model with included relations ──
@@ -103,6 +114,7 @@ export interface ITDMatch {
   venue: ITDVenue | null;
   man_of_the_match: ITDPlayer | null;
   tournament: ITDTournament | null;
+  stage: ITDStage | null;
 }
 
 // ── API response shape ──
@@ -115,6 +127,7 @@ export interface ITDMatchesResponse {
 
 export interface ITDMatchesParams {
   tournamentId?: number;
+  stageId?: number;
   status?: number;
   from?: string;
   to?: string;