@devrongx/games 0.3.4 → 0.4.0

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

@@ -4,9 +4,9 @@
 import { useState, useEffect, useMemo, useCallback } from "react";
 import Image from "next/image";
 import { motion, AnimatePresence, useSpring, useTransform, useMotionValue } from "framer-motion";
-import { ChevronDown, Info, X, Play } from "lucide-react";
+import { ChevronDown, Info, X, Play, Send } from "lucide-react";
 import { IBetSummary, ILeaderboardEntry, IChallengeConfig, IUserBets, deriveParlayGroups, deriveMarketToParlay, calcDisplayReward, optionReward, calcParlayMultiplier } from "./config";
-import { OUTFIT, MARKET_ICONS, PointsIcon, SelectedCheck } from "./constants";
+import { OUTFIT, MARKET_ICONS, PointsIcon, SelectedCheck, AiInsightButton } from "./constants";
 import { useGamePopupStore } from "../../core/gamePopupStore";
 import { LeaderboardRow } from "./LeaderboardRow";
 
@@ -37,10 +37,18 @@ interface PreMatchGameProps {
     leaderboardRows: ILeaderboardEntry[];
     /** Render only the markets section (no header/balance/leaderboard) — used for card preview */
     marketsOnly?: boolean;
+    /** Called when user taps Submit Bets. If provided, shows Submit button instead of Play. */
+    onSubmit?: () => Promise<void> | void;
+    /** Called when user taps "See Full Leaderboard" */
+    onViewLeaderboard?: () => void;
+    /** v1: parlays are cosmetic, shows "Coming in v2". Default = false (hides section) */
+    parlayEnabled?: boolean;
+    /** Whether a submit is in progress */
+    submitting?: boolean;
 }
 
 
-export const PreMatchGame = ({ config, bets, onBetsChange, expandedPicker, onOptionClick, onAmountSelect, betSummary, leaderboardRows, marketsOnly }: PreMatchGameProps) => {
+export const PreMatchGame = ({ config, bets, onBetsChange, expandedPicker, onOptionClick, onAmountSelect, betSummary, leaderboardRows, marketsOnly, onSubmit, onViewLeaderboard, parlayEnabled = false, submitting = false }: PreMatchGameProps) => {
     const { selectedCount, compoundMultiplier, totalEntry, compoundedReward, remainingBalance, riskPercent } = betSummary;
 
     const goTo = useGamePopupStore(s => s.goTo);
@@ -355,6 +363,14 @@ export const PreMatchGame = ({ config, bets, onBetsChange, expandedPicker, onOpt
                                         );
                                     })}
 
+                                    {/* AI Insights button — right-aligned, below options */}
+                                    <div className="col-span-2 flex justify-end pr-4 mt-3">
+                                        <AiInsightButton
+                                            question={market.question}
+                                            options={market.options.map(o => o.label)}
+                                        />
+                                    </div>
+
                                     {/* Amount picker — inline chip carousel (always reserves height when picker is open) */}
                                     {isPickerOpenForMarket && (
                                         <div className="col-span-2 mt-0.5 relative">
@@ -563,11 +579,36 @@ export const PreMatchGame = ({ config, bets, onBetsChange, expandedPicker, onOpt
                                     )}
                                 </AnimatePresence>
                             </div>
-                            {/* Right — play button stretches to match both lines, hidden until points are bet */}
+                            {/* Right — action button, hidden until points are bet */}
                             <AnimatePresence>
                                 {totalEntry > 0 && (() => {
                                     const spentPercent = totalEntry / config.startingBalance;
                                     const fillPercent = 5 + spentPercent * 95;
+
+                                    if (onSubmit) {
+                                        return (
+                                            <motion.button
+                                                onClick={onSubmit}
+                                                disabled={submitting}
+                                                className="relative rounded-xl overflow-hidden flex-shrink-0 flex items-center justify-center gap-1.5 px-3"
+                                                style={{ background: submitting ? "rgba(34,227,232,0.3)" : "linear-gradient(135deg, #22E3E8, #9945FF, #f83cc5)", minWidth: 90, height: "100%" }}
+                                                initial={{ opacity: 0, width: 0 }}
+                                                animate={{ opacity: 1, width: "auto" }}
+                                                exit={{ opacity: 0, width: 0 }}
+                                                transition={{ width: { duration: 0.4, ease: "easeOut", delay: 0.8 }, opacity: { duration: 0.3, delay: 1 } }}
+                                            >
+                                                {submitting ? (
+                                                    <span className="text-[10px] font-bold text-white/70" style={OUTFIT}>Submitting…</span>
+                                                ) : (
+                                                    <>
+                                                        <Send size={14} className="text-white" />
+                                                        <span className="text-[11px] font-bold text-white" style={OUTFIT}>Submit Bets</span>
+                                                    </>
+                                                )}
+                                            </motion.button>
+                                        );
+                                    }
+
                                     return (
                                         <motion.div
                                             className="relative w-[65px] rounded-xl overflow-hidden flex-shrink-0 flex items-center justify-center"
@@ -577,7 +618,6 @@ export const PreMatchGame = ({ config, bets, onBetsChange, expandedPicker, onOpt
                                             exit={{ opacity: 0, width: 0 }}
                                             transition={{ width: { duration: 0.4, ease: "easeOut", delay: 0.8 }, opacity: { duration: 0.3, delay: 1 } }}
                                         >
-                                            {/* Fill bar — spring-animated left to right */}
                                             <motion.div
                                                 className="absolute inset-y-0 left-0"
                                                 animate={{ width: `${fillPercent}%` }}
@@ -644,9 +684,16 @@ export const PreMatchGame = ({ config, bets, onBetsChange, expandedPicker, onOpt
 
                         {/* Combined Bets (Parlays) */}
                         <div className="mt-4">
-                            <p className="text-[9px] text-white/60 font-semibold uppercase tracking-wider mb-1" style={OUTFIT}>
-                                Combine for crazy multipliers
-                            </p>
+                            <div className="flex items-center gap-2 mb-1">
+                                <p className="text-[9px] text-white/60 font-semibold uppercase tracking-wider" style={OUTFIT}>
+                                    Combine for crazy multipliers
+                                </p>
+                                {!parlayEnabled && (
+                                    <span className="text-[7px] font-bold px-1.5 py-0.5 rounded-full" style={{ background: "rgba(153,69,255,0.15)", color: "#9945FF", border: "1px solid rgba(153,69,255,0.3)" }}>
+                                        Coming in v2
+                                    </span>
+                                )}
+                            </div>
                             <p className="text-[7px] text-white/30 font-medium mb-2.5" style={OUTFIT}>
                                 All must hit to win. You lose all if any one goes wrong.
                             </p>
@@ -820,6 +867,15 @@ export const PreMatchGame = ({ config, bets, onBetsChange, expandedPicker, onOpt
                                 </div>
                             ))}
                         </div>
+                        {onViewLeaderboard && leaderboardRows.length > 0 && (
+                            <button
+                                onClick={onViewLeaderboard}
+                                className="mt-2 w-full text-center text-[9px] font-semibold"
+                                style={{ ...OUTFIT, color: "rgba(34,227,232,0.6)" }}
+                            >
+                                See Full Leaderboard →
+                            </button>
+                        )}
                     </div>
 
                 </>

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

@@ -0,0 +1,192 @@
+// @devrongx/games — games/prematch-bets/PreMatchLive.tsx
+// Live match view: shows challenge resolution progress + live leaderboard.
+// Pool status = CLOSED or RESOLVING.
+"use client";
+
+import { useEffect } from "react";
+import { CheckCircle2, Clock, ArrowRight, Radio } from "lucide-react";
+import { IChallengeConfig } from "./config";
+import { LeaderboardRow } from "./LeaderboardRow";
+import { OUTFIT, MARKET_ICONS } from "./constants";
+import type { ITDPoolDetail, ITDMyEntryResponse, ITDLeaderboardEntry } from "../../pools/types";
+
+interface PreMatchLiveProps {
+  config: IChallengeConfig;
+  poolId: number;
+  pool: ITDPoolDetail | null;
+  entryData: ITDMyEntryResponse | null;
+  rankings: ITDLeaderboardEntry[];
+  onRefresh: () => void;
+  onViewFullLeaderboard: () => void;
+}
+
+export function PreMatchLive({
+  config,
+  pool,
+  entryData,
+  rankings,
+  onRefresh,
+  onViewFullLeaderboard,
+}: PreMatchLiveProps) {
+  // Poll every 20s during live phase
+  useEffect(() => {
+    const id = setInterval(onRefresh, 20_000);
+    return () => clearInterval(id);
+  }, [onRefresh]);
+
+  const entry = entryData?.entry;
+  const myBets = entryData?.bets ?? [];
+
+  const challenges = pool?.challenges ?? config.markets.map((m, i) => ({
+    id: m.backendChallengeId ?? i,
+    question: m.question,
+    icon: m.icon,
+    accent_color: m.accent,
+    status: "open",
+    correct_option: null as string | null,
+    options: m.options.map((o) => ({ key: o.label.toLowerCase().replace(/\s+/g, "_"), label: o.label, odds: o.odds, entry: o.entry, risk: o.risk })),
+    category: m.category,
+    sort_order: i,
+    resolved_at: null as string | null,
+  }));
+
+  const resolvedCount = challenges.filter((c) => c.status === "resolved").length;
+  const totalCount = challenges.length;
+  const progressPct = totalCount > 0 ? Math.round((resolvedCount / totalCount) * 100) : 0;
+
+  const myRank = entry ? rankings.findIndex((r) => r.entry_id === entry.id) + 1 : null;
+  const miniRankings = rankings.slice(0, 5);
+
+  return (
+    <div className="w-full flex flex-col gap-4 px-4 pb-8">
+      {/* Live header */}
+      <div className="flex items-center gap-2 pt-5">
+        <div className="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>
+          <span className="text-[11px] font-bold tracking-widest" style={{ color: "#f83cc5", fontFamily: "Barlow Condensed, sans-serif" }}>LIVE</span>
+        </div>
+        <span className="text-[14px] font-bold text-white" style={OUTFIT}>{config.matchTitle}</span>
+      </div>
+
+      {/* Balance + rank */}
+      {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>
+          </div>
+          {myRank !== null && myRank > 0 && (
+            <div className="text-right">
+              <p className="text-[9px] text-white/40 uppercase tracking-wide" style={OUTFIT}>Your Rank</p>
+              <p className="text-[18px] font-bold" style={{ ...OUTFIT, color: "#22E3E8" }}>#{myRank} <span className="text-[11px] text-white/40">of {rankings.length}</span></p>
+            </div>
+          )}
+        </div>
+      )}
+
+      <div className="h-px" style={{ background: "rgba(255,255,255,0.06)" }} />
+
+      {/* Challenge progress */}
+      <div>
+        <div className="flex items-center justify-between mb-2">
+          <p className="text-[10px] font-semibold uppercase tracking-wider text-white/50" style={OUTFIT}>
+            RESULTS ({resolvedCount}/{totalCount} resolved)
+          </p>
+          <span className="text-[9px] font-bold" style={{ ...OUTFIT, color: "#22E3E8" }}>{progressPct}%</span>
+        </div>
+        <div className="h-[5px] rounded-full mb-3" style={{ background: "rgba(255,255,255,0.06)" }}>
+          <div className="h-full rounded-full transition-all duration-700" style={{ width: `${progressPct}%`, background: "linear-gradient(90deg, #22E3E8, #9945FF)" }} />
+        </div>
+
+        <div className="flex flex-col gap-1.5">
+          {challenges.map((c) => {
+            const Icon = MARKET_ICONS[c.icon] ?? MARKET_ICONS.coin;
+            const myBet = myBets.find((b) => b.challenge_id === c.id);
+            const isResolved = c.status === "resolved";
+            const won = isResolved && myBet?.status === "won";
+            const lost = isResolved && myBet?.status === "lost";
+
+            return (
+              <div
+                key={c.id}
+                className="flex items-start gap-2 px-3 py-2 rounded-lg"
+                style={{
+                  background: isResolved
+                    ? won ? "rgba(34,197,94,0.06)" : lost ? "rgba(239,68,68,0.06)" : "rgba(255,255,255,0.03)"
+                    : "rgba(255,255,255,0.03)",
+                  border: `1px solid ${isResolved ? won ? "rgba(34,197,94,0.2)" : lost ? "rgba(239,68,68,0.2)" : "rgba(255,255,255,0.06)" : "rgba(255,255,255,0.05)"}`,
+                }}
+              >
+                {isResolved ? (
+                  won
+                    ? <CheckCircle2 size={12} style={{ color: "#22c55e", flexShrink: 0, marginTop: 1 }} />
+                    : <span className="text-[10px] flex-shrink-0 mt-0.5" style={{ color: "#ef4444" }}>✗</span>
+                ) : (
+                  <Clock size={12} style={{ color: "rgba(255,255,255,0.25)", flexShrink: 0, marginTop: 1 }} />
+                )}
+
+                <div className="flex-1 min-w-0">
+                  <p className="text-[10px] text-white/60 font-medium leading-tight" style={OUTFIT}>{c.question}</p>
+                  {myBet ? (
+                    <p className="text-[9px] mt-0.5" style={{ ...OUTFIT, color: isResolved ? won ? "#22c55e" : "#ef4444" : "rgba(255,255,255,0.4)" }}>
+                      {c.options.find((o) => o.key === myBet.selected_option)?.label ?? myBet.selected_option}
+                      {" @ "}{myBet.odds_at_bet}x — {myBet.coin_amount} pts
+                      {isResolved && won && ` → +${Math.round(myBet.actual_return ?? myBet.potential_return)} pts`}
+                      {isResolved && lost && " → Lost"}
+                    </p>
+                  ) : (
+                    <p className="text-[8px] text-white/25 mt-0.5" style={OUTFIT}>No bet placed</p>
+                  )}
+                  {isResolved && c.correct_option && (
+                    <p className="text-[8px] text-white/35 mt-0.5" style={OUTFIT}>
+                      Answer: {c.options.find((o) => o.key === c.correct_option)?.label ?? c.correct_option}
+                    </p>
+                  )}
+                  {!isResolved && <p className="text-[8px] text-white/25 mt-0.5" style={OUTFIT}>Waiting for resolution…</p>}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      <div className="h-px" style={{ background: "rgba(255,255,255,0.06)" }} />
+
+      {/* Live leaderboard */}
+      {miniRankings.length > 0 && (
+        <div>
+          <div className="flex items-center gap-1.5 mb-2">
+            <Radio size={10} style={{ color: "#f83cc5" }} />
+            <p className="text-[10px] font-semibold uppercase tracking-wider text-white/50" style={OUTFIT}>LIVE LEADERBOARD</p>
+          </div>
+          <div className="flex flex-col">
+            {miniRankings.map((r) => (
+              <LeaderboardRow
+                key={r.entry_id}
+                entry={{
+                  wallet: r.partner_ext_id ?? `User #${r.user_id}`,
+                  pts: r.current_coins,
+                  payout: 0,
+                  isYou: r.entry_id === entry?.id,
+                  rank: r.rank,
+                }}
+                rank={r.rank}
+                isLast={false}
+              />
+            ))}
+          </div>
+          <button
+            onClick={onViewFullLeaderboard}
+            className="mt-2 flex items-center justify-center gap-1 w-full text-[9px] font-semibold"
+            style={{ ...OUTFIT, color: "rgba(34,227,232,0.6)" }}
+          >
+            See Full Leaderboard <ArrowRight size={10} />
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -5,7 +5,7 @@ import { useState, useCallback, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { Check, Rewind, FastForward, ArrowRight } from "lucide-react";
 import { IChallengeConfig, IChallengeMarket, IUserBets } from "./config";
-import { OUTFIT, MARKET_ICONS, PointsIcon } from "./constants";
+import { OUTFIT, MARKET_ICONS, PointsIcon, AiInsightButton } from "./constants";
 import { useGamePopupStore } from "../../core/gamePopupStore";
 
 interface PreMatchQuestionsProps {
@@ -80,6 +80,62 @@ const StartSlide = ({ onStart }: { onStart: () => void }) => {
     );
 };
 
+// ── Points hint + locked carousel (hidden for now — uncomment when points flow is live) ──
+// const QuestionPointsHint = ({
+//     market,
+//     startingBalance,
+//     stakeIncrements,
+// }: {
+//     market: IChallengeMarket;
+//     startingBalance: number;
+//     stakeIncrements: number;
+// }) => {
+//     const chipCount = Math.floor(startingBalance / stakeIncrements);
+//     return (
+//         <motion.div
+//             initial={{ opacity: 0, y: 14 }}
+//             animate={{ opacity: 1, y: 0 }}
+//             transition={{ duration: 0.5, delay: 0.6 }}
+//             className="w-full mt-8 flex flex-col gap-2.5 -mx-5"
+//             style={{ width: "calc(100% + 40px)", paddingLeft: 20 }}
+//         >
+//             <p className="text-[11px] text-white font-medium leading-relaxed" style={OUTFIT}>
+//                 Pick using your cricket knowledge — the{" "}
+//                 <span className="text-[#22E3E8] font-bold">{market.options[0].odds}x</span>
+//                 {" "}
+//                 <PointsIcon size={11} className="inline-block align-text-bottom" />
+//                 {" "}multiplier next to each option is how much your points grow if you{"'"}re right.
+//             </p>
+//             <p className="text-[11px] text-white/70 font-medium" style={OUTFIT}>
+//                 How many points to bet? You{"'"}ll decide that next.
+//             </p>
+//             {/* Locked chips carousel — extends past right edge */}
+//             <div className="relative mt-0.5 overflow-hidden" style={{ marginRight: -20 }}>
+//                 <div className="flex items-center gap-1.5 py-1 opacity-40">
+//                     {Array.from({ length: chipCount }, (_, i) => (i + 1) * stakeIncrements).map(amt => (
+//                         <div
+//                             key={amt}
+//                             className="flex-shrink-0 flex items-center gap-0.5 px-2.5 py-[4px] rounded"
+//                             style={{
+//                                 background: "rgba(34,227,232,0.08)",
+//                                 border: "1px solid rgba(34,227,232,0.15)",
+//                             }}
+//                         >
+//                             <PointsIcon size={8} />
+//                             <span className="text-[9px] font-bold text-[#22E3E8]" style={OUTFIT}>{amt}</span>
+//                         </div>
+//                     ))}
+//                 </div>
+//                 {/* Right fade */}
+//                 <div
+//                     className="absolute inset-y-0 right-0 w-20 pointer-events-none"
+//                     style={{ background: "linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.85) 70%, black 100%)" }}
+//                 />
+//             </div>
+//         </motion.div>
+//     );
+// };
+
 // ── Single question slide ──
 const QuestionSlide = ({
     market,
@@ -95,6 +151,7 @@ const QuestionSlide = ({
     stakeIncrements: number;
 }) => {
     const chipCount = Math.floor(startingBalance / stakeIncrements);
+    void chipCount; // unused while QuestionPointsHint is hidden
     const IconComponent = MARKET_ICONS[market.icon];
 
     return (
@@ -190,50 +247,17 @@ const QuestionSlide = ({
                 })}
             </motion.div>
 
-            {/* Hint text + locked points carousel */}
+            {/* AI Insights button — right-aligned, below options */}
             <motion.div
-                initial={{ opacity: 0, y: 14 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: 0.6 }}
-                className="w-full mt-8 flex flex-col gap-2.5 -mx-5"
-                style={{ width: "calc(100% + 40px)", paddingLeft: 20 }}
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ duration: 0.4, delay: 0.55 }}
+                className="w-full max-w-[320px] flex justify-end pr-4 mt-8"
             >
-                <p className="text-[11px] text-white font-medium leading-relaxed" style={OUTFIT}>
-                    Pick using your cricket knowledge — the{" "}
-                    <span className="text-[#22E3E8] font-bold">{market.options[0].odds}x</span>
-                    {" "}
-                    <PointsIcon size={11} className="inline-block align-text-bottom" />
-                    {" "}multiplier next to each option is how much your points grow if you{"'"}re right.
-                </p>
-                <p className="text-[11px] text-white/70 font-medium" style={OUTFIT}>
-                    How many points to bet? You{"'"}ll decide that next.
-                </p>
-
-                {/* Locked chips carousel — extends past right edge.
-                     Chips have reduced opacity directly so there's no flash before blur loads. */}
-                <div className="relative mt-0.5 overflow-hidden" style={{ marginRight: -20 }}>
-                    <div className="flex items-center gap-1.5 py-1 opacity-40">
-                        {Array.from({ length: chipCount }, (_, i) => (i + 1) * stakeIncrements).map(amt => (
-                            <div
-                                key={amt}
-                                className="flex-shrink-0 flex items-center gap-0.5 px-2.5 py-[4px] rounded"
-                                style={{
-                                    background: "rgba(34,227,232,0.08)",
-                                    border: "1px solid rgba(34,227,232,0.15)",
-                                }}
-                            >
-                                <PointsIcon size={8} />
-                                <span className="text-[9px] font-bold text-[#22E3E8]" style={OUTFIT}>{amt}</span>
-                            </div>
-                        ))}
-                    </div>
-                    {/* Right fade — vanishes into the edge */}
-                    <div
-                        className="absolute inset-y-0 right-0 w-20 pointer-events-none"
-                        style={{ background: "linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.85) 70%, black 100%)" }}
-                    />
-                </div>
+                <AiInsightButton question={market.question} options={market.options.map(o => o.label)} />
             </motion.div>
+
+            {/* <QuestionPointsHint market={market} startingBalance={startingBalance} stakeIncrements={stakeIncrements} /> */}
         </div>
     );
 };