Browse Source

betting logic

master
tangmingyou 4 years ago
parent
commit
6e5ad6a267
  1. 14
      src/components/card.jsx
  2. 13
      src/components/style/card.scss
  3. 35
      src/pages/table/table.jsx
  4. 35
      src/pages/table/table.scss

14
src/components/card.jsx

@ -26,15 +26,18 @@ const suits = {
const dots = ["2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K", "A"];
function Card(props) {
const {w, h, dot, suit} = props;
const {w, h, dot, suit, flipIn} = props;
// dot == -1 dot == -2
const width = Taro.pxTransform(w || 42);
const height = Taro.pxTransform(h || 58);
return (
dot < 0 ? (
<View className={cnames("card", {'card-border': dot >= 0})} style={{width, height}}>
{
dot < 0 ? <Image style={{width, height}} src={dot === -1 ? cardBack1 : dot === -2 ? cardBack2 : cardBack3} /> : (
<View>
<Image style={{width, height}} src={dot === -1 ? cardBack1 : dot === -2 ? cardBack2 : cardBack3} />
</View>
) : (
<View className={cnames("card", {'card-border': dot >= 0, 'flip180': flipIn})} style={{width, height}}>
<View className="card-x">
<View className="dot" style={{
lineHeight: Taro.pxTransform(w / 3),
left: Taro.pxTransform(w / 8),
@ -49,10 +52,9 @@ function Card(props) {
}}/>
</View>
</View>
)
}
</View>
)
)
}
export default Card

13
src/components/style/card.scss

@ -1,3 +1,16 @@
@keyframes flip180 {
from {
transform: rotateY(90deg);
}
to {
transform: rotate(0deg);
}
}
.flip180 {
animation: flip180 1000ms;
}
.card {
border-radius: 5px;
position: relative;

35
src/pages/table/table.jsx

@ -63,7 +63,6 @@ class Table extends Component {
tableNo: 0,
stage: 0, // : 1;2;3;4;5,;6,,7
chip: 0,
roundTimes: 0,
playerId: 0,
masterId: 0,
bigBlindPos: -1,
@ -138,7 +137,6 @@ class Table extends Component {
tableNo: res.tableNo,
stage: res.gameStage,
chip: res.chip || 0,
roundTimes: res.roundTimes || 0,
masterId: res.masterId,
bigBlindPos: res.bigBlindPos,
smallBlindPos: res.smallBlindPos,
@ -287,7 +285,7 @@ class Table extends Component {
const {
inGame, playerId, tableNo,
stage, bigBlindPos, smallBlindPos,
chip, roundTimes, otherPlayers,
chip, otherPlayers,
selfIndex, selfPlayer,
bettingChip, betConfirmText, betSubmitLoading
} = this.state;
@ -332,17 +330,17 @@ class Table extends Component {
}
{
//
!inGame ? null : !isIn(player.status,4,6) ? null :
!inGame || !isIn(player.status,4,6) ? null :
<View className={cnames({"round-wrap-l": j%2===0,"round-wrap-r": j%2===1})}>
{
// TODO All In ...
j%2 === 0
? <View className="time-wrap">
<View className="time-wrap">
<Image src={timeIcon} />
<Text>29</Text>
</View>
{/* {
isIn(player.status, 4, 6)
?
: <View className={cnames('filling-chip', {'filling-chip-l': player.chip > 99})}><Text>+{player.chip}</Text></View>
}
} */}
</View>
}
{
@ -352,8 +350,8 @@ class Table extends Component {
: null
}
{/* 玩家手牌 */}
{existsCard(selfPlayer.handCard[0]) && <View className="card1"><Card w={38} h={48} dot={cardDot(player.handCard[0], player.status === 7 ? -2 : -1)} suit={cardSuit(player.handCard[0])} /></View>}
{existsCard(selfPlayer.handCard[0]) && <View className="card2"><Card w={38} h={48} dot={cardDot(player.handCard[1], player.status === 7 ? -2 : -1)} suit={cardSuit(player.handCard[1])} /></View>}
{player.id && existsCard(selfPlayer.handCard[0]) ? <View className={cnames("card1", {'translate-2l':j%2===0,'translate-2r':j%2===1})}><Card w={38} h={48} dot={cardDot(player.handCard[0], player.status === 7 ? -2 : -1)} suit={cardSuit(player.handCard[0])} /></View>: null}
{player.id && existsCard(selfPlayer.handCard[0]) ? <View className={cnames("card2", {'translate-2l':j%2===0,'translate-2r':j%2===1})}><Card w={38} h={48} dot={cardDot(player.handCard[1], player.status === 7 ? -2 : -1)} suit={cardSuit(player.handCard[1])} /></View> : null}
{/* 头像名称 */}
<View className={cnames("player", {'player-wait': !player.id || isIn(player.status, 3, 7)})}>
<View className="avatar-wrap">{!player.id ? null : <Image className="avatar" src={player.avatar || avatar} />}</View>
@ -381,8 +379,8 @@ class Table extends Component {
<View className="desktop-wrap">
<View className="desktop-cards">
{
this.state.publicCard.map((card, i) => (
<Card key={i} w={38} h={48} dot={stage<=1?-3 : cardDot(card, -3)} suit={cardSuit(card)} />
!inGame ? null : this.state.publicCard.map((card, i) => (
<Card flipIn={-3} key={i} w={38} h={48} dot={isIn(stage,1,2)?-3 : cardDot(card, -3)} suit={cardSuit(card)} />
))
}
</View>
@ -428,18 +426,19 @@ class Table extends Component {
<View className={'round-wrap-l round-wrap-self'}>
{
// TODO All In ...
true
? <View className="time-wrap time-wrap-self">
!isIn(selfPlayer.status, 4, 6)
? null
: <View className="time-wrap time-wrap-self">
<Image className="time-icon" src={timeIcon} />
<Text>29</Text>
</View>
: <View className={cnames('filling-chip filling-chip-self')}><Text>+{selfPlayer.chip}</Text></View>
// : <View className={cnames('filling-chip filling-chip-self')}><Text>+{selfPlayer.chip}</Text></View>
// , {'filling-chip-l': selfPlayer.chip > 99}
}
</View>
}
{existsCard(selfPlayer.handCard[0]) && <View className="hand-card1"><Card w={38} h={48} dot={cardDot(selfPlayer.handCard[0], -1)} suit={cardSuit(selfPlayer.handCard[0])} /></View>}
{existsCard(selfPlayer.handCard[1]) && <View className="hand-card2"><Card w={38} h={48} dot={cardDot(selfPlayer.handCard[1], -1)} suit={cardSuit(selfPlayer.handCard[1])} /></View>}
{existsCard(selfPlayer.handCard[0]) && <View className="hand-card1 translate-2b"><Card w={38} h={48} dot={cardDot(selfPlayer.handCard[0], -1)} suit={cardSuit(selfPlayer.handCard[0])} /></View>}
{existsCard(selfPlayer.handCard[1]) && <View className="hand-card2 translate-2b"><Card w={38} h={48} dot={cardDot(selfPlayer.handCard[1], -1)} suit={cardSuit(selfPlayer.handCard[1])} /></View>}
<View className="hand-five" style={{display:'none'}}>
{
existsCard(selfPlayer.handCard[0]) && [1, 2, 3, 4, 5].map((_, i) => (

35
src/pages/table/table.scss

@ -1,3 +1,38 @@
@keyframes translate2Left {
from {
transform: rotate(-20deg) translateX(50%) translateY(200%);
}
to {
transform: rotate(0deg) translateX(0%) translateY(0%);
}
}
@keyframes translate2Right {
from {
transform: rotate(20deg) translateX(-50%) translateY(200%);
}
to {
transform: rotate(0deg) translateX(0%) translateY(0%);
}
}
@keyframes translate2Bottom {
from {
transform: rotate(20deg) translateX(150%) translateY(-200%);
}
to {
transform: rotate(0deg) translateX(0%) translateY(0%);
}
}
.translate-2l {
animation: translate2Left 1000ms;
}
.translate-2r {
animation: translate2Right 1000ms;
}
.translate-2b {
animation: translate2Bottom 1000ms;
}
.tab {
.playerRow {
display: flex;

Loading…
Cancel
Save