@devrongx/games 0.4.32 → 0.4.33

package/package.json

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

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

@@ -0,0 +1,266 @@
+// @devrongx/games — games/prematch-bets/BetCelebration.tsx
+"use client";
+
+import { useMemo } from "react";
+import Image from "next/image";
+import { motion } from "framer-motion";
+import { IChallengeConfig, IUserBets, IBetSummary } from "./config";
+import { OUTFIT, PointsIcon, SelectedCheck } from "./constants";
+
+// ─── Firework particle ───────────────────────────────────────────────────────
+
+const Particle = ({ delay, angle, distance, size, color }: { delay: number; angle: number; distance: number; size: number; color: string }) => {
+    const rad = (angle * Math.PI) / 180;
+    const x = Math.cos(rad) * distance;
+    const y = Math.sin(rad) * distance;
+    return (
+        <motion.div
+            className="absolute rounded-full"
+            style={{ width: size, height: size, background: color, left: "50%", top: "40%" }}
+            initial={{ x: 0, y: 0, opacity: 0, scale: 0 }}
+            animate={{ x, y: y - 20, opacity: [0, 1, 1, 0], scale: [0, 1.5, 1, 0] }}
+            transition={{ duration: 1.4, delay, ease: "easeOut" }}
+        />
+    );
+};
+
+// ─── Animated SVG checkmark ──────────────────────────────────────────────────
+
+const AnimatedCheck = ({ delay = 0, size = 56 }: { delay?: number; size?: number }) => (
+    <motion.svg
+        width={size} height={size} viewBox="0 0 56 56" fill="none"
+        initial={{ scale: 0 }} animate={{ scale: 1 }}
+        transition={{ type: "spring", stiffness: 260, damping: 14, delay }}
+    >
+        <motion.circle
+            cx="28" cy="28" r="26" stroke="#22E3E8" strokeWidth="2"
+            fill="rgba(34,227,232,0.06)"
+            initial={{ pathLength: 0, opacity: 0 }}
+            animate={{ pathLength: 1, opacity: 1 }}
+            transition={{ duration: 0.6, delay: delay + 0.1, ease: "easeOut" }}
+        />
+        <motion.path
+            d="M17 28l8 8 14-14" stroke="#22E3E8" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"
+            fill="none"
+            initial={{ pathLength: 0 }}
+            animate={{ pathLength: 1 }}
+            transition={{ duration: 0.4, delay: delay + 0.5, ease: "easeOut" }}
+        />
+    </motion.svg>
+);
+
+// ─── Props ───────────────────────────────────────────────────────────────────
+
+interface BetCelebrationProps {
+    config: IChallengeConfig;
+    bets: IUserBets;
+    betSummary: IBetSummary;
+    onClose: () => void;
+    onViewLeaderboard?: () => void;
+    isEdit?: boolean;
+    editedMarketIdx?: number;
+}
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+export const BetCelebration = ({
+    config, bets, betSummary, onClose, onViewLeaderboard, isEdit = false, editedMarketIdx,
+}: BetCelebrationProps) => {
+    const { totalEntry, compoundedReward } = betSummary;
+
+    // Build list of bets to display
+    const displayBets = useMemo(() => {
+        const entries: { mIdx: number; question: string; optionLabel: string; amount: number; odds: number; reward: number }[] = [];
+        if (isEdit && editedMarketIdx !== undefined) {
+            const bet = bets[editedMarketIdx];
+            if (bet && bet.amount > 0) {
+                const market = config.markets[editedMarketIdx];
+                const opt = market.options[bet.optionIdx];
+                entries.push({ mIdx: editedMarketIdx, question: market.question, optionLabel: opt.label, amount: bet.amount, odds: opt.odds, reward: Math.round(bet.amount * opt.odds) });
+            }
+        } else {
+            for (const [mIdxStr, bet] of Object.entries(bets)) {
+                if (bet.amount <= 0) continue;
+                const mIdx = Number(mIdxStr);
+                const market = config.markets[mIdx];
+                if (!market) continue;
+                const opt = market.options[bet.optionIdx];
+                if (!opt) continue;
+                entries.push({ mIdx, question: market.question, optionLabel: opt.label, amount: bet.amount, odds: opt.odds, reward: Math.round(bet.amount * opt.odds) });
+            }
+        }
+        return entries;
+    }, [bets, config, isEdit, editedMarketIdx]);
+
+    // Timing
+    const particleCount = isEdit ? 10 : 20;
+    const checkDelay = 0.15;
+    const titleDelay = checkDelay + 0.4;
+    const betStartDelay = isEdit ? 0.5 : 0.8;
+    const betStagger = isEdit ? 0.1 : 0.15;
+    const outcomeDelay = betStartDelay + displayBets.length * betStagger + 0.25;
+    const lineDelay = outcomeDelay + (isEdit ? 0.2 : 0.4);
+    const messageDelay = lineDelay + 0.5;
+    const buttonDelay = messageDelay + 0.2;
+
+    return (
+        <motion.div
+            className="fixed inset-0 z-50 flex items-center justify-center px-4"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.25 }}
+        >
+            {/* Backdrop */}
+            <motion.div
+                className="absolute inset-0"
+                style={{ background: "rgba(0,0,0,0.70)" }}
+                onClick={onClose}
+            />
+
+            {/* Firework particles */}
+            <div className="absolute inset-0 pointer-events-none overflow-hidden">
+                {Array.from({ length: particleCount }, (_, i) => {
+                    const angle = (360 / particleCount) * i + (i % 3) * 8;
+                    const distance = 60 + (i % 4) * 35;
+                    const size = 2 + (i % 3) * 2;
+                    const colors = ["#22E3E8", "#22E3E8", "#22E3E8", "#9945FF", "rgba(255,255,255,0.9)"];
+                    return <Particle key={i} delay={checkDelay + 0.3 + (i % 5) * 0.06} angle={angle} distance={distance} size={size} color={colors[i % colors.length]} />;
+                })}
+                {/* Second burst */}
+                {!isEdit && Array.from({ length: 12 }, (_, i) => {
+                    const angle = (360 / 12) * i + 15;
+                    const distance = 100 + (i % 3) * 40;
+                    const size = 1.5 + (i % 2) * 1.5;
+                    return <Particle key={`b${i}`} delay={outcomeDelay + (i % 4) * 0.05} angle={angle} distance={distance} size={size} color="#22E3E8" />;
+                })}
+            </div>
+
+            {/* Content card */}
+            <motion.div
+                className="relative z-10 w-full max-w-[340px] max-h-[80vh] overflow-y-auto rounded-2xl px-5 py-6 flex flex-col items-center gap-3"
+                style={{ background: "linear-gradient(180deg, #111122 0%, #0a0a12 100%)", border: "1px solid rgba(34,227,232,0.12)" }}
+                initial={{ scale: 0.85, opacity: 0, y: 20 }}
+                animate={{ scale: 1, opacity: 1, y: 0 }}
+                transition={{ type: "spring", stiffness: 280, damping: 20, delay: 0.05 }}
+                onClick={(e) => e.stopPropagation()}
+            >
+                {/* Checkmark */}
+                <AnimatedCheck delay={checkDelay} size={isEdit ? 44 : 56} />
+
+                {/* Title */}
+                <motion.p
+                    className="font-bold text-white text-center"
+                    style={{ ...OUTFIT, fontSize: isEdit ? 16 : 20 }}
+                    initial={{ opacity: 0, y: 8 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: titleDelay, duration: 0.3 }}
+                >
+                    {isEdit ? "Bet Updated!" : "Bets Placed!"}
+                </motion.p>
+
+                {/* Bet items — one by one */}
+                <div className="w-full flex flex-col gap-1.5 mt-1">
+                    {displayBets.map((bet, i) => (
+                        <motion.div
+                            key={bet.mIdx}
+                            className="w-full px-3 py-2 rounded-lg"
+                            style={{ background: "rgba(34,227,232,0.03)", border: "1px solid rgba(34,227,232,0.08)" }}
+                            initial={{ opacity: 0, x: -16 }}
+                            animate={{ opacity: 1, x: 0 }}
+                            transition={{ delay: betStartDelay + i * betStagger, duration: 0.3, ease: "easeOut" }}
+                        >
+                            <p className="text-[10px] text-white/40 font-medium truncate mb-0.5" style={OUTFIT}>{bet.question}</p>
+                            <div className="flex items-center justify-between">
+                                <div className="flex items-center gap-1.5">
+                                    <SelectedCheck size={8} />
+                                    <span className="text-[11px] text-white font-semibold" style={OUTFIT}>{bet.optionLabel}</span>
+                                </div>
+                                <div className="flex items-center gap-[3px]">
+                                    <PointsIcon size={7} />
+                                    <span className="text-[9px] text-white font-semibold" style={OUTFIT}>{bet.amount}</span>
+                                    <span className="text-[8px] text-white/40" style={OUTFIT}>×</span>
+                                    <span className="text-[9px] text-white/60 font-semibold" style={OUTFIT}>{bet.odds}</span>
+                                    <span className="text-[8px] text-white/40" style={OUTFIT}>=</span>
+                                    <PointsIcon size={7} />
+                                    <span className="text-[9px] text-[#22E3E8] font-bold" style={OUTFIT}>{bet.reward}</span>
+                                </div>
+                            </div>
+                        </motion.div>
+                    ))}
+                </div>
+
+                {/* Max outcome */}
+                {!isEdit && totalEntry > 0 && (
+                    <motion.div
+                        className="w-full flex items-center justify-center gap-2 pt-2"
+                        initial={{ opacity: 0, scale: 0.9 }}
+                        animate={{ opacity: 1, scale: 1 }}
+                        transition={{ delay: outcomeDelay, type: "spring", stiffness: 200, damping: 18 }}
+                    >
+                        <span className="text-[11px] text-white/50 font-medium" style={OUTFIT}>Max outcome</span>
+                        <div className="flex items-center gap-1">
+                            <Image src="/iamgame_square_logo.jpg" alt="" width={14} height={14} className="rounded-[2px]" />
+                            <span className="text-[18px] text-white font-bold" style={OUTFIT}>{totalEntry.toLocaleString()}</span>
+                        </div>
+                        <span className="text-[18px] text-white/30 font-bold" style={OUTFIT}>→</span>
+                        <div className="flex items-center gap-1 relative">
+                            <Image src="/iamgame_square_logo.jpg" alt="" width={14} height={14} className="rounded-[2px]" />
+                            <span className="text-[18px] text-[#22E3E8] font-bold" style={OUTFIT}>{compoundedReward.toLocaleString()}</span>
+                            <motion.div className="absolute inset-0 pointer-events-none overflow-hidden rounded">
+                                <motion.div
+                                    className="absolute inset-y-0 w-[50%]"
+                                    style={{ background: "linear-gradient(90deg, transparent, rgba(34,227,232,0.25), transparent)" }}
+                                    animate={{ left: ["-50%", "150%"] }}
+                                    transition={{ duration: 1.8, repeat: Infinity, repeatDelay: 2.5, ease: "easeInOut", delay: outcomeDelay + 0.3 }}
+                                />
+                            </motion.div>
+                        </div>
+                    </motion.div>
+                )}
+
+                {/* Line growth */}
+                <motion.div
+                    className="w-full h-[2px] rounded-full overflow-hidden mt-1"
+                    style={{ background: "rgba(34,227,232,0.08)" }}
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    transition={{ delay: lineDelay }}
+                >
+                    <motion.div
+                        className="h-full rounded-full"
+                        style={{ background: "linear-gradient(90deg, #22E3E8, #9945FF)" }}
+                        initial={{ width: "0%" }}
+                        animate={{ width: "100%" }}
+                        transition={{ delay: lineDelay + 0.1, duration: 0.7, ease: "easeOut" }}
+                    />
+                </motion.div>
+
+                {/* Message */}
+                <motion.p
+                    className="text-[11px] text-white/45 text-center font-medium leading-relaxed px-2"
+                    style={OUTFIT}
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    transition={{ delay: messageDelay, duration: 0.4 }}
+                >
+                    Track the leaderboard to see your position updating as bets resolve with the game
+                </motion.p>
+
+                {/* Leaderboard button */}
+                {onViewLeaderboard && (
+                    <motion.button
+                        onClick={onViewLeaderboard}
+                        className="w-full py-2.5 rounded-xl text-[13px] font-bold"
+                        style={{ ...OUTFIT, background: "linear-gradient(135deg, #22E3E8, #9945FF)", color: "#0a0a12" }}
+                        initial={{ opacity: 0, y: 8 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ delay: buttonDelay, type: "spring", stiffness: 200, damping: 18 }}
+                    >
+                        View Leaderboard
+                    </motion.button>
+                )}
+            </motion.div>
+        </motion.div>
+    );
+};

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

@@ -28,6 +28,8 @@ import { saveTDDraftBetsApi } from "../../pools/fetcher";
 import type { ITDLeaderboardEntry } from "../../pools/types";
 import { TDPoolStatus } from "../../pools/types";
 import { calcRankPayout } from "./config";
+import { BetCelebration } from "./BetCelebration";
+import { AnimatePresence } from "framer-motion";
 
 const GAME_ID = "pre-match";
 
@@ -128,6 +130,9 @@ export const PreMatchBetsPopup = ({ poolId, matchId: _matchId, match: matchProp
   const [editingSnapshots, setEditingSnapshots] = useState<Record<number, IBetEntry | undefined>>({});
   const [editSubmitting, setEditSubmitting] = useState<number | null>(null);
 
+  // ── Celebration overlay state ─────────────────────────────────────────────
+  const [celebration, setCelebration] = useState<{ isEdit: boolean; marketIdx?: number } | null>(null);
+
   // ── Real bets restore: when user has submitted bets, load them into game state ─
   const realBetsRestoredRef = useRef(false);
   useEffect(() => {
@@ -300,6 +305,9 @@ export const PreMatchBetsPopup = ({ poolId, matchId: _matchId, match: matchProp
 
       // Refresh data
       await Promise.all([refetchEntry(), refetchLB(), refetchPool()]);
+
+      // Show celebration
+      setCelebration({ isEdit: false });
     } catch (err: unknown) {
       setSubmitError(err instanceof Error ? err.message : "Failed to submit bets");
     } finally {
@@ -348,6 +356,9 @@ export const PreMatchBetsPopup = ({ poolId, matchId: _matchId, match: matchProp
       setEditingSnapshots(prev => { const next = { ...prev }; delete next[mIdx]; return next; });
 
       await Promise.all([refetchEntry(), refetchLB(), refetchPool()]);
+
+      // Show celebration (edit)
+      setCelebration({ isEdit: true, marketIdx: mIdx });
     } catch (err: unknown) {
       setSubmitError(err instanceof Error ? err.message : "Failed to save changes");
     } finally {
@@ -488,6 +499,19 @@ export const PreMatchBetsPopup = ({ poolId, matchId: _matchId, match: matchProp
           onViewFullLeaderboard={() => setShowFullLeaderboard(true)}
         />
       )}
+      <AnimatePresence>
+        {celebration && config && (
+          <BetCelebration
+            config={config}
+            bets={bets}
+            betSummary={betSummary}
+            isEdit={celebration.isEdit}
+            editedMarketIdx={celebration.marketIdx}
+            onClose={() => setCelebration(null)}
+            onViewLeaderboard={poolId ? () => { setCelebration(null); setShowFullLeaderboard(true); } : undefined}
+          />
+        )}
+      </AnimatePresence>
     </GamePopupShell>
   );
 };