下注倒计时

config/dev.js

@@ -10,8 +10,8 @@ module.exports = {
   h5: {
     devServer: {
       //host: '0.0.0.0',
-      host: '192.168.110.53',
+      // host: '192.168.110.53',
-      // host: '192.168.3.101',
+      host: '192.168.3.102',
       port: 10086,
       // 设置代理来解决 H5 请求的跨域问题
       proxy: {

src/assets/icon/clock.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="40.02579116821289" height="33.35527420043945" viewBox="0 0 40.02579116821289 33.35527420043945"><g><path d="M28.9631,29.7525C26.3981,31.7282,23.2506,32.798,20.0129,32.7944C16.7757,32.7993,13.6282,31.7311,11.0627,29.7569L8.68339,32.6032C7.9368,33.4943,6.60855,33.6099,5.71926,32.8612L5.70814,32.8545C4.82085,32.1068,4.7055,30.7823,5.4502,29.8926L8.10302,26.7172C6.25448,24.1813,5.26075,21.123,5.26563,17.9849C5.26563,9.80632,11.8699,3.17538,20.0129,3.17538C28.1581,3.17538,34.7602,9.80632,34.7602,17.9849C34.7651,21.123,33.7713,24.1813,31.9228,26.7172L34.5756,29.8926C35.3205,30.782,35.2049,32.1073,34.3177,32.8545L34.3065,32.8612C33.4165,33.6101,32.0876,33.4946,31.3402,32.6032L28.9609,29.7569L28.9631,29.7525ZM20.5399,17.4557L20.5399,11.6342C20.5424,10.7598,19.8355,10.0489,18.9611,10.0465C18.0872,10.0465,17.3801,10.758,17.3801,11.6342L17.3801,19.0389C17.3801,19.915,18.0872,20.6244,18.9589,20.6244L24.2267,20.6244C25.0984,20.6244,25.8055,19.9128,25.8055,19.0389C25.808,18.1645,25.1011,17.4537,24.2267,17.4512L20.5399,17.4512L20.5399,17.4557ZM29.0743,2.02575C30.2671,0.732518,31.9469,-0.0021469,33.7062,0C37.2038,0.00735993,40.0332,2.8487,40.0258,6.34631C40.0288,8.51323,38.9263,10.532,37.1017,11.7009C35.7638,7.56728,32.8904,4.10487,29.0743,2.02797L29.0743,2.02575ZM10.9515,2.02575C7.13538,4.10264,4.26197,7.56505,2.92413,11.6986C1.10014,10.5302,-0.00222035,8.51244,0.0000222476,6.34631C-0.00735289,2.8487,2.82204,0.00735825,6.31965,0C8.14971,0,9.79744,0.780502,10.9515,2.02797L10.9515,2.02575Z" fill="#1BCE7D" fill-opacity="1"/></g></svg>

src/assets/icon/clock_warn.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="40.02579116821289" height="33.35527420043945" viewBox="0 0 40.02579116821289 33.35527420043945"><g><path d="M28.9631,29.7525C26.3981,31.7282,23.2506,32.798,20.0129,32.7944C16.7757,32.7993,13.6282,31.7311,11.0627,29.7569L8.68339,32.6032C7.9368,33.4943,6.60855,33.6099,5.71926,32.8612L5.70814,32.8545C4.82085,32.1068,4.7055,30.7823,5.4502,29.8926L8.10302,26.7172C6.25448,24.1813,5.26075,21.123,5.26563,17.9849C5.26563,9.80632,11.8699,3.17538,20.0129,3.17538C28.1581,3.17538,34.7602,9.80632,34.7602,17.9849C34.7651,21.123,33.7713,24.1813,31.9228,26.7172L34.5756,29.8926C35.3205,30.782,35.2049,32.1073,34.3177,32.8545L34.3065,32.8612C33.4165,33.6101,32.0876,33.4946,31.3402,32.6032L28.9609,29.7569L28.9631,29.7525ZM20.5399,17.4557L20.5399,11.6342C20.5424,10.7598,19.8355,10.0489,18.9611,10.0465C18.0872,10.0465,17.3801,10.758,17.3801,11.6342L17.3801,19.0389C17.3801,19.915,18.0872,20.6244,18.9589,20.6244L24.2267,20.6244C25.0984,20.6244,25.8055,19.9128,25.8055,19.0389C25.808,18.1645,25.1011,17.4537,24.2267,17.4512L20.5399,17.4512L20.5399,17.4557ZM29.0743,2.02575C30.2671,0.732518,31.9469,-0.0021469,33.7062,0C37.2038,0.00735993,40.0332,2.8487,40.0258,6.34631C40.0288,8.51323,38.9263,10.532,37.1017,11.7009C35.7638,7.56728,32.8904,4.10487,29.0743,2.02797L29.0743,2.02575ZM10.9515,2.02575C7.13538,4.10264,4.26197,7.56505,2.92413,11.6986C1.10014,10.5302,-0.00222035,8.51244,0.0000222476,6.34631C-0.00735289,2.8487,2.82204,0.00735825,6.31965,0C8.14971,0,9.79744,0.780502,10.9515,2.02797L10.9515,2.02575Z" fill="#EED87D" fill-opacity="1"/></g></svg>

src/pages/table/table.jsx

@@ -21,6 +21,8 @@ import sub1Icon from '@/assets/icon/sub-1.svg'
 import closeIcon from '@/assets/icon/close-1.svg'
 
 import timeIcon from '@/assets/icon/time-fill.svg'
+import clockIcon from '@/assets/icon/clock.svg'
+import clockWarnIcon from '@/assets/icon/clock_warn.svg'
 import crownIcon from '@/assets/icon/crown.svg'
 import crownDarkIcon from '@/assets/icon/crown_dark.svg'
 import bigBlindIcon from '@/assets/icon/big_blind.svg'
@@ -83,6 +85,9 @@ class Table extends Component {
       playerNoticeLines: [], // {line1: "+6",line2: "跟注",playerId: 1}
       playerNotice: null, //{line1: "+108",line2: "加注:12221126",line3: '跟注:6', playerId: 3},
       winsChip: {}, //{7: -20, 8: 40, 3: -20},
+
+      betSecondLimit: -1,
+      betSecondInterval: -1,
     }
   }
 
@@ -171,8 +176,29 @@ class Table extends Component {
     const players = res.players.map((player, index) => ({player, index}));
     const otherPlayers = players.filter(({player}) => player.id !== res.playerId);
     const self = players.find(({player}) => player.id === res.playerId);
+    const {player : bettingPlayer} = players.find(({player}) => isIn(player.status, 4, 6)) || {player: null};
     const {index: selfIndex, player: selfPlayer} = self || {player: {handCard: [], betRole: {}}};
 
+    // 出牌倒计时处理
+    let betSecondLimit = -1;
+    let betSecondInterval = -1;
+    console.log('bettingPlayer', bettingPlayer)
+    if (bettingPlayer && bettingPlayer.betRole) {
+      const {betTimeLimit: timeLimit, betSecondLimit: secondLimit} = bettingPlayer.betRole;
+      if (timeLimit) {
+        const timeSecondLimit = parseInt((timeLimit - Date.now()) / 1000);
+        betSecondLimit = timeSecondLimit - secondLimit <= 5 ? timeSecondLimit : secondLimit;
+        clearInterval(this.state.betSecondInterval);
+        betSecondInterval = setInterval(() => {
+          if (this.state.betSecondLimit <= 0) {
+            clearInterval(this.state.betSecondInterval);
+            return;
+          }
+          this.setState({betSecondLimit: this.state.betSecondLimit - 1})
+        }, 1000);
+      }
+    }
+
     this.setState({
       playerId: res.playerId,
       tableNo: res.tableNo,
@@ -181,14 +207,16 @@ class Table extends Component {
       masterId: res.masterId,
       bigBlindPos: res.bigBlindPos,
       smallBlindPos: res.smallBlindPos,
-
       players: res.players,
       publicCard: res.publicCard,
 
       otherPlayers,
       selfIndex,
       selfPlayer,
-      bettingChip: this.state.bettingChip !== 0 ? this.state.bettingChip : selfPlayer.betMin
+      bettingChip: this.state.bettingChip !== 0 ? this.state.bettingChip : selfPlayer.betMin,
+
+      betSecondLimit: betSecondLimit !== -1 ? betSecondLimit : this.state.betSecondLimit,
+      betSecondInterval: betSecondInterval !== -1 ? betSecondInterval : this.state.betSecondInterval,
     })
     // console.log('res game', res, res.publicCard[0].dot, ifEmpty(res.publicCard[0].dot, -3))
     window.publicCard = res.publicCard
@@ -351,6 +379,7 @@ class Table extends Component {
       selfIndex, selfPlayer,
       bettingChip, betConfirmText, betSubmitLoading,
       playerNotice: pn, winsChip,
+      betSecondLimit,
     } = this.state;
     const {betMin, betMax, betOpts} = selfPlayer.betRole || {};
     // console.log('props', this.props);
@@ -398,8 +427,8 @@ class Table extends Component {
                         !isIn(stage, 2,3,4,5) || !isIn(player.status, 6) ? null :
                         <View className={cnames({"round-wrap-l": j%2===0,"round-wrap-r": j%2===1})}>
                           <View className="time-wrap">
-                            <Image src={timeIcon} />
+                            <Image className={cnames("time-icon", {'time-icon-swing': betSecondLimit <= 30})} src={betSecondLimit > 30 ? clockIcon : clockWarnIcon} />
-                            <Text>29</Text>
+                            <Text className={cnames('time-second', {'time-wran': betSecondLimit <= 30})}>{betSecondLimit}</Text>
                           </View>
                           {/* {
                             isIn(player.status, 4, 6)
@@ -513,8 +542,8 @@ class Table extends Component {
                   !isIn(selfPlayer.status, 4, 6)
                   ? null
                   : <View className="time-wrap time-wrap-self">
-                    <Image className="time-icon" src={timeIcon} />
+                    <Image className={cnames("time-icon", {'time-icon-swing': betSecondLimit <= 30})} src={betSecondLimit > 30 ? clockIcon : clockWarnIcon} />
-                    <Text>29</Text>
+                    <Text className={cnames({'time-wran': betSecondLimit <= 30})}>{betSecondLimit}</Text>
                   </View>
                   // : <View className={cnames('filling-chip filling-chip-self')}><Text>+{selfPlayer.chip}</Text></View>
                   // , {'filling-chip-l': selfPlayer.chip > 99}

src/pages/table/table.scss

@@ -55,6 +55,25 @@
     transform: translateY(0%);
   }
 }
+@keyframes alarmSwing {
+  0% {
+    transform: rotate(10deg);
+  }
+
+  25% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(-10deg);
+  }
+  75% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(10deg);
+  }
+}
+
 
 .translate-2l {
   animation: translate2Left 1000ms;
@@ -177,18 +196,25 @@
     color: #1BCE7D;
     font-weight: bold;
     text-align: center;
-    line-height: 10px;
+    line-height: 14px;
+    display: flex;
+    flex-direction: column;
   }
   .time-icon {
     width: 36px;
     height: 36px;
   }
+  .time-icon-swing {
+    animation: alarmSwing 0.3s infinite;
+  }
   .time-wrap-self {
     margin-top: -46px;
     margin-left: -15px;
     line-height: 14px;
   }
-
+  .time-wran {
+    color: #EED87D;
+  }
   .notice-wrap-l,.notice-wrap-r {
     position: absolute;
     top: 0px;

src/store/user.js

@@ -8,7 +8,7 @@ const userSlice = createSlice({
     nickname: 'PromNick',
     avatar: '',
     defaultAvatar: 'https://img0.baidu.com/it/u=2477829979,2171947490&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
-    balance: 30000,
+    balance: 10086,
   },
   reducers: {
     setUserInfo: (state, {payload}) => {