From 5e43f78eacfbe5228f47882a9fcabdd3734598ea Mon Sep 17 00:00:00 2001
From: tangmingyou <234767776@qq.com>
Date: Wed, 29 Mar 2023 01:17:49 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8B=E6=B3=A8=E5=80=92=E8=AE=A1=E6=97=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
config/dev.js | 4 ++--
src/assets/icon/clock.svg | 1 +
src/assets/icon/clock_warn.svg | 1 +
src/pages/table/table.jsx | 41 +++++++++++++++++++++++++++++-----
src/pages/table/table.scss | 30 +++++++++++++++++++++++--
src/store/user.js | 2 +-
6 files changed, 68 insertions(+), 11 deletions(-)
create mode 100644 src/assets/icon/clock.svg
create mode 100644 src/assets/icon/clock_warn.svg
diff --git a/config/dev.js b/config/dev.js
index 6eda426..c641c82 100644
--- a/config/dev.js
+++ b/config/dev.js
@@ -10,8 +10,8 @@ module.exports = {
h5: {
devServer: {
//host: '0.0.0.0',
- host: '192.168.110.53',
- // host: '192.168.3.101',
+ // host: '192.168.110.53',
+ host: '192.168.3.102',
port: 10086,
// 设置代理来解决 H5 请求的跨域问题
proxy: {
diff --git a/src/assets/icon/clock.svg b/src/assets/icon/clock.svg
new file mode 100644
index 0000000..85a8b53
--- /dev/null
+++ b/src/assets/icon/clock.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/icon/clock_warn.svg b/src/assets/icon/clock_warn.svg
new file mode 100644
index 0000000..a8e7bfc
--- /dev/null
+++ b/src/assets/icon/clock_warn.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/pages/table/table.jsx b/src/pages/table/table.jsx
index 8e2703c..2ba9b9f 100644
--- a/src/pages/table/table.jsx
+++ b/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 :
-
- 29
+ 30 ? clockIcon : clockWarnIcon} />
+ {betSecondLimit}
{/* {
isIn(player.status, 4, 6)
@@ -513,8 +542,8 @@ class Table extends Component {
!isIn(selfPlayer.status, 4, 6)
? null
:
-
- 29
+ 30 ? clockIcon : clockWarnIcon} />
+ {betSecondLimit}
// : +{selfPlayer.chip}
// , {'filling-chip-l': selfPlayer.chip > 99}
diff --git a/src/pages/table/table.scss b/src/pages/table/table.scss
index e9936d9..b206025 100644
--- a/src/pages/table/table.scss
+++ b/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;
diff --git a/src/store/user.js b/src/store/user.js
index dd4ea90..ebd57e6 100644
--- a/src/store/user.js
+++ b/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}) => {