拖动他丫的

package.json

@@ -55,6 +55,7 @@
     "react-copy-to-clipboard": "^5.1.0",
     "react-countup": "^6.5.3",
     "react-dom": "^18.2.0",
+    "react-draggable": "^4.4.6",
     "react-ga4": "^2.1.0",
     "react-grid-layout": "^1.3.4",
     "react-headroom": "^3.2.1",

src/widgets/WGame/index.jsx

@@ -1,5 +1,5 @@
 import styles from "./styles.module.scss";
-import {useEffect, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import {toast} from "react-toastify";
 import {useNavigate} from "react-router-dom";
 import {useLocation} from "react-use";
@@ -14,6 +14,7 @@ import {ROUTE_PATH} from "@constants/routes";
 import {useDispatch, useSelector} from "react-redux";
 import {reqGameInfo} from "@features/api";
 import {getHallConnState} from "@features/socketSlice";
+import Draggable from 'react-draggable'; // The default
 const i18n=global.i18n;
 
 const WGame=()=>{
@@ -26,6 +27,8 @@ const WGame=()=>{
     const isConnected=useSelector(getHallConnState);
     var gameURL="";
     const navigate=useNavigate();
+    const backBoxRef = useRef(null);
+    const [dragDeltaY,setDragDeltaY]=useState(0);
     const onBack=()=>{
         // dispatch(reqGameInfo());
         navigate(ROUTE_PATH.BACK);
@@ -66,42 +69,75 @@ const WGame=()=>{
     const handleLoadGame=()=>{
         setIsGameLoad(true);
     }
-    useEffect(() => {
+    const initGameEvent=()=>{
         const gameFrame = document.getElementById('game');
         if(gameFrame!=null){
             gameFrame.addEventListener('load', handleLoadGame);
         }
         window.addEventListener("message", receiveMessage, false);
+    }
+    const removeGameEvent=()=>{
+        const gameFrame = document.getElementById('game');
+        if(gameFrame!=null){
+            gameFrame.removeEventListener('load', handleLoadGame);
+        }
+        window.removeEventListener("message", receiveMessage);
+    }
+    useEffect(() => {
+        initGameEvent();
         return () => {
-            window.removeEventListener("message", receiveMessage);
-            if(gameFrame!=null){
-                gameFrame.removeEventListener('load', handleLoadGame);
-            }
+            removeGameEvent();
         };
     }, []);
+    useEffect(()=>{
+        if (!isConnected){
+            setIsGameLoad(false);
+        }
+    },[isConnected])
     const renderBackBox=()=>{
         return (
-            <div className={`${styles.backbox} ${openBox?styles.open:styles.close}`} onClick={()=>{
-                setOpenBox(!openBox);
-            }}>
-                <button className={styles.back_btn}>
-                    <Circlebg className={styles.back_bg}/>
-                    <Circlearrow className={`${styles.arrow} ${openBox?styles.a_open:styles.a_close}`}/>
-                </button>
-                <button className={styles.close_box} onClick={()=>{
-                    openMsgBox();
-                }}>
-                    <Boxbg className={styles.bg}/>
-                    <div className={styles.close_info}>
-                        <div>{i18n.t("game.back")}</div>
-                        <div className={styles.line}></div>
-                        <Boxclose className={styles.close}></Boxclose>
+            <Draggable
+                axis="y"
+                bounds="parent"
+                onStart={(e,ui)=>{
+                    setDragDeltaY(ui.y);
+                }}
+                onStop={(e, ui)=>{
+                    setDragDeltaY(Math.abs(ui.y-dragDeltaY));
+                }}
+            >
+                <div className={`${styles.dragbox}`}>
+                    <div ref={backBoxRef} className={`${styles.backbox} ${openBox ? styles.open : styles.close}`}
+                         onClick={()=>{
+                             setOpenBox(!openBox);
+                         }}
+                         onTouchEnd={(e) => {
+                             if (dragDeltaY<5){
+                                 setOpenBox(!openBox);
+                             }
+                         }}>
+                        <button className={styles.back_btn}>
+                            <Circlebg className={styles.back_bg}/>
+                            <Circlearrow className={`${styles.arrow} ${openBox ? styles.a_open : styles.a_close}`}/>
+                        </button>
+                        <button className={styles.close_box} onClick={()=>{
+                            openMsgBox();
+                        }} onTouchEnd={() => {
+                            openMsgBox();
+                        }}>
+                            <Boxbg className={styles.bg}/>
+                            <div className={styles.close_info}>
+                                <div>{i18n.t("game.back")}</div>
+                                <div className={styles.line}></div>
+                                <Boxclose className={styles.close}></Boxclose>
+                            </div>
+                        </button>
                     </div>
-                </button>
-            </div>
+                </div>
+            </Draggable>
         )
     }
-    const renderGame=()=>{
+    const renderGame = () => {
         return (
             <iframe
                 id={"game"}
@@ -115,18 +151,18 @@ const WGame=()=>{
             </iframe>
         )
     }
-    const openMsgBox=()=>{
-        let data={
-            title:i18n.t("game.msg_title"),
-            content:i18n.t("game.msg_content"),
-            sureCB:onBack,
-            sureLabel:i18n.t("game.back"),
-            cancelLabel:i18n.t("game.cancel")
+    const openMsgBox = () => {
+        let data = {
+            title: i18n.t("game.msg_title"),
+            content: i18n.t("game.msg_content"),
+            sureCB: onBack,
+            sureLabel: i18n.t("game.back"),
+            cancelLabel: i18n.t("game.cancel")
         }
         global.msgBoxShow(data)
     }
-    const renderLoading=()=>{
-        if (isGameLoad)return(<></>);
+    const renderLoading = () => {
+        if (isGameLoad) return (<></>);
         return (
             <div className={styles.loading}>
                 <LoadingScreen/>

src/widgets/WGame/styles.module.scss

@@ -10,7 +10,7 @@
     border: none;
     //flex: none;
   }
-  & .backbox{
+  & .dragbox{
     display: flex;
     position: fixed;
     top: 2.5rem;
@@ -18,7 +18,20 @@
     width: 17.6875rem;
     height: 3.2rem;
     z-index: var(--zindex-second);
-    overflow: hidden;
+    //overflow: hidden;
+  }
+  & .backbox{
+    display: flex;
+    //position: fixed;
+    position: absolute;
+    //top: 2.5rem;
+    //right: -14.5rem;
+    top: 0;
+    left: 0;
+    width: 17.6875rem;
+    height: 3.2rem;
+    //z-index: var(--zindex-second);
+    //overflow: hidden;
     &.open{
       transition: all .3s;
       transform: translate(-7.875rem);