@devrongx/games 0.4.32 → 0.4.34

package/package.json

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

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

@@ -0,0 +1,265 @@
+// @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: "35%", boxShadow: `0 0 ${size * 3}px ${color}` }}
+            initial={{ x: 0, y: 0, opacity: 0, scale: 0 }}
+            animate={{ x, y: y - 30, opacity: [0, 1, 0.8, 0], scale: [0, 1.8, 0.8, 0] }}
+            transition={{ duration: 1.6, delay, ease: "easeOut" }}
+        />
+    );
+};
+
+// ─── Animated SVG checkmark ──────────────────────────────────────────────────
+
+const AnimatedCheck = ({ delay = 0, size = 56 }: { delay?: number; size?: number }) => (
+    <motion.div
+        initial={{ scale: 0 }}
+        animate={{ scale: 1 }}
+        transition={{ type: "spring", stiffness: 260, damping: 14, delay }}
+    >
+        <motion.div
+            className="rounded-full flex items-center justify-center"
+            style={{ width: size, height: size, boxShadow: "0 0 40px rgba(34,227,232,0.3), 0 0 80px rgba(34,227,232,0.1)" }}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay, duration: 0.3 }}
+        >
+            <svg width={size} height={size} viewBox="0 0 56 56" fill="none">
+                <motion.circle
+                    cx="28" cy="28" r="26" stroke="#22E3E8" strokeWidth="1.5"
+                    fill="none"
+                    initial={{ pathLength: 0, opacity: 0 }}
+                    animate={{ pathLength: 1, opacity: 0.6 }}
+                    transition={{ duration: 0.7, delay: delay + 0.1, ease: "easeOut" }}
+                />
+                <motion.path
+                    d="M17 28l8 8 14-14" stroke="#22E3E8" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"
+                    fill="none"
+                    initial={{ pathLength: 0 }}
+                    animate={{ pathLength: 1 }}
+                    transition={{ duration: 0.4, delay: delay + 0.55, ease: "easeOut" }}
+                />
+            </svg>
+        </motion.div>
+    </motion.div>
+);
+
+// ─── 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;
+
+    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 ? 8 : 24;
+    const checkDelay = 0.1;
+    const titleDelay = checkDelay + 0.5;
+    const betStartDelay = isEdit ? 0.5 : 0.9;
+    const betStagger = isEdit ? 0.08 : 0.12;
+    const outcomeDelay = betStartDelay + displayBets.length * betStagger + 0.3;
+    const lineDelay = isEdit ? betStartDelay + displayBets.length * betStagger + 0.2 : outcomeDelay + 0.4;
+    const messageDelay = lineDelay + 0.6;
+    const buttonDelay = messageDelay + 0.15;
+
+    return (
+        <motion.div
+            className="fixed inset-0 z-50 flex items-center justify-center px-6"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.3 }}
+        >
+            {/* Blurred backdrop */}
+            <motion.div
+                className="absolute inset-0"
+                style={{ backdropFilter: "blur(16px)", WebkitBackdropFilter: "blur(16px)", background: "rgba(0,0,0,0.55)" }}
+                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) * 5;
+                    const distance = 50 + (i % 5) * 30;
+                    const size = 2 + (i % 3) * 1.5;
+                    const colors = ["#22E3E8", "#22E3E8", "#22E3E8", "#22E3E8", "rgba(255,255,255,0.8)"];
+                    return <Particle key={i} delay={checkDelay + 0.4 + (i % 6) * 0.04} angle={angle} distance={distance} size={size} color={colors[i % colors.length]} />;
+                })}
+                {!isEdit && Array.from({ length: 16 }, (_, i) => {
+                    const angle = (360 / 16) * i + 11;
+                    const distance = 90 + (i % 4) * 30;
+                    const size = 1.5 + (i % 3);
+                    return <Particle key={`b${i}`} delay={outcomeDelay + (i % 5) * 0.04} angle={angle} distance={distance} size={size} color="#22E3E8" />;
+                })}
+            </div>
+
+            {/* Floating content — no card, no border */}
+            <motion.div
+                className="relative z-10 w-full max-w-[320px] max-h-[80vh] overflow-y-auto flex flex-col items-center gap-4 py-4"
+                initial={{ scale: 0.9, opacity: 0, y: 16 }}
+                animate={{ scale: 1, opacity: 1, y: 0 }}
+                transition={{ type: "spring", stiffness: 250, damping: 20, delay: 0.05 }}
+                onClick={(e) => e.stopPropagation()}
+            >
+                {/* Checkmark */}
+                <AnimatedCheck delay={checkDelay} size={isEdit ? 40 : 52} />
+
+                {/* Title */}
+                <motion.p
+                    className="font-bold text-white text-center"
+                    style={{ ...OUTFIT, fontSize: isEdit ? 15 : 18, letterSpacing: "0.02em" }}
+                    initial={{ opacity: 0, y: 6 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: titleDelay, duration: 0.3 }}
+                >
+                    {isEdit ? "Bet Updated" : "Bets Placed"}
+                </motion.p>
+
+                {/* Bet items — floating, no borders */}
+                <div className="w-full flex flex-col gap-2 mt-1">
+                    {displayBets.map((bet, i) => (
+                        <motion.div
+                            key={bet.mIdx}
+                            className="w-full px-3 py-2"
+                            initial={{ opacity: 0, x: -12 }}
+                            animate={{ opacity: 1, x: 0 }}
+                            transition={{ delay: betStartDelay + i * betStagger, duration: 0.3, ease: "easeOut" }}
+                        >
+                            <p className="text-[9px] text-white/30 font-medium truncate mb-1" 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/30" style={OUTFIT}>×</span>
+                                    <span className="text-[9px] text-white/50 font-semibold" style={OUTFIT}>{bet.odds}</span>
+                                    <span className="text-[8px] text-white/30" 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="flex items-center justify-center gap-2 pt-1"
+                        initial={{ opacity: 0, scale: 0.95 }}
+                        animate={{ opacity: 1, scale: 1 }}
+                        transition={{ delay: outcomeDelay, type: "spring", stiffness: 200, damping: 18 }}
+                    >
+                        <span className="text-[10px] text-white/40 font-medium" style={OUTFIT}>Max outcome</span>
+                        <div className="flex items-center gap-1">
+                            <Image src="/iamgame_square_logo.jpg" alt="" width={12} height={12} className="rounded-[2px]" />
+                            <span className="text-[16px] text-white font-bold" style={OUTFIT}>{totalEntry.toLocaleString()}</span>
+                        </div>
+                        <span className="text-[16px] text-white/20 font-bold" style={OUTFIT}>→</span>
+                        <div className="flex items-center gap-1 relative">
+                            <Image src="/iamgame_square_logo.jpg" alt="" width={12} height={12} className="rounded-[2px]" />
+                            <span className="text-[16px] text-[#22E3E8] font-bold" style={{ ...OUTFIT, textShadow: "0 0 12px rgba(34,227,232,0.4)" }}>{compoundedReward.toLocaleString()}</span>
+                        </div>
+                    </motion.div>
+                )}
+
+                {/* Line growth */}
+                <motion.div
+                    className="w-3/4 h-px rounded-full overflow-hidden"
+                    style={{ background: "rgba(255,255,255,0.06)" }}
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    transition={{ delay: lineDelay }}
+                >
+                    <motion.div
+                        className="h-full rounded-full"
+                        style={{ background: "linear-gradient(90deg, transparent, #22E3E8, transparent)" }}
+                        initial={{ width: "0%" }}
+                        animate={{ width: "100%" }}
+                        transition={{ delay: lineDelay + 0.1, duration: 0.8, ease: "easeOut" }}
+                    />
+                </motion.div>
+
+                {/* Message */}
+                <motion.p
+                    className="text-[11px] text-white/35 text-center font-medium leading-relaxed"
+                    style={OUTFIT}
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    transition={{ delay: messageDelay, duration: 0.4 }}
+                >
+                    Track the leaderboard to see your position{"\n"}updating as bets resolve with the game
+                </motion.p>
+
+                {/* Leaderboard button */}
+                {onViewLeaderboard && (
+                    <motion.button
+                        onClick={onViewLeaderboard}
+                        className="px-8 py-2 rounded-full text-[12px] font-semibold"
+                        style={{ ...OUTFIT, background: "rgba(34,227,232,0.12)", color: "#22E3E8", border: "1px solid rgba(34,227,232,0.25)" }}
+                        whileTap={{ scale: 0.96 }}
+                        initial={{ opacity: 0, y: 6 }}
+                        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>
   );
 };