join game table render

src/api/websocket.js

@@ -50,14 +50,14 @@ const websocket = {
       console.log('res msg:',  res)
       if (wrap.seq !== 0) {
         // 对应请求callback
-        const waitCall = this.waitCall[wrap.seq];
+        const caller = this.waitCall[wrap.seq];
         delete this.waitCall[wrap.seq];
         // console.log(waitCall, this.waitCall);
-        if (waitCall) {
+        if (caller) {
           if (wrap.op === opFail) {
-            waitCall.onFail(res, wrap);
+            caller.onFail(res, wrap);
           } else {
-            waitCall.onRes(res, wrap);
+            caller.onRes(res, wrap);
           }
           return;
         }
@@ -98,7 +98,7 @@ const websocket = {
       this.waitCall[wrap.seq] = {
         seq: wrap.seq,
         onRes: resCall,
-        onError: errCall,
+        onFail: errCall,
       }
     }
     // 定时检查是否超时...

src/api/wsapi.js

@@ -1,3 +1,11 @@
 import { sendPromise } from './websocket'
+import { api } from './proto'
 
 export const aa = msg => sendPromise(msg)
+
+// 大厅桌面预览
+export const reqLobbyView = () => sendPromise(api.ReqLobbyView.create());
+
+export const reqGameFullStatus = () => sendPromise(api.ReqGameFullStatus.create({}));
+
+export const reqJoinTable = tableNo => sendPromise(api.ReqJoinTable.create({tableNo}));

src/components/card.jsx

@@ -12,7 +12,17 @@ import cardBack1 from '@/assets/card-back-1.svg'
 import cardBack2 from '@/assets/card-back-2.svg'
 import cardBack3 from '@/assets/card-back-3.svg'
 
-const suits = [suit0Icon, suit1Icon, suit2Icon, suit3Icon];
+const suits = {
+  0: suit0Icon,
+  1: suit1Icon,
+  2: suit2Icon,
+  3: suit3Icon,
+
+  D: suit0Icon,
+  C: suit1Icon,
+  H: suit2Icon,
+  S: suit3Icon,
+};
 const dots = ["2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K", "A"];
 
 function Card(props) {

src/pages/lobby/lobby.jsx

@@ -5,10 +5,10 @@ import Taro from '@tarojs/taro'
 import { useSelector, useDispatch } from 'react-redux'
 
 import './lobby.scss'
-import { navigateTo } from '@/utils/application'
+import { navigateTo, redirectTo, showToast } from '@/utils/application'
 import { increment } from '@/store/index'
 import { fetchOpMap, fetchLobbyView } from '@/api/api'
-import { sendPromise } from '@/api/websocket'
+import { reqLobbyView, reqJoinTable } from '@/api/wsapi'
 import proto from '@/api/proto'
 import Title from '@/components/title'
 import coin1 from '@/assets/coin-1.png'
@@ -30,7 +30,8 @@ class Lobby extends Component {
   }
 
   componentDidMount() {
-    sendPromise(ReqLobbyView.create())
+    setTimeout(() => {
+      reqLobbyView()
         .then(res => {
           console.log('lobby res:', res)
           this.setState({tables: res.tables})
@@ -38,6 +39,7 @@ class Lobby extends Component {
         .catch(err => {
           console.log('lobby err:', err)
         })
+    }, 1500)
 
     // fetchLobbyView()
     //   .then(res => {
@@ -49,11 +51,21 @@ class Lobby extends Component {
     //   })
   }
 
+  async handleJoinTable(table) {
+    try {
+      const res = await reqJoinTable(table.tableNo)
+      redirectTo({url: '/pages/table/table'})
+      // console.log('join res...', res)
+    }catch(err) {
+      showToast({title: err})
+    }
+  }
+
   render() {
     // const count = useSelector((state) => state.counter.value)
     // const user = useSelector((state) => state.user)
 
-    console.log('state', this.state)
+    // console.log('state', this.state)
     return (
       <View>
         <Title title={"Lobby!!"} bgColor={true}  />
@@ -61,7 +73,7 @@ class Lobby extends Component {
         <View className="tab">
           {
             this.state.tables.map((table, i) => (
-              <View key={table.TableNo} className="tab-wrap" onClick={() => {console.log('join', table)}}>
+              <View key={table.tableNo} className="tab-wrap" onClick={this.handleJoinTable.bind(this, table)}>
               <View className="circle-wrap">
                 <View className="circle-inner"><Image className="inner-coin" src={coin1} /></View>
                 {
@@ -87,7 +99,7 @@ class Lobby extends Component {
             ))
           }
 
-          <View className="tab-wrap"></View>
+          <View key="tab-wrap" className="tab-wrap"></View>
         </View>
         <View className="bottom-btn-wrap">
           <Button className="bottom-btn" onClick={() => navigateTo({url: '/pages/new_table/new_table'})}>Create New Table</Button>

src/pages/new_table/new_table.jsx

@@ -3,6 +3,7 @@ import { View, Text, Image, Button } from '@tarojs/components'
 import { Popup, Picker } from '@nutui/nutui-react-taro';
 import { useSelector } from 'react-redux'
 
+import { redirectTo } from '@/utils/application'
 import './new_table.scss'
 import Title from '@/components/title'
 import { sendPromise } from '@/api/websocket'
@@ -38,8 +39,8 @@ function NewTable() {
       robots: players.filter(type => type === 2).length
     })
     try {
-      const res = await sendPromise(req)
-      console.log('finish', res)
+      const _ = await sendPromise(req)
+      redirectTo({url: '/pages/table/table'})
     }catch(err) {
       showToast({title: err})
     } finally {

src/pages/table/table.jsx

@@ -1,8 +1,11 @@
 import React, { Component, useState } from 'react'
 import { View, Text, Image, Input, Button } from '@tarojs/components'
-import { useSelector } from 'react-redux'
+import { connect } from 'react-redux'
 import cnames from 'classnames'
 
+import { reqGameFullStatus } from '@/api/wsapi'
+import { ifEmpty } from '@/utils/validator'
+
 import './table.scss'
 import Title from '@/components/title'
 import Card from '@/components/card'
@@ -11,6 +14,7 @@ import coin2Icon from '@/assets/icon/coin-2.svg'
 import plus1Icon from '@/assets/icon/plus-1.svg'
 import sub1Icon from '@/assets/icon/sub-1.svg'
 import Taro from '@tarojs/taro'
+import { showToast } from '@/utils/application'
 
 function PlayerStatus() {
   return (
@@ -20,17 +24,63 @@ function PlayerStatus() {
   )
 }
 
-function Table() {
+function cardDot(card, cardBackCode) {
+  if (!card || !card.suit) {
+    return cardBackCode;
+  }
+  return card['dot'];
+}
 
-  const { username, nickname, avatar } = useSelector(state => state.user);
+function cardSuit(card) {
+  return card.suit || 'D';
+}
 
-  const players = [1, 2, 3, 4, 5, 6];
-  const playerRows = players.reduce((arr, item, idx) => {
+class Table extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      inGame: false,
+      tableNo: 0,
+      stage: 0, // 游戏阶段: 1等待玩家准备;2下大盲注;3下小盲注;4发公共牌;5发第四张公共牌,轮流下注;6发第五张公共牌,轮流下注,7比牌结算
+      chip: 0,
+      RoundTimes: 0,
+
+      players: [],
+      publicCard: [],
+    }
+  }
+  componentDidMount() {
+    console.log('table mount')
+    setTimeout(() => {
+      reqGameFullStatus()
+      .then(res => {
+        this.setState({
+          inGame: !!res.inGame,
+          tableNo: res.tableNo,
+          stage: res.gameStage,
+          chip: res.chip || 0,
+          RoundTimes: res.RoundTimes || 0,
+
+          players: res.players,
+          publicCard: res.publicCard,
+        })
+        console.log('res game', res, res.publicCard[0].dot, ifEmpty(res.publicCard[0].dot, -3))
+        window.publicCard = res.publicCard
+      })
+      .catch(err => {
+        showToast({title: err})
+      })
+    }, 2000)
+  }
+
+  render() {
+    const { username, nickname, avatar } = this.props.user; // useSelector(state => state.user);
+    // const players = [1, 2, 3, 4, 5, 6];
+    const playerRows = this.state.players.reduce((arr, player, idx) => {
       const row = parseInt(idx / 2);
       let rowArr = arr[row] || [];
-    rowArr[idx % 2] = { index: idx, item };
+      rowArr[idx % 2] = { index: idx, player };
       arr[row] = rowArr;
-    parseInt()
       return arr;
     }, []);
 
@@ -75,8 +125,8 @@ function Table() {
           <View className="desktop-wrap">
             <View className="desktop-cards">
               {
-              [1, 2, 3, -3, -3].map((item, i) => (
-                <Card key={i} w={38} h={48} dot={item} suit={2} />
+                this.state.publicCard.map((card, i) => (
+                  <Card key={i} w={38} h={48} dot={cardDot(card, -3)} suit={cardSuit(card)} />
                 ))
               }
             </View>
@@ -144,5 +194,10 @@ function Table() {
       </View>
     )
   }
+}
+
+function mapStateToProps(state) {
+  return {user: state.user}
+}
 
-export default Table
+export default connect(mapStateToProps)(Table)

src/utils/application.js

@@ -54,7 +54,7 @@ export const navigateBack = function(option = {delta: 1}) {
   return Taro.navigateBack(option);
 }
 
-export const showToast = function(option = {icon: 'success'}) {
+export const showToast = function(option = {title: '', icon: 'none'}) {
   let {title} = option
   if (!title) { return }
   title = typeof(title) === 'string' ? title : title.msg || title.message;
@@ -62,5 +62,7 @@ export const showToast = function(option = {icon: 'success'}) {
     console.log('no title toast:', option.title)
     return
   }
+  option.title = title
+  option.icon = option.icon || 'none';
   Taro.showToast(option)
 }

src/utils/validator.js

@@ -0,0 +1,12 @@
+
+// 判断数据是否为空
+export const isEmpty = data => {
+  return data === undefined || data === null || data === '' ||
+      (Array.isArray(data) && data.length === 0) ||
+      (typeof data === 'object' && Object.keys(data).length === 0);
+}
+
+// 如果数据为空, 则使用默认值
+export const ifEmpty = (data, defaultValue) => {
+  return isEmpty(data) ? defaultValue : data;
+}