@devrongx/games 0.4.37 → 0.4.38

package/package.json

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

package/src/matches/MatchCalendar.tsx

@@ -2,7 +2,7 @@
 "use client";
 
 import { useRef, useMemo, useEffect } from "react";
-import { motion, AnimatePresence } from "framer-motion";
+import { motion } from "framer-motion";
 import { Calendar, MapPin, Loader2, Trophy, Zap, Target, Users } from "lucide-react";
 import { useTDMatches } from "./useTDMatches";
 import { useTDPools } from "../pools/hooks";
@@ -68,6 +68,17 @@ function getShineOpacity(popularity: number): number {
   return Math.min(popularity / 10, 1);
 }
 
+function humanizeCount(n: number): string {
+  if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;
+  return String(n);
+}
+
+/** Determine if a pool is free based on display_price and entry_fee */
+function isFreePool(pool: ITDPool): boolean {
+  const dp = (pool.display_price || "").toLowerCase().trim();
+  return dp === "" || dp === "free" || (pool.entry_fee === 0 && dp === "");
+}
+
 /* ── Grouping: by date ── */
 
 interface IMatchDay {
@@ -104,7 +115,7 @@ function groupByDate(matches: ITDMatch[]): IMatchDay[] {
     }));
 }
 
-/* ── Pool pills for a match ── */
+/* ── Pool row item ── */
 
 const GAME_TYPE_STYLE: Record<number, { icon: typeof Target; color: string; bg: string; label: string }> = {
   [TDGameType.PRE_MATCH_BETS]: { icon: Target, color: "#22E3E8", bg: "rgba(34,227,232,0.06)", label: "Pre-Match Bets" },
@@ -112,37 +123,40 @@ const GAME_TYPE_STYLE: Record<number, { icon: typeof Target; color: string; bg:
   [TDGameType.BALL_SEQUENCE]: { icon: Zap, color: "#FF9945", bg: "rgba(255,153,69,0.06)", label: "Ball Sequence" },
 };
 
-function PoolPill({ pool, onPress }: { pool: ITDPool; onPress: (pool: ITDPool) => void }) {
+function PoolRow({ pool, onPress }: { pool: ITDPool; onPress: (pool: ITDPool) => void }) {
   const style = GAME_TYPE_STYLE[pool.game_type] ?? { icon: Target, color: "#22E3E8", bg: "rgba(34,227,232,0.06)", label: "Play" };
   const isClosed = pool.status === TDPoolStatus.CLOSED || pool.status === TDPoolStatus.RESOLVING || pool.status === TDPoolStatus.COMPLETE;
   const isOpen = pool.status === TDPoolStatus.OPEN;
+  const free = isFreePool(pool);
 
   return (
     <motion.button
       onClick={() => onPress(pool)}
-      whileTap={{ scale: 0.93 }}
-      whileHover={{ scale: 1.04 }}
-      transition={{ type: "spring", stiffness: 500, damping: 25 }}
-      className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg flex-shrink-0"
+      whileTap={{ scale: 0.96 }}
+      className="flex items-center gap-1.5 w-full px-2 py-1.5 rounded-lg"
       style={{
-        background: isOpen ? style.bg.replace("0.06", "0.10") : style.bg,
-        border: `1px solid ${style.color}${isOpen ? "50" : "25"}`,
+        background: isOpen ? style.bg.replace("0.06", "0.08") : style.bg,
+        border: `1px solid ${style.color}${isOpen ? "30" : "18"}`,
         opacity: isClosed ? 0.45 : 1,
-        boxShadow: isOpen ? `0 0 8px ${style.color}18` : undefined,
       }}
     >
+      {/* Live dot */}
       {isOpen && (
         <span className="relative flex h-1.5 w-1.5 shrink-0">
           <span className="animate-ping absolute inline-flex h-full w-full rounded-full opacity-60" style={{ backgroundColor: style.color }} />
           <span className="relative inline-flex rounded-full h-1.5 w-1.5" style={{ backgroundColor: style.color }} />
         </span>
       )}
-      <span className="text-[10px] font-bold tracking-wide" style={{ ...OUTFIT, color: "#fff" }}>
-        PLAY
+
+      {/* Label: "Play for Free" or cost */}
+      <span className="flex-1 text-left text-[9px] font-bold tracking-wide" style={{ ...OUTFIT, color: free ? "rgba(255,255,255,0.9)" : "#fff" }}>
+        {free ? "Play for Free" : pool.display_price}
       </span>
+
+      {/* Entry count for non-free pools, or always if there are entries */}
       {pool.entry_count > 0 && (
-        <span className="text-[8px] font-medium" style={{ ...OUTFIT, color: `${style.color}99` }}>
-          {pool.entry_count > 999 ? `${(pool.entry_count / 1000).toFixed(1)}k` : pool.entry_count} in
+        <span className="text-[8px] font-medium shrink-0" style={{ ...OUTFIT, color: `${style.color}99` }}>
+          {humanizeCount(pool.entry_count)} in
         </span>
       )}
     </motion.button>
@@ -176,27 +190,37 @@ function MatchGameSection({
   if (gameTypes.length === 0) return null;
 
   return (
-    <div className="flex flex-col gap-1.5 mt-1.5 pt-2" style={{ borderTop: "1px solid rgba(255,255,255,0.08)" }}>
+    <div className="flex flex-col gap-2 mt-1.5 pt-2" style={{ borderTop: "1px solid rgba(255,255,255,0.08)" }}>
       {gameTypes.map((gt) => {
         const style = GAME_TYPE_STYLE[gt];
         const Icon = style.icon;
+        // Sort: free pools first, then by display_price ascending
+        const sorted = [...grouped[gt]].sort((a, b) => {
+          const aFree = isFreePool(a) ? 0 : 1;
+          const bFree = isFreePool(b) ? 0 : 1;
+          if (aFree !== bFree) return aFree - bFree;
+          return a.entry_fee - b.entry_fee;
+        });
+
         return (
           <div key={gt} className="flex flex-col gap-1">
-            <div className="flex items-center gap-1 px-0.5">
+            {/* Game type pill header */}
+            <div className="flex items-center gap-1 px-0.5 mb-0.5">
               <Icon size={9} style={{ color: style.color }} />
-              <span className="text-[8px] barlowcondensedBold tracking-wide" style={{ color: "rgba(255,255,255,0.85)" }}>
+              <span className="text-[8px] barlowcondensedBold tracking-wide" style={{ color: style.color }}>
                 {style.label}
               </span>
             </div>
-            <div className="flex gap-1.5 flex-wrap">
-              {grouped[gt].map((pool, idx) => (
+            {/* Pool rows */}
+            <div className="flex flex-col gap-1">
+              {sorted.map((pool, idx) => (
                 <motion.div
                   key={pool.id}
-                  initial={{ opacity: 0, y: 6 }}
+                  initial={{ opacity: 0, y: 4 }}
                   animate={{ opacity: 1, y: 0 }}
-                  transition={{ delay: idx * 0.04, duration: 0.25, ease: "easeOut" }}
+                  transition={{ delay: idx * 0.03, duration: 0.2, ease: "easeOut" }}
                 >
-                  <PoolPill pool={pool} onPress={onPoolPress ?? (() => {})} />
+                  <PoolRow pool={pool} onPress={onPoolPress ?? (() => {})} />
                 </motion.div>
               ))}
             </div>
@@ -245,7 +269,7 @@ function MatchCard({ match, onPoolPress, partnerSource }: { match: ITDMatch; onP
       )}
 
       <motion.div
-        className="relative flex flex-col gap-2 rounded-xl px-3.5 py-3"
+        className="relative flex flex-col gap-1.5 rounded-xl px-3 py-2.5"
         style={{
           background: isLive
             ? "linear-gradient(160deg, rgba(14,10,24,0.98) 0%, rgba(10,8,20,0.98) 100%)"
@@ -257,10 +281,10 @@ function MatchCard({ match, onPoolPress, partnerSource }: { match: ITDMatch; onP
         {/* Time + live indicator */}
         <div className="flex items-center justify-between gap-1">
           <span
-            className="text-[11px] font-semibold"
+            className="text-[10px] font-semibold"
             style={{
               ...OUTFIT,
-              color: isLive ? "#f83cc5" : isCompleted ? "rgba(255,255,255,0.45)" : "#fff",
+              color: isLive ? "#f83cc5" : isCompleted ? "rgba(255,255,255,0.45)" : "rgba(255,255,255,0.7)",
             }}
           >
             {time}
@@ -286,16 +310,16 @@ function MatchCard({ match, onPoolPress, partnerSource }: { match: ITDMatch; onP
         {/* Teams */}
         <div className="flex items-center gap-2 justify-center">
           <span
-            className="barlowcondensedBold text-[24px] leading-none tracking-wide"
+            className="barlowcondensedBold text-[20px] leading-none tracking-wide"
             style={{ color: isCompleted ? "rgba(255,255,255,0.4)" : "#fff" }}
           >
             {getTeamShortName(match, "a")}
           </span>
-          <span className="text-[10px] font-semibold" style={{ ...OUTFIT, color: "rgba(255,255,255,0.5)" }}>
+          <span className="text-[9px] font-semibold" style={{ ...OUTFIT, color: "rgba(255,255,255,0.45)" }}>
             vs
           </span>
           <span
-            className="barlowcondensedBold text-[24px] leading-none tracking-wide"
+            className="barlowcondensedBold text-[20px] leading-none tracking-wide"
             style={{ color: isCompleted ? "rgba(255,255,255,0.4)" : "#fff" }}
           >
             {getTeamShortName(match, "b")}
@@ -305,30 +329,16 @@ function MatchCard({ match, onPoolPress, partnerSource }: { match: ITDMatch; onP
         {/* Venue */}
         {venue && (
           <div className="flex items-center gap-1 justify-center">
-            <MapPin size={9} style={{ color: "rgba(255,255,255,0.55)" }} />
+            <MapPin size={8} style={{ color: "rgba(255,255,255,0.45)" }} />
             <span
-              className="text-[9px] truncate max-w-[130px]"
-              style={{ ...OUTFIT, color: "rgba(255,255,255,0.7)" }}
+              className="text-[8px] truncate max-w-[120px]"
+              style={{ ...OUTFIT, color: "rgba(255,255,255,0.6)" }}
             >
               {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={8}
-                fill={isLive ? "#f83cc5" : "#22E3E8"}
-                style={{ color: isLive ? "#f83cc5" : "#22E3E8", opacity: 0.45 + i * 0.13 }}
-              />
-            ))}
-          </div>
-        )}
-
         {/* Game modes — driven by real pools */}
         <MatchGameSection
           matchId={match.id}
@@ -354,12 +364,12 @@ function DayColumn({ day, index, onPoolPress, partnerSource }: { day: IMatchDay;
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.35, delay: index * 0.04, ease: [0.25, 0.46, 0.45, 0.94] }}
       className="shrink-0 flex flex-col gap-2"
-      style={{ scrollSnapAlign: "start", width: "180px" }}
+      style={{ scrollSnapAlign: "start", width: "160px" }}
     >
       {/* Day header */}
-      <div className="flex flex-col items-center gap-0.5 pb-1.5">
+      <div className="flex flex-col items-center gap-0.5 pb-1">
         <span
-          className="text-[11px] barlowcondensedBold tracking-widest"
+          className="text-[10px] barlowcondensedBold tracking-widest"
           style={{
             color: hasLive ? "#f83cc5" : hasToday ? "#22E3E8" : allCompleted ? "rgba(255,255,255,0.35)" : "rgba(255,255,255,0.9)",
           }}
@@ -367,7 +377,7 @@ function DayColumn({ day, index, onPoolPress, partnerSource }: { day: IMatchDay;
           {day.label}
         </span>
         <span
-          className="text-[13px] font-semibold"
+          className="text-[12px] font-semibold"
           style={{
             ...OUTFIT,
             color: hasLive ? "#f83cc5" : hasToday ? "#22E3E8" : allCompleted ? "rgba(255,255,255,0.35)" : "#fff",
@@ -377,7 +387,7 @@ function DayColumn({ day, index, onPoolPress, partnerSource }: { day: IMatchDay;
         </span>
         {(hasToday || hasLive) && (
           <div
-            className="w-6 h-[2px] rounded-full mt-0.5"
+            className="w-5 h-[2px] rounded-full mt-0.5"
             style={{ background: hasLive ? "#f83cc5" : "#22E3E8" }}
           />
         )}