big small blind render

src/api/api.js

@@ -5,3 +5,5 @@ export const doLogin = params => post('/api/auth/authorize', params)
 export const fetchOpMap = () => get('/api/conn/opMap')
 
 export const fetchLobbyView = () => get('/api/game/lobby')
+
+export const fetchRouteWs = () => get('/api/conn/route_ws')

src/api/proto.js

@@ -4772,6 +4772,8 @@ export const api = $root.api = (() => {
          * @property {number|null} [chip] ResGameFullStatus chip
          * @property {number|null} [roundTimes] ResGameFullStatus roundTimes
          * @property {number|Long|null} [playerId] ResGameFullStatus playerId
+         * @property {number|null} [bigBlindPos] ResGameFullStatus bigBlindPos
+         * @property {number|null} [smallBlindPos] ResGameFullStatus smallBlindPos
          * @property {Array.<api.ICard>|null} [publicCard] ResGameFullStatus publicCard
          * @property {Array.<api.ITablePlayer>|null} [players] ResGameFullStatus players
          */
@@ -4841,6 +4843,22 @@ export const api = $root.api = (() => {
          */
         ResGameFullStatus.prototype.playerId = $util.Long ? $util.Long.fromBits(0,0,false) : 0;
 
+        /**
+         * ResGameFullStatus bigBlindPos.
+         * @member {number} bigBlindPos
+         * @memberof api.ResGameFullStatus
+         * @instance
+         */
+        ResGameFullStatus.prototype.bigBlindPos = 0;
+
+        /**
+         * ResGameFullStatus smallBlindPos.
+         * @member {number} smallBlindPos
+         * @memberof api.ResGameFullStatus
+         * @instance
+         */
+        ResGameFullStatus.prototype.smallBlindPos = 0;
+
         /**
          * ResGameFullStatus publicCard.
          * @member {Array.<api.ICard>} publicCard
@@ -4893,12 +4911,16 @@ export const api = $root.api = (() => {
                 writer.uint32(/* id 5, wireType 0 =*/40).int32(message.roundTimes);
             if (message.playerId != null && Object.hasOwnProperty.call(message, "playerId"))
                 writer.uint32(/* id 6, wireType 0 =*/48).int64(message.playerId);
+            if (message.bigBlindPos != null && Object.hasOwnProperty.call(message, "bigBlindPos"))
+                writer.uint32(/* id 7, wireType 0 =*/56).int32(message.bigBlindPos);
+            if (message.smallBlindPos != null && Object.hasOwnProperty.call(message, "smallBlindPos"))
+                writer.uint32(/* id 8, wireType 0 =*/64).int32(message.smallBlindPos);
             if (message.publicCard != null && message.publicCard.length)
                 for (let i = 0; i < message.publicCard.length; ++i)
-                    $root.api.Card.encode(message.publicCard[i], writer.uint32(/* id 9, wireType 2 =*/74).fork()).ldelim();
+                    $root.api.Card.encode(message.publicCard[i], writer.uint32(/* id 14, wireType 2 =*/114).fork()).ldelim();
             if (message.players != null && message.players.length)
                 for (let i = 0; i < message.players.length; ++i)
-                    $root.api.TablePlayer.encode(message.players[i], writer.uint32(/* id 10, wireType 2 =*/82).fork()).ldelim();
+                    $root.api.TablePlayer.encode(message.players[i], writer.uint32(/* id 15, wireType 2 =*/122).fork()).ldelim();
             return writer;
         };
 
@@ -4957,13 +4979,21 @@ export const api = $root.api = (() => {
                         message.playerId = reader.int64();
                         break;
                     }
-                case 9: {
+                case 7: {
+                        message.bigBlindPos = reader.int32();
+                        break;
+                    }
+                case 8: {
+                        message.smallBlindPos = reader.int32();
+                        break;
+                    }
+                case 14: {
                         if (!(message.publicCard && message.publicCard.length))
                             message.publicCard = [];
                         message.publicCard.push($root.api.Card.decode(reader, reader.uint32()));
                         break;
                     }
-                case 10: {
+                case 15: {
                         if (!(message.players && message.players.length))
                             message.players = [];
                         message.players.push($root.api.TablePlayer.decode(reader, reader.uint32()));
@@ -5022,6 +5052,12 @@ export const api = $root.api = (() => {
             if (message.playerId != null && message.hasOwnProperty("playerId"))
                 if (!$util.isInteger(message.playerId) && !(message.playerId && $util.isInteger(message.playerId.low) && $util.isInteger(message.playerId.high)))
                     return "playerId: integer|Long expected";
+            if (message.bigBlindPos != null && message.hasOwnProperty("bigBlindPos"))
+                if (!$util.isInteger(message.bigBlindPos))
+                    return "bigBlindPos: integer expected";
+            if (message.smallBlindPos != null && message.hasOwnProperty("smallBlindPos"))
+                if (!$util.isInteger(message.smallBlindPos))
+                    return "smallBlindPos: integer expected";
             if (message.publicCard != null && message.hasOwnProperty("publicCard")) {
                 if (!Array.isArray(message.publicCard))
                     return "publicCard: array expected";
@@ -5074,6 +5110,10 @@ export const api = $root.api = (() => {
                     message.playerId = object.playerId;
                 else if (typeof object.playerId === "object")
                     message.playerId = new $util.LongBits(object.playerId.low >>> 0, object.playerId.high >>> 0).toNumber();
+            if (object.bigBlindPos != null)
+                message.bigBlindPos = object.bigBlindPos | 0;
+            if (object.smallBlindPos != null)
+                message.smallBlindPos = object.smallBlindPos | 0;
             if (object.publicCard) {
                 if (!Array.isArray(object.publicCard))
                     throw TypeError(".api.ResGameFullStatus.publicCard: array expected");
@@ -5125,6 +5165,8 @@ export const api = $root.api = (() => {
                     object.playerId = options.longs === String ? long.toString() : options.longs === Number ? long.toNumber() : long;
                 } else
                     object.playerId = options.longs === String ? "0" : 0;
+                object.bigBlindPos = 0;
+                object.smallBlindPos = 0;
             }
             if (message.inGame != null && message.hasOwnProperty("inGame"))
                 object.inGame = message.inGame;
@@ -5141,6 +5183,10 @@ export const api = $root.api = (() => {
                     object.playerId = options.longs === String ? String(message.playerId) : message.playerId;
                 else
                     object.playerId = options.longs === String ? $util.Long.prototype.toString.call(message.playerId) : options.longs === Number ? new $util.LongBits(message.playerId.low >>> 0, message.playerId.high >>> 0).toNumber() : message.playerId;
+            if (message.bigBlindPos != null && message.hasOwnProperty("bigBlindPos"))
+                object.bigBlindPos = message.bigBlindPos;
+            if (message.smallBlindPos != null && message.hasOwnProperty("smallBlindPos"))
+                object.smallBlindPos = message.smallBlindPos;
             if (message.publicCard && message.publicCard.length) {
                 object.publicCard = [];
                 for (let j = 0; j < message.publicCard.length; ++j)
@@ -5195,6 +5241,7 @@ export const api = $root.api = (() => {
          * @property {string|null} [avatar] TablePlayer avatar
          * @property {number|null} [chip] TablePlayer chip
          * @property {number|null} [status] TablePlayer status
+         * @property {number|null} [lastStatus] TablePlayer lastStatus
          * @property {boolean|null} [master] TablePlayer master
          * @property {Array.<api.ICard>|null} [handCard] TablePlayer handCard
          */
@@ -5263,6 +5310,14 @@ export const api = $root.api = (() => {
          */
         TablePlayer.prototype.status = 0;
 
+        /**
+         * TablePlayer lastStatus.
+         * @member {number} lastStatus
+         * @memberof api.TablePlayer
+         * @instance
+         */
+        TablePlayer.prototype.lastStatus = 0;
+
         /**
          * TablePlayer master.
          * @member {boolean} master
@@ -5315,11 +5370,13 @@ export const api = $root.api = (() => {
                 writer.uint32(/* id 5, wireType 0 =*/40).int32(message.chip);
             if (message.status != null && Object.hasOwnProperty.call(message, "status"))
                 writer.uint32(/* id 6, wireType 0 =*/48).int32(message.status);
+            if (message.lastStatus != null && Object.hasOwnProperty.call(message, "lastStatus"))
+                writer.uint32(/* id 7, wireType 0 =*/56).int32(message.lastStatus);
             if (message.master != null && Object.hasOwnProperty.call(message, "master"))
-                writer.uint32(/* id 7, wireType 0 =*/56).bool(message.master);
+                writer.uint32(/* id 8, wireType 0 =*/64).bool(message.master);
             if (message.handCard != null && message.handCard.length)
                 for (let i = 0; i < message.handCard.length; ++i)
-                    $root.api.Card.encode(message.handCard[i], writer.uint32(/* id 8, wireType 2 =*/66).fork()).ldelim();
+                    $root.api.Card.encode(message.handCard[i], writer.uint32(/* id 15, wireType 2 =*/122).fork()).ldelim();
             return writer;
         };
 
@@ -5379,10 +5436,14 @@ export const api = $root.api = (() => {
                         break;
                     }
                 case 7: {
-                        message.master = reader.bool();
+                        message.lastStatus = reader.int32();
                         break;
                     }
                 case 8: {
+                        message.master = reader.bool();
+                        break;
+                    }
+                case 15: {
                         if (!(message.handCard && message.handCard.length))
                             message.handCard = [];
                         message.handCard.push($root.api.Card.decode(reader, reader.uint32()));
@@ -5441,6 +5502,9 @@ export const api = $root.api = (() => {
             if (message.status != null && message.hasOwnProperty("status"))
                 if (!$util.isInteger(message.status))
                     return "status: integer expected";
+            if (message.lastStatus != null && message.hasOwnProperty("lastStatus"))
+                if (!$util.isInteger(message.lastStatus))
+                    return "lastStatus: integer expected";
             if (message.master != null && message.hasOwnProperty("master"))
                 if (typeof message.master !== "boolean")
                     return "master: boolean expected";
@@ -5487,6 +5551,8 @@ export const api = $root.api = (() => {
                 message.chip = object.chip | 0;
             if (object.status != null)
                 message.status = object.status | 0;
+            if (object.lastStatus != null)
+                message.lastStatus = object.lastStatus | 0;
             if (object.master != null)
                 message.master = Boolean(object.master);
             if (object.handCard) {
@@ -5528,6 +5594,7 @@ export const api = $root.api = (() => {
                 object.avatar = "";
                 object.chip = 0;
                 object.status = 0;
+                object.lastStatus = 0;
                 object.master = false;
             }
             if (message.robot != null && message.hasOwnProperty("robot"))
@@ -5545,6 +5612,8 @@ export const api = $root.api = (() => {
                 object.chip = message.chip;
             if (message.status != null && message.hasOwnProperty("status"))
                 object.status = message.status;
+            if (message.lastStatus != null && message.hasOwnProperty("lastStatus"))
+                object.lastStatus = message.lastStatus;
             if (message.master != null && message.hasOwnProperty("master"))
                 object.master = message.master;
             if (message.handCard && message.handCard.length) {

src/api/websocket.js

@@ -1,7 +1,7 @@
 import store from '@/store/index'
 
 import proto from '@/api/proto';
-import { fetchOpMap } from '@/api/api'
+import { fetchOpMap, fetchRouteWs } from '@/api/api'
 import { getStorage, removeStorage } from '@/utils/storage';
 import { showToast } from '@/utils/application';
 import { setUserInfo } from '@/store/user'
@@ -20,7 +20,7 @@ const websocket = {
   // 消息监听列表
   msgListener: {}, // {op: func}
   waitInitCalls: [],
-  init(token, { offset, opFail, opSuccess, opPathMap, nameOpMap }) {
+  init(token, { offset, opFail, opSuccess, opPathMap, nameOpMap }, { wsAddr }) {
 
     // TODO 连接状态判定
     this.offset = offset || 0;
@@ -30,7 +30,7 @@ const websocket = {
     this.nameOpMap = nameOpMap || {};
     // window.proto = proto;
 
-    const ws = new WebSocket("ws://localhost:9999/api/conn/ws")
+    const ws = new WebSocket(`ws://${wsAddr}/api/conn/ws`)
     this.conn = ws
     console.log(this)
     ws.binaryType = 'arraybuffer'
@@ -184,8 +184,8 @@ export const sendPromise = function(msg) {
     return;
   }
   // console.log('token', token)
-  const opMap = await fetchOpMap()
+  const [opMap, wsRes] = await Promise.all([fetchOpMap(), fetchRouteWs()]);
-  websocket.init(token, opMap.data)
+  websocket.init(token, opMap.data, wsRes.data);
 
   window.websocket = websocket;
 })()

src/assets/icon/crown.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="24" height="21.51313591003418" viewBox="0 0 24 21.51313591003418"><g style="mix-blend-mode:passthrough"><path d="M6.42055,7.00674L1.73386,3.88229C1.37187,3.64153,0.902992,3.63293,0.532412,3.86026C0.161831,4.08759,-0.0429781,4.50945,0.00760252,4.94125L1.84099,20.5278C1.90718,21.0897,2.38333,21.5131,2.94905,21.5131L21.0508,21.5131C21.6164,21.5131,22.0926,21.0897,22.1589,20.5278L23.9923,4.94237C24.0433,4.51038,23.8387,4.08808,23.468,3.86044C23.0973,3.6328,22.6282,3.64133,22.266,3.88229L17.5793,7.00674L12.9083,0.467704C12.4633,-0.155901,11.5366,-0.155901,11.0916,0.467704L6.42055,7.00674Z" fill-rule="evenodd" fill="#EDC648" fill-opacity="1"/></g></svg>

src/assets/icon/crown_dark.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="24" height="21.51313591003418" viewBox="0 0 24 21.51313591003418"><g style="mix-blend-mode:passthrough"><path d="M6.42055,7.00674L1.73386,3.88229C1.37187,3.64153,0.902992,3.63293,0.532412,3.86026C0.161831,4.08759,-0.0429781,4.50945,0.00760252,4.94125L1.84099,20.5278C1.90718,21.0897,2.38333,21.5131,2.94905,21.5131L21.0508,21.5131C21.6164,21.5131,22.0926,21.0897,22.1589,20.5278L23.9923,4.94237C24.0433,4.51038,23.8387,4.08808,23.468,3.86044C23.0973,3.6328,22.6282,3.64133,22.266,3.88229L17.5793,7.00674L12.9083,0.467704C12.4633,-0.155901,11.5366,-0.155901,11.0916,0.467704L6.42055,7.00674Z" fill-rule="evenodd" fill="#D8D8D8" fill-opacity="1"/></g></svg>

src/assets/icon/time-fill.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="39" height="38" viewBox="0 0 39 38"><defs><clipPath id="master_svg0_129_8122"><rect x="0" y="0" width="39" height="38" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_129_8122)"><g><path d="M19.5,34.833364123535155C10.52513,34.833364123535155,3.25,27.744764123535155,3.25,18.999964123535158C3.25,10.255244123535157,10.52513,3.1666641235351562,19.5,3.1666641235351562C28.4749,3.1666641235351562,35.75,10.255244123535157,35.75,18.999964123535158C35.75,27.744764123535155,28.4749,34.833364123535155,19.5,34.833364123535155ZM21.125,18.999964123535158L21.125,11.083334123535156L17.875,11.083334123535156L17.875,22.166664123535156L27.625,22.166664123535156L27.625,18.999964123535158L21.125,18.999964123535158Z" fill="#1BCE7D" fill-opacity="1"/></g></g></svg>

src/pages/lobby/lobby.jsx

@@ -7,7 +7,6 @@ import { useSelector, useDispatch } from 'react-redux'
 import './lobby.scss'
 import { navigateTo, redirectTo, showToast } from '@/utils/application'
 import { increment } from '@/store/index'
-import { fetchOpMap, fetchLobbyView } from '@/api/api'
 import { reqLobbyView, reqJoinTable } from '@/api/wsapi'
 import proto from '@/api/proto'
 import Title from '@/components/title'

src/pages/login/login.jsx

@@ -5,7 +5,7 @@ import Taro from '@tarojs/taro';
 //import { Form, Input, TextArea, Cell, Button, Row, Col, Image } from '@nutui/nutui-react-taro';
 import ws from '@/api/websocket'
 import './login.scss'
-import { doLogin, fetchOpMap } from '@/api/api'
+import { doLogin, fetchOpMap, fetchRouteWs } from '@/api/api'
 import { redirectTo, showToast } from '@/utils/application'
 import iconUser from '@/assets/icon/user-3-fill.svg'
 import iconLock from '@/assets/icon/lock-2-fill.svg'
@@ -33,10 +33,10 @@ function Login() {
 
       //const token = "AgOjcdf3goeYDX3lwWWwkXtVpcrL-l2rX8csrRKgs3_-BC3JOx0l6nZU0MV25eIn"
       try {
-        const [tokenRes, opMapRes] = await Promise.all([doLogin(state), fetchOpMap()]);
+        const [tokenRes, opMapRes, wsRes] = await Promise.all([doLogin(state), fetchOpMap(), fetchRouteWs()]);
-        setStorage('_t', tokenRes.data.token)
+        setStorage('_t', tokenRes.data.token);
         // 初始化 websocket 连接
-        ws.init(tokenRes.data.token, opMapRes.data);
+        ws.init(tokenRes.data.token, opMapRes.data, wsRes.data);
         showToast({title: '登录成功', duration: 800});
         // 重定向到大厅
         setTimeout(() => redirectTo({url: '/pages/lobby/lobby'}), 800);

src/pages/table/table.jsx

@@ -20,6 +20,12 @@ import plus1Icon from '@/assets/icon/plus-1.svg'
 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 crownIcon from '@/assets/icon/crown.svg'
+import crownDarkIcon from '@/assets/icon/crown_dark.svg'
+import bigBlindIcon from '@/assets/icon/big_blind.svg'
+import smallBlindIcon from '@/assets/icon/small_blind.svg'
+
 import Taro from '@tarojs/taro'
 import { showToast, redirectTo } from '@/utils/application'
 import { isIn } from '@/utils/collect'
@@ -59,6 +65,9 @@ class Table extends Component {
       chip: 0,
       roundTimes: 0,
       playerId: 0,
+      masterId: 0,
+      bigBlindPos: -1,
+      smallBlindPos: -1,
 
       players: [],
       publicCard: [],
@@ -84,7 +93,15 @@ class Table extends Component {
       addMsgListen('api.ResDismissGameTable', res => {
         showToast({title: '牌桌已解散'});
         setTimeout(() => redirectTo({url: '/pages/lobby/lobby'}), 800);
-      })
+      });
+      // 扣除大盲注(显示3秒)
+      addMsgListen('api.ResBigBlindChip', res => {
+        showToast({title: '大盲注:' + res.chip});
+      });
+      // 扣除小盲注(显示3秒)
+      addMsgListen('api.ResSmallBlindChip', res => {
+        showToast({title: '小盲注:' + res.chip});
+      });
 
       // 查询当前牌桌状态
       reqGameFullStatus()
@@ -108,6 +125,9 @@ class Table extends Component {
       stage: res.gameStage,
       chip: res.chip || 0,
       roundTimes: res.roundTimes || 0,
+      masterId: res.masterId,
+      bigBlindPos: res.bigBlindPos,
+      smallBlindPos: res.smallBlindPos,
 
       players: res.players,
       publicCard: res.publicCard,
@@ -195,7 +215,7 @@ class Table extends Component {
     const { username, nickname, avatar, defaultAvatar } = this.props.user; // useSelector(state => state.user);
     // const players = [1, 2, 3, 4, 5, 6];
     const players = this.state.players.map((player, index) => ({player, index}));
-    const {playerId, tableNo, stage, chip, roundTimes} = this.state;
+    const {inGame, playerId, tableNo, stage, bigBlindPos, smallBlindPos, chip, roundTimes} = this.state;
 
     // 从玩家中找到自己 TODO 弄到 state, 避免每次render计算
     // console.log('props', this.props);
@@ -225,20 +245,52 @@ class Table extends Component {
                       player.status === 2 && <View className="p-status-ready"><Text>Ready!</Text></View>
                     }
                     <View className="player-bar">
-                      <View className={cnames("player-no", { "player-no-running": player.status > 1})}><Text>#{index}</Text></View>
                       {
+                        // 座位编号
+                        !player.id ? null :
+                        player.master
+                        ? <View className="player-no-crown">
+                            <Image className="pnc-bg-icon" src={isIn(player.status,2,4,6) ? crownIcon : crownDarkIcon} />
+                            <View className={cnames('', {'pnc-text-running': isIn(player.status,2,4,6)})}><Text>#{index+1}</Text></View>
+                          </View>
+                        : <View className={cnames("player-no", { "player-no-running": isIn(player.status,2,4,6)})}><Text>#{index+1}</Text></View>
+                      }
+                      {
+                        // 大小盲注图标
+                        !player.id ? null : !(inGame && isIn(index, bigBlindPos, smallBlindPos)) ? null
+                        : <View className="blind-icon"><Image src={index === bigBlindPos ? bigBlindIcon : smallBlindIcon} /></View>
+                      }
+                      {
+                        // 等待读秒，下注金额
+                        !inGame ? null : !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">
+                              <Image src={timeIcon} />
+                              <Text>29</Text>
+                            </View>
+                            : <View className={cnames('filling-chip', {'filling-chip-l': player.chip > 99})}><Text>+{player.chip}</Text></View>
+                          }
+                        </View>
+                      }
+                      {
+                        // 踢出牌桌close图标
                         stage === 1 && selfPlayer.master && player.id
                         ? <View className="kickout" onClick={this.handleKickoutPlayer.bind(this, player)}><Image className="kickout-icon" src={closeIcon} /></View>
                         : null
                       }
-                      {existsCard(player.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(player.handCard[1]) && <View className="card2"><Card w={38} h={48} dot={cardDot(player.handCard[0], player.status === 7 ? -2 : -1)} suit={cardSuit(player.handCard[1])} /></View>}
+                      {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>}
+                      {/* 头像名称 */}
                       <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>
                         <View className="player-name"><Text>{player.username}</Text></View>
                       </View>
                       {
+                        // 玩家筹码
                         !player.id ? null :
                         <View className="wallet-wrap">
                           <View className={cnames("wallet", {'wallet-wait': isIn(player.status, 3, 7)})}>
@@ -286,9 +338,38 @@ class Table extends Component {
 
         <View className="self-box">
           <View className="self-wrap">
-          <View className={cnames("player-no", { "player-no-running": true })}><Text>#{selfIndex}</Text></View>
+            {
+              //
+              selfPlayer.master
+              ? <View className="player-no-crown">
+                  <Image className="pnc-bg-icon" src={isIn(selfPlayer.status,2,4,6) ? crownIcon : crownDarkIcon} />
+                  <View className={cnames('', {'pnc-text-running': isIn(selfPlayer.status,2,4,6)})}><Text>#{selfIndex+1}</Text></View>
+                </View>
+              : <View className={cnames("player-no", { "player-no-running": isIn(selfPlayer.status,2,4,6) })}><Text>#{selfIndex+1}</Text></View>
+            }
+
+            {
+              // 大小盲注图标
+              !(inGame && isIn(selfIndex, bigBlindPos, smallBlindPos)) ? null
+              : <View className="blind-icon blind-icon-self"><Image src={selfIndex === bigBlindPos ? bigBlindIcon : smallBlindIcon} /></View>
+            }
+            {
+              // 等待读秒，下注金额
+              <View className={'round-wrap-l round-wrap-self'}>
+                {
+                  // TODO All In ...
+                  true
+                  ? <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>
+                  // , {'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[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>}
             <View className="hand-five">
               {
                 existsCard(selfPlayer.handCard[0]) && [1, 2, 3, 4, 5].map((_, i) => (
@@ -296,7 +377,7 @@ class Table extends Component {
                 ))
               }
             </View>
-            <View className='u-opt' style={{ display: 'flex' }}>
+            <View className='u-opt'>
               <View>
                 <View className="s-info-wrap">
                   <View className="s-avatar"><Image className="s-avatar-img" src={selfPlayer.avatar || avatar || defaultAvatar} /></View>

src/pages/table/table.scss

@@ -22,25 +22,103 @@
     font-weight: bold;
     font-size: 12px;
   }
-  .player-no {
+  .player-no,.player-no-crown {
     position: absolute;
-    top: -25px;
+    top: -26px;
-    color: #fff;
+    color: #EE914E;
     font-size: 14px;
-    height: 23px;
+    height: 24px;
-    width: 23px;
+    width: 24px;
-    line-height: 23px;
+    line-height: 24px;
-    background-color: #807878;
     border-radius: 50%;
     text-align: center;
+    font-weight: bold;
+  }
+  .player-no {
+    background-color: #D8D8D8;
   }
-
   .player-no-running {
     font-weight: bold;
     color: #fff;
     background-color: #EE914E;
   }
 
+  .player-no-crown {
+    line-height: 28px;
+    color: #EE914E;
+  }
+  .pnc-bg-icon {
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    height: 24px;
+    width: auto;
+  }
+  .pnc-text-running {
+    color: #fff;
+  }
+
+  .blind-icon {
+    position: absolute;
+    left: 110px;
+    top: 25px;
+    width: 48px;
+    height: 48px;
+  }
+  .blind-icon-self {
+    left: -2px;
+    top: -2px;
+    z-index: 1;
+  }
+
+  .round-wrap-l,.round-wrap-r {
+    position: absolute;
+    top: 8px;
+    left: 154px;
+    width: 36px;
+    height: 60px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+  }
+  .round-wrap-r {
+    left: -40px;
+  }
+  .round-wrap-self {
+    top: -66px;
+    // left: 21px;
+    left: 0px;
+    z-index: 2;
+  }
+  .time-wrap {
+    color: #1BCE7D;
+    font-weight: bold;
+    text-align: center;
+    line-height: 10px;
+  }
+  .time-icon {
+    width: 36px;
+    height: 36px;
+  }
+  .time-wrap-self {
+    margin-top: -46px;
+    margin-left: -15px;
+    line-height: 14px;
+  }
+  .filling-chip {
+    font-size: 18px;
+    font-weight: bold;
+    color: #EE914E;
+  }
+  .filling-chip-l {
+    margin-left: -10px;
+  }
+  .filling-chip-self {
+    color: #FF4400;
+    margin-top: -10px;
+  }
   .kickout {
     position: absolute;
     z-index: 99;
@@ -76,7 +154,7 @@
     // line-height: 114px;
     display: flex;
     // padding: 10px 4px;
-    border: 1px solid #000;
+    // border: 1px solid #000;
     border-radius: 5px;
   }