open
/
texas-poker-front
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

下注倒计时

master
tangmingyou 3 years ago
parent
7ebadf7070
commit
5e43f78eac
6 changed files with 68 additions and 11 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      config/dev.js
  2. 1
      src/assets/icon/clock.svg
  3. 1
      src/assets/icon/clock_warn.svg
  4. 41
      src/pages/table/table.jsx
  5. 30
      src/pages/table/table.scss
  6. 2
      src/store/user.js

4
config/dev.js
Unescape View File

@ -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: {

1
src/assets/icon/clock.svg
Unescape View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

1
src/assets/icon/clock_warn.svg
Unescape View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

41
src/pages/table/table.jsx
Unescape View File

@ -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} />
<Text>29</Text>
<Image className={cnames("time-icon", {'time-icon-swing': betSecondLimit <= 30})} src={betSecondLimit > 30 ? clockIcon : clockWarnIcon} />
<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} />
<Text>29</Text>
<Image className={cnames("time-icon", {'time-icon-swing': betSecondLimit <= 30})} src={betSecondLimit > 30 ? clockIcon : clockWarnIcon} />
<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}

30
src/pages/table/table.scss
Unescape View File

@ -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;

2
src/store/user.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save