@devrongx/games 0.1.1 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devrongx/games",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "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,175 @@
+// @devrongx/games — matches/MatchCalendar.tsx
+"use client";
+
+import { useRef } from "react";
+import { motion } from "framer-motion";
+import { Calendar, MapPin, Loader2 } 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,
+  LIVE: 2,
+  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(),
+  };
+}
+
+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 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;
+}
+
+function MatchCard({ match }: MatchCardProps) {
+  const status = getStatusLabel(match);
+  const date = match.scheduled_start_at ? formatMatchDate(match.scheduled_start_at) : null;
+  const isCompleted = match.status === MATCH_STATUS.COMPLETED;
+
+  return (
+    <div
+      className="shrink-0 w-[160px] rounded-xl p-[1px] overflow-hidden"
+      style={{
+        background: isCompleted
+          ? "rgba(255,255,255,0.08)"
+          : "linear-gradient(135deg, rgba(34,227,232,0.3), rgba(153,69,255,0.3))",
+      }}
+    >
+      <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}
+            </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")}
+          </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>
+        )}
+
+        {/* Status badge */}
+        <div
+          className="mt-2 px-2 py-0.5 rounded-full"
+          style={{ background: `${status.color}15` }}
+        >
+          <span
+            className="text-[9px] barlowcondensedBold tracking-wider"
+            style={{ color: status.color }}
+          >
+            {status.text}
+          </span>
+        </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>
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface MatchCalendarProps {
+  tournamentId?: number;
+}
+
+export function MatchCalendar({ tournamentId }: MatchCalendarProps) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const { matches, isLoading, error } = useTDMatches({
+    tournamentId,
+    limit: 20,
+  });
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-6">
+        <Loader2 size={18} className="animate-spin text-white/30" />
+      </div>
+    );
+  }
+
+  if (error || matches.length === 0) return null;
+
+  return (
+    <div className="relative z-30 w-full mb-4">
+      {/* 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
+        </span>
+        <div className="flex-1 h-px bg-white/5" />
+        <span className="text-[11px] text-white/30" style={OUTFIT}>
+          {matches.length} matches
+        </span>
+      </div>
+
+      {/* Scrollable match strip */}
+      <div
+        ref={scrollRef}
+        className="flex gap-3 overflow-x-auto px-5 pb-2 scrollbar-hidden"
+        style={{ scrollSnapType: "x mandatory", WebkitOverflowScrolling: "touch" }}
+      >
+        {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>
+        ))}
+      </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 };
+}