web2468/src/components/DropCoins.jsx

// components
import Lottie from 'lottie-react';
import Spring from '@components/Spring';

// assets
// import ball from '@assets/logo.json';
import logo from '@assets/dropcoin.json';
import flycoin from '@assets/flycoin.json';
import {useEffect, useRef, useState} from "react";
import styled from "styled-components/macro";
import SoundHelp from "@utils/SoundManger";

const objInfo={
    timerIds:[]
}
const DropCoins = ({...props}) => {
    const [isShow, setIsShow] = useState(false);
    const coinRef = useRef(null);
    const coins = [useRef(null),useRef(null),useRef(null),useRef(null)]
    const show=()=>{
        setIsShow(true);
    }
    const hide=()=>{
        setIsShow(false);
    }
    const resetTimer=()=>{
        if (objInfo.timerIds){
            for (let i = 0; i < objInfo.timerIds; i++) {
                clearTimeout(objInfo.timerIds[i]);
            }
            objInfo.timerIds=[];
        }
    }
    useEffect(()=>{
        const dropCoins={
            show,
            hide
        };
        global.dropCoins=dropCoins;
    },[])
    useEffect(() => {
        resetTimer();
        if (isShow){
            let timer=setTimeout(()=>{
                coinRef.current.setSpeed(1.5);
                coinRef.current.play();
                SoundHelp.playSound("sound_bonus");
            },100)
            objInfo.timerIds.push(timer);
            coins.forEach((coin,i)=>{
                let timer_1=setTimeout(()=>{
                    coin.current.play();
                    // coin.current.setSpeed(1.4+i*0.2);
                },i*500)
                objInfo.timerIds.push(timer_1);
                let timer_2=setTimeout(()=>{
                    coin.current.play();
                    coin.current.setSpeed(0.9-(3-i)*0.1);
                },i*500+100)
                objInfo.timerIds.push(timer_2);
            })
            let timer_3=setTimeout(()=>{
                setIsShow(false);
            },8000);
            objInfo.timerIds.push(timer_3);
        }
    }, [isShow]);
    return (
        <>
            {
                isShow?(
                    <Spring {...props} className="d-flex align-items-center justify-content-center flex-1 w-100 h-100 top_view">
                        <Lottie lottieRef={coinRef} loop={false} autoplay={false} className="top_view"  animationData={logo} speed={1.5}  />
                        {/*<Lottie loop={false}   animationData={flycoin} className="top_view" style={{marginLeft:"-15rem"}} />*/}
                        <Lottie loop={false} lottieRef={coins[0]} autoplay={false} animationData={flycoin} className="top_view" style={{marginLeft:"-70%",marginTop:"-25rem",width:"25rem"}} />
                        <Lottie loop={false} lottieRef={coins[1]} autoplay={false} animationData={flycoin} className="top_view" style={{marginLeft:"-20%",marginTop:"-35rem",width:"18rem"}} />
                        <Lottie loop={false} lottieRef={coins[2]} autoplay={false} animationData={flycoin} className="top_view"  style={{marginRight:"-20%",marginTop:"-15rem",width:"20rem"}} />
                        <Lottie loop={false} lottieRef={coins[3]} autoplay={false} animationData={flycoin} className="top_view"  style={{marginRight:"-60%",marginTop:"-20rem",width:"22rem"}}/>
                    </Spring>
                ):(<></>)
            }
        </>
    )
}

export default DropCoins;