@devrongx/games 0.3.4 → 0.3.5

package/package.json

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

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

@@ -6,7 +6,7 @@ import Image from "next/image";
 import { motion, AnimatePresence, useSpring, useTransform, useMotionValue } from "framer-motion";
 import { ChevronDown, Info, X, Play } 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";
 
@@ -355,6 +355,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">

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>
     );
 };

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

@@ -2,7 +2,7 @@
 // Shared constants and micro-components for IPL betting UI.
 
 import Image from "next/image";
-import { Coins, Trophy, Swords, Square, Zap, Target, BarChart3, Star } from "lucide-react";
+import { Coins, Trophy, Swords, Square, Zap, Target, BarChart3, Star, ArrowUpRight } from "lucide-react";
 
 /** Font style applied to all betting UI text */
 export const OUTFIT = { fontFamily: "Outfit, sans-serif" } as const;
@@ -31,3 +31,41 @@ export const SelectedCheck = ({ size = 10 }: { size?: number }) => (
         <path d="M5 8l2 2 4-4" stroke="#9945FF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
     </svg>
 );
+
+/** Build iplgpt.com URL with question + options pre-filled */
+export const buildIplGptUrl = (question: string, options: string[]) => {
+    const params = new URLSearchParams({ q: question, opts: options.join(",") });
+    return `https://www.iplgpt.com/?${params.toString()}`;
+};
+
+/**
+ * AI Insights button — solid cyan, floating rounded pill, Sparkles icon only.
+ * Redirects to iplgpt.com with question + options pre-filled in the query string.
+ */
+export const AiInsightButton = ({
+    question,
+    options,
+    onClick,
+}: {
+    question: string;
+    options: string[];
+    onClick?: (e: React.MouseEvent) => void;
+}) => (
+    <a
+        href={buildIplGptUrl(question, options)}
+        target="_blank"
+        rel="noopener noreferrer"
+        onClick={(e) => { e.stopPropagation(); onClick?.(e); }}
+        className="inline-flex items-center gap-[3px] select-none"
+        style={{
+            borderBottom: "1px dotted rgba(34,227,232,0.9)",
+            paddingBottom: 2,
+            textDecoration: "none",
+        }}
+    >
+        <span className="text-[11px] font-semibold" style={{ ...OUTFIT, color: "#22E3E8", letterSpacing: "0.02em" }}>
+            Expert Insight
+        </span>
+        <ArrowUpRight size={12} style={{ color: "#22E3E8", flexShrink: 0 }} />
+    </a>
+);