web2468/src/components/GameItem/index.jsx

import styles from "@components/GameItem/styles.module.scss";
import {NavLink, useNavigate} from "react-router-dom";
import {LazyLoadImage} from "react-lazy-load-image-component";
import symbol from "@assets/symbol-defs.svg";
import React from "react";
import {ROUTE_PATH} from "@constants/routes";
import {localStorageSet} from "@utils/helpers";
import {LOCAL_GAME_INFO, LOCAL_GAME_URL} from "@constants/localkey";
import Imgix from "@components/Imgix";
import LazyImgix from "@components/Imgix/LazyImgix";
import {ReactComponent as UNLikeIcon} from "@assets/singlesvg/xiai_bai.svg";
import {ReactComponent as LikeIcon} from "@assets/singlesvg/xiai_hong.svg";
import {useDispatch, useSelector} from "react-redux";
import {getGameLike, isLogined, updateGameLike} from "@features/mainSlice";
import {updatePageGameLike} from "@features/pageSlice";
import SvgIcon from "@components/SvgIcon";
import {reqUpdateFavoInfo} from "@features/api";
import styled from 'styled-components/macro';
export const GameImgAspectRatio=384/516;
const StyledGridItem = styled.div`
    ${(props) => {
        let whStyle=props.$whStyle;
        let width='';
        let aspectRatio='';
        if (whStyle!=null){
            width=`width:${whStyle.width} !important;`;
            aspectRatio=`aspect-ratio:${whStyle.aspectRatio} !important;`;
        }
        return `
            ${width}
            ${aspectRatio}
        `
    }}
`
const StyledImgWrap=styled.button`
    aspect-ratio: ${GameImgAspectRatio};
    ${(props) => {
        let whStyle=props.$whStyle;
        let aspectRatio='';
        if (whStyle!=null){
            aspectRatio=`aspect-ratio:${whStyle.aspectRatio} !important;`;
        }
        return `
            ${aspectRatio}
        `
    }}
`
const GameItem=({data,handleRoom,whStyle,...props})=>{
    const navigate=useNavigate();
    const like=useSelector(getGameLike(data.id));
    const isLogin=useSelector(isLogined);
    const dispatch=useDispatch();
    const renderOlicon=()=>{
        return (
            <svg xmlns="http://www.w3.org/2000/svg" width="9" height="10" viewBox="0 0 9 10" fill="none"><path d="M7.78243 7.00126C7.98931 8.18376 7.16525 9.0422 6.01681 9.23532C4.90775 9.42188 3.09993 9.42188 1.99087 9.23532C0.842435 9.04251 0.0183723 8.18438 0.225247 7.00157C0.400872 5.99813 1.25118 5.37282 2.28993 5.42657C3.04868 5.46594 3.51493 5.56469 4.05462 5.56469C4.60056 5.56469 4.96431 5.46594 5.71743 5.42657C6.75587 5.37219 7.60712 5.99782 7.78243 7.00126ZM3.86275 0.907195C4.95368 0.907195 5.83837 1.79157 5.83837 2.88313C5.83837 3.9747 4.95368 4.85907 3.86275 4.85907C2.7715 4.85907 1.88681 3.97438 1.88681 2.88313C1.88681 1.79188 2.7715 0.907195 3.86275 0.907195Z" fill="url(#paint0_linear_451_3515)"></path><path d="M7.42806 5.14407C7.95931 5.2425 8.59868 5.525 8.85493 6.28813C9.09181 6.99375 8.81275 7.54688 8.49493 7.91282C8.39368 8.02938 8.19087 7.92813 8.24118 7.78532C8.37181 7.41594 8.42431 6.94407 8.21993 6.42157C8.02118 5.91313 7.65337 5.59282 7.31962 5.39563C7.18025 5.31344 7.26681 5.11407 7.42806 5.14407ZM5.63118 0.938442C5.47243 0.825317 5.58681 0.582817 5.77868 0.631255C5.98087 0.682192 6.189 0.761567 6.38306 0.883442C7.02337 1.28657 7.33993 1.99969 7.22712 2.79188C7.17462 3.16157 7.01056 3.44907 6.82587 3.66625C6.70431 3.80969 6.46431 3.69032 6.51431 3.51157C6.63181 3.09219 6.6665 2.55657 6.44056 1.96813C6.25431 1.48344 5.93587 1.15625 5.63118 0.938442Z" fill="#26AB4B"></path><defs><linearGradient id="paint0_linear_451_3515" x1="5.21662" y1="0.333274" x2="5.21662" y2="9.37524" gradientUnits="userSpaceOnUse"><stop stop-color="#85F25E"></stop><stop offset="1" stop-color="#33EF00"></stop></linearGradient></defs></svg>
        );
    }
    const formatNum=(num)=>{
        num=Number(num);
        let snum=num+"";
        if (num>=1000){
            snum=(num/1000).toFixed(2)+"K";
        }
        return snum;
    }
    const getRoom=()=>{
        let room=[];
        let level_info=data.level_info;
        if (level_info){
            for (const key in level_info) {
                room.push({key:key,value:level_info[key]});
            }
        }
        return room;
    }
    const saveGameInfo=(item)=>{
        let info={
            data:item
        }
        localStorageSet(LOCAL_GAME_INFO+item.id,JSON.stringify(info));
    }
    const onEnterGame=()=>{
        let id=data.id;
        let url=data.link;
        localStorageSet(LOCAL_GAME_URL+id,url);
        saveGameInfo(data);
        let path=ROUTE_PATH.GAME+"/"+id;
        global.authLockPath=path;
        navigate(path);
    }
    const handleEnterRoom=(e)=>{
        if (handleRoom==null)onEnterGame();
        else
        {
            let room=getRoom();
            if (room.length>1)handleRoom(e,data);
            else onEnterGame();
        }
    }
    const handleLike=()=>{
        let info={id:data.id,data:data,like:(1-like)}
        dispatch(updateGameLike(info));
        dispatch(updatePageGameLike(info));
        if(isLogin)dispatch(reqUpdateFavoInfo(info));
    }
    // return (
    //     <div className={styles.grid_item}>
    //         <button onClick={()=>{
    //             onEnterGame();
    //         }} className={styles.game_img_wrap}>
    //             <LazyLoadImage
    //                 src={data.img}
    //                 alt={"game-icon"}
    //                 effect={"blur"}
    //                 wrapperClassName={`lazy-image ${styles.game_img}`}
    //             />
    //             <div className={styles.online}>
    //                 {
    //                     renderOlicon()
    //                 }
    //                 <span>{formatNum(data.online)}</span>
    //             </div>
    //         </button>
    //         <div className={styles.bot_info}>
    //             <div className={styles.game_tit}>
    //                 <NavLink className={styles.game_desc}>
    //                     {data.brand}
    //                 </NavLink>
    //                 <button>
    //                     <svg className={`${styles.game_desc_icon}`}>
    //                         <use xlinkHref={`${symbol}#icon_Inform`} />
    //                     </svg>
    //                 </button>
    //             </div>
    //         </div>
    //     </div>
    // )
    const getImgixW=()=>{
        let baseAspectRatio=GameImgAspectRatio;
        let whAspectRatio=baseAspectRatio;
        if (whStyle!=null&&whStyle.aspectRatio!=null)whAspectRatio=Number(whStyle.aspectRatio);
        let width=parseInt(384*(whAspectRatio/baseAspectRatio));
        return width;
    }
    return (
        <StyledGridItem $whStyle={whStyle} className={`${styles.grid_item}`} {...props}>
            <StyledImgWrap $whStyle={whStyle} className={styles.game_img_wrap} onClick={(e)=>{
                // onEnterGame();
                // if (handleRoom)handleRoom(e,data);
                handleEnterRoom(e)
            }}>
                {/*<LazyLoadImage*/}
                {/*    src={data.img}*/}
                {/*    alt={"game-icon"}*/}
                {/*    effect={"blur"}*/}
                {/*    wrapperClassName={`lazy-image ${styles.game_img}`}*/}
                {/*/>*/}
                {/*<Imgix className={`lazyload ${styles.game_img}`} src={data.img} alt={"game-icon"} width={192}></Imgix>*/}
                <LazyImgix className={`lazyload ${styles.game_img}`} src={data.img} alt={"game-icon"} width={getImgixW()}></LazyImgix>
            </StyledImgWrap>
            <button className={styles.favorite_con} onClick={handleLike}>
                {
                    // like?(<LikeIcon></LikeIcon>):(<UNLikeIcon></UNLikeIcon>)
                    <SvgIcon className={`${styles.icon} ${like?styles.icon_active:''}`} herf={like?"icon_Favorites1":"icon_Favorites"}></SvgIcon>
                }
            </button>
        </StyledGridItem>
    )
}
export default GameItem;