|
|
@@ -4,7 +4,7 @@ import bg_2 from "@assets/gameroom/room_act.png";
|
|
|
import bg_3 from "@assets/gameroom/room_deact.png";
|
|
|
import {animated, useSpring} from '@react-spring/web';
|
|
|
import CSSTransition from "react-transition-group/CSSTransition";
|
|
|
-import React, {cloneElement, useEffect, useState} from "react";
|
|
|
+import React, {cloneElement, useEffect, useRef, useState} from "react";
|
|
|
import TransitionGroup from "react-transition-group/TransitionGroup";
|
|
|
import {useNavigate} from "react-router-dom";
|
|
|
import {formatCash, localStorageSet} from "@utils/helpers";
|
|
|
@@ -13,6 +13,7 @@ import {ROUTE_PATH} from "@constants/routes";
|
|
|
import styled from 'styled-components/macro';
|
|
|
import Button from "@mui/material/Button";
|
|
|
import Popup from "@components/Popup";
|
|
|
+import {useSpringRef} from "@react-spring/core";
|
|
|
const gameBgs=[null,bg_1,bg_2,bg_3,bg_2];
|
|
|
const fontColors=["","#bc9350","#208e3c","#bc9350","#208e3c"];
|
|
|
const i18n=global.i18n;
|
|
|
@@ -28,20 +29,24 @@ const GameRoom = ({open,data,height="5rem",mobile=false,user,onClose,...props})
|
|
|
const timeout=200;
|
|
|
const [show,setShow]=useState(open);
|
|
|
const navigate=useNavigate();
|
|
|
+ let fromStyle={opacity: 0, transform: 'scaleY(0)'};
|
|
|
+ let toStyle={opacity: 1, transform: 'scaleY(1)'};
|
|
|
let openAni=useSpring({
|
|
|
- from: {opacity: 0, transform: 'scaleY(0.5)'},
|
|
|
- to: {opacity: 1, transform: 'scaleY(1)'},
|
|
|
- config: {duration: timeout},
|
|
|
- })
|
|
|
+ from: fromStyle,
|
|
|
+ to: toStyle,
|
|
|
+ config: {duration: timeout},
|
|
|
+ })
|
|
|
let closeAni=useSpring({
|
|
|
- from: {opacity: 1, transform: 'scaleY(1)'},
|
|
|
- to: {opacity: 0, transform: 'scaleY(0.5)'},
|
|
|
+ from: toStyle,
|
|
|
+ to: fromStyle,
|
|
|
config: {duration: timeout},
|
|
|
})
|
|
|
+ const conRef=useRef();
|
|
|
+ // const [cstyle,setCstyle]=useState(null)
|
|
|
useEffect(()=>{
|
|
|
- return ()=>{
|
|
|
+ return ()=>{
|
|
|
|
|
|
- }
|
|
|
+ };
|
|
|
},[])
|
|
|
const lackCash=()=>{
|
|
|
let onSure=()=>{
|
|
|
@@ -55,15 +60,9 @@ const GameRoom = ({open,data,height="5rem",mobile=false,user,onClose,...props})
|
|
|
global.msgBoxShow(data)
|
|
|
}
|
|
|
const handleGame=(item)=>{
|
|
|
- let limit=item.value;
|
|
|
- let golds=0;
|
|
|
- if (user){
|
|
|
- golds=Number(user.Score)*global.CASH_BASE;
|
|
|
- limit=Number(limit);
|
|
|
- if (golds<limit){
|
|
|
- lackCash();
|
|
|
- return;
|
|
|
- }
|
|
|
+ if (checkLack(item)){
|
|
|
+ lackCash();
|
|
|
+ return;
|
|
|
}
|
|
|
let id=data.id;
|
|
|
let url=data.link;
|
|
|
@@ -74,6 +73,16 @@ const GameRoom = ({open,data,height="5rem",mobile=false,user,onClose,...props})
|
|
|
global.authLockPath=path;
|
|
|
navigate(path);
|
|
|
}
|
|
|
+ const checkLack=(item)=>{
|
|
|
+ if (user){
|
|
|
+ let golds=Number(user.Score)*global.CASH_BASE;
|
|
|
+ let limit=Number(item.value);
|
|
|
+ if (golds<limit){
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return false;
|
|
|
+ }
|
|
|
const renderMobile=()=>{
|
|
|
if (data==null)return (<></>);
|
|
|
let level_info=data.level_info;
|
|
|
@@ -86,12 +95,15 @@ const GameRoom = ({open,data,height="5rem",mobile=false,user,onClose,...props})
|
|
|
if (show)cstyle=openAni;
|
|
|
else cstyle=closeAni;
|
|
|
return (
|
|
|
- <animated.div className={styles.cotiner_m} style={cstyle}>
|
|
|
+ <animated.div ref={conRef} className={styles.cotiner_m} style={cstyle}>
|
|
|
<div className={styles.room_con}>
|
|
|
{
|
|
|
list.map((item, index) => {
|
|
|
+ let isLack=checkLack(item);
|
|
|
+ let color=isLack?fontColors[1]:fontColors[2];
|
|
|
+ let background=isLack?gameBgs[1]:gameBgs[2];
|
|
|
return (
|
|
|
- <StyledRoomButton color={fontColors[item.type]} background={gameBgs[item.type]} key={index} className={styles.room_item} style={{height: height}} onClick={(e)=>{
|
|
|
+ <StyledRoomButton color={color} background={background} key={index} className={styles.room_item} style={{height: height}} onClick={(e)=>{
|
|
|
e.stopPropagation();
|
|
|
handleGame(item);
|
|
|
}}>
|
|
|
@@ -126,8 +138,11 @@ const GameRoom = ({open,data,height="5rem",mobile=false,user,onClose,...props})
|
|
|
<div className={styles.room_con}>
|
|
|
{
|
|
|
list.map((item, index) => {
|
|
|
+ let isLack=checkLack(item);
|
|
|
+ let color=isLack?fontColors[1]:fontColors[2];
|
|
|
+ let background=isLack?gameBgs[1]:gameBgs[2];
|
|
|
return (
|
|
|
- <StyledRoomButton color={fontColors[item.type]} background={gameBgs[item.type]} key={index} className={`${styles.room_item} ${styles.room_item_desk}`} onClick={(e)=>{
|
|
|
+ <StyledRoomButton color={color} background={background} key={index} className={`${styles.room_item} ${styles.room_item_desk}`} onClick={(e)=>{
|
|
|
e.stopPropagation();
|
|
|
handleGame(item);
|
|
|
}}>
|