修改smalllist

src/components/GameSmallList/index.jsx

@@ -6,13 +6,37 @@ import {LazyLoadImage} from "react-lazy-load-image-component";
 import {useThemeProvider} from "@contexts/themeContext";
 import GameItem from "@components/GameItem";
 import SvgIcon from "@components/SvgIcon";
-
+import styled from 'styled-components/macro';
+import GameRoom from "@components/GameRoom";
+import {useWindowSize} from "react-use";
 const i18n=global.i18n;
-const GameSmallList=({data})=>{
-    const {isMobile} = useThemeProvider();
+const StyledRoomCon=styled.div`
+    position:absolute;
+    left: 0;
+    right: 0;
+    ${(props) => {
+        return `
+        top:${props.top}px;
+        `
+    }}
+`
+const objInfo={
+    timer:null
+}
+const GameSmallList=({data,user})=>{
+    const {isMobile,fontScale} = useThemeProvider();
     const gridListRef=useRef(null);
+    const gridListMRef=useRef(null);
+    const gridConRef=useRef(null);
     //0 滚动条顶部 1滚动条中间 2滚动条底部
     const [pageState, setPageState] = useState(0);
+    const [showPopRoom,setShowPopRoom]=useState(false);
+    const [selected,setSelected]=useState(-1);
+    const [roomRow,setRoomRow]=useState({});
+    const {width} = useWindowSize();
+    const roomHeight=5.2;
+    const rowGap=0.75;
+    const rowTop=roomHeight+rowGap*2;
     // data={
     //     title:"BC Originals",
     //     data:[
@@ -89,6 +113,73 @@ const GameSmallList=({data})=>{
             }
         }
     }
+    const getRoomConTop=()=>{
+        const gridList=gridListMRef.current;
+        const gridCon=gridConRef.current;
+        if (gridList!=null&&gridCon!=null){
+            let rectP=gridCon.getBoundingClientRect();
+            let rect=gridList.getBoundingClientRect();
+            let gridListTop=rect.top-rectP.top;
+            let height=0;
+            if (gridList.children&&gridList.children.length>0){
+                let first=gridList.children[0];
+                height=first.clientHeight;
+            }
+            let gap=rowGap*16*fontScale;
+            let top=gridListTop+height+gap*2;
+            return top;
+        }
+        return 0;
+    }
+    const handleReset=(e)=>{
+        setSelected(-1);
+        setRoomRow({});
+    }
+    const resetTimer=()=>{
+        if (objInfo.timer!=null){
+            clearTimeout(objInfo.timer);
+            objInfo.timer=null;
+        }
+    }
+    const checkSetRoom=(e,item)=>{
+        let roomRowItem={
+            data:item
+        }
+        if (roomRow.data!=null){
+            setRoomRow({
+                hide:true,
+                ...roomRowItem
+            });
+            resetTimer();
+            objInfo.timer=setTimeout(()=>{
+                setRoomRow(roomRowItem);
+            },10)
+        }
+        else setRoomRow(roomRowItem);
+    }
+    const handleSelect=(e,data)=>{
+        e.stopPropagation();
+        if (data.id===selected){
+            handleReset();
+        }
+        else
+        {
+            setSelected(data.id);
+            checkSetRoom(e,data);
+        }
+    }
+    const handlePopSelected=(e,data)=>{
+        e.stopPropagation();
+        setRoomRow({
+            row:-1,
+            data:data
+        });
+        setShowPopRoom(true);
+    }
+    const handlePopClose=()=>{
+        setRoomRow({});
+        setShowPopRoom(false);
+    }
     useEffect(() => {
         const gridList=gridListRef.current;
         if (gridList) {
@@ -98,6 +189,11 @@ const GameSmallList=({data})=>{
                 gridList.removeEventListener('scroll', handleScroll);
             };
         }
+        document.addEventListener("click",handleReset);
+        return ()=>{
+            document.removeEventListener("click",handleReset);
+            resetTimer();
+        }
     }, []); // 空数组表示只在组件挂载和卸载时执行
     const onChagePage=(change=1)=>{
         const gridList=gridListRef.current;
@@ -148,36 +244,68 @@ const GameSmallList=({data})=>{
     }
     const renderDeskList=()=>{
         return (
-            <div className={styles.grid_list} ref={gridListRef}>
-                {
-                    list.map((item,index)=>{
-                        return (
-                            <GameItem key={index} data={item}></GameItem>
-                        )
-                    })
-                }
-            </div>
+            <>
+                <div className={styles.grid_list} ref={gridListRef}>
+                    {
+                        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 renderMobileList=()=>{
+    const renderRoom = () => {
+        if (roomRow == null || roomRow.data == null) return (<></>);
+        if (roomRow.hide) return (<></>);
         return (
-            <div className={styles.grid_list_m} ref={gridListRef}>
-                {
-                    list.map((item,index)=>{
-                        return (
-                            <GameItem key={index} data={item}></GameItem>
-                        )
-                    })
-                }
-            </div>
+            <GameRoom open={true} data={roomRow.data} height={roomHeight + "rem"} mobile={true} user={user}></GameRoom>
+        )
+    }
+    const renderMobileList = () => {
+        let gridStyle = {}
+        if (selected !== -1) {
+            gridStyle.rowGap=`${rowTop}rem`;
+        }
+        return (
+            <>
+                <div className={styles.grid_list_m} ref={gridListMRef} style={gridStyle}>
+                    {
+                        list.map((item, index) => {
+                            let itemStyle={}
+                            if (selected!==-1){
+                                let row=index%2;
+                                if (item.id!==selected){
+                                    itemStyle.filter="brightness(60%)";
+                                }
+                                else
+                                {
+                                    itemStyle.transform="scale(1.02)";
+                                }
+                            }
+                            return (
+                                <GameItem key={index} data={item} handleRoom={(e,data)=>{
+                                    handleSelect(e,data);
+                                }} style={itemStyle}></GameItem>
+                            )
+                        })
+                    }
+                </div>
+                <StyledRoomCon top={getRoomConTop()}>
+                    {renderRoom()}
+                </StyledRoomCon>
+            </>
         )
     }
-    const renderList=()=>{
-        if (isMobile())return renderMobileList();
+    const renderList = () => {
+        if (isMobile()) return renderMobileList();
         else return renderDeskList();
     }
     return (
-        <div className={`w-100 ${styles.list_container}`}>
+        <div className={`w-100 ${styles.list_container}`} ref={gridConRef}>
             {renderTop()}
             {renderList()}
         </div>

src/components/GameSmallList/styles.module.scss

@@ -1,12 +1,13 @@
 .list_container{
   //margin-top: 2.75rem;
+  position: relative;
   & .grid_top{
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     width: 100%;
-    margin-bottom: 0.625rem;
+    //margin-bottom: 0.625rem;
     & .grid_tit{
       font-size: 1.25rem;
       font-weight: 600;
@@ -77,6 +78,7 @@
     scroll-behavior: smooth;
     overflow-x: auto;
     overflow-y: hidden;
+    padding-top: .75rem;
   }
   & .grid_list_m{
     --grid-gap: .75rem;
@@ -92,5 +94,8 @@
     scroll-behavior: smooth;
     overflow-x: auto;
     overflow-y: hidden;
+    transition: all var(--transition);
+    //z-index: 2;
+    padding-top: .75rem;
   }
 }

src/components/GameTabs/index.jsx

@@ -3,6 +3,8 @@ import React, {Fragment, Suspense, useEffect, useState} from "react";
 import symbol from '@assets/symbol-defs.svg';
 import AllWidgets from "@widgets/index";
 import SmallLoading from "@components/SmallLoading";
+import SvgIcon from "@components/SvgIcon";
+const i18n=global.i18n;
 const GameTabs=({data})=>{
     const [tabIndex, setTabIndex] = useState(1);
     // data={
@@ -57,10 +59,8 @@ const GameTabs=({data})=>{
                             <button key={index} onClick={()=>{
                                 changeTab(item.tabtype);
                             }} className={`${styles.tab_item} ${item.tabtype===tabIndex?styles.active:''}`}>
-                                <svg className={styles.icon}>
-                                    <use xlinkHref={`${symbol}#${item.icon}`} />
-                                </svg>
-                                {item.title}
+                                <SvgIcon className={styles.icon} herf={item.icon}/>
+                                {i18n.t(item.title)}
                             </button>
                         )
                     })

src/widgets/ModuleGameSmallList/index.jsx

@@ -1,12 +1,15 @@
 import React from "react";
 import GameSmallList from "@components/GameSmallList";
 import {useThemeProvider} from "@contexts/themeContext";
+import {useSelector} from "react-redux";
+import {getUserInfo} from "@features/mainSlice";
 
 const ModuleGameSmallList=({data})=>{
     const {isMobile} = useThemeProvider();
+    const user=useSelector(getUserInfo);
     return (
         <div className={``}>
-            <GameSmallList data={data}>
+            <GameSmallList data={data} user={user}>
 
             </GameSmallList>
         </div>