@devrongx/games 0.2.1 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devrongx/games",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "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,9 +1,9 @@
 // @devrongx/games — matches/MatchCalendar.tsx
 "use client";
 
-import { useRef } from "react";
+import { useRef, useMemo, useEffect } from "react";
 import { motion } from "framer-motion";
-import { Calendar, MapPin, Loader2, Zap } from "lucide-react";
+import { Calendar, MapPin, Loader2, Trophy, Zap } from "lucide-react";
 import { useTDMatches } from "./useTDMatches";
 import type { ITDMatch } from "./types";
 
@@ -14,12 +14,44 @@ const MATCH_STATUS = {
   COMPLETED: 5,
 } as const;
 
-function formatMatchDate(iso: string): { dayMonth: string; time: string } {
-  const d = new Date(iso);
-  const day = d.getDate();
-  const month = d.toLocaleString("en-US", { month: "short" }).toUpperCase();
-  const time = d.toLocaleString("en-US", { hour: "numeric", minute: "2-digit", hour12: true });
-  return { dayMonth: `${day} ${month}`, time };
+const OUTFIT = { fontFamily: "Outfit, sans-serif" };
+
+/* ── Date helpers ── */
+
+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 {
@@ -27,144 +59,222 @@ function getTeamShortName(match: ITDMatch, team: "a" | "b"): string {
   return t.short_name || t.name.slice(0, 3).toUpperCase();
 }
 
-interface MatchCardProps {
-  match: ITDMatch;
-  index: number;
+/** 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 MatchCard({ match, index }: MatchCardProps) {
-  const date = match.scheduled_start_at ? formatMatchDate(match.scheduled_start_at) : null;
+/* ── Grouping: by date ── */
+
+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] });
+    }
+  }
+
+  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,
+    }));
+}
+
+/* ── Match card with border shine animation ── */
+
+function MatchCard({ match }: { match: ITDMatch }) {
   const isLive = match.status === MATCH_STATUS.LIVE;
   const isCompleted = match.status === MATCH_STATUS.COMPLETED;
-  const isUpcoming = match.status === MATCH_STATUS.UPCOMING;
-  const venue = match.venue?.city || match.venue?.name;
+  const time = match.scheduled_start_at ? formatTime(toLocalDate(match.scheduled_start_at)) : "";
+  const venue = match.venue?.city?.trim() || match.venue?.name;
+  const shineOpacity = getShineOpacity(match.rating_popularity);
+  const showShine = shineOpacity > 0 && !isCompleted;
 
   return (
-    <motion.div
-      initial={{ opacity: 0, y: 12 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.35, delay: index * 0.04 }}
-      className="shrink-0"
-      style={{ scrollSnapAlign: "start" }}
-    >
+    <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`,
+          }}
+        />
+      )}
+
+      {/* 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)",
+          }}
+        />
+      )}
+
       <div
-        className="relative w-[140px] rounded-2xl overflow-hidden"
+        className="relative flex flex-col gap-1.5 rounded-xl px-3 py-2.5"
         style={{
-          background: isLive
-            ? "linear-gradient(160deg, rgba(248,60,197,0.15), rgba(248,60,197,0.03))"
-            : isCompleted
-              ? "rgba(255,255,255,0.03)"
-              : "linear-gradient(160deg, rgba(34,227,232,0.08), rgba(153,69,255,0.04))",
-          border: isLive
-            ? "1px solid rgba(248,60,197,0.3)"
-            : isCompleted
-              ? "1px solid rgba(255,255,255,0.06)"
-              : "1px solid rgba(34,227,232,0.12)",
+          background: isLive ? "rgba(10,10,18,0.95)" : "rgba(10,10,18,0.98)",
         }}
       >
-        {/* Live pulse indicator */}
-        {isLive && (
-          <div className="absolute top-2 right-2 flex items-center gap-1">
-            <span className="relative flex h-2 w-2">
-              <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-2 w-2 bg-[#f83cc5]" />
-            </span>
-          </div>
-        )}
-
-        <div className="flex flex-col items-center px-3 pt-3 pb-2.5">
-          {/* Date */}
-          {date && (
-            <div className="flex flex-col items-center mb-2.5">
-              <span
-                className="text-[11px] font-semibold tracking-wide"
-                style={{
-                  fontFamily: "Outfit, sans-serif",
-                  color: isLive ? "#f83cc5" : isCompleted ? "rgba(255,255,255,0.25)" : "rgba(34,227,232,0.7)",
-                }}
-              >
-                {date.dayMonth}
+        {/* Time + live indicator */}
+        <div className="flex items-center justify-between">
+          <span
+            className="text-[10px]"
+            style={{
+              ...OUTFIT,
+              color: isLive ? "#f83cc5" : isCompleted ? "rgba(255,255,255,0.35)" : "#fff",
+            }}
+          >
+            {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-[10px] tracking-wide"
-                style={{
-                  fontFamily: "Outfit, sans-serif",
-                  color: isCompleted ? "rgba(255,255,255,0.2)" : "rgba(255,255,255,0.35)",
-                }}
-              >
-                {date.time}
+              <span className="text-[8px] barlowcondensedBold tracking-widest" style={{ color: "#f83cc5" }}>
+                LIVE
               </span>
             </div>
           )}
-
-          {/* Teams */}
-          <div className="flex items-center gap-1.5 w-full justify-center">
-            <span
-              className="barlowcondensedBold text-[22px] leading-none"
-              style={{ color: isCompleted ? "rgba(255,255,255,0.35)" : "#fff" }}
-            >
-              {getTeamShortName(match, "a")}
-            </span>
-            <span
-              className="text-[9px] barlowCondensedSemiBold"
-              style={{ color: isCompleted ? "rgba(255,255,255,0.15)" : "rgba(255,255,255,0.25)" }}
-            >
-              v
+          {isCompleted && match.winner && (
+            <span className="text-[8px]" style={{ ...OUTFIT, color: "rgba(255,255,255,0.35)" }}>
+              {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-[20px] leading-none"
+            style={{ color: isCompleted ? "rgba(255,255,255,0.35)" : "#fff" }}
+          >
+            {getTeamShortName(match, "a")}
+          </span>
+          <span className="text-[9px]" style={{ color: "rgba(255,255,255,0.3)" }}>
+            v
+          </span>
+          <span
+            className="barlowcondensedBold text-[20px] leading-none"
+            style={{ color: isCompleted ? "rgba(255,255,255,0.35)" : "#fff" }}
+          >
+            {getTeamShortName(match, "b")}
+          </span>
+        </div>
+
+        {/* Venue */}
+        {venue && (
+          <div className="flex items-center gap-1 justify-center">
+            <MapPin size={8} style={{ color: "rgba(255,255,255,0.3)" }} />
             <span
-              className="barlowcondensedBold text-[22px] leading-none"
-              style={{ color: isCompleted ? "rgba(255,255,255,0.35)" : "#fff" }}
+              className="text-[8px] truncate max-w-[100px]"
+              style={{ ...OUTFIT, color: "rgba(255,255,255,0.3)" }}
             >
-              {getTeamShortName(match, "b")}
+              {venue}
             </span>
           </div>
+        )}
 
-          {/* Venue */}
-          {venue && (
-            <div className="flex items-center gap-1 mt-1.5">
-              <MapPin size={8} className="shrink-0" style={{ color: "rgba(255,255,255,0.2)" }} />
-              <span
-                className="text-[9px] truncate max-w-[110px]"
-                style={{ fontFamily: "Outfit, sans-serif", color: "rgba(255,255,255,0.2)" }}
-              >
-                {venue}
-              </span>
-            </div>
-          )}
-
-          {/* Status */}
-          <div className="mt-2">
-            {isLive ? (
-              <div className="flex items-center gap-1 px-2 py-0.5 rounded-full" style={{ background: "rgba(248,60,197,0.15)" }}>
-                <Zap size={8} style={{ color: "#f83cc5" }} />
-                <span className="text-[8px] barlowcondensedBold tracking-widest" style={{ color: "#f83cc5" }}>
-                  LIVE
-                </span>
-              </div>
-            ) : isCompleted ? (
-              <span
-                className="text-[9px] tracking-wide"
-                style={{ fontFamily: "Outfit, sans-serif", color: "rgba(255,255,255,0.2)" }}
-              >
-                {match.winner ? `${match.winner.short_name || match.winner.name} won` : "Completed"}
-              </span>
-            ) : isUpcoming ? (
-              <div
-                className="px-2 py-0.5 rounded-full"
-                style={{ background: "rgba(34,227,232,0.08)", border: "1px solid rgba(34,227,232,0.15)" }}
-              >
-                <span className="text-[8px] barlowcondensedBold tracking-widest" style={{ color: "rgba(34,227,232,0.6)" }}>
-                  UPCOMING
-                </span>
-              </div>
-            ) : null}
+        {/* Popularity indicator */}
+        {match.rating_popularity > 0 && !isCompleted && (
+          <div className="flex items-center gap-0.5 justify-center mt-0.5">
+            {Array.from({ length: Math.min(Math.ceil(match.rating_popularity / 2), 5) }).map((_, i) => (
+              <Zap
+                key={i}
+                size={7}
+                fill={isLive ? "#f83cc5" : "#22E3E8"}
+                style={{ color: isLive ? "#f83cc5" : "#22E3E8", opacity: 0.4 + i * 0.15 }}
+              />
+            ))}
           </div>
-        </div>
+        )}
       </div>
+    </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: "140px" }}
+    >
+      {/* 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.25)" : "#fff",
+          }}
+        >
+          {day.label}
+        </span>
+        <span
+          className="text-[12px] font-semibold"
+          style={{
+            ...OUTFIT,
+            color: hasLive ? "#f83cc5" : hasToday ? "#22E3E8" : allCompleted ? "rgba(255,255,255,0.25)" : "#fff",
+          }}
+        >
+          {day.dayMonth}
+        </span>
+        {(hasToday || hasLive) && (
+          <div
+            className="w-5 h-[2px] 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} />
+      ))}
     </motion.div>
   );
 }
 
+/* ── Main calendar component ── */
+
 interface MatchCalendarProps {
   tournamentId?: number;
 }
@@ -173,13 +283,48 @@ export function MatchCalendar({ tournamentId }: MatchCalendarProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
   const { matches, isLoading, error } = useTDMatches({
     tournamentId,
-    limit: 50,
+    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 now = new Date();
+    const uIdx = days.findIndex((d) => d.date >= now);
+    if (uIdx >= 0) return Math.max(0, uIdx);
+    return 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" });
+      }
+    }
+  }, [scrollTargetIndex, days]);
+
+  // Stage groups
+  const stageGroups = useMemo(() => {
+    const stages = new Map<number, { name: string; orderNo: number }>();
+    for (const m of matches) {
+      if (m.stage && !stages.has(m.stage.id)) {
+        stages.set(m.stage.id, { name: m.stage.name, orderNo: m.stage.order_no });
+      }
+    }
+    return Array.from(stages.values()).sort((a, b) => a.orderNo - b.orderNo);
+  }, [matches]);
+
+  const tournament = matches[0]?.tournament;
+
   if (isLoading) {
     return (
-      <div className="flex items-center justify-center py-4">
-        <Loader2 size={16} className="animate-spin" style={{ color: "rgba(255,255,255,0.2)" }} />
+      <div className="flex items-center justify-center py-6">
+        <Loader2 size={16} className="animate-spin" style={{ color: "rgba(255,255,255,0.3)" }} />
       </div>
     );
   }
@@ -187,27 +332,58 @@ export function MatchCalendar({ tournamentId }: MatchCalendarProps) {
   if (error || matches.length === 0) return null;
 
   return (
-    <div className="relative z-30 w-full mb-2 mt-2">
+    <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>
+          <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
+            </span>
+            {stageGroups.length > 0 && (
+              <span
+                className="text-[9px] barlowcondensedBold tracking-widest px-2 py-0.5 rounded-full"
+                style={{
+                  color: "#22E3E8",
+                  background: "rgba(34,227,232,0.08)",
+                  border: "1px solid rgba(34,227,232,0.15)",
+                }}
+              >
+                {stageGroups[0].name.toUpperCase()}
+              </span>
+            )}
+          </div>
+        </div>
+      )}
+
       {/* Section header */}
       <div className="flex items-center gap-2 px-5 mb-2.5">
-        <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)" }}>
-          MATCHES
-        </span>
-        <div className="flex-1 h-px" style={{ background: "rgba(255,255,255,0.04)" }} />
-        <span className="text-[10px]" style={{ fontFamily: "Outfit, sans-serif", color: "rgba(255,255,255,0.2)" }}>
-          {matches.length}
+        <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 match strip */}
+      {/* Scrollable day columns */}
       <div
         ref={scrollRef}
-        className="flex gap-2.5 overflow-x-auto px-5 pb-2 scrollbar-hidden"
+        className="flex gap-2.5 overflow-x-auto px-5 pb-3 scrollbar-hide"
         style={{ scrollSnapType: "x mandatory", WebkitOverflowScrolling: "touch" }}
       >
-        {matches.map((match, i) => (
-          <MatchCard key={match.id} match={match} index={i} />
+        {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;