@devrongx/games 0.1.0

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@devrongx/games",
+  "version": "0.1.0",
+  "description": "Game UI components for sports prediction markets",
+  "license": "MIT",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./*": "./*"
+  },
+  "files": [
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "next": ">=14",
+    "framer-motion": ">=10",
+    "zustand": ">=4",
+    "lucide-react": ">=0.300",
+    "clsx": ">=2",
+    "seedrandom": ">=3"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@types/seedrandom": "^3.0.8"
+  }
+}

package/src/core/GamePopupShell.tsx

@@ -0,0 +1,67 @@
+// @devrongx/games — core/GamePopupShell.tsx
+"use client";
+
+import { ReactNode } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { X, ChevronLeft } from "lucide-react";
+import { useGamePopupStore } from "./gamePopupStore";
+
+interface GamePopupShellProps {
+    gameId: string;
+    title: string;
+    hideHeaderViews?: string[];
+    children: ReactNode;
+}
+
+export const GamePopupShell = ({ gameId, title, hideHeaderViews, children }: GamePopupShellProps) => {
+    const { activeGame, activeView, viewHistory, close, goBack } = useGamePopupStore();
+
+    const isOpen = activeGame === gameId;
+    const showHeader = !hideHeaderViews?.includes(activeView);
+
+    return (
+        <AnimatePresence>
+            {isOpen && (
+                <motion.div
+                    className="fixed inset-0 z-50 flex flex-col"
+                    style={{ background: "linear-gradient(180deg, #0a0a12 0%, #111119 100%)" }}
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    transition={{ duration: 0.2 }}
+                >
+                    {showHeader && (
+                        <div className="flex items-center justify-between px-4 py-3 border-b border-white/10">
+                            {viewHistory.length > 0 ? (
+                                <button onClick={goBack} className="text-white/60 p-0.5">
+                                    <ChevronLeft size={20} />
+                                </button>
+                            ) : (
+                                <div className="w-[21px]" />
+                            )}
+                            <span className="text-[13px] text-white font-bold" style={{ fontFamily: "Outfit, sans-serif" }}>{title}</span>
+                            <button onClick={close} className="text-white/60 p-0.5">
+                                <X size={18} />
+                            </button>
+                        </div>
+                    )}
+
+                    <div className="flex-1 overflow-y-auto overflow-x-hidden">
+                        <AnimatePresence mode="wait">
+                            <motion.div
+                                key={activeView}
+                                initial={{ opacity: 0, x: 30 }}
+                                animate={{ opacity: 1, x: 0 }}
+                                exit={{ opacity: 0, x: -30 }}
+                                transition={{ duration: 0.2 }}
+                                className="min-h-full h-full"
+                            >
+                                {children}
+                            </motion.div>
+                        </AnimatePresence>
+                    </div>
+                </motion.div>
+            )}
+        </AnimatePresence>
+    );
+};

package/src/core/gamePopupStore.ts

@@ -0,0 +1,30 @@
+// @devrongx/games — core/gamePopupStore.ts
+
+import { create, type StoreApi, type UseBoundStore } from "zustand";
+import type { IGamePopupState } from "./types";
+
+export const useGamePopupStore: UseBoundStore<StoreApi<IGamePopupState>> = create<IGamePopupState>((set) => ({
+    activeGame: null,
+    activeView: "",
+    viewHistory: [],
+
+    open: (gameId, initialView) =>
+        set({ activeGame: gameId, activeView: initialView, viewHistory: [] }),
+
+    close: () =>
+        set({ activeGame: null, activeView: "", viewHistory: [] }),
+
+    goTo: (view) =>
+        set((s) => ({
+            activeView: view,
+            viewHistory: [...s.viewHistory, s.activeView],
+        })),
+
+    goBack: () =>
+        set((s) => {
+            const history = [...s.viewHistory];
+            const prev = history.pop();
+            if (prev != null) return { activeView: prev, viewHistory: history };
+            return { activeGame: null, activeView: "", viewHistory: [] };
+        }),
+}));

package/src/core/types.ts

@@ -0,0 +1,20 @@
+// @devrongx/games — core/types.ts
+// Shared types for the game popup infrastructure.
+
+export interface IGamePopupState {
+    /** Which game's popup is open, null = closed */
+    activeGame: string | null;
+    /** Current view key within the popup (game-defined, e.g. "intro", "game", "results") */
+    activeView: string;
+    /** Stack for back-navigation between views */
+    viewHistory: string[];
+
+    /** Open a game popup at a specific view */
+    open: (gameId: string, initialView: string) => void;
+    /** Close the popup and reset */
+    close: () => void;
+    /** Navigate to a new view, pushing current to history */
+    goTo: (view: string) => void;
+    /** Go back one view, or close if at the first view */
+    goBack: () => void;
+}

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

@@ -0,0 +1,67 @@
+// @devrongx/games — games/prematch-bets/LeaderboardRow.tsx
+"use client";
+
+import Image from "next/image";
+import { ILeaderboardEntry } from "./config";
+
+const RANK_STYLES = [
+    { accent: "#FFD700" },
+    { accent: "#C0C0C0" },
+    { accent: "#CD7F32" },
+];
+
+interface LeaderboardRowProps {
+    entry: ILeaderboardEntry;
+    rank: number;
+    isLast?: boolean;
+}
+
+export const LeaderboardRow = ({ entry, rank, isLast }: LeaderboardRowProps) => {
+    const rankIdx = rank - 1;
+
+    return (
+        <div
+            className={`flex items-center gap-2 px-3 py-[5px] transition-all duration-700 ${entry.isYou ? "rounded" : ""}`}
+            style={{
+                borderBottom: isLast ? "none" : "1px solid rgba(255,255,255,0.03)",
+                background: entry.isYou ? "rgba(34,227,232,0.08)" : "transparent",
+            }}
+        >
+            <div className="w-[46px] flex-shrink-0 text-right pr-1">
+                {rankIdx < 3 ? (
+                    <span
+                        className="inline-flex items-center justify-center w-[18px] h-[18px] rounded text-[9px] font-bold"
+                        style={{ background: `${RANK_STYLES[rankIdx].accent}15`, color: RANK_STYLES[rankIdx].accent, fontFamily: "Outfit, sans-serif" }}
+                    >
+                        {rank}
+                    </span>
+                ) : (
+                    <span className="text-[10px] text-white/50 font-semibold" style={{ fontFamily: "Outfit, sans-serif" }}>{rank.toLocaleString()}</span>
+                )}
+            </div>
+            <div className="flex items-center gap-1.5 flex-1 min-w-0">
+                <span
+                    className={`text-[11px] truncate ${entry.isYou ? "text-[#22E3E8] font-bold" : "text-white"}`}
+                    style={{ fontFamily: "Outfit, sans-serif" }}
+                >
+                    {entry.wallet}
+                </span>
+                {entry.isYou && (
+                    <span className="text-[7px] px-1 py-[1px] rounded bg-[#22E3E8]/20 text-[#22E3E8] font-bold uppercase flex-shrink-0">You</span>
+                )}
+            </div>
+            <div className="w-[66px] flex-shrink-0 flex items-center justify-end gap-[3px]">
+                <Image src="/iamgame_square_logo.jpg" alt="" width={9} height={9} className="rounded-[2px]" />
+                <span className={`text-[10px] font-semibold ${entry.isYou ? "text-[#22E3E8]" : "text-white"}`}>
+                    {entry.pts.toLocaleString()}
+                </span>
+            </div>
+            <div className="w-[72px] flex-shrink-0 flex items-center justify-end gap-[2px]">
+                <span className={`text-[10px] font-semibold ${entry.isYou ? "text-[#22E3E8]" : "text-green-400"}`}>
+                    +${entry.payout.toFixed(1)}
+                </span>
+                <Image src="/icons/ic_usdc.png" alt="" width={12} height={12} className="rounded-full" />
+            </div>
+        </div>
+    );
+};

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

@@ -0,0 +1,97 @@
+// @devrongx/games — games/prematch-bets/PreMatchBetsPopup.tsx
+"use client";
+
+import { useState, useCallback, useMemo } from "react";
+import { useGamePopupStore } from "../../core/gamePopupStore";
+import { CSK_VS_RCB_CHALLENGE, CSK_VS_RCB_POOL, IUserBets, calcBetSummary, buildPoolLeaderboard } from "./config";
+import { GamePopupShell } from "../../core/GamePopupShell";
+import { PreMatchIntro } from "./PreMatchIntro";
+import { PreMatchQuestions } from "./PreMatchQuestions";
+import { PreMatchGame } from "./PreMatchGame";
+
+const GAME_ID = "pre-match";
+const config = CSK_VS_RCB_CHALLENGE;
+const pool = CSK_VS_RCB_POOL;
+
+export const PreMatchBetsPopup = () => {
+    const { activeView } = useGamePopupStore();
+
+    // Unified bet state
+    const [bets, setBets] = useState<IUserBets>({});
+
+    // Picker state: which market has its amount picker open, and for which option
+    const [expandedPicker, setExpandedPicker] = useState<Record<number, number>>({});
+
+    // Compute summary and leaderboard from bets
+    const betSummary = useMemo(() => calcBetSummary(bets, config), [bets]);
+    const leaderboard = useMemo(
+        () => buildPoolLeaderboard(pool, betSummary.potentialBalance, config),
+        [betSummary.potentialBalance],
+    );
+
+    // Questions completion callback
+    const handleQuestionsComplete = useCallback((selections: IUserBets) => {
+        setBets(selections);
+        // Open pickers for all selected markets
+        const pickers: Record<number, number> = {};
+        for (const [mIdxStr, entry] of Object.entries(selections)) {
+            pickers[Number(mIdxStr)] = entry.optionIdx;
+        }
+        setExpandedPicker(pickers);
+    }, []);
+
+    // Option click: toggle selection + open/close picker
+    const handleOptionClick = useCallback((mIdx: number, oIdx: number) => {
+        setBets(prev => {
+            const existing = prev[mIdx];
+            if (existing?.optionIdx === oIdx) {
+                // Deselect
+                const next = { ...prev };
+                delete next[mIdx];
+                setExpandedPicker(p => { const n = { ...p }; delete n[mIdx]; return n; });
+                return next;
+            }
+            // Select new option — open picker
+            setExpandedPicker(p => ({ ...p, [mIdx]: oIdx }));
+            return {
+                ...prev,
+                [mIdx]: { optionIdx: oIdx, amount: existing?.amount ?? 0, parlaySlot: existing?.parlaySlot ?? null },
+            };
+        });
+    }, []);
+
+    // Amount select from chip picker
+    const handleAmountSelect = useCallback((mIdx: number, oIdx: number, amount: number) => {
+        setBets(prev => ({
+            ...prev,
+            [mIdx]: { optionIdx: oIdx, amount, parlaySlot: prev[mIdx]?.parlaySlot ?? null },
+        }));
+    }, []);
+
+    return (
+        <GamePopupShell
+            gameId={GAME_ID}
+            title="Pre-Match Bets"
+            hideHeaderViews={["intro"]}
+        >
+            {activeView === "intro" && (
+                <PreMatchIntro config={config} />
+            )}
+            {activeView === "questions" && (
+                <PreMatchQuestions config={config} onComplete={handleQuestionsComplete} />
+            )}
+            {activeView === "game" && (
+                <PreMatchGame
+                    config={config}
+                    bets={bets}
+                    onBetsChange={setBets}
+                    expandedPicker={expandedPicker}
+                    onOptionClick={handleOptionClick}
+                    onAmountSelect={handleAmountSelect}
+                    betSummary={betSummary}
+                    leaderboardRows={leaderboard.rows}
+                />
+            )}
+        </GamePopupShell>
+    );
+};