web2468/src/components/GameList/index.jsx

import styles from "@components/GameList/styles.module.scss";
import React, {useEffect, useState} from "react";
import GameItem from "@components/GameItem";
import {REQ_STATUS} from "@api/config";
import SmallLoading from "@components/SmallLoading";
import {useThemeProvider} from "@contexts/themeContext";
import GameRoom from "@components/GameRoom";
import {total} from "react-big-calendar/lib/utils/dates";
const i18n =global.i18n;
const objInfo={
    timer:null
}
const GameList=({data,status,reqMore,user})=>{
    // data={
    //     type:0,//游戏分类
    //     page:1,
    //     pageSize:40,
    //     total:42,
    //     totalPage:1,
    //     data:[
    //         {
    //             gid:0,//gameid
    //             img:"https://bc.imgix.net/game/image/f76d3f4a-9712-4bd1-9426-f3ab7069b6a2.png?auto=format&dpr=3&w=200",//图片
    //             link:"",//跳转的链接
    //             online:1006,//游戏人数
    //             desc:"BC Originals",//描述
    //         },
    //         {
    //             gid:0,//gameid
    //             img:"https://bc.imgix.net/game/image/ff0b0511-1f48-43d1-8dd3-294bb6437b4b.png?auto=format&dpr=3&w=200",//图片
    //             link:"",//跳转的链接
    //             online:100,//游戏人数
    //             desc:"BC Originals",//描述
    //         },
    //         {
    //             gid:0,//gameid
    //             img:"https://bc.imgix.net/game/image/d33b3fad-b6df-450b-bd85-528a17383043.png?auto=format&dpr=3&w=200",//图片
    //             link:"",//跳转的链接
    //             online:100,//游戏人数
    //             desc:"BC Originals",//描述
    //         },
    //         {
    //             gid:0,//gameid
    //             img:"https://bc.imgix.net/game/image/5b3a4099-9462-4d3c-a854-ade78aad0d60.png?auto=format&dpr=3&w=200",//图片
    //             link:"",//跳转的链接
    //             online:100,//游戏人数
    //             desc:"BC Originals",//描述
    //         },
    //         {
    //             gid:0,//gameid
    //             img:"https://bc.imgix.net/game/image/f76d3f4a-9712-4bd1-9426-f3ab7069b6a2.png?auto=format&dpr=3&w=200",//图片
    //             link:"",//跳转的链接
    //             online:100,//游戏人数
    //             desc:"BC Originals",//描述
    //         },
    //         {
    //             gid:0,//gameid
    //             img:"https://bc.imgix.net/game/image/ff0b0511-1f48-43d1-8dd3-294bb6437b4b.png?auto=format&dpr=3&w=200",//图片
    //             link:"",//跳转的链接
    //             online:100,//游戏人数
    //             desc:"BC Originals",//描述
    //         },
    //         {
    //             gid:0,//gameid
    //             img:"https://bc.imgix.net/game/image/d33b3fad-b6df-450b-bd85-528a17383043.png?auto=format&dpr=3&w=200",//图片
    //             link:"",//跳转的链接
    //             online:100,//游戏人数
    //             desc:"BC Originals",//描述
    //         },
    //         {
    //             gid:0,//gameid
    //             img:"https://bc.imgix.net/game/image/5b3a4099-9462-4d3c-a854-ade78aad0d60.png?auto=format&dpr=3&w=200",//图片
    //             link:"",//跳转的链接
    //             online:100,//游戏人数
    //             desc:"BC Originals",//描述
    //         },
    //     ]
    // }
    const {isMobile} = useThemeProvider();
    const M_LIST_COL=3;
    const M_LIST_ROW=1;
    const [selected,setSelected]=useState(-1);
    const [roomRow,setRoomRow]=useState({});
    const [showPopRoom,setShowPopRoom]=useState(false);
    const roomHeight=5.2;
    const rowTop=roomHeight+0.75;
    const handleReset=(e)=>{
        setSelected(-1);
        setRoomRow({});
    }
    useEffect(()=>{
        document.addEventListener("click",handleReset);
        return ()=>{
            document.removeEventListener("click",handleReset);
            resetTimer();
        }
    },[])
    const resetTimer=()=>{
        if (objInfo.timer!=null){
            clearTimeout(objInfo.timer);
            objInfo.timer=null;
        }
    }
    const checkSetRoom=(e,item,row,total)=>{
        let target=e.target;
        if (target){
            let rect=target.getBoundingClientRect();
            let cH = document.documentElement.clientHeight;
            let cB=rect.bottom;
            if (cH-cB>80)row=row+1;
        }else row=row+1;
        if (row>=total)row=total-1;
        let roomRowItem={
            row:row,
            data:item
        }
        if (roomRow.row===row){
            setRoomRow({
                hide:true,
                ...roomRowItem
            });
            resetTimer();
            objInfo.timer=setTimeout(()=>{
                setRoomRow(roomRowItem);
            },10)
        }
        else setRoomRow(roomRowItem);
    }
    const handleSelect=(e,data,row,total)=>{
        e.stopPropagation();
        if (data.id===selected){
            handleReset();
        }
        else
        {
            setSelected(data.id);
            checkSetRoom(e,data,row,total);
        }
    }
    const handlePopSelected=(e,data,row,totall)=>{
        e.stopPropagation();
        setRoomRow({
            row:-1,
            data:data
        });
        setShowPopRoom(true);
    }
    const handlePopClose=()=>{
        setRoomRow({});
        setShowPopRoom(false);
    }
    const renderGameListDesktop=()=>{
        let list=data.data;
        if (list==null)list=[];
        return (
            <>
                <div id={"gameList"} className={styles.game_list}>
                    {
                        list.map((item, index) => {
                            return (
                                <GameItem key={index} data={item} handleRoom={handlePopSelected}></GameItem>
                            )
                        })
                    }
                </div>
                <GameRoom open={showPopRoom} data={roomRow.data} user={user} onClose={handlePopClose}></GameRoom>
            </>
        )
    }
    const formatMList = (list) => {
        let mList = [];
        if (list) {
            for (let i = 0; i < list.length; i += M_LIST_COL) {
                let rowArr = list.slice(i, i + M_LIST_COL);
                mList.push(rowArr);
            }
        }
        return mList;
    }
    const renderRoom=(row,len)=>{
        if (roomRow==null)return (<></>);
        if (roomRow.hide)return (<></>);
        let rrow=roomRow.row;
        let data=roomRow.data;
        if (rrow===row){
            return (
                <GameRoom open={true} data={data} height={roomHeight+"rem"} mobile={true} user={user}></GameRoom>
            )
        }
        else return (<></>);
    }
    const renderGameListMobile=()=>{
        let list=data.data;
        if (list==null)list=[];
        list=formatMList(list);
        let len=list.length;
        return (
            <div id={"gameList"} className={styles.game_list_mobile}>
                {
                    list.map((rowArr,row)=>{
                        let rowStyle={};
                        if (roomRow!=null){
                            // if (roomRow.row===row){
                            if (row>=roomRow.row){
                                // rowStyle.marginTop=roomHeight;
                                rowStyle.transform=`translateY(${rowTop+"rem"})`;
                            }
                            // if (roomRow.row===row){
                            //     rowStyle.marginTop=roomHeight;
                            // }
                        }
                        return (
                            <>
                                {renderRoom(row,len)}
                                <div key={row} className={styles.list_row} style={rowStyle}>
                                    {
                                        rowArr.map((item, col) => {
                                            let itemStyle={}
                                            if (selected!==-1){
                                                if (item.id!==selected){
                                                    itemStyle.filter="brightness(60%)"
                                                }
                                                else
                                                {
                                                    itemStyle.transform="scale(1.05)";
                                                }
                                            }
                                            return (
                                                <GameItem key={col} data={item} handleRoom={(e,data)=>{
                                                    handleSelect(e,data,row,len)
                                                }} row={row}  style={itemStyle}></GameItem>
                                            )
                                        })
                                    }
                                </div>
                            </>
                        )
                    })
                }
            </div>
        )
    }
    const renderGameList = () => {
        if (isMobile()) return renderGameListMobile();
        else return renderGameListDesktop();
    }
    const renderProgress = () => {
        let list = data.data;
        if (list == null) list = [];
        let current = list.length;
        let total = data.total;
        let progress = Math.ceil((current / total) * 100);
        let spro =progress+"%";
        return (
            <div className={styles.page_progress}>
                <span>{current} / {total}</span>
                <div className={styles.progress}>
                    <div className={styles.green} style={{width:spro}}></div>
                </div>
                <span>{spro}</span>
            </div>
        )
    }
    const renderLoading=()=>{
        return (<SmallLoading fill={"#fff"}/>)
    }
    const onClickMore=()=>{
        if (reqMore){
            let page=Number(data.page)+1;
            let tabtype=data.tabtype;
            let id=data.id;
            reqMore(id,tabtype,page);
        }
    }
    const renderShowMoreBtn=()=>{
        let isNomore=Number(data.page)===Number(data.totalPage);
        let label=isNomore?i18n.t("game_list.no_more"):i18n.t("game_list.show_more");
        return (
            <div className={styles.show_more}>
                <button className={styles.more_btn} disabled={isNomore} onClick={()=>{
                    if (status!=REQ_STATUS.LOADING){
                        onClickMore();
                    }
                }}>
                    {
                        status===REQ_STATUS.LOADING?renderLoading():(<div>{label}</div>)
                    }
                </button>
            </div>
        )
    }
    const renderShowMore=()=>{
        let isNomore=Number(data.page)===Number(data.totalPage);
        let moreStyle={};
        if (roomRow&&roomRow.row!=null){
            let row=roomRow.row;
            if (row>=0){
                moreStyle.transform=`translateY(${rowTop+"rem"})`;
                moreStyle.marginBottom=rowTop+"rem";
            }
        }
        if (isNomore){
            if (isMobile()) return (<div className={`${styles.page_con} ${styles.page_nomore}`} style={moreStyle}></div>)
            else return (<></>);
        }
        return (
            <div className={styles.page_con} style={moreStyle}>
                {renderProgress()}
                {renderShowMoreBtn()}
            </div>
        )
    }
    return (
        <div className={`w-100 ${styles.list_container}`}>
            {renderGameList()}
            {renderShowMore()}
        </div>
    )
}
export default GameList;