@devrongx/games 0.4.45 → 0.4.47

package/package.json

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

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

@@ -583,7 +583,7 @@ export const PreMatchGame = ({
                     <div className="sticky bottom-0 z-10 -mx-4 px-4 pt-3 pb-5"
                         style={{ background: "linear-gradient(180deg, transparent 0%, #0a0a12 12%, #0a0a12 100%)" }}>
 
-                        <div className="flex items-stretch justify-between gap-3">
+                        <div className="flex items-start justify-between gap-3">
                             {/* Left — text area */}
                             <div className="flex flex-col gap-2 flex-1 min-w-0 overflow-hidden">
                                 {/* Remaining balance */}

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

@@ -658,10 +658,18 @@ const MultiplierSlide = ({ config }: SlideProps) => {
 };
 
 // Free leaderboard payouts: ranks 1-10, $25 down to $2.5 in $2.5 steps
-const FREE_PAYOUTS = Array.from({ length: 10 }, (_, i) => ({
-    rank: i + 1,
-    usdc: 25 - i * 2.5,
-}));
+const FREE_PAYOUTS = [
+    { rank: 1, points: 4850, usdc: 25 },
+    { rank: 2, points: 4200, usdc: 22.5 },
+    { rank: 3, points: 3900, usdc: 20 },
+    { rank: 4, points: 3400, usdc: 17.5 },
+    { rank: 5, points: 2950, usdc: 15 },
+    { rank: 6, points: 2600, usdc: 12.5 },
+    { rank: 7, points: 2100, usdc: 10 },
+    { rank: 8, points: 1750, usdc: 7.5 },
+    { rank: 9, points: 1300, usdc: 5 },
+    { rank: 10, points: 900, usdc: 2.5 },
+];
 
 // ── Slide 5: Win USDC ──
 const WinSlide = ({ config, onComplete }: SlideProps) => {
@@ -704,9 +712,13 @@ const WinSlide = ({ config, onComplete }: SlideProps) => {
                     style={{ border: "1px solid rgba(255,255,255,0.08)", background: "rgba(255,255,255,0.02)" }}
                 >
                     {/* Table header */}
-                    <div className="flex items-center justify-between px-3 py-1.5" style={{ borderBottom: "1px solid rgba(255,255,255,0.06)", background: "rgba(255,255,255,0.03)" }}>
+                    <div className="grid grid-cols-3 items-center px-3 py-1.5" style={{ borderBottom: "1px solid rgba(255,255,255,0.06)", background: "rgba(255,255,255,0.03)" }}>
                         <span className="text-[9px] font-bold text-white/50 uppercase tracking-widest" style={OUTFIT}>Rank</span>
-                        <div className="flex items-center gap-1">
+                        <div className="flex items-center gap-1 justify-center">
+                            <PointsIcon size={9} />
+                            <span className="text-[9px] font-bold text-white/50 uppercase tracking-widest" style={OUTFIT}>Points</span>
+                        </div>
+                        <div className="flex items-center gap-1 justify-end">
                             <Image src="/icons/ic_usdc_hd.png" alt="USDC" width={11} height={11} className="rounded-full" />
                             <span className="text-[9px] font-bold text-white/50 uppercase tracking-widest" style={OUTFIT}>Reward</span>
                         </div>
@@ -718,7 +730,7 @@ const WinSlide = ({ config, onComplete }: SlideProps) => {
                             initial={{ opacity: 0, x: -8 }}
                             animate={{ opacity: 1, x: 0 }}
                             transition={{ delay: 1.6 + idx * 0.06, duration: 0.2 }}
-                            className="flex items-center justify-between px-3 py-1.5"
+                            className="grid grid-cols-3 items-center px-3 py-1.5"
                             style={{
                                 borderBottom: idx < FREE_PAYOUTS.length - 1 ? "1px solid rgba(255,255,255,0.04)" : "none",
                                 background: idx === 0 ? "rgba(255,215,0,0.04)" : idx < 3 ? "rgba(255,255,255,0.015)" : "transparent",
@@ -738,8 +750,14 @@ const WinSlide = ({ config, onComplete }: SlideProps) => {
                                 )}
                             </div>
                             <span
-                                className="text-[11px] font-bold"
-                                style={{ ...OUTFIT, color: idx === 0 ? "#FFD700" : idx < 3 ? "rgba(255,255,255,0.85)" : "rgba(255,255,255,0.6)" }}
+                                className="text-[10px] font-semibold text-center"
+                                style={{ ...OUTFIT, color: idx === 0 ? "#22E3E8" : idx < 3 ? "rgba(255,255,255,0.75)" : "rgba(255,255,255,0.5)" }}
+                            >
+                                {row.points.toLocaleString()}
+                            </span>
+                            <span
+                                className="text-[11px] font-bold text-right select-none"
+                                style={{ ...OUTFIT, color: idx === 0 ? "#FFD700" : idx < 3 ? "rgba(255,255,255,0.85)" : "rgba(255,255,255,0.6)", filter: "blur(5px)" }}
                             >
                                 ${row.usdc.toFixed(2)}
                             </span>