"use client"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react"; const FA_DIGITS = "۰۱۲۳۴۵۶۷۸۹"; function toFaDigits(value: string | number) { return String(value).replace(/\d/g, (d) => FA_DIGITS[Number(d)] ?? d); } type Slice = { id: string; label: string; color: string; ink: string; kind: "win" | "boost" | "miss"; }; type SpeedId = "slow" | "normal" | "fast"; type SpeedConfig = { label: string; spins: [number, number]; duration: number; }; /** * فیزیک طبیعی چرخ: * زمان کم → شتاب تا اوج سرعت * بیشترِ زمان → ترمز نرم و طولانی تا ایست کامل * (بخش زیادی از زاویه زود طی می‌شود؛ ته مسیر آروم سر می‌خورد) */ const SPEEDS: Record = { slow: { label: "آرام", spins: [3, 4], duration: 15, }, normal: { label: "عادی", spins: [8, 10], duration: 12, }, fast: { label: "سریع", spins: [18, 22], duration: 10, }, }; /** گاز کوتاه */ const EASE_GAS: [number, number, number, number] = [0.4, 0.0, 0.75, 0.35]; /** ورود به ترمز */ const EASE_PEAK: [number, number, number, number] = [0.2, 0.15, 0.4, 0.8]; /** ترمز خیلی نرم — آروم‌آروم تا ایست کامل */ const EASE_BRAKE: [number, number, number, number] = [0.02, 0.96, 0.05, 1]; /** ۱۶ خانه — شلوغ مثل چرخ شرط‌بندی */ const SLICES: Slice[] = [ { id: "x2", label: "×۲", color: "#9f1239", ink: "#ffe4e6", kind: "boost" }, { id: "m1", label: "خالی", color: "#0a0a0c", ink: "#71717a", kind: "miss" }, { id: "x5", label: "×۵", color: "#b45309", ink: "#fffbeb", kind: "boost" }, { id: "x7", label: "×۷", color: "#881337", ink: "#fecdd3", kind: "boost" }, { id: "jack", label: "جک‌پات", color: "#ca8a04", ink: "#1c1917", kind: "win" }, { id: "m2", label: "خالی", color: "#111113", ink: "#52525b", kind: "miss" }, { id: "x10", label: "×۱۰", color: "#be123c", ink: "#fff1f2", kind: "boost" }, { id: "x3", label: "×۳", color: "#171717", ink: "#e4e4e7", kind: "boost" }, { id: "x15", label: "×۱۵", color: "#a16207", ink: "#fef3c7", kind: "boost" }, { id: "m3", label: "خالی", color: "#09090b", ink: "#52525b", kind: "miss" }, { id: "x20", label: "×۲۰", color: "#e11d48", ink: "#fff1f2", kind: "boost" }, { id: "x4", label: "×۴", color: "#1c1917", ink: "#d4d4d8", kind: "boost" }, { id: "mega", label: "مگا", color: "#f59e0b", ink: "#422006", kind: "win" }, { id: "m4", label: "خالی", color: "#0c0c0e", ink: "#71717a", kind: "miss" }, { id: "x8", label: "×۸", color: "#9f1239", ink: "#fecdd3", kind: "boost" }, { id: "x50", label: "×۵۰", color: "#fbbf24", ink: "#422006", kind: "win" }, ]; const N = SLICES.length; const SEG = 360 / N; const CX = 180; const CY = 180; const R_OUTER = 170; const R_LABEL = 112; const R_INNER = 48; const BULB_COUNT = 36; function polar(cx: number, cy: number, r: number, deg: number) { const rad = ((deg - 90) * Math.PI) / 180; return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) }; } function slicePath(i: number) { const a0 = i * SEG; const a1 = (i + 1) * SEG; const p0 = polar(CX, CY, R_OUTER, a0); const p1 = polar(CX, CY, R_OUTER, a1); return `M ${CX} ${CY} L ${p0.x} ${p0.y} A ${R_OUTER} ${R_OUTER} 0 0 1 ${p1.x} ${p1.y} Z`; } function labelPos(i: number) { const mid = i * SEG + SEG / 2; const rot = mid > 90 && mid < 270 ? mid + 180 : mid; return { ...polar(CX, CY, R_LABEL, mid), rot }; } function indexFromRotation(rotation: number) { const normalized = ((rotation % 360) + 360) % 360; const theta = (360 - normalized) % 360; return Math.floor(theta / SEG) % N; } function targetRotationForIndex(current: number, index: number, spins: number) { const sliceCenter = index * SEG + SEG / 2; const land = (360 - sliceCenter + 360) % 360; const jitter = (Math.random() - 0.5) * (SEG * 0.3); // Always move forward from current angle (no ceil jump). const currentMod = ((current % 360) + 360) % 360; let delta = (land - currentMod + 360) % 360; delta += spins * 360 + jitter; return current + delta; } function randInt(min: number, max: number) { return min + Math.floor(Math.random() * (max - min + 1)); } const SPARKS = Array.from({ length: 14 }, (_, i) => ({ id: i, left: 8 + ((i * 17) % 84), top: 6 + ((i * 23) % 78), delay: (i % 7) * 0.18, size: 3 + (i % 4), })); export function LuckWheelForm() { const uid = useId().replace(/:/g, ""); const reduceMotion = useReducedMotion() ?? false; const [rotation, setRotation] = useState(0); const [spinning, setSpinning] = useState(false); const [result, setResult] = useState(null); const [speed, setSpeed] = useState("normal"); const [tick, setTick] = useState(0); /** * ۴ نقطهٔ مسیر: * from → گاز → اوج → ترمز طولانی تا land */ const [rotateAnim, setRotateAnim] = useState(0); const [spinTween, setSpinTween] = useState<{ duration: number; times?: number[]; ease: | "easeOut" | [number, number, number, number] | Array<[number, number, number, number] | "easeOut">; }>({ duration: 0, ease: "easeOut" }); const rotRef = useRef(0); const timerRef = useRef(null); useEffect(() => { return () => { if (timerRef.current != null) window.clearTimeout(timerRef.current); }; }, []); useEffect(() => { if (!spinning || reduceMotion) return; const gap = speed === "fast" ? 40 : speed === "slow" ? 120 : 70; const id = window.setInterval(() => setTick((t) => t + 1), gap); return () => window.clearInterval(id); }, [spinning, reduceMotion, speed]); const spin = useCallback(() => { if (spinning) return; setResult(null); setSpinning(true); const cfg = SPEEDS[speed]; const winIndex = Math.floor(Math.random() * N); const [sMin, sMax] = cfg.spins; const spins = reduceMotion ? 1 : randInt(sMin, sMax); const from = rotRef.current; const next = targetRotationForIndex(from, winIndex, spins); const duration = reduceMotion ? 0.9 : cfg.duration; const d = next - from; // زاویه: بیشترش زود؛ ته مسیر خیلی کم برای آروم‌آروم ایستادن const pGas = from + d * 0.22; const pPeak = from + d * 0.52; // زمان: گاز کوتاه، بیشترِ زمان فقط ترمز نرم const tGas = 0.07; const tPeak = 0.16; rotRef.current = next; setSpinTween({ duration, times: reduceMotion ? [0, 0.4, 1] : [0, tGas, tPeak, 1], ease: reduceMotion ? ["easeOut", "easeOut"] : [EASE_GAS, EASE_PEAK, EASE_BRAKE], }); setRotateAnim( reduceMotion ? [from, pPeak, next] : [from, pGas, pPeak, next] ); setRotation(next); if (timerRef.current != null) window.clearTimeout(timerRef.current); timerRef.current = window.setTimeout(() => { setSpinning(false); setRotateAnim(next); setResult(SLICES[indexFromRotation(next)]!); }, duration * 1000 + 80); }, [reduceMotion, speed, spinning]); const bulbs = useMemo( () => Array.from({ length: BULB_COUNT }, (_, i) => { const deg = (i / BULB_COUNT) * 360; return { i, ...polar(50, 50, 48.4, deg) }; }), [] ); return (

{/* magical atmosphere */} {/* floating sparks */}

{SPARKS.map((s) => ( ))}

{/* corner chips */} {( [ "pointer-events-none absolute -start-3 top-4 size-10 rounded-full opacity-80 md:size-12", "pointer-events-none absolute -end-3 top-4 size-10 rounded-full opacity-80 md:size-12", "pointer-events-none absolute -start-2 bottom-10 size-10 rounded-full opacity-80 md:size-12", "pointer-events-none absolute -end-2 bottom-10 size-10 rounded-full opacity-80 md:size-12", ] as const ).map((cls, i) => ( ))}

CASINO SPIN

چرخ شانس

{/* speed picker */}

{(Object.keys(SPEEDS) as SpeedId[]).map((id) => { const active = speed === id; return ( ); })}

{/* aura behind wheel */}

{/* bulb ring */}

{bulbs.map(({ i, x, y }) => { const lit = spinning ? (i + tick) % 4 !== 0 : i % 3 === 0; const hot = spinning && (i + tick) % 6 === 0; return ( ); })}

{/* gold bezel */}

{/* spinning disc */} {/* center hub */} {/* ornate pointer */}

{/* result */}

{result ? ( {result.kind === "miss" ? "این دور خالی بود" : result.kind === "win" ? `برد بزرگ — ${toFaDigits(result.label)}` : `بردی — ${toFaDigits(result.label)}`} ) : ( {spinning ? `چرخش ${SPEEDS[speed].label}…` : "سرعت را بزن، بعد بچرخان"} )}

); } export default function LuckWheel() { return (

); }