react-fortune-roulette/dist/Roulette.js

A fork of react-roulette-game adapted for modern React versions and extended functionality

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect } from "react";
import { motion, useAnimation } from "framer-motion";
import "./roulette.css";
export const Roulette = ({ onStart = () => {
}, onTryAgain = () => {
}, onComplete = () => {
}, onReceiveGift = () => {
}, startText = "Start!", tryAgainText = "Try Again", receiveGiftText = "Receive a gift", wheelImageBase, wheelImageOverlay, highlightImage, pointerImage, prizeList, spinsLimit = 1, duration = 6, isShowReceiveGiftButton = true, }) => {
    const [spinCount, setSpinCount] = useState(0);
    const [spinning, setSpinning] = useState(false);
    const [showTryAgain, setShowTryAgain] = useState(false);
    const [wonPrize, setWonPrize] = useState(null);
    const wheelControls = useAnimation();
    const highlightControls = useAnimation();
    const canSpin = spinsLimit === undefined || spinCount < spinsLimit;
    const triggerSpin = () => __awaiter(void 0, void 0, void 0, function* () {
        const total = prizeList.length;
        const selectedIndex = Math.floor(Math.random() * total);
        const selectedPrize = prizeList[selectedIndex];
        const prizeAngle = (360 * selectedIndex) / total;
        yield wheelControls.start({
            rotate: 360 * 10,
            transition: { duration: duration / 2, ease: "easeIn" },
        });
        yield wheelControls.start({
            rotate: 360 * 15 + prizeAngle,
            transition: { duration: duration / 2, ease: "easeOut" },
        });
        highlightControls.start({
            opacity: [0, 1],
            transition: { duration: 0.5, repeat: Infinity, repeatType: "reverse" },
        });
        setSpinning(false);
        setWonPrize(selectedPrize);
        if (selectedPrize === "try_again")
            setShowTryAgain(true);
        onComplete(selectedPrize);
    });
    useEffect(() => {
        if (spinning) {
            highlightControls.stop();
            highlightControls.set({ opacity: 0 });
            triggerSpin();
        }
    }, [spinning]);
    const handleStart = () => {
        if (!canSpin)
            return;
        setSpinning(true);
        setShowTryAgain(false);
        setSpinCount((prev) => prev + 1);
        onStart();
    };
    const handleTryAgain = () => {
        if (!showTryAgain)
            return;
        onTryAgain();
        setSpinning(true);
        setShowTryAgain(false);
    };
    const handleReceiveGift = () => {
        if (wonPrize && wonPrize !== "try_again") {
            onReceiveGift(wonPrize);
            setWonPrize(null);
        }
    };
    const isReceiveGiftButtonVisible = isShowReceiveGiftButton && wonPrize && wonPrize !== "try_again" && !spinning;
    return (_jsxs("div", { className: "roulette-container", children: [_jsxs("div", { className: "roulette-box", children: [_jsx(motion.div, { className: "roulette-board", style: { backgroundImage: `url(${wheelImageBase})` }, animate: wheelControls }), _jsx(motion.div, { className: "roulette-highlight-area", style: { backgroundImage: `url(${highlightImage})` }, animate: highlightControls }), _jsx(motion.div, { className: "roulette-board", style: { backgroundImage: `url(${wheelImageOverlay})` }, animate: wheelControls }), _jsx("div", { className: "roulette-pointer", style: { backgroundImage: `url(${pointerImage})` } })] }), _jsxs("div", { className: "roulette-actions", children: [showTryAgain ? (_jsx("button", { className: "roulette-btn try-again-btn", type: "button", onClick: handleTryAgain, children: _jsx("span", { children: tryAgainText }) })) : !spinning && canSpin ? (_jsx("button", { className: "roulette-btn start-btn", type: "button", onClick: handleStart, children: _jsx("span", { children: startText }) })) : null, isReceiveGiftButtonVisible && (_jsx("button", { className: "roulette-btn gift-btn", type: "button", onClick: handleReceiveGift, children: _jsx("span", { children: receiveGiftText }) }))] })] }));
};