no message

src/App.js

@@ -41,7 +41,7 @@ import createCache from '@emotion/cache';
 import {BrowserRouter, HashRouter, Route, Routes, useLocation, useNavigate} from 'react-router-dom';
 import {ToastContainer} from 'react-toastify';
 import Layout from "@layout/Layout";
-import {getBFP, getFetchStatus, getUserID, getUserInfo} from '@features/mainSlice';
+import {getBFP, getFetchStatus, getHallServerUrl, getUserID, getUserInfo} from '@features/mainSlice';
 import {useDispatch, useSelector} from "react-redux";
 import {REQ_STATUS} from "@api/config";
 import {
@@ -81,6 +81,7 @@ const App = () => {
     // auto RTL support for Material-UI components and styled-components
 
     const plugins = direction === 'rtl' ? [rtlPlugin] : [];
+    const hallServerUrl=useSelector(getHallServerUrl);
     useGlobalClick();
     const muiTheme = createTheme({
         direction: direction,
@@ -147,7 +148,7 @@ const App = () => {
         //未初始化
         if (userID===-1)return;
         if (userID>0){
-            dispatch(connectHall());
+            dispatch(connectHall(hallServerUrl));
             localStorageSet(LOCAL_WHEEL_INVITE_CODE,"");
             localStorageSet(LOCAL_ACTIVITY_C,"");
             //Mail红点屏蔽
@@ -239,7 +240,6 @@ const App = () => {
         <CacheProvider value={cacheRtl}>
             <MuiThemeProvider theme={muiTheme}>
                 <ThemeProvider theme={{theme: theme}}>
-                    <DropCoins/>
                     <SidebarProvider>
                         <ThemeStyles/>
                         <ToastContainer theme={theme} autoClose={2500}

src/Global.js

@@ -52,4 +52,10 @@ global.setWDPass=(value)=>{
     localStorageSet(LOCAL_WD_PASS,value);
     localStorageSet(LOCAL_WD_PASS_SET_TIME,Date.now());
 }
+global.showDropCoins=()=>{
+    if (global.dropCoins)global.dropCoins.show();
+}
+global.hideDropCoins=()=>{
+    if (global.dropCoins)global.dropCoins.hide();
+}
 //wd pass

src/components/DropCoins.jsx

@@ -6,40 +6,79 @@ import Spring from '@components/Spring';
 // import ball from '@assets/logo.json';
 import logo from '@assets/dropcoin.json';
 import flycoin from '@assets/flycoin.json';
-import {useRef} from "react";
+import {useEffect, useRef, useState} from "react";
 import styled from "styled-components/macro";
 
-
+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)]
-    setTimeout(()=>{
-        coinRef.current.setSpeed(1.5);
-        coinRef.current.play()
-    },100)
-
-    coins.forEach((coin,i)=>{
-        setTimeout(()=>{
-            coin.current.play();
-            // coin.current.setSpeed(1.4+i*0.2);
-        },i*500)
-        setTimeout(()=>{
-            coin.current.play();
-            coin.current.setSpeed(0.9-(3-i)*0.1);
-        },i*500+100)
-    })
-
-
+    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()
+            },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 (
-        <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>
+        <>
+            {
+                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
+export default DropCoins;

src/features/actions/hallClient.js

@@ -9,8 +9,9 @@ const __playground_message_types=(message,dispatch)=>{
 
 }
 const handlePayFinish=(message,dispatch)=>{
-    dispatch(reqGameInfo);
-    dispatch(updatePayFinish);
+    dispatch(reqGameInfo());
+    dispatch(updatePayFinish(message));
+    global.showDropCoins();
 }
 const roger=(message,dispatch)=>{
     // console.log(message);
@@ -60,10 +61,11 @@ export const onHallMessage=(type,message)=>{
         }
     }
 }
-export const connectHall=()=>{
+export const connectHall=(hallServerUrl='')=>{
+    if (hallServerUrl==='')hallServerUrl=serverUrl;
     return connectServer({
         roomName:roomName,
-        serverUrl:serverUrl,
+        serverUrl:hallServerUrl,
         messageCB:onHallMessage,
         onRoomConnect:onHallConnect
     });

src/features/mainSlice.js

@@ -148,7 +148,12 @@ const reducerRoutes=(state,action)=>{
                 // global.dispatch(reqPayConfig(user));
             }
         }
-        Object.assign(state, {routes:state.routes,asyncRoutes:data,styles:styles,blocks:blocks,...generData,isLogin:isLogin,userInfo:userInfo});
+        let conf=json.conf;
+        let hallServerUrl='';
+        if (conf){
+            if (conf.hall)hallServerUrl=conf.hall;
+        }
+        Object.assign(state, {routes:state.routes,asyncRoutes:data,styles:styles,blocks:blocks,...generData,isLogin:isLogin,userInfo:userInfo,hallServerUrl:hallServerUrl});
     }
 }
 const routesStatus=(state,status,arg)=>{
@@ -337,7 +342,8 @@ export const Main=createSlice({
         gameInfoStatus:REQ_STATUS.NONE,
         customLeaveMsgStatus:REQ_STATUS.NONE,
         customServiceStatus:REQ_STATUS.NONE,
-        customerInfo:[]
+        customerInfo:[],
+        hallServerUrl:''
     },
     reducers: {
         logout:(state, action)=>{
@@ -530,6 +536,9 @@ export const getCustomStatus=(state)=>{
 export const getCustomServiceStatus=(state)=>{
     return state.main.customServiceStatus;
 }
+export const getHallServerUrl=(state)=>{
+    return state.main.hallServerUrl;
+}
 //数据获取
 export default Main.reducer;
 

src/layout/Layout.jsx

@@ -26,6 +26,7 @@ import WHallWheel from "@widgets/WCashWheel/WHallWheel/WHallWheel";
 import LoadingIn from "@components/Loading/LoadingIn";
 import WDPassBox from "@widgets/WWithdraw/PassBox/WDPassBox";
 import {ROUTE_PATH} from "@constants/routes";
+import DropCoins from "@components/DropCoins";
 const PageNotFound = lazy(() => import('@pages/PageNotFound'));
 
 const Layout=()=>{
@@ -109,6 +110,13 @@ const Layout=()=>{
             </>
         )
     }
+    const renderEffect=()=>{
+        return (
+            <>
+                <DropCoins/>
+            </>
+        )
+    }
     return (
       <>
           {
@@ -121,6 +129,9 @@ const Layout=()=>{
           {
               renderPop()
           }
+          {
+              renderEffect()
+          }
       </>
     );
 }

src/styles/_utils.scss

@@ -171,7 +171,9 @@
 }
 .top_view {
     position: absolute;
-    z-index: 1201;
+    inset: 0px;
+    z-index: var(--zindex-effect);
+    pointer-events: none;
 }
 
 .text-uppercase {

src/styles/_vars.scss

@@ -68,6 +68,7 @@ $width-desktop-big-max:1564px;
     --zindex-second:1000;
     --zindex-drawer:1200;
     --zindex-popup:1300;
+    --zindex-effect:1400;
     --coin-yellow:#edc349;
     //--progressierBg
     --progressierBg:var(--widget) !important;

src/widgets/WLangSelect/index.jsx

@@ -5,6 +5,7 @@ import SvgIcon from "@components/SvgIcon";
 import {useDispatch, useSelector} from "react-redux";
 import {isLogined} from "@features/mainSlice";
 import {reqChangeInfo} from "@features/api";
+import Popup from '@components/Popup';
 const i18n=global.i18n;
 
 const WLangSelect=()=>{
@@ -93,8 +94,22 @@ const WLangSelect=()=>{
             </MuiDrawer>
         )
     }
+    const renderDeskLang=()=>{
+        return (
+            <div className={`${styles.container_m}`}>
+                {renderHeader()}
+                {renderContent()}
+            </div>
+        )
+    }
     const renderDesktop=()=>{
-
+        return (
+            <Popup popupClass={styles.pop_con} open={isShowLang} onClose={()=>{
+                setIsShowLang(false);
+            }}>
+                {renderDeskLang()}
+            </Popup>
+        )
     }
     return (
         <>

src/widgets/WLangSelect/styles.module.scss

@@ -1,3 +1,7 @@
+.pop_con{
+  padding: 0rem;
+  background: var(--standard);
+}
 .container_m{
   display: flex;
   flex-direction: column;