Spinning Prize Wheel

Demo

Demo Source

Install

npm i @kennarddh/spinning-prize-wheel

Guide

Ref Handle

• Reset {function} = Reset to 0 position
• Rotate {function} = Rotate the wheel

Props

• rotateDuration {number} = Rotate duration in second
• rarityGroups {array} = Rarity groups
• choices {array} = Choices
• onEndRotate {function} = On end rotate callback
• onStartRotate {function} = On start rotate callback
• onReset {function} = On reset callback
• withoutArrow {boolean} = Remove default arrow
• fullRotationAddBeforeDestination {number|numberFactory} = How many times should wheel full spin before stop
• counterClockwise {boolean} = Rotate wheel counter clockwise
• groupColorByRarity {boolean} = Should group color by rarity
• resetRotateDuration {number} = Reset rotate duration in second
• shuffleChoices {boolean} = Shuffle choices
• size {number} = Wheel size
• fontSize {number} = Content font size,
• needReset {boolean} = Need reset before another spin

Example

import { FC, useRef, useState } from 'react'

import LuckyWheel, {
    IRarityGroups,
    IChoices,
    ILuckyWheel,
} from '@kennarddh/spinning-prize-wheel'

const App: FC = () => {
    const [RarityGroups] = useState<IRarityGroups>({
        common: {
            label: 'Common',
            rarity: 89,
            color: '#f00',
        },
        uncommon: {
            label: 'Uncommon',
            rarity: 10,
            color: '#0f0',
        },
        rare: {
            label: 'Rare',
            rarity: 1,
            color: '#00f',
        },
    })

    const [Counter, SetCounter] = useState({ common: 0, uncommon: 0, rare: 0 })

    const [Choices] = useState<IChoices>(
        Array(8)
            .fill(null)
            .map((_, i) => {
                const rand = Math.random()

                let rarity = ''

                if (rand < 0.5) rarity = 'common'
                else if (rand < 0.8) rarity = 'uncommon'
                else rarity = 'rare'

                return {
                    id: `${i}`,
                    label: `${i}`,
                    rarityGroup: rarity,
                }
            })
    )

    const OnEndRotate = (id: string) => {
        const choice = Choices.find(item => item.id === id)

        alert(
            `You get ${choice?.label} ${
                RarityGroups[choice?.rarityGroup ?? ''].label
            }`
        )

        const get = choice?.rarityGroup as 'common' | 'uncommon' | 'rare'

        SetCounter(prev => ({
            ...prev,
            // eslint-disable-next-line security/detect-object-injection
            [get]: prev[get] + 1,
        }))
    }

    const LuckyWheelRef = useRef<ILuckyWheel>(null)

    const Rotate = () => {
        LuckyWheelRef.current?.Rotate()
    }

    const Reset = () => {
        LuckyWheelRef.current?.Reset()
    }

    console.log(Counter)

    return (
        <div>
            <LuckyWheel
                rotateDuration={3}
                rarityGroups={RarityGroups}
                choices={Choices}
                onEndRotate={OnEndRotate}
                ref={LuckyWheelRef}
                groupColorByRarity
                size={400}
                fontSize={25}
                shuffleChoices
            />
            <div>
                <button onClick={Rotate}>Rotate</button>
                <button onClick={Reset}>Reset</button>
            </div>
        </div>
    )
}