"use client"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { useCallback, useId, useRef, useState } from "react"; const FA_DIGITS = "۰۱۲۳۴۵۶۷۸۹"; function toFaDigits(value: string | number) { return String(value).replace(/\d/g, (d) => FA_DIGITS[Number(d)] ?? d); } const REWARD = 50; const COIN_COUNT = 14; type Flight = { id: number; dx: number; dy: number; delay: number; spin: number; }; function CoinGlyph({ className }: { className?: string }) { return ( ); } function GiftBox({ open, uid }: { open: boolean; uid: string }) { return (

{/* glow */} {/* sparkles when open */} {open ? Array.from({ length: 8 }).map((_, i) => { const a = (i / 8) * Math.PI * 2; return ( ); }) : null}

); } export function PrizeCoinsForm() { const uid = useId().replace(/:/g, ""); const reduceMotion = useReducedMotion() ?? false; const stageRef = useRef(null); const giftRef = useRef(null); const counterRef = useRef(null); const [total, setTotal] = useState(0); const [busy, setBusy] = useState(false); const [open, setOpen] = useState(false); const [flights, setFlights] = useState([]); const [pop, setPop] = useState(false); const [origin, setOrigin] = useState({ x: 0, y: 0 }); const [target, setTarget] = useState({ x: 0, y: 0 }); const claim = useCallback(() => { if (busy) return; const stage = stageRef.current?.getBoundingClientRect(); const gift = giftRef.current?.getBoundingClientRect(); const counter = counterRef.current?.getBoundingClientRect(); if (!stage || !gift || !counter) return; const ox = gift.left + gift.width / 2 - stage.left; const oy = gift.top + gift.height / 2 - stage.top; const tx = counter.left + counter.width / 2 - stage.left; const ty = counter.top + counter.height / 2 - stage.top; setOrigin({ x: ox, y: oy }); setTarget({ x: tx, y: ty }); setBusy(true); setOpen(true); setPop(false); const next: Flight[] = Array.from({ length: COIN_COUNT }, (_, i) => ({ id: Date.now() + i, dx: (Math.random() - 0.5) * 120, dy: -40 - Math.random() * 90, delay: reduceMotion ? 0 : i * 0.045, spin: (Math.random() > 0.5 ? 1 : -1) * (180 + Math.random() * 220), })); setFlights(next); const flyMs = reduceMotion ? 400 : 1100; const staggerMs = reduceMotion ? 0 : COIN_COUNT * 45; window.setTimeout(() => { setTotal((t) => t + REWARD); setPop(true); window.setTimeout(() => setPop(false), 500); }, flyMs + staggerMs * 0.35); window.setTimeout(() => { setFlights([]); setOpen(false); setBusy(false); }, flyMs + staggerMs + 280); }, [busy, reduceMotion]); return (

{/* coin counter — گوشه بالا */}

موجودی

{toFaDigits(total)}

{pop ? ( +{toFaDigits(REWARD)} ) : null}

REWARD

دریافت جایزه

جعبه را باز کن؛ سکه‌ها جمع می‌شوند

{busy ? "در حال دریافت…" : "دریافت جایزه"}

{/* flying coins layer */}

{flights.map((c) => ( ))}

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

); }