@devrongx/games 0.1.0

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

@@ -0,0 +1,491 @@
+// @devrongx/games — games/prematch-bets/PreMatchQuestions.tsx
+"use client";
+
+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 { useGamePopupStore } from "../../core/gamePopupStore";
+
+interface PreMatchQuestionsProps {
+    config: IChallengeConfig;
+    onComplete: (selections: IUserBets) => void;
+}
+
+// ── Sassy typewriter — each word has its own exponential speed curve ──
+// Words alternate between snappy bursts and dramatic slow reveals.
+// Within each word, character delays follow an exponential curve.
+const useSassyTypewriter = (text: string, delay = 0) => {
+    const [displayed, setDisplayed] = useState("");
+    const [done, setDone] = useState(false);
+
+    useEffect(() => {
+        setDisplayed("");
+        setDone(false);
+
+        // Build per-character delay schedule
+        const words = text.split(" ");
+        const charDelays: number[] = [];
+
+        // Alternating word styles for rhythm
+        // "burst" = types fast then decelerates at end
+        // "drag" = starts slow, accelerates to finish
+        // "snap" = entire word appears almost instantly
+        const wordStyles = ["drag", "snap", "burst", "drag", "snap", "burst"];
+
+        words.forEach((word, wIdx) => {
+            const style = wordStyles[wIdx % wordStyles.length];
+            const len = word.length;
+
+            for (let c = 0; c < len; c++) {
+                const t = len > 1 ? c / (len - 1) : 0; // 0..1 progress through word
+
+                let ms: number;
+                if (style === "burst") {
+                    // Starts fast (15ms), exponentially decelerates to ~80ms
+                    ms = 15 + 65 * Math.pow(t, 2.5);
+                } else if (style === "drag") {
+                    // Starts slow (90ms), exponentially accelerates to ~12ms
+                    ms = 90 - 78 * Math.pow(t, 2.2);
+                } else {
+                    // snap — near instant, 8ms per char
+                    ms = 8;
+                }
+                charDelays.push(Math.round(ms));
+            }
+            // Pause between words — dramatic breath
+            charDelays.push(wIdx < words.length - 1 ? 120 : 0);
+        });
+
+        const timers: ReturnType<typeof setTimeout>[] = [];
+        let cumulative = delay;
+        let charIdx = 0;
+
+        // Schedule each character reveal
+        for (let i = 0; i < charDelays.length; i++) {
+            cumulative += charDelays[i];
+            const idx = charIdx;
+            // The space between words is at charDelays entries where we push 120ms pause
+            // but we need to track actual characters in text
+            if (i < charDelays.length && idx <= text.length) {
+                timers.push(setTimeout(() => {
+                    setDisplayed(text.slice(0, idx + 1));
+                    if (idx + 1 >= text.length) setDone(true);
+                }, cumulative));
+            }
+            // Only increment charIdx for actual characters (not the inter-word pauses)
+            // Words joined by spaces: after each word's chars, next char is space
+            charIdx++;
+        }
+
+        return () => timers.forEach(clearTimeout);
+    }, [text, delay]);
+
+    return { displayed, done };
+};
+
+// ── Start slide ──
+const StartSlide = ({ onStart }: { onStart: () => void }) => {
+    const line1 = useSassyTypewriter("Choose your answers", 300);
+    const line2 = useSassyTypewriter(
+        "Pick your predictions first. We'll set up bet amounts after.",
+        line1.done ? 0 : 1800,
+    );
+
+    return (
+        <div className="flex flex-col items-center justify-center h-full px-8 gap-8">
+            <div className="flex flex-col items-center gap-3">
+                <p className="text-[20px] font-bold text-white text-center leading-tight min-h-[28px]" style={OUTFIT}>
+                    {line1.displayed}
+                    {!line1.done && <span className="inline-block w-[2px] h-[18px] bg-[#22E3E8] ml-[2px] align-middle animate-pulse" />}
+                </p>
+                <p className="text-[14px] text-white/50 font-medium text-center leading-relaxed max-w-[260px] min-h-[44px]" style={OUTFIT}>
+                    {line2.displayed}
+                    {line1.done && !line2.done && <span className="inline-block w-[2px] h-[14px] bg-white/30 ml-[2px] align-middle animate-pulse" />}
+                </p>
+            </div>
+
+            {/* Let's Go — simple cyan text link with arrow */}
+            {line2.done && (
+                <motion.button
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    transition={{ duration: 0.4 }}
+                    onClick={onStart}
+                    className="flex items-center gap-1.5 bg-transparent border-none cursor-pointer p-0"
+                >
+                    <span
+                        className="text-[14px] font-semibold"
+                        style={{
+                            ...OUTFIT,
+                            color: "#22E3E8",
+                            borderBottom: "1px solid rgba(34,227,232,0.4)",
+                        }}
+                    >
+                        Let&apos;s Go
+                    </span>
+                    <ArrowRight size={14} style={{ color: "#22E3E8" }} />
+                </motion.button>
+            )}
+        </div>
+    );
+};
+
+// ── Single question slide ──
+const QuestionSlide = ({
+    market,
+    selectedOption,
+    onSelect,
+    startingBalance,
+    stakeIncrements,
+}: {
+    market: IChallengeMarket;
+    selectedOption: number | null;
+    onSelect: (optionIdx: number) => void;
+    startingBalance: number;
+    stakeIncrements: number;
+}) => {
+    const chipCount = Math.floor(startingBalance / stakeIncrements);
+    const IconComponent = MARKET_ICONS[market.icon];
+
+    return (
+        <div className="flex flex-col items-center h-full px-5 pt-10">
+            {/* Icon — no bg/border */}
+            <motion.div
+                initial={{ opacity: 0, scale: 0.8 }}
+                animate={{ opacity: 1, scale: 1 }}
+                transition={{ duration: 0.4, delay: 0.1 }}
+                className="mb-5"
+            >
+                {IconComponent && (
+                    <IconComponent size={28} style={{ color: market.accent }} />
+                )}
+            </motion.div>
+
+            {/* Question text */}
+            <motion.p
+                initial={{ opacity: 0, y: 16 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, delay: 0.2 }}
+                className="text-[18px] font-bold text-white text-center leading-snug mb-8 max-w-[280px]"
+                style={OUTFIT}
+            >
+                {market.question}
+            </motion.p>
+
+            {/* Options */}
+            <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, delay: 0.4 }}
+                className="w-full max-w-[320px] flex flex-col gap-2.5"
+            >
+                {market.options.map((opt, j) => {
+                    const isSelected = selectedOption === j;
+
+                    return (
+                        <button
+                            key={j}
+                            onClick={() => onSelect(j)}
+                            className="w-full flex items-center justify-between px-4 py-3.5 rounded-xl cursor-pointer"
+                            style={{ background: "transparent" }}
+                        >
+                            <div className="flex items-center gap-2.5">
+                                {/* Selection indicator — green circle with white tick */}
+                                <motion.div
+                                    className="w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0"
+                                    animate={{
+                                        background: isSelected ? "#22C55E" : "rgba(0,0,0,0)",
+                                        border: isSelected ? "1.5px solid #22C55E" : "1.5px solid rgba(255,255,255,0.2)",
+                                        boxShadow: isSelected ? "0 0 12px rgba(34,197,94,0.5), 0 0 4px rgba(34,197,94,0.3)" : "none",
+                                        scale: isSelected ? [1, 1.3, 1] : 1,
+                                    }}
+                                    transition={{
+                                        background: { duration: 0.15 },
+                                        border: { duration: 0.15 },
+                                        boxShadow: { duration: 0.3 },
+                                        scale: { duration: 0.35, ease: [0.34, 1.56, 0.64, 1] },
+                                    }}
+                                >
+                                    <AnimatePresence>
+                                        {isSelected && (
+                                            <motion.div
+                                                initial={{ scale: 0, rotate: -45 }}
+                                                animate={{ scale: 1, rotate: 0 }}
+                                                exit={{ scale: 0, rotate: 45 }}
+                                                transition={{ type: "spring", stiffness: 600, damping: 15, delay: 0.08 }}
+                                            >
+                                                <Check size={13} strokeWidth={3.5} style={{ color: "white" }} />
+                                            </motion.div>
+                                        )}
+                                    </AnimatePresence>
+                                </motion.div>
+                                <span
+                                    className="text-[14px] font-semibold text-white"
+                                    style={OUTFIT}
+                                >
+                                    {opt.label}
+                                </span>
+                            </div>
+                            <div className="flex items-center gap-1.5">
+                                <span
+                                    className="text-[12px] font-bold"
+                                    style={{ ...OUTFIT, color: "#22E3E8" }}
+                                >
+                                    {opt.odds}x
+                                </span>
+                                <PointsIcon size={12} />
+                            </div>
+                        </button>
+                    );
+                })}
+            </motion.div>
+
+            {/* Hint text + locked points carousel */}
+            <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.
+                     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>
+            </motion.div>
+        </div>
+    );
+};
+
+// ── Main component ──
+export const PreMatchQuestions = ({ config, onComplete }: PreMatchQuestionsProps) => {
+    const goTo = useGamePopupStore(s => s.goTo);
+
+    // -1 = start slide, 0..N-1 = question slides
+    const [step, setStep] = useState(-1);
+    const [direction, setDirection] = useState(1);
+    const [selections, setSelections] = useState<IUserBets>({});
+
+    const totalQuestions = config.markets.length;
+    // Total steps for progress bar: start + questions
+    const totalSteps = totalQuestions + 1;
+    // Current progress step (0-based): start=0, question 0=1, etc.
+    const currentStep = step + 1;
+
+    const handleStart = useCallback(() => {
+        setDirection(1);
+        setStep(0);
+    }, []);
+
+    const handleOptionSelect = useCallback((mIdx: number, optionIdx: number) => {
+        setSelections(prev => {
+            // Deselect if same option tapped again
+            if (prev[mIdx]?.optionIdx === optionIdx) {
+                const next = { ...prev };
+                delete next[mIdx];
+                return next;
+            }
+            // Only record the option pick — no points spent yet. User sets bet amounts on game screen.
+            return { ...prev, [mIdx]: { optionIdx, amount: 0, parlaySlot: null } };
+        });
+
+        // Auto-advance after a brief pause (only if selecting, not deselecting)
+        const isDeselect = selections[mIdx]?.optionIdx === optionIdx;
+        if (!isDeselect) {
+            setTimeout(() => {
+                if (mIdx < totalQuestions - 1) {
+                    setDirection(1);
+                    setStep(mIdx + 1);
+                } else {
+                    const final = {
+                        ...selections,
+                        [mIdx]: { optionIdx, amount: 0, parlaySlot: null },
+                    };
+                    onComplete(final);
+                    goTo("game");
+                }
+            }, 500);
+        }
+    }, [config.markets, selections, totalQuestions, onComplete, goTo]);
+
+    const seekNext = useCallback(() => {
+        if (step === -1) {
+            handleStart();
+            return;
+        }
+        if (step < totalQuestions - 1) {
+            setDirection(1);
+            setStep(prev => prev + 1);
+        } else {
+            // All done — go to game
+            onComplete(selections);
+            goTo("game");
+        }
+    }, [step, totalQuestions, selections, onComplete, goTo, handleStart]);
+
+    const seekBack = useCallback(() => {
+        if (step > -1) {
+            setDirection(-1);
+            setStep(prev => prev - 1);
+        }
+    }, [step]);
+
+    const slideVariants = {
+        enter: (dir: number) => ({ opacity: 0, x: dir * 60 }),
+        center: { opacity: 1, x: 0 },
+        exit: (dir: number) => ({ opacity: 0, x: dir * -60 }),
+    };
+
+    return (
+        <div className="relative w-full h-full flex flex-col bg-black">
+            {/* Skip button */}
+            <div className="flex justify-end px-4 pt-3">
+                <button
+                    onClick={() => {
+                        onComplete(selections);
+                        goTo("game");
+                    }}
+                    className="text-[10px] text-white/25 uppercase tracking-wider font-semibold"
+                    style={OUTFIT}
+                >
+                    Skip
+                </button>
+            </div>
+
+            {/* Slide content */}
+            <div className="flex-1 overflow-hidden">
+                <AnimatePresence mode="wait" custom={direction}>
+                    <motion.div
+                        key={step}
+                        custom={direction}
+                        variants={slideVariants}
+                        initial="enter"
+                        animate="center"
+                        exit="exit"
+                        transition={{ duration: 0.3, ease: [0.4, 0, 0.2, 1] }}
+                        className="w-full h-full"
+                    >
+                        {step === -1 ? (
+                            <StartSlide onStart={handleStart} />
+                        ) : (
+                            <QuestionSlide
+                                key={step}
+                                market={config.markets[step]}
+                                selectedOption={selections[step]?.optionIdx ?? null}
+                                onSelect={(optionIdx) => handleOptionSelect(step, optionIdx)}
+                                startingBalance={config.startingBalance}
+                                stakeIncrements={config.parlayConfig.stakeIncrements}
+                            />
+                        )}
+                    </motion.div>
+                </AnimatePresence>
+            </div>
+
+            {/* Bottom controls */}
+            <div className="px-5 pb-24 flex flex-col gap-3">
+                {/* Navigation controls — Rewind / counter / FastForward */}
+                <div className="flex items-center justify-center gap-6">
+                    <button onClick={seekBack} className="p-1.5" style={{ opacity: 0.5 }}>
+                        <Rewind size={18} className="text-white/90" />
+                    </button>
+                    <span className="text-[11px] text-white/90 font-semibold min-w-[36px] text-center" style={OUTFIT}>
+                        {step >= 0 ? `${step + 1}/${totalQuestions}` : ""}
+                    </span>
+                    <button onClick={seekNext} className="p-1.5" style={{ opacity: 0.5 }}>
+                        <FastForward size={18} className="text-white/90" />
+                    </button>
+                </div>
+
+                {/* Segmented progress bar — market icons as checkpoints */}
+                <svg width="0" height="0" style={{ position: "absolute" }}>
+                    <defs>
+                        <linearGradient id="controlsGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                            <stop offset="0%" stopColor="#22E3E8" />
+                            <stop offset="100%" stopColor="#9945FF" />
+                        </linearGradient>
+                    </defs>
+                </svg>
+                <div style={{ display: "flex", alignItems: "center", width: "100%", gap: 4 }}>
+                    {Array.from({ length: totalSteps }).map((_, i) => {
+                        const filled = i < currentStep;
+                        const passed = i <= currentStep;
+                        // Step 0 = start slide (ArrowRight), step 1..N = market icons
+                        const IconForStep = i === 0
+                            ? ArrowRight
+                            : MARKET_ICONS[config.markets[i - 1]?.icon] ?? MARKET_ICONS.coin;
+                        return (
+                            <div key={i} style={{ display: "flex", alignItems: "center", flex: i < totalSteps - 1 ? 1 : "none", gap: 4 }}>
+                                <div
+                                    style={{
+                                        flexShrink: 0,
+                                        lineHeight: 0,
+                                        background: passed ? "linear-gradient(135deg, #22E3E8, #9945FF)" : "none",
+                                        WebkitBackgroundClip: passed ? "text" : undefined,
+                                        WebkitTextFillColor: passed ? "transparent" : undefined,
+                                        filter: passed ? "drop-shadow(0 0 4px rgba(34,227,232,0.4))" : "none",
+                                        transition: "filter 0.3s ease",
+                                    }}
+                                >
+                                    <IconForStep
+                                        size={10}
+                                        strokeWidth={2.5}
+                                        style={{
+                                            color: passed ? "transparent" : "rgba(255,255,255,0.15)",
+                                            stroke: passed ? "url(#controlsGradient)" : "rgba(255,255,255,0.15)",
+                                            transition: "stroke 0.3s ease",
+                                        }}
+                                    />
+                                </div>
+                                {i < totalSteps - 1 && (
+                                    <div style={{ flex: 1, height: 3, borderRadius: 2, background: "rgba(255,255,255,0.08)", overflow: "hidden" }}>
+                                        <div
+                                            style={{
+                                                height: "100%", borderRadius: 2,
+                                                width: filled ? "100%" : "0%",
+                                                background: "linear-gradient(90deg, #22E3E8, #9945FF)",
+                                                transition: "width 0.4s ease",
+                                            }}
+                                        />
+                                    </div>
+                                )}
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+        </div>
+    );
+};