@devrongx/games 0.4.35 → 0.4.36

package/package.json

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

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

@@ -3,8 +3,8 @@
 "use client";
 
 import { useState, useMemo } from "react";
-import { motion } from "framer-motion";
-import { ArrowLeft, Loader2, Trophy, TrendingUp, Wallet } from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+import { ArrowLeft, ChevronDown, ChevronUp, Loader2, Trophy, TrendingUp } from "lucide-react";
 import { IChallengeConfig } from "./config";
 import { OUTFIT, PointsIcon } from "./constants";
 import { useTDLeaderboard } from "../../pools/hooks";
@@ -13,22 +13,27 @@ import type { ITDLeaderboardEntry } from "../../pools/types";
 const PAGE_SIZE = 50;
 
 const SORT_TABS = [
-    { key: "max_possible", label: "Score", icon: Trophy, desc: "Max potential outcome" },
-    { key: "total_risked", label: "Risk", icon: TrendingUp, desc: "Total coins wagered" },
-    { key: "current_coins", label: "Balance", icon: Wallet, desc: "Remaining coin balance" },
+    { key: "max_possible", label: "Score", icon: Trophy },
+    { key: "pending_risk", label: "Risk", icon: TrendingUp },
 ] as const;
 
+const EXPLAINER: Record<string, string> = {
+    max_possible:
+        "Each unresolved bet counts at its max potential payout. As results come in, won bets keep their value, lost bets drop to zero. Your score converges to your actual outcome as the match progresses.",
+    pending_risk:
+        "Total coins at stake in unresolved bets. As each question is answered, that bet\u2019s risk drops to zero \u2014 win or lose. Risk reaches zero when all bets settle.",
+};
+
 const RANK_COLORS = [
     { bg: "rgba(255,215,0,0.12)", border: "rgba(255,215,0,0.3)", text: "#FFD700", glow: "0 0 12px rgba(255,215,0,0.2)" },
     { bg: "rgba(192,192,192,0.10)", border: "rgba(192,192,192,0.25)", text: "#C0C0C0", glow: "0 0 10px rgba(192,192,192,0.15)" },
     { bg: "rgba(205,127,50,0.10)", border: "rgba(205,127,50,0.25)", text: "#CD7F32", glow: "0 0 10px rgba(205,127,50,0.15)" },
 ];
 
-function getMetric(entry: ITDLeaderboardEntry, sortKey: string): number {
+function getMetric(entry: ITDLeaderboardEntry, sortKey: string, startingBalance: number): number {
     switch (sortKey) {
-        case "total_risked": return entry.total_risked;
-        case "current_coins": return entry.current_coins;
-        default: return entry.max_possible;
+        case "pending_risk": return entry.pending_risk;
+        default: return entry.max_possible - startingBalance;
     }
 }
 
@@ -42,6 +47,7 @@ interface FullLeaderboardProps {
 export function FullLeaderboard({ poolId, config, onBack, userEntryId }: FullLeaderboardProps) {
     const [sortBy, setSortBy] = useState<string>("max_possible");
     const [page, setPage] = useState(0);
+    const [showExplainer, setShowExplainer] = useState(false);
 
     const { rankings, total, loading } = useTDLeaderboard(poolId, {
         sort: sortBy,
@@ -50,10 +56,12 @@ export function FullLeaderboard({ poolId, config, onBack, userEntryId }: FullLea
         pollMs: 15_000,
     });
 
+    const startingBalance = config.startingBalance;
+
     const maxMetric = useMemo(() => {
         if (rankings.length === 0) return 1;
-        return Math.max(...rankings.map((r) => getMetric(r, sortBy)), 1);
-    }, [rankings, sortBy]);
+        return Math.max(...rankings.map((r) => getMetric(r, sortBy, startingBalance)), 1);
+    }, [rankings, sortBy, startingBalance]);
 
     const activeTab = SORT_TABS.find((t) => t.key === sortBy) ?? SORT_TABS[0];
 
@@ -69,12 +77,12 @@ export function FullLeaderboard({ poolId, config, onBack, userEntryId }: FullLea
                 <div className="flex-1">
                     <p className="text-[15px] font-bold text-white tracking-wide" style={OUTFIT}>Leaderboard</p>
                     <p className="text-[10px] text-white/35 font-medium" style={OUTFIT}>
-                        {total.toLocaleString()} player{total !== 1 ? "s" : ""} · {activeTab.desc}
+                        {total.toLocaleString()} player{total !== 1 ? "s" : ""}
                     </p>
                 </div>
             </div>
 
-            {/* Sort tabs — pill style matching game FilterPill */}
+            {/* Sort tabs */}
             <div className="flex gap-1.5 px-4 py-2">
                 {SORT_TABS.map((tab) => {
                     const active = sortBy === tab.key;
@@ -99,6 +107,32 @@ export function FullLeaderboard({ poolId, config, onBack, userEntryId }: FullLea
                 })}
             </div>
 
+            {/* Explainer toggle */}
+            <button
+                onClick={() => setShowExplainer((v) => !v)}
+                className="flex items-center gap-1 px-4 py-1 text-[9px] font-medium"
+                style={{ ...OUTFIT, color: "rgba(34,227,232,0.5)" }}
+            >
+                How does this work?
+                {showExplainer ? <ChevronUp size={10} /> : <ChevronDown size={10} />}
+            </button>
+            <AnimatePresence>
+                {showExplainer && (
+                    <motion.div
+                        initial={{ height: 0, opacity: 0 }}
+                        animate={{ height: "auto", opacity: 1 }}
+                        exit={{ height: 0, opacity: 0 }}
+                        transition={{ duration: 0.2 }}
+                        className="overflow-hidden"
+                    >
+                        <p className="text-[9px] leading-relaxed px-4 pb-2 font-medium"
+                            style={{ ...OUTFIT, color: "rgba(255,255,255,0.3)" }}>
+                            {EXPLAINER[sortBy]}
+                        </p>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+
             {/* Column guide */}
             <div className="flex items-center px-4 py-1.5 mt-1" style={{ borderBottom: "1px solid rgba(255,255,255,0.04)" }}>
                 <span className="w-[32px] text-[7px] text-white/20 uppercase tracking-widest font-bold text-center" style={OUTFIT}>Rank</span>
@@ -117,7 +151,7 @@ export function FullLeaderboard({ poolId, config, onBack, userEntryId }: FullLea
                         const isUser = r.entry_id === userEntryId;
                         const rankIdx = r.rank - 1;
                         const isTop3 = rankIdx < 3;
-                        const metric = getMetric(r, sortBy);
+                        const metric = getMetric(r, sortBy, startingBalance);
                         const barWidth = maxMetric > 0 ? (metric / maxMetric) * 100 : 0;
                         const rankStyle = isTop3 ? RANK_COLORS[rankIdx] : null;
 
@@ -183,14 +217,14 @@ export function FullLeaderboard({ poolId, config, onBack, userEntryId }: FullLea
                                         <span className="text-[8px] text-white/25 font-medium" style={OUTFIT}>
                                             {r.bets_placed} bet{r.bets_placed !== 1 ? "s" : ""}
                                         </span>
-                                        {sortBy !== "total_risked" && r.total_risked > 0 && (
+                                        {sortBy !== "pending_risk" && r.total_risked > 0 && (
                                             <span className="text-[8px] text-white/20 font-medium" style={OUTFIT}>
                                                 · {r.total_risked.toLocaleString()} risked
                                             </span>
                                         )}
                                         {sortBy !== "max_possible" && r.max_possible > 0 && (
                                             <span className="text-[8px] text-white/20 font-medium" style={OUTFIT}>
-                                                · {r.max_possible.toLocaleString()} max
+                                                · {(r.max_possible - startingBalance).toLocaleString()} score
                                             </span>
                                         )}
                                     </div>

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

@@ -54,13 +54,15 @@ function getActiveView(
 function buildMiniLeaderboard(
   rankings: ITDLeaderboardEntry[],
   userEntryId: number | null,
+  startingBalance: number,
 ): ILeaderboardEntry[] {
+  const score = (r: ITDLeaderboardEntry) => r.max_possible - startingBalance;
   const rows: ILeaderboardEntry[] = [];
   const top = rankings.slice(0, 3);
   top.forEach((r) => {
     rows.push({
       wallet: r.partner_ext_id ?? `User #${r.user_id}`,
-      pts: r.max_possible,
+      pts: score(r),
       payout: 0,
       isYou: r.entry_id === userEntryId,
       rank: r.rank,
@@ -72,13 +74,13 @@ function buildMiniLeaderboard(
       rows.push({ wallet: "", pts: 0, payout: 0, isYou: false, gapAbove: true });
       if (userIdx > 3) {
         const above = rankings[userIdx - 1];
-        rows.push({ wallet: above.partner_ext_id ?? `User #${above.user_id}`, pts: above.current_coins, payout: 0, isYou: false, rank: userIdx });
+        rows.push({ wallet: above.partner_ext_id ?? `User #${above.user_id}`, pts: score(above), payout: 0, isYou: false, rank: userIdx });
       }
       const me = rankings[userIdx];
-      rows.push({ wallet: me.partner_ext_id ?? "You", pts: me.current_coins, payout: 0, isYou: true, rank: userIdx + 1 });
+      rows.push({ wallet: me.partner_ext_id ?? "You", pts: score(me), payout: 0, isYou: true, rank: userIdx + 1 });
       if (userIdx < rankings.length - 1) {
         const below = rankings[userIdx + 1];
-        rows.push({ wallet: below.partner_ext_id ?? `User #${below.user_id}`, pts: below.current_coins, payout: 0, isYou: false, rank: userIdx + 2 });
+        rows.push({ wallet: below.partner_ext_id ?? `User #${below.user_id}`, pts: score(below), payout: 0, isYou: false, rank: userIdx + 2 });
       }
     }
   }
@@ -228,7 +230,7 @@ export const PreMatchBetsPopup = ({ poolId, matchId: _matchId, match: matchProp
 
   const leaderboardRows = useMemo(() => {
     if (poolId && rankings.length > 0) {
-      return buildMiniLeaderboard(rankings, entryData?.entry.id ?? null);
+      return buildMiniLeaderboard(rankings, entryData?.entry.id ?? null, config?.startingBalance ?? 0);
     }
     if (fallbackPool && config) {
       return buildPoolLeaderboard(fallbackPool, betSummary.potentialBalance, config).rows;

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

@@ -76,8 +76,8 @@ export function PreMatchLive({
       {entry && (
         <div className="flex items-center gap-3 px-3 py-2.5 rounded-xl" style={{ background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.08)" }}>
           <div className="flex-1">
-            <p className="text-[9px] text-white/40 uppercase tracking-wide" style={OUTFIT}>Balance</p>
-            <p className="text-[18px] font-bold text-white" style={OUTFIT}>{entry.current_coins.toLocaleString()} pts</p>
+            <p className="text-[9px] text-white/40 uppercase tracking-wide" style={OUTFIT}>Score</p>
+            <p className="text-[18px] font-bold text-white" style={OUTFIT}>{(entry.max_possible - config.startingBalance).toLocaleString()} pts</p>
           </div>
           {myRank !== null && myRank > 0 && (
             <div className="text-right">
@@ -169,7 +169,7 @@ export function PreMatchLive({
                 key={r.entry_id}
                 entry={{
                   wallet: r.partner_ext_id ?? `User #${r.user_id}`,
-                  pts: r.current_coins,
+                  pts: r.max_possible - config.startingBalance,
                   payout: 0,
                   isYou: r.entry_id === entry?.id,
                   rank: r.rank,

package/src/pools/types.ts

@@ -147,6 +147,7 @@ export interface ITDLeaderboardEntry {
   final_coins: number | null;
   total_risked: number;
   max_possible: number;
+  pending_risk: number;
   bets_placed: number;
   bets_won: number;
   bets_lost: number;