no message

src/App.js

@@ -61,6 +61,8 @@ import FontFaceObserver from 'fontfaceobserver';
 import {getTurnplate} from "@features/turnplateSlice";
 import {LOCAL_ACTIVITY_C, LOCAL_WHEEL_INVITE_CODE} from "@constants/localkey";
 import LoadingFull from "@components/Loading/LoadingFull";
+import {ClickAwayListener} from "@mui/base/ClickAwayListener";
+import useGlobalClick from "@hooks/useGlobalClick";
 const App = () => {
     const dispatch = useDispatch();
     const fetchStatus=useSelector(getFetchStatus);
@@ -75,7 +77,7 @@ const App = () => {
     // auto RTL support for Material-UI components and styled-components
 
     const plugins = direction === 'rtl' ? [rtlPlugin] : [];
-
+    useGlobalClick();
     const muiTheme = createTheme({
         direction: direction,
     });

src/api/config.js

@@ -13,6 +13,8 @@ export const BASE_PREFIX="game/";
 
 // export const APP_AVATAR="https://cdn.moeda777.com/24680/assets/avatar/1/";
 export const APP_AVATAR="https://24680.imgix.net/24680/assets/avatar/2/"
+
+export const APP_IMGIX_URL="https://24680.imgix.net/24680/assets/"
 //路由
 export const APP_ROUTES=BASE_PREFIX+"routes";
 //page 模块

src/components/Imgix/BackgroundImgix.jsx

@@ -0,0 +1,17 @@
+import PropTypes from "prop-types";
+import ReactImgix, {Background} from "react-imgix";
+const BackgroundImgix = ({ src,imgixParams={},className="lazyload", ...props}) => {
+    if (imgixParams.width!=null||imgixParams.w!=null){
+        let devicePixelRatio=window.devicePixelRatio;
+        if (devicePixelRatio<1)devicePixelRatio=1;
+        if(imgixParams.width!=null)imgixParams.width=Math.ceil(imgixParams.width/devicePixelRatio);
+        if (imgixParams.w!=null)imgixParams.w=Math.ceil(imgixParams.w/devicePixelRatio);
+    }
+    return (
+        <Background className={className} src={src} imgixParams={imgixParams} {...props}></Background>
+    )
+}
+BackgroundImgix.propTypes = {
+    src:PropTypes.string.isRequired
+}
+export default BackgroundImgix;

src/components/Imgix/index.jsx

@@ -2,6 +2,11 @@ import PropTypes from "prop-types";
 import ReactImgix from "react-imgix";
 
 const Imgix = ({ src,alt="",className="lazyload", ...props}) => {
+    if (props.width!=null){
+        let devicePixelRatio=window.devicePixelRatio;
+        if (devicePixelRatio<1)devicePixelRatio=1;
+        props.width=Math.ceil(props.width/devicePixelRatio);
+    }
     return (
         <ReactImgix className={className} src={src} alt={alt} {...props}></ReactImgix>
     )

src/constants/routes.js

@@ -31,7 +31,8 @@ const ROUTE_PATH={
     RECHARGE_HISTORY:"#/rechargeHistory",
     WITHDRAW_REACORD:"#/withdrawRecord",
     SECURITY:"#/security",
-    MONEY_RAIN:"#/moneyrain"
+    MONEY_RAIN:"#/moneyrain",
+    AGENT_POLICY:"#/agentPolicy",
 }
 
 export {

src/db/routes.js

@@ -347,4 +347,17 @@ export const routes=[
         lpath:"#/signin",//登录path
         subs:[]
     },
+    {
+        path: "#/agentPolicy",
+        type: 1,
+        side: 0,
+        block:1,//块排序
+        title: "Agent Policy",
+        icon:"",
+        fill:";;",//icon 颜色 默认 选中 本身颜色
+        component:"agentPolicy",
+        login:0,//0,1 检不检查登录
+        lpath:"#/signin",//登录path
+        subs:[]
+    },
 ]

src/fonts/arialnarrow/style.css

@@ -0,0 +1,4 @@
+@font-face {
+    font-family: 'ArialNarrow-Bold';
+    src: url('../../fonts/arialnarrow/arialnarrow_bold.ttf')
+}

src/hooks/useGlobalClick.js

@@ -0,0 +1,43 @@
+import {useEffect} from "react";
+
+const useGlobalClick = () => {
+    const checkIsButton=(target)=>{
+        let tagName=target.tagName.toLowerCase();
+        if (tagName==="button"||tagName==="a"){
+            return target;
+        }
+        let buttons=document.getElementsByTagName("button");
+        let alist=document.getElementsByTagName("a");
+        let checkList=[buttons,alist];
+        if (checkList){
+            for (let i = 0; i < checkList.length; i++) {
+                let btns=checkList[i];
+                if (btns){
+                    for (let j = 0; j < btns.length; j++) {
+                        let button=btns[j];
+                        if (button.contains(target)){
+                            return button;
+                        }
+                    }
+                }
+            }
+        }
+
+        return null;
+    }
+    const onHandleClick=(e)=>{
+        let button=checkIsButton(e.target);
+        if (button){
+            let clickAudio=button.getAttribute("clickAudio");
+            if (clickAudio===false)return;
+        }
+    }
+    useEffect(()=>{
+        document.addEventListener("click",onHandleClick,true);
+        return ()=>{
+            document.removeEventListener("click",onHandleClick,true);
+        }
+    },[])
+    return {}
+}
+export default useGlobalClick;

src/locales/languages/en_US.json

@@ -459,5 +459,18 @@
       "max_drop": "Max drop ",
       "already_collect": "Already collected"
     }
+  },
+  "agentPolicy": {
+    "step_des_1": "Members registered through your referral link will become your direct agents.",
+    "step_des_2": "Members registered through any subordinate's referral link will become members of your team, and all game revenue generated will count towards your performance.",
+    "step_des_3": "Consulting the commission table, your income is calculated by deducting the commission from direct agents. The higher the level, the higher the commission percentage.",
+    "example": "Example",
+    "team_info": {
+      "title": "Total team volume as A performance",
+      "des_1": "Today's performance from A\n200,000 Level 22",
+      "des_2": "Today's performance from B\n50,000 Level 15",
+      "des_3": "Today's performance from C\n20,000 Level 12",
+      "title_1": "Today's earnings of A = 19,400"
+    }
   }
 }

src/pages/AgentPolicy.jsx

@@ -0,0 +1,9 @@
+import WAgentPolicy from "@widgets/WAgentPolicy";
+import React from "react";
+
+const AgentPolicy = ({...props}) => {
+    return (
+        <WAgentPolicy {...props}/>
+    )
+}
+export default AgentPolicy;

src/pages/index.jsx

@@ -23,6 +23,7 @@ const RechargeHistory=lazy(()=>import("@pages/RechargeHistory"));
 const WithdrawRecord=lazy(()=>import("@pages/WithdrawRecord"));
 const Security=lazy(()=>import("@pages/Security"));
 const MoneyRain=lazy(()=>import("@pages/MoneyRain"));
+const AgentPolicy=lazy(()=>import("@pages/AgentPolicy"));
 export default {
     ModulePage:ModulePage,
     Home:Home,
@@ -44,7 +45,8 @@ export default {
     rechargeHistory:RechargeHistory,
     withdrawRecord:WithdrawRecord,
     security:Security,
-    moneyrain:MoneyRain
+    moneyrain:MoneyRain,
+    agentPolicy:AgentPolicy,
 }
 export const Header={
     deposit: DepositHeader,

src/style.scss

@@ -10,4 +10,5 @@
 @import "fonts/swisscbt/style.css";
 @import "fonts/roboto/style.css";
 @import "fonts/myriadpro/style.css";
+@import "fonts/arialnarrow/style.css";
 @import "styles/swipeable";

src/utils/helpers.js

@@ -6,6 +6,7 @@ import dayjs from 'dayjs';
 
 // constants
 import CLUBS from '@constants/clubs';
+import React from "react";
 
 // represent large numbers in a shortened format
 export const numFormatter = (num, decimals = 2) => {
@@ -56,9 +57,6 @@ export const preventDefault = () => {
     document.querySelectorAll('a[href="#"]').forEach(a => {
         a.addEventListener('click', e => e.preventDefault());
     });
-    document.addEventListener("click",(e)=>{
-        // console.log(e);
-    })
 }
 
 // get club info by id

src/widgets/WAgentPolicy/index.jsx

@@ -0,0 +1,82 @@
+import styles from './styles.module.scss';
+import BackgroundImgix from "@components/Imgix/BackgroundImgix";
+import {APP_IMGIX_URL} from "@api/config";
+import LazyImgix from "@components/Imgix/LazyImgix";
+const i18n=global.i18n;
+const WAgentPolicy=({close})=>{
+    const titlePath=require(`@assets/agent/titls_${i18n.language}.png`);
+    const stepList=Array.from({ length: 3 }, (_, index) => index+1);
+    const renderStepList=()=>{
+        return (
+            <div className={styles.step_con}>
+                {
+                    stepList.map((item,index)=>{
+                        return (
+                            <div key={index} className={styles.step_item}>
+                                <img src={require(`@assets/agent/${item}.png`)}/>
+                                {i18n.t(`agentPolicy.step_des_${item}`)}
+                            </div>
+                        )
+                    })
+                }
+            </div>
+        )
+    }
+    const renderExample=()=>{
+        return (
+            <div className={styles.example_con}>
+                {i18n.t("agentPolicy.example")}
+                {/*<img src={require("@assets/agent/pt1.png")}/>*/}
+                <LazyImgix src={APP_IMGIX_URL+"bg/agent/pt1.png"} width={881}></LazyImgix>
+            </div>
+        )
+    }
+    const renderTeamInfo=()=>{
+        return (
+            <div className={styles.team_con}>
+                <span className={styles.title}>
+                    {i18n.t("agentPolicy.team_info.title")}
+                </span>
+                <div className={styles.des_info}>
+                    <span>{i18n.t("agentPolicy.team_info.des_1")}</span>
+                    <span className={styles.color_2}>{i18n.t("agentPolicy.team_info.des_2")}</span>
+                    <span className={styles.color_3}>{i18n.t("agentPolicy.team_info.des_3")}</span>
+                </div>
+                <div className={styles.calculate_info}>
+                    <span className={`${styles.title_1} ${styles.color_4}`}>
+                        {i18n.t("agentPolicy.team_info.title_1")}
+                    </span>
+                    <div className={styles.info_num}>
+                        <span>{"200,000 X 4%"}</span>
+                        <span className={styles.color_5}>{"-"}</span>
+                        <span className={styles.color_2}>{"50,000 X 2%"}</span>
+                        <span className={styles.color_5}>{"-"}</span>
+                        <span className={styles.color_3}>{"20,000 X 3%"}</span>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+    return (
+        <div className={styles.container}>
+            <div className={styles.content_bg}>
+                {/*<div className={styles.title_bg}>*/}
+                {/*    <img className={styles.title} src={titlePath}/>*/}
+                {/*</div>*/}
+                <BackgroundImgix className={styles.title_bg} src={APP_IMGIX_URL+"bg/agent/titlebg.png"} imgixParams={{width:1125}}>
+                    <img className={styles.title} src={titlePath}/>
+                </BackgroundImgix>
+                <div className={styles.bottom_bg}></div>
+            </div>
+            <div className={styles.content}>
+                <div className={styles.bg_gap}></div>
+                <div className={styles.detail_con}>
+                    {renderStepList()}
+                    {renderExample()}
+                    {renderTeamInfo()}
+                </div>
+            </div>
+        </div>
+    )
+}
+export default WAgentPolicy;

src/widgets/WAgentPolicy/styles.module.scss

@@ -0,0 +1,135 @@
+$title_bg:"./../../assets/agent/titlebg.png";
+.container{
+  width: 100%;
+  min-height: 100%;
+  position: relative;
+  background-image: linear-gradient(to bottom, #161a2d, #35373f);
+}
+.content{
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  position: relative;
+  z-index: 1;
+  & .bg_gap{
+    width: 100%;
+    aspect-ratio: 1125/1060;
+  }
+  & .detail_con{
+    display: flex;
+    flex-direction: column;
+    padding: 1rem 1.5rem 1.5rem 1.5rem;
+    gap: 2rem;
+    & .step_con{
+      display: flex;
+      flex-direction: column;
+      font-size: 1rem;
+      color:#fff;
+      text-align: center;
+      gap:1rem;
+      & .step_item{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        img{
+          width: 2.5rem;
+        }
+      }
+    }
+    & .example_con{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      color: #fff;
+      font-size: 1.2rem;
+      font-weight: bold;
+      gap: 1rem;
+      img{
+        width: 86%;
+        height: auto;
+      }
+    }
+    & .team_con{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0.5rem;
+      color: #7f99ff;
+      font-size: 0.9rem;
+      & .color_1{
+        color: #7f99ff;
+      }
+      & .color_2{
+        color: #ffa561;
+      }
+      & .color_3{
+        color: #5de73e;
+      }
+      & .color_4{
+        color: #7f86ff;
+      }
+      & .color_5{
+        color: #5ec8ff;
+      }
+      & .title{
+        font-size: 1rem;
+        font-weight: 700;
+      }
+      & .title_1{
+        font-size: 1.1rem;
+        font-weight: bold;
+      }
+      & .des_info{
+        display: flex;
+        flex-direction: column;
+        text-align: left;
+        font-weight: 600;
+        gap: 0.25rem;
+        white-space: pre-line;
+        word-wrap: break-word;
+        word-break: break-all;
+      }
+      & .calculate_info{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        padding: 0.5rem;
+        background-color: #282a2f;
+        gap: 0.3rem;
+        & .info_num{
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 0.25rem;
+          font-weight: 600;
+        }
+      }
+    }
+  }
+}
+.content_bg{
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  position: absolute;
+  z-index: 0;
+  top: 0;
+  bottom: 0;
+  & .title_bg{
+    width: 100%;
+    aspect-ratio: 1125/1600;
+    //background-image: url($title_bg);
+    background-size:100% auto;
+    background-repeat: no-repeat;
+    & .title{
+      margin-top: 62%;
+    }
+  }
+  & .bottom_bg{
+    margin-top: -1px;
+    flex: 1;
+    background-image: linear-gradient(to bottom, #1d2130, #35373f);
+  }
+}

src/widgets/WPromotion/index.jsx

@@ -5,6 +5,8 @@ import icon_1 from "@assets/promotion/icon_1.svg";
 import banner_1 from "@assets/promotion/banner_1.png";
 import icon_2 from "@assets/promotion/icon_2.svg";
 import banner_2 from "@assets/promotion/banner_2.png";
+import icon_3 from "@assets/promotion/icon_3.svg";
+import banner_3 from "@assets/promotion/banner_3.png";
 import {useNavigate} from "react-router-dom";
 import {useDispatch, useSelector} from "react-redux";
 import {getRedPackInfo} from "@features/redpackSlice";
@@ -13,12 +15,14 @@ import {reqRedpackCheck} from "@features/api";
 const icons=[
     null,
     icon_1,
-    icon_2
+    icon_2,
+    icon_3
 ]
 const banners=[
     null,
     banner_1,
-    banner_2
+    banner_2,
+    banner_3
 ]
 const WPromotion=({close})=>{
     const navigate=useNavigate();
@@ -38,6 +42,13 @@ const WPromotion=({close})=>{
             icon:"",
             banner:"",
             link:"#/moneyrain",
+        },
+        {
+            id:3,
+            title:"Agent",
+            icon:"",
+            banner:"",
+            link:"#/agentPolicy",
         }
     ]
     useEffect(()=>{
@@ -80,7 +91,7 @@ const WPromotion=({close})=>{
                     <div className={styles.left}>
                         <div className={styles.icon_con}>
                             <img className={"iconshake"} src={icons[item.id]}/>
-                            <div className={styles.red_dot}></div>
+                            {/*<div className={styles.red_dot}></div>*/}
                         </div>
                     </div>
                     <div className={styles.right}>