@devrongx/games 0.1.0 → 0.2.0

package/package.json

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

package/src/games/prematch-bets/PreMatchQuestions.tsx

@@ -13,10 +13,8 @@ interface PreMatchQuestionsProps {
     onComplete: (selections: IUserBets) => void;
 }
 
-// ── Sassy typewriter — each word has its own exponential speed curve ──
-// Words alternate between snappy bursts and dramatic slow reveals.
-// Within each word, character delays follow an exponential curve.
-const useSassyTypewriter = (text: string, delay = 0) => {
+// ── Smooth typewriter — constant speed, clean and simple ──
+const useTypewriter = (text: string, speed = 45, delay = 0) => {
     const [displayed, setDisplayed] = useState("");
     const [done, setDone] = useState(false);
 
@@ -24,74 +22,28 @@ const useSassyTypewriter = (text: string, delay = 0) => {
         setDisplayed("");
         setDone(false);
 
-        // Build per-character delay schedule
-        const words = text.split(" ");
-        const charDelays: number[] = [];
-
-        // Alternating word styles for rhythm
-        // "burst" = types fast then decelerates at end
-        // "drag" = starts slow, accelerates to finish
-        // "snap" = entire word appears almost instantly
-        const wordStyles = ["drag", "snap", "burst", "drag", "snap", "burst"];
-
-        words.forEach((word, wIdx) => {
-            const style = wordStyles[wIdx % wordStyles.length];
-            const len = word.length;
-
-            for (let c = 0; c < len; c++) {
-                const t = len > 1 ? c / (len - 1) : 0; // 0..1 progress through word
-
-                let ms: number;
-                if (style === "burst") {
-                    // Starts fast (15ms), exponentially decelerates to ~80ms
-                    ms = 15 + 65 * Math.pow(t, 2.5);
-                } else if (style === "drag") {
-                    // Starts slow (90ms), exponentially accelerates to ~12ms
-                    ms = 90 - 78 * Math.pow(t, 2.2);
-                } else {
-                    // snap — near instant, 8ms per char
-                    ms = 8;
+        const timer = setTimeout(() => {
+            let i = 0;
+            const interval = setInterval(() => {
+                i++;
+                setDisplayed(text.slice(0, i));
+                if (i >= text.length) {
+                    clearInterval(interval);
+                    setDone(true);
                 }
-                charDelays.push(Math.round(ms));
-            }
-            // Pause between words — dramatic breath
-            charDelays.push(wIdx < words.length - 1 ? 120 : 0);
-        });
+            }, speed);
+            return () => clearInterval(interval);
+        }, delay);
 
-        const timers: ReturnType<typeof setTimeout>[] = [];
-        let cumulative = delay;
-        let charIdx = 0;
-
-        // Schedule each character reveal
-        for (let i = 0; i < charDelays.length; i++) {
-            cumulative += charDelays[i];
-            const idx = charIdx;
-            // The space between words is at charDelays entries where we push 120ms pause
-            // but we need to track actual characters in text
-            if (i < charDelays.length && idx <= text.length) {
-                timers.push(setTimeout(() => {
-                    setDisplayed(text.slice(0, idx + 1));
-                    if (idx + 1 >= text.length) setDone(true);
-                }, cumulative));
-            }
-            // Only increment charIdx for actual characters (not the inter-word pauses)
-            // Words joined by spaces: after each word's chars, next char is space
-            charIdx++;
-        }
-
-        return () => timers.forEach(clearTimeout);
-    }, [text, delay]);
+        return () => clearTimeout(timer);
+    }, [text, speed, delay]);
 
     return { displayed, done };
 };
 
 // ── Start slide ──
 const StartSlide = ({ onStart }: { onStart: () => void }) => {
-    const line1 = useSassyTypewriter("Choose your answers", 300);
-    const line2 = useSassyTypewriter(
-        "Pick your predictions first. We'll set up bet amounts after.",
-        line1.done ? 0 : 1800,
-    );
+    const line1 = useTypewriter("Choose your answers", 45, 300);
 
     return (
         <div className="flex flex-col items-center justify-center h-full px-8 gap-8">
@@ -100,14 +52,10 @@ const StartSlide = ({ onStart }: { onStart: () => void }) => {
                     {line1.displayed}
                     {!line1.done && <span className="inline-block w-[2px] h-[18px] bg-[#22E3E8] ml-[2px] align-middle animate-pulse" />}
                 </p>
-                <p className="text-[14px] text-white/50 font-medium text-center leading-relaxed max-w-[260px] min-h-[44px]" style={OUTFIT}>
-                    {line2.displayed}
-                    {line1.done && !line2.done && <span className="inline-block w-[2px] h-[14px] bg-white/30 ml-[2px] align-middle animate-pulse" />}
-                </p>
             </div>
 
             {/* Let's Go — simple cyan text link with arrow */}
-            {line2.done && (
+            {line1.done && (
                 <motion.button
                     initial={{ opacity: 0 }}
                     animate={{ opacity: 1 }}

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 };
+}