web2468/src/widgets/WCashWheel/WWheel/WWheel.jsx

import styles from "./styles.module.scss";
import d_bg from "@assets/wheel/d.png";
import bg_light from "@assets/wheel/bg_light.png";
import light1 from "@assets/wheel/light1.png";
import light2 from "@assets/wheel/light2.png";
import spinBg from "@assets/wheel/spinBg.png";
import pointer from "@assets/wheel/pointer.png"
import styled from 'styled-components/macro';
import React, {useEffect, useRef, useState} from "react";
import spin_1 from "@assets/wheel/spin-1.png";
import spin_2 from "@assets/wheel/spin-2.png";
import spin_4 from "@assets/wheel/spin-4.png";
import spin_5 from "@assets/wheel/spin-5.png";
import draw from "@assets/wheel/draw.png";
import {useDispatch, useSelector} from "react-redux";
import {getIsHelp, getTurnplate, updateCollect, updateTimes} from "@features/turnplateSlice";
import {formatCash, formatTime, localStorageGet} from "@utils/helpers";
import SvgIcon from "@components/SvgIcon";
import {ReactComponent as ShareIcon} from '@assets/singlesvg/share.svg';
import {isLogined} from "@features/mainSlice";
import {useNavigate} from "react-router";
import {ROUTE_PATH} from "@constants/routes";
import {reqTurnplateHelp, reqTurnplateKan} from "@features/api";
import CountUp from "react-countup";
import WPopInfo from "@widgets/WCashWheel/WPopInfo/WPopInfo";
import {LOCAL_WHEEL_INVITE_CODE} from "@constants/localkey";
const i18n=global.i18n;
const spinImgSrc=[
    null,
    spin_1,
    spin_2,
    null,
    spin_4,
    spin_5
]
const spinImg=[];
const StyledCanvas=styled.canvas`
    background-image:url('${spinBg}');
`
const turnObj={
    timer:null,
    cdTimer:null,
    count:0,
    result:null,
    resTimer:null,
    flashTimer:null,
    resetTimer:null,
    ishelp:false
};
const WWheel=({openShare,showShare=true,onClose=null})=>{
    let turnplate=useSelector(getTurnplate);
    if(turnplate==null)turnplate={times:0};
    const data=[
        {id:0,type: 1,value: 0},
        {id:1,type: 0,value: 1000},
        {id:2,type: 0,value: 50},
        {id:3,type: 5,value: 0},
        {id:4,type: 1,value: 0},
        {id:5,type: 4,value: 0},
        {id:6,type: 2,value: 0},
        {id:7,type: 0,value: 1},
    ]
    const drawRef=useRef(null);
    const [imgLoaded,setImgLoaded]=useState(false);
    const dataLen=8;
    const startRotateDegree=3240;
    const startRotateDegreeDynamic=3240;
    const [drawStyle,setDrawStyle]=useState({});
    const [countdown,setCountdown]=useState(turnplate?turnplate.countdown:0);
    const isLogin=useSelector(isLogined);
    const navigate=useNavigate();
    const dispatch = useDispatch();
    const stopduring=5.5;
    const resetduring=2;
    const [collect,setCollect]=useState(0);
    const [isLock,setIsLock]=useState(false);
    const [openPopInfo,setOpenPopInfo]=useState(false);
    const isHelpdone=useSelector(getIsHelp);
    const loadImgs=()=>{
        let totalCount=spinImgSrc.length;
        let loadedCount=0;
        let checkDone=()=>{
            if (loadedCount===totalCount){
                setImgLoaded(true);
            }
        }
        for (let i = 0; i < totalCount; i++) {
            let imgSrc=spinImgSrc[i];
            if (imgSrc==null){
                loadedCount++;
                spinImg[i]=null;
                checkDone();
            }
            else{
                let img=new Image;
                img.src=imgSrc;
                spinImg[i]=img;
                img.onload=()=>{
                    loadedCount++;
                    checkDone();
                }
            }
        }
    }
    const clearCDTimer=()=>{
        if (turnObj.cdTimer!=null){
            clearInterval(turnObj.cdTimer);
            turnObj.cdTimer=null;
        }
    }
    const checkCountdown=()=>{
        if (countdown>0){
            clearCDTimer();
            let left=countdown;
            turnObj.cdTimer=setInterval(()=>{
                left--;
                if (left<=0){
                    clearCDTimer();
                    setCountdown(0);
                    return;
                }
                setCountdown(left);
            },1000);
        }
    }
    const onTurnResult=(data,code=200)=>{
        if (code!==200){
            resetWheel(0);
            return;
        }
        let type=data.type;
        let curr_amount=turnplate.collect_amount;
        let collect_amount=data.collect_amount;
        let change=(collect_amount-curr_amount);
        let id=-1;
        if (type===1){
            id=5;
        }
        else if (type===2){
            let ids=[0,4];
            let index=Math.floor(Math.random()*ids.length);
            id=ids[index];
        }
        turnObj.result={
            type:type,
            reward:id,
            amount:collect_amount,
            change:change
        };
        // turnObj.ishelp=ishelp;
    }
    const startSpin=()=>{
        // if (!isLogin){
        //     if (onClose)onClose();
        //     navigate(ROUTE_PATH.SIGN_IN);
        //     return;
        // }
        if (isLock)return;
        if (turnplate.times<=0)return;
        startTurn();
        dispatch(reqTurnplateKan(onTurnResult));
        dispatch(updateTimes({times:(turnplate.times-1)}))
        setIsLock(true);
    }
    const clearTurnTimer=()=>{
        if (turnObj.timer!=null){
            clearInterval(turnObj.timer);
            turnObj.timer=null;
        }
    }
    const startTurn=()=>{
        clearTurnTimer();
        turnObj.count=0;
        let turnCount=turnObj.count;
        let during=0.333;
        let roteStyle={
            transform:`rotate(360deg)`,
            transition:`transform ${during*2}s cubic-bezier(0.42, 0.00, 1.00, 1.00)`,
        }
        setDrawStyle(roteStyle);
        let timer=setInterval(()=>{
            turnCount++;
            turnObj.count++;
            roteStyle={
                transform:`rotate(${turnCount*360}deg)`,
                transition:`transform ${during}s cubic-bezier(1.00, 1.00, 0.00, 0.00)`,
            }
            setDrawStyle(roteStyle);
            if(turnCount>2){
                if (turnObj.result){
                    stopTurn(turnObj.result.reward);
                }
            }
        },during*1000);
        turnObj.timer=timer;
    }
    const stopTurn=(reward)=>{
        let index=0;
        for (let i = 0; i < dataLen; i++) {
            let item=data[i];
            if (item&&item.id===reward){
                index=i;
                break;
            }
        }
        let per=360/dataLen;
        let angle=turnObj.count*360+startRotateDegreeDynamic-(per*index);
        drawAnimation(angle);
    }
    const drawAnimation=(angle=startRotateDegreeDynamic)=>{
        clearTurnTimer();
        let roteStyle={
            transform:"rotate(".concat(angle, "deg)"),
            transition:`transform ${stopduring}s cubic-bezier(0.250, 0.460, 0.455, 0.995)`,
        };
        setDrawStyle(roteStyle);
        playRes(angle);
    }
    const flashDraw=()=>{
        let show=false;
        turnObj.flashTimer=setInterval(()=>{
            show=!show;
            let result=show?turnObj.result:null;
            drawWheel(result)
        },260)
    }
    const playRes=(angle=0)=>{
        clearResTimer();
        let during=(stopduring+0.5)*1000;
        turnObj.resTimer=setTimeout(()=>{
            flashDraw();
            if (turnObj.result.type===2){
                setCollect(turnObj.result.change);
            }
            else if (turnObj.result.type===1){

            }
            if(!turnObj.ishelp)dispatch(updateCollect({collect_amount:turnObj.result.amount}))
            startReset(angle);
        },during)
    }
    // const
    const clearResTimer=()=>{
        if (turnObj.resTimer){
            clearTimeout(turnObj.resTimer);
            turnObj.resTimer=null;
        }
        if (turnObj.flashTimer){
            clearInterval(turnObj.flashTimer);
            turnObj.flashTimer=null;
        }
    }
    const startReset=(angle=0)=>{
        turnObj.resetTimer=setTimeout(()=>{
            checkShowPopInfo();
            resetWheel(angle);
        },resetduring*1000)
    }
    const checkShowPopInfo=()=>{
        let type=2;
        if (turnObj.result){
            type=turnObj.result.type;
        }
        if(type===2)setOpenPopInfo(true);
    }
    const resetWheel=(angle=0)=>{
        clearTurnTimer();
        turnObj.result=null;
        turnObj.count=0;
        turnObj.ishelp=false;
        if (angle==null)angle=0;
        else angle=angle%360;
        let roteStyle={
            transform:"rotate("+angle+"deg)",
            transition:``,
        };
        setDrawStyle(roteStyle);
        drawWheel(null);
        setCollect(0);
        setIsLock(false);
        clearResTimer();
    }
    const clearResetTimer=()=>{
        if (turnObj.resetTimer){
            clearTimeout(turnObj.resetTimer);
            turnObj.resetTimer=null;
        }
    }
    const drawWheel=(result)=>{
        let draw=drawRef.current;
        if (draw==null)return;
        let colors=["#B90615","#FFD760"];
        let color_len=colors.length;
        let fontSizeNum=25;
        if (data!=null){
            let s=draw;
            let rdat=data.slice(0,dataLen);
            let c=draw.getContext("2d");
            let dcwidth=draw.clientWidth;
            let dcheight=draw.clientHeight;
            let devicePixelRatioNum = window.devicePixelRatio < 1 ? 1 : window.devicePixelRatio;
            s.width=dcwidth*devicePixelRatioNum;
            s.height=dcheight*devicePixelRatioNum;
            c.clearRect(0, 0, s.width, s.height);
            let l = 2 * Math.PI / dataLen;
            let g = -s.width / 2 + s.width / 2 / 2.5;
            c.translate(s.width / 2, s.width / 2);
            c.rotate(-2*l);
            c.save();
            for (let i = 0; i < dataLen; i++) {
                let item=rdat[i];
                if (item==null)continue;
                let color=colors[i%color_len];
                if (result){
                    if(result.reward===item.id){
                        c.beginPath();
                        c.moveTo(0, 0);
                        c.arc(0, 0, s.width / 2 - 6, -l / 2, l / 2.08);
                        c.strokeStyle = "#fff";
                        c.fillStyle = "#fff";
                        c.lineWidth = 10;
                        c.lineTo(0, -5);
                        c.stroke();
                        c.closePath();
                    }
                }
                c.rotate(l);
                c.save();
                c.beginPath();
                c.fillStyle = color;
                c.textBaseline = "middle";
                c.textAlign = "center";
                c.font = "".concat(devicePixelRatioNum * fontSizeNum, "px SWISSC-BT");
                c.translate(s.width / 5.2, -s.width / dataLen);
                c.rotate(.8);
                c.translate(-s.width / 5.2, s.width / dataLen);
                if (item.type===0){
                    c.fillText(item.value,s.width / 7.2, g + devicePixelRatioNum * fontSizeNum * .36, 3 * s.width / dataLen);
                }
                else{
                    let img=spinImg[item.type];
                    if(img)c.drawImage(img, s.width / 23, g - 11 * devicePixelRatioNum, s.width / 5, s.width / 4.37);
                }
                c.restore();
            }
        }
    }
    const onHelpResult=(data)=>{
        console.log(data);
    }
    const checkHelpOther=()=>{
        let act=localStorageGet(LOCAL_WHEEL_INVITE_CODE);
        if (act!=null&&act!==""){
            if (!isHelpdone){
                dispatch(reqTurnplateHelp(onHelpResult));
            }
        }
    }
    useEffect(()=>{
        loadImgs();
        checkHelpOther();
        return ()=>{
            clearTurnTimer();
            clearCDTimer();
            clearResTimer();
            turnObj.result=null;
            clearResetTimer();
        }
    },[]);
    useEffect(()=>{
        if (imgLoaded){
            drawWheel();
        }
    },[imgLoaded])
    useEffect(()=>{
        checkCountdown();
    },[turnplate.countdown])
    const renderSpinInfo=()=>{
        let times=turnplate?turnplate.times:0;
        return (
            <>
                <div className={styles.spin_con}>
                    <button className={styles.spin_btn} onClick={()=>{
                        startSpin();
                    }}>
                        <img src={draw} className={styles.spin_img}/>
                        <div className={styles.spin_content}>
                            {
                                collect>0?(
                                    <CountUp
                                        start={0}
                                        end={Number(formatCash(collect))}
                                        duration={1}
                                        separator=" "
                                        decimals={2}
                                        prefix={"+"}
                                    >
                                        {({ countUpRef, start }) => {
                                            return (
                                                <div ref={(ref)=>{
                                                    countUpRef.current=ref;
                                                    if (countUpRef.collect!==collect){
                                                        countUpRef.collect=collect;
                                                        start();
                                                    }
                                                }} className={styles.collect_num}/>
                                            )
                                        }}
                                    </CountUp>
                                ):(

                                    <div className={styles.spin_num}>{times}</div>
                                )
                            }
                        </div>

                    </button>
                </div>
            </>
        )
    }
    const renderCountDown=()=>{
        let d=Math.floor(countdown/86400);
        let time=countdown-d*86400;
        let stime=formatTime(time);
        let sd=i18n.language==="ru"?'д':'d';
        return (
            <div className={styles.cd_con}>
                <div>{i18n.t("turnplate.expires_in")}</div>
                <div className={styles.text}>{d+sd}</div>
                <div className={styles.text}>{stime}</div>
            </div>
        )
    }
    const renderShareBar=()=>{
        if (showShare){
            return (
                <button className={styles.share_con} onClick={()=>{
                    if (openShare)openShare();
                }}>
                    <div className={styles.share_bar}>
                        <div className={styles.text}>{i18n.t("turnplate.invite_tips")}</div>
                        <ShareIcon className={styles.icon}/>
                    </div>
                </button>
            )
        }
        else {
            return (<></>);
        }
    }
    const renderPopInfo=()=>{
        return (
            <WPopInfo open={openPopInfo} onClose={()=>{
                setOpenPopInfo(false);
            }} openShare={openShare}></WPopInfo>
        )
    }
    return (
        <div className={styles.container}>
            <div className={styles.wheel}>
                <img src={bg_light} className={styles.bg_light}/>
                <img src={d_bg} className={styles.lamp}/>
                <div className={styles.drawContent}>
                    <StyledCanvas ref={drawRef} className={styles.draw} style={drawStyle}/>
                </div>
                <img src={light1} className={`${styles.light} ${styles.light_ani_1}`}/>
                <img src={light2} className={`${styles.light} ${styles.light_ani_2}`}/>
                <img src={pointer} className={styles.pointer}/>
                {
                    renderSpinInfo()
                }
            </div>
            {renderCountDown()}
            {renderShareBar()}
            {renderPopInfo()}
        </div>
    )
}
export default WWheel;