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}) => {