@devrongx/games 0.3.0 → 0.3.2

package/package.json

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

package/src/matches/MatchCalendar.tsx

@@ -1,9 +1,9 @@
 // @devrongx/games — matches/MatchCalendar.tsx
 "use client";
 
-import { useRef, useMemo } from "react";
+import { useRef, useMemo, useEffect } from "react";
 import { motion } from "framer-motion";
-import { Calendar, MapPin, Loader2, Zap, ChevronRight } from "lucide-react";
+import { Calendar, MapPin, Loader2, Trophy, Zap, Target, Users } from "lucide-react";
 import { useTDMatches } from "./useTDMatches";
 import type { ITDMatch } from "./types";
 
@@ -14,6 +14,8 @@ const MATCH_STATUS = {
   COMPLETED: 5,
 } as const;
 
+const OUTFIT = { fontFamily: "Outfit, sans-serif" };
+
 /* ── Date helpers ── */
 
 function toLocalDate(iso: string): Date {
@@ -57,13 +59,19 @@ function getTeamShortName(match: ITDMatch, team: "a" | "b"): string {
   return t.short_name || t.name.slice(0, 3).toUpperCase();
 }
 
+/** 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);
+}
+
 /* ── Grouping: by date ── */
 
 interface IMatchDay {
-  dateKey: string; // YYYY-MM-DD
+  dateKey: string;
   date: Date;
-  label: string; // "TODAY", "TOMORROW", "SAT", etc
-  dayMonth: string; // "28 MAR"
+  label: string;
+  dayMonth: string;
   matches: ITDMatch[];
 }
 
@@ -93,91 +101,148 @@ function groupByDate(matches: ITDMatch[]): IMatchDay[] {
     }));
 }
 
-/* ── Mini match row inside a day column ── */
+/* ── Match card with border shine animation ── */
 
-function MatchRow({ match }: { match: ITDMatch }) {
+function MatchCard({ match }: { match: ITDMatch }) {
   const isLive = match.status === MATCH_STATUS.LIVE;
   const isCompleted = match.status === MATCH_STATUS.COMPLETED;
   const time = match.scheduled_start_at ? formatTime(toLocalDate(match.scheduled_start_at)) : "";
-  const venue = match.venue?.city || match.venue?.name;
+  const venue = match.venue?.city?.trim() || match.venue?.name;
+  const shineOpacity = getShineOpacity(match.rating_popularity);
+  const showShine = shineOpacity > 0 && !isCompleted;
 
   return (
-    <div
-      className="flex flex-col gap-1 rounded-xl px-3 py-2.5"
-      style={{
-        background: isLive
-          ? "rgba(248,60,197,0.08)"
-          : isCompleted
-            ? "rgba(255,255,255,0.02)"
-            : "rgba(255,255,255,0.03)",
-        border: isLive
-          ? "1px solid rgba(248,60,197,0.2)"
-          : "1px solid rgba(255,255,255,0.04)",
-      }}
-    >
-      {/* Time + status row */}
-      <div className="flex items-center justify-between">
-        <span
-          className="text-[10px]"
+    <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={{
-            fontFamily: "Outfit, sans-serif",
-            color: isLive ? "#f83cc5" : isCompleted ? "rgba(255,255,255,0.2)" : "rgba(255,255,255,0.4)",
+            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`,
           }}
-        >
-          {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-[8px] barlowcondensedBold tracking-widest" style={{ color: "#f83cc5" }}>
-              LIVE
-            </span>
-          </div>
-        )}
-        {isCompleted && match.winner && (
+        />
+      )}
+
+      {/* 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 flex flex-col gap-1.5 rounded-xl px-3 py-2.5"
+        style={{
+          background: isLive ? "rgba(10,10,18,0.95)" : "rgba(10,10,18,0.98)",
+        }}
+      >
+        {/* Time + live indicator */}
+        <div className="flex items-center justify-between">
           <span
-            className="text-[8px] tracking-wide"
-            style={{ fontFamily: "Outfit, sans-serif", color: "rgba(255,255,255,0.2)" }}
+            className="text-[10px]"
+            style={{
+              ...OUTFIT,
+              color: isLive ? "#f83cc5" : isCompleted ? "rgba(255,255,255,0.35)" : "#fff",
+            }}
           >
-            {match.winner.short_name || match.winner.name} won
+            {time}
           </span>
-        )}
-      </div>
-
-      {/* Teams */}
-      <div className="flex items-center gap-1.5 justify-center">
-        <span
-          className="barlowcondensedBold text-[18px] leading-none"
-          style={{ color: isCompleted ? "rgba(255,255,255,0.3)" : "#fff" }}
-        >
-          {getTeamShortName(match, "a")}
-        </span>
-        <span className="text-[9px]" style={{ color: "rgba(255,255,255,0.2)" }}>
-          v
-        </span>
-        <span
-          className="barlowcondensedBold text-[18px] leading-none"
-          style={{ color: isCompleted ? "rgba(255,255,255,0.3)" : "#fff" }}
-        >
-          {getTeamShortName(match, "b")}
-        </span>
-      </div>
+          {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-[8px] barlowcondensedBold tracking-widest" style={{ color: "#f83cc5" }}>
+                LIVE
+              </span>
+            </div>
+          )}
+          {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>
 
-      {/* Venue */}
-      {venue && (
-        <div className="flex items-center gap-1 justify-center">
-          <MapPin size={7} style={{ color: "rgba(255,255,255,0.15)" }} />
+        {/* Teams */}
+        <div className="flex items-center gap-1.5 justify-center">
           <span
-            className="text-[8px] truncate max-w-[100px]"
-            style={{ fontFamily: "Outfit, sans-serif", color: "rgba(255,255,255,0.15)" }}
+            className="barlowcondensedBold text-[20px] leading-none"
+            style={{ color: isCompleted ? "rgba(255,255,255,0.35)" : "#fff" }}
           >
-            {venue}
+            {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="text-[8px] truncate max-w-[100px]"
+              style={{ ...OUTFIT, color: "rgba(255,255,255,0.3)" }}
+            >
+              {venue}
+            </span>
+          </div>
+        )}
+
+        {/* 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>
+        )}
+
+        {/* Game modes */}
+        {!isCompleted && (
+          <div className="flex flex-col gap-1 mt-1 pt-1.5" style={{ borderTop: "1px solid rgba(255,255,255,0.06)" }}>
+            <div
+              className="flex items-center gap-1.5 px-2 py-1 rounded-lg"
+              style={{ background: "rgba(34,227,232,0.06)" }}
+            >
+              <Target size={9} style={{ color: "#22E3E8" }} />
+              <span className="text-[8px] barlowcondensedBold tracking-wide text-white">
+                Pre-Match Bets
+              </span>
+            </div>
+            <div
+              className="flex items-center gap-1.5 px-2 py-1 rounded-lg"
+              style={{ background: "rgba(153,69,255,0.06)" }}
+            >
+              <Users size={9} style={{ color: "#9945FF" }} />
+              <span className="text-[8px] barlowcondensedBold tracking-wide text-white">
+                Fantasy 11
+              </span>
+            </div>
+          </div>
+        )}
+      </div>
     </div>
   );
 }
@@ -195,55 +260,38 @@ function DayColumn({ day, index }: { day: IMatchDay; index: number }) {
       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: "130px" }}
+      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.15)"
-                  : "rgba(255,255,255,0.4)",
+            color: hasLive ? "#f83cc5" : hasToday ? "#22E3E8" : allCompleted ? "rgba(255,255,255,0.25)" : "#fff",
           }}
         >
           {day.label}
         </span>
         <span
-          className="text-[11px] font-semibold"
+          className="text-[12px] font-semibold"
           style={{
-            fontFamily: "Outfit, sans-serif",
-            color: hasLive
-              ? "rgba(248,60,197,0.8)"
-              : hasToday
-                ? "rgba(34,227,232,0.7)"
-                : allCompleted
-                  ? "rgba(255,255,255,0.15)"
-                  : "rgba(255,255,255,0.5)",
+            ...OUTFIT,
+            color: hasLive ? "#f83cc5" : hasToday ? "#22E3E8" : allCompleted ? "rgba(255,255,255,0.25)" : "#fff",
           }}
         >
           {day.dayMonth}
         </span>
-        {/* Indicator dot */}
         {(hasToday || hasLive) && (
           <div
             className="w-5 h-[2px] rounded-full mt-0.5"
-            style={{
-              background: hasLive
-                ? "#f83cc5"
-                : "#22E3E8",
-            }}
+            style={{ background: hasLive ? "#f83cc5" : "#22E3E8" }}
           />
         )}
       </div>
 
       {/* Match cards for the day */}
       {day.matches.map((match) => (
-        <MatchRow key={match.id} match={match} />
+        <MatchCard key={match.id} match={match} />
       ))}
     </motion.div>
   );
@@ -264,48 +312,43 @@ export function MatchCalendar({ tournamentId }: MatchCalendarProps) {
 
   const days = useMemo(() => groupByDate(matches), [matches]);
 
-  // Find the index of today or the first upcoming day to auto-scroll
-  const todayIndex = useMemo(() => {
-    const now = new Date();
-    // Find today
+  // Auto-scroll to today or first upcoming day
+  const scrollTargetIndex = useMemo(() => {
     const tIdx = days.findIndex((d) => isToday(d.date));
     if (tIdx >= 0) return tIdx;
-    // Find first upcoming day (date >= today)
+    const now = new Date();
     const uIdx = days.findIndex((d) => d.date >= now);
-    if (uIdx >= 0) return Math.max(0, uIdx - 1); // show one before so user sees context
+    if (uIdx >= 0) return Math.max(0, uIdx);
     return 0;
   }, [days]);
 
-  // Stage info from first match (all matches in a tournamentId query share same stage typically)
-  const stageGroups = useMemo(() => {
-    const stages = new Map<number, { name: string; orderNo: number; days: IMatchDay[] }>();
-    for (const day of days) {
-      for (const m of day.matches) {
-        if (m.stage) {
-          if (!stages.has(m.stage.id)) {
-            stages.set(m.stage.id, { name: m.stage.name, orderNo: m.stage.order_no, 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" });
       }
-      // Assign day to stage (use first match's stage)
-      const firstStage = day.matches.find((m) => m.stage)?.stage;
-      if (firstStage && stages.has(firstStage.id)) {
-        const group = stages.get(firstStage.id);
-        if (group && !group.days.includes(day)) {
-          group.days.push(day);
-        }
+    }
+  }, [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);
-  }, [days]);
+  }, [matches]);
 
-  // Tournament date range from first match
   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>
     );
   }
@@ -313,54 +356,55 @@ 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-1">
-        <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)" }}>
+      <div className="flex items-center gap-2 px-5 mb-2.5">
+        <Calendar size={12} style={{ color: "#22E3E8" }} />
+        <span className="barlowCondensedSemiBold text-[13px] tracking-wider text-white">
           SCHEDULE
         </span>
-        {/* Tournament date range */}
-        {tournament?.start_date && tournament?.end_date && (
-          <>
-            <ChevronRight size={10} style={{ color: "rgba(255,255,255,0.15)" }} />
-            <span className="text-[10px]" style={{ fontFamily: "Outfit, sans-serif", color: "rgba(255,255,255,0.2)" }}>
-              {formatDayMonth(toLocalDate(tournament.start_date))} – {formatDayMonth(toLocalDate(tournament.end_date))}
-            </span>
-          </>
-        )}
-        <div className="flex-1" />
-        <span className="text-[10px]" style={{ fontFamily: "Outfit, sans-serif", color: "rgba(255,255,255,0.2)" }}>
-          {matches.length} matches
-        </span>
+        <div className="flex-1 h-px" style={{ background: "rgba(255,255,255,0.06)" }} />
       </div>
 
-      {/* Stage label if exists */}
-      {stageGroups.length > 0 && stageGroups[0].name && (
-        <div className="px-5 mb-2">
-          <span
-            className="text-[9px] barlowcondensedBold tracking-widest px-2 py-0.5 rounded-full"
-            style={{
-              color: "rgba(34,227,232,0.5)",
-              background: "rgba(34,227,232,0.06)",
-              border: "1px solid rgba(34,227,232,0.1)",
-            }}
-          >
-            {stageGroups[0].name.toUpperCase()}
-          </span>
-        </div>
-      )}
-
       {/* Scrollable day columns */}
       <div
         ref={scrollRef}
-        className="flex gap-2 overflow-x-auto px-5 pb-2 scrollbar-hidden"
-        style={{
-          scrollSnapType: "x mandatory",
-          WebkitOverflowScrolling: "touch",
-          // Auto-scroll to today/upcoming
-          ...(todayIndex > 0 ? {} : {}),
-        }}
+        className="flex gap-2.5 overflow-x-auto px-5 pb-3 scrollbar-hide"
+        style={{ scrollSnapType: "x mandatory", WebkitOverflowScrolling: "touch" }}
       >
         {days.map((day, i) => (
           <DayColumn key={day.dateKey} day={day} index={i} />