@devrongx/games 0.1.1 → 0.2.1

package/package.json

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

package/src/index.ts

@@ -8,3 +8,7 @@ export type { IGamePopupState } from "./core/types";
 export { PreMatchBetsPopup } from "./games/prematch-bets/PreMatchBetsPopup";
 export { CSK_VS_RCB_CHALLENGE, CSK_VS_RCB_POOL, calcBetSummary, buildPoolLeaderboard, generatePool, calcPrizePool, calcRankPayout, calcParlayMultiplier, calcDisplayReward, optionReward, deriveParlayGroups, deriveMarketToParlay, extractUserBets } from "./games/prematch-bets/config";
 export type { IChallengeConfig, IChallengeMarket, IChallengeOption, IChallengeTeam, IChallengeGame, IChallengeSection, IRankBracket, IParlayConfig, IUserBets, IBetEntry, IBetSummary, ILeaderboardEntry, IMiniLeaderboard, IPoolData } from "./games/prematch-bets/config";
+
+// 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";

package/src/matches/MatchCalendar.tsx

@@ -0,0 +1,215 @@
+// @devrongx/games — matches/MatchCalendar.tsx
+"use client";
+
+import { useRef } from "react";
+import { motion } from "framer-motion";
+import { Calendar, MapPin, Loader2, Zap } from "lucide-react";
+import { useTDMatches } from "./useTDMatches";
+import type { ITDMatch } from "./types";
+
+// TD match status enum values
+const MATCH_STATUS = {
+  UPCOMING: 1,
+  LIVE: 2,
+  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 };
+}
+
+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();
+}
+
+interface MatchCardProps {
+  match: ITDMatch;
+  index: number;
+}
+
+function MatchCard({ match, index }: MatchCardProps) {
+  const date = match.scheduled_start_at ? formatMatchDate(match.scheduled_start_at) : null;
+  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;
+
+  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-[140px] rounded-2xl overflow-hidden"
+        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)",
+        }}
+      >
+        {/* 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}
+              </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>
+            </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
+            </span>
+            <span
+              className="barlowcondensedBold text-[22px] 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 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}
+          </div>
+        </div>
+      </div>
+    </motion.div>
+  );
+}
+
+interface MatchCalendarProps {
+  tournamentId?: number;
+}
+
+export function MatchCalendar({ tournamentId }: MatchCalendarProps) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const { matches, isLoading, error } = useTDMatches({
+    tournamentId,
+    limit: 50,
+  });
+
+  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>
+    );
+  }
+
+  if (error || matches.length === 0) return null;
+
+  return (
+    <div className="relative z-30 w-full mb-2 mt-2">
+      {/* 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}
+        </span>
+      </div>
+
+      {/* Scrollable match strip */}
+      <div
+        ref={scrollRef}
+        className="flex gap-2.5 overflow-x-auto px-5 pb-2 scrollbar-hidden"
+        style={{ scrollSnapType: "x mandatory", WebkitOverflowScrolling: "touch" }}
+      >
+        {matches.map((match, i) => (
+          <MatchCard key={match.id} match={match} index={i} />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/matches/fetcher.ts

@@ -0,0 +1,33 @@
+// @devrongx/games — matches/fetcher.ts
+// Fetch wrapper using native fetch (no axios dep needed in the package).
+// Reads config from the Zustand store set by configureTDClient().
+
+import { useTDClientStore } from "./store";
+import type { ITDMatchesParams, ITDMatchesResponse } from "./types";
+
+export async function fetchTDMatches(
+  params?: ITDMatchesParams,
+): Promise<ITDMatchesResponse> {
+  const { baseURL, getToken } = useTDClientStore.getState();
+
+  const url = new URL(`${baseURL}/api/v2/matches`);
+  if (params) {
+    for (const [key, value] of Object.entries(params)) {
+      if (value !== undefined && value !== null) {
+        url.searchParams.set(key, String(value));
+      }
+    }
+  }
+
+  const headers: HeadersInit = { Accept: "application/json" };
+  const token = getToken();
+  if (token) {
+    headers["Authorization"] = `Bearer ${token}`;
+  }
+
+  const res = await fetch(url.toString(), { headers });
+  if (!res.ok) {
+    throw new Error(`TD API error: ${res.status} ${res.statusText}`);
+  }
+  return res.json();
+}

package/src/matches/index.ts

@@ -0,0 +1,16 @@
+// @devrongx/games — matches barrel export
+export { configureTDClient } from "./store";
+export { fetchTDMatches } from "./fetcher";
+export { useTDMatches } from "./useTDMatches";
+export type { UseTDMatchesResult } from "./useTDMatches";
+export { MatchCalendar } from "./MatchCalendar";
+export type {
+  ITDClientConfig,
+  ITDMatch,
+  ITDTeam,
+  ITDPlayer,
+  ITDVenue,
+  ITDTournament,
+  ITDMatchesResponse,
+  ITDMatchesParams,
+} from "./types";

package/src/matches/store.ts

@@ -0,0 +1,15 @@
+// @devrongx/games — matches/store.ts
+// Zustand store for TD API client configuration.
+// Consuming apps call configureTDClient() once at startup.
+
+import { create, type StoreApi, type UseBoundStore } from "zustand";
+import type { ITDClientConfig } from "./types";
+
+export const useTDClientStore: UseBoundStore<StoreApi<ITDClientConfig>> = create<ITDClientConfig>(() => ({
+  baseURL: "",
+  getToken: () => null,
+}));
+
+export function configureTDClient(config: ITDClientConfig): void {
+  useTDClientStore.setState(config);
+}

package/src/matches/types.ts

@@ -0,0 +1,129 @@
+// @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 } } }
+
+// ── Prisma `teams` model (full row, returned by `include: { team_a: true }`) ──
+export interface ITDTeam {
+  id: number;
+  graph_id: string | null;
+  name: string;
+  short_name: string | null;
+  sport: number;
+  country_code: number | null;
+  founded_year: number | null;
+  attributes_json: Record<string, unknown>;
+  images_json: unknown[];
+  colors_json: unknown[];
+  status: number;
+  created_at: string;
+  updated_at: string;
+}
+
+// ── Prisma `players` model (full row, returned by `include: { man_of_the_match: true }`) ──
+export interface ITDPlayer {
+  id: number;
+  graph_id: string | null;
+  full_name: string;
+  sport: number;
+  country_code: number | null;
+  date_of_birth: string | null;
+  batting_style: number | null;
+  bowling_style: number | null;
+  role: number | null;
+  images_json: Record<string, unknown> | null;
+  status: number;
+  created_at: string;
+  updated_at: string;
+}
+
+// ── Prisma `venues` model (full row, returned by `include: { venue: true }`) ──
+export interface ITDVenue {
+  id: number;
+  name: string;
+  sport: number;
+  address: string | null;
+  city: string | null;
+  country: number | null;
+  latitude: string | null;
+  longitude: string | null;
+  images_json: Record<string, unknown>;
+  created_at: string;
+  updated_at: string;
+}
+
+// ── Prisma `tournaments` model (partial, returned by `select: { id, name }`) ──
+export interface ITDTournament {
+  id: number;
+  name: string;
+}
+
+// ── Prisma `matches` model with included relations ──
+export interface ITDMatch {
+  id: number;
+  graph_id: string | null;
+  tournament_id: number | null;
+  stage_id: number | null;
+  group_id: number | null;
+  venue_id: number | null;
+  scheduled_start_at: string | null;
+  actual_start_at: string | null;
+  actual_end_at: string | null;
+  status: number;
+  result_status: number | null;
+  result_margin_type: number | null;
+  result_margin_value: number | null;
+  format: number | null;
+  overs_per_innings: number | null;
+  team_a_id: number;
+  team_b_id: number;
+  toss_winner_team_id: number | null;
+  toss_decision: number | null;
+  winner_team_id: number | null;
+  man_of_the_match_player_id: number | null;
+  rating_popularity: number;
+  rating_interesting: number;
+  rating_evergreen: number;
+  match_number: number | null;
+  bracket_round_no: number | null;
+  bracket_match_no: number | null;
+  winner_of_a_match_id: number | null;
+  winner_of_b_match_id: number | null;
+  loser_of_a_match_id: number | null;
+  loser_of_b_match_id: number | null;
+  innings_summaries_json: unknown[] | null;
+  og_assets: Record<string, unknown> | null;
+  og_assets_expires_at: string | null;
+  created_at: string;
+  updated_at: string;
+  // Included relations
+  team_a: ITDTeam;
+  team_b: ITDTeam;
+  winner: ITDTeam | null;
+  venue: ITDVenue | null;
+  man_of_the_match: ITDPlayer | null;
+  tournament: ITDTournament | null;
+}
+
+// ── API response shape ──
+export interface ITDMatchesResponse {
+  success: boolean;
+  data: ITDMatch[];
+  total: number;
+  user_id: number | null;
+}
+
+export interface ITDMatchesParams {
+  tournamentId?: number;
+  status?: number;
+  from?: string;
+  to?: string;
+  limit?: number;
+  offset?: number;
+}
+
+// ── Client configuration (set once by consuming app) ──
+export interface ITDClientConfig {
+  baseURL: string;
+  getToken: () => string | null;
+}

package/src/matches/useTDMatches.ts

@@ -0,0 +1,48 @@
+// @devrongx/games — matches/useTDMatches.ts
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { fetchTDMatches } from "./fetcher";
+import type { ITDMatch, ITDMatchesParams, ITDMatchesResponse } from "./types";
+
+export interface UseTDMatchesResult {
+  matches: ITDMatch[];
+  total: number;
+  userId: number | null;
+  isLoading: boolean;
+  error: string | null;
+  refetch: () => Promise<void>;
+}
+
+export function useTDMatches(params?: ITDMatchesParams): UseTDMatchesResult {
+  const [matches, setMatches] = useState<ITDMatch[]>([]);
+  const [total, setTotal] = useState(0);
+  const [userId, setUserId] = useState<number | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const paramsKey = JSON.stringify(params);
+
+  const fetchData = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const res: ITDMatchesResponse = await fetchTDMatches(params);
+      setMatches(res.data);
+      setTotal(res.total);
+      setUserId(res.user_id);
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : "Failed to fetch matches";
+      setError(message);
+    } finally {
+      setIsLoading(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [paramsKey]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  return { matches, total, userId, isLoading, error, refetch: fetchData };
+}