@devrongx/games 0.2.0 → 0.2.1

package/package.json

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

package/src/matches/MatchCalendar.tsx

@@ -3,12 +3,10 @@
 
 import { useRef } from "react";
 import { motion } from "framer-motion";
-import { Calendar, MapPin, Loader2 } from "lucide-react";
+import { Calendar, MapPin, Loader2, Zap } 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,12 @@ const MATCH_STATUS = {
   COMPLETED: 5,
 } as const;
 
-function formatMatchDate(iso: string): { day: string; month: string; time: string; weekday: string } {
+function formatMatchDate(iso: string): { dayMonth: string; time: 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" };
+  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 {
@@ -39,81 +29,139 @@ function getTeamShortName(match: ITDMatch, team: "a" | "b"): string {
 
 interface MatchCardProps {
   match: ITDMatch;
+  index: number;
 }
 
-function MatchCard({ match }: MatchCardProps) {
-  const status = getStatusLabel(match);
+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 (
-    <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))",
-      }}
+    <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="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)" }}
+        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)",
+        }}
       >
-        {/* 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}
+        {/* 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>
         )}
 
-        {/* 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" />
+        <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="text-[9px] text-white/30 truncate max-w-[130px]"
-              style={OUTFIT}
+              className="barlowcondensedBold text-[22px] leading-none"
+              style={{ color: isCompleted ? "rgba(255,255,255,0.35)" : "#fff" }}
             >
-              {match.venue.city || match.venue.name}
+              {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>
-        )}
-
-        {/* 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"}
+          {/* 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>
-    </div>
+    </motion.div>
   );
 }
 
@@ -125,13 +173,13 @@ export function MatchCalendar({ tournamentId }: MatchCalendarProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
   const { matches, isLoading, error } = useTDMatches({
     tournamentId,
-    limit: 20,
+    limit: 50,
   });
 
   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 +187,27 @@ 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-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 bg-white/5" />
-        <span className="text-[11px] text-white/30" style={OUTFIT}>
-          {matches.length} matches
+        <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-3 overflow-x-auto px-5 pb-2 scrollbar-hidden"
+        className="flex gap-2.5 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>
+        {matches.map((match, i) => (
+          <MatchCard key={match.id} match={match} index={i} />
         ))}
       </div>
     </div>