game start,dismiss,ready,blind

config/dev.js

@@ -10,8 +10,8 @@ module.exports = {
   h5: {
     devServer: {
       //host: '0.0.0.0',
-      //host: '192.168.110.53',
+      host: '192.168.110.53',
-      host: '192.168.3.102',
+      //host: '192.168.3.102',
       port: 10086,
       // 设置代理来解决 H5 请求的跨域问题
       proxy: {

src/api/websocket.js

@@ -1,7 +1,10 @@
+import store from '@/store/index'
+
 import proto from '@/api/proto';
 import { fetchOpMap } from '@/api/api'
-import { getStorage } from '@/utils/storage';
+import { getStorage, removeStorage } from '@/utils/storage';
 import { showToast } from '@/utils/application';
+import { setUserInfo } from '@/store/user'
 
 const { api } = proto
 
@@ -26,7 +29,6 @@ const websocket = {
     this.opPathMap = opPathMap || {};
     this.nameOpMap = nameOpMap || {};
     // window.proto = proto;
-    // websocket test
 
     const ws = new WebSocket("ws://localhost:9999/api/conn/ws")
     this.conn = ws
@@ -39,6 +41,11 @@ const websocket = {
       // const reqBuffer = api.ReqIdentity.encode(req).finish()
       this.send(req, res => {
         this.status = 2;
+        // const dispatch = useDispatch();
+        // window.res = res;
+        // console.log(store, setUserInfo(res))
+        store.dispatch(setUserInfo(res.toJSON()));
+
         console.log('identity success:', res)
 
         // 依次发送等待连接的消息队列
@@ -49,6 +56,7 @@ const websocket = {
           }
         }
       }, err => {
+        removeStorage('_t')
         showToast({title: err})
         console.error('连接认证失败:', err)
       })

src/api/wsapi.js

@@ -11,3 +11,14 @@ export const reqGameFullStatus = () => sendPromise(api.ReqGameFullStatus.create(
 export const reqJoinTable = tableNo => sendPromise(api.ReqJoinTable.create({tableNo}));
 
 export const reqKickOutTable = playerId => sendPromise(api.ReqKickOutTable.create({playerId}));
+
+export const reqLeaveTable = () => sendPromise(api.ReqLeaveTable.create());
+
+// 准备
+export const reqReadyStart = () => sendPromise(api.ReqReadyStart.create());
+// 取消准备
+export const reqCancelReady = () => sendPromise(api.ReqCancelReady.create());
+// 解散
+export const reqDismissGameTable = () => sendPromise(api.ReqDismissGameTable.create());
+// 开始牌局
+export const reqGameStart = () => sendPromise(api.ReqGameStart.create());

src/components/card.jsx

@@ -40,7 +40,7 @@ function Card(props) {
               left: Taro.pxTransform(w / 8),
             }}>
               <Text style={{
-                color: suit % 2 === 0?'#FF4A0E':'#000', fontSize: Taro.pxTransform(w / 3)
+                color: suit==='D' || suit==='H'?'#FF4A0E':'#000', fontSize: Taro.pxTransform(w / 3)
               }}>{dots[dot || 0]}</Text>
             </View>
             <View className="suit-wrap">

src/components/style/title.scss

@@ -30,16 +30,23 @@
       color: #ffffff;
     }
 
+    .title-avatar-wrap {
+      width: 48px;
+      height: 48px;
+      display: flex;
+      flex-direction: row;
+    }
     .avatar {
       width: 41px;
       height: 41px;
+      // width: 32px;
+      // height: 32px;
       border-radius: 50%;
       margin-top: 2px;
     }
-
+    .username {
-    .blank {
+      font-size: 12px;
-      width: 48px;
+      font-weight: normal;
-      height: 48px;
     }
   }
 }

src/components/title.jsx

@@ -7,7 +7,7 @@ import './style/title.scss'
 import { useSelector } from 'react-redux'
 
 function Title(props) {
-  const {username, nickname, avatar} = useSelector(state => state.user);
+  const {username, nickname, avatar, defaultAvatar} = useSelector(state => state.user);
   const { leftSolt, leftIcon, onLeftClick, rightSolt } = props;
   return (
     <View>
@@ -15,8 +15,15 @@ function Title(props) {
         {/* <View className='topHeight'></View> */}
         <View className='page-title'>
           {leftSolt || <Image className="icon" src={leftIcon || left} onClick={onLeftClick || navigateBack} />}
-          <View className={props.colorStyle ? "title" : "title1"}><Text>{props.title}</Text></View>
+          <View className={props.colorStyle ? "title" : "title1"}>
-          {rightSolt || <View className='blank'><Image className='avatar' src={avatar} /></View>}
+            <View><Text className="username">{username}</Text></View>
+            <View><Text>{props.title}</Text></View>
+          </View>
+          {
+            rightSolt || <View className='title-avatar-wrap'>
+              <Image className='avatar' src={avatar || defaultAvatar} />
+            </View>
+          }
         </View>
       </View>
       {props.topNull ? '' : <View className='hidden'></View>}

src/pages/lobby/lobby.jsx

@@ -33,9 +33,9 @@ class Lobby extends Component {
   }
 
   componentDidMount() {
-    setTimeout(() => {
+    // setTimeout(() => {
       this.handleReqLobbyView();
-    }, 1500)
+    // }, 1500)
     // fetchLobbyView()
     //   .then(res => {
     //     console.log('lobby', res)

src/pages/table/table.jsx

@@ -3,7 +3,11 @@ import { View, Text, Image, Input, Button } from '@tarojs/components'
 import { connect } from 'react-redux'
 import cnames from 'classnames'
 
-import { reqGameFullStatus, reqKickOutTable } from '@/api/wsapi'
+import {
+  reqGameFullStatus, reqKickOutTable, reqLeaveTable,
+  reqReadyStart, reqDismissGameTable, reqGameStart,
+  reqCancelReady
+} from '@/api/wsapi'
 import { addMsgListen, removeMsgListener } from '@/api/websocket'
 import { ifEmpty } from '@/utils/validator'
 
@@ -20,10 +24,11 @@ import Taro from '@tarojs/taro'
 import { showToast, redirectTo } from '@/utils/application'
 import { isIn } from '@/utils/collect'
 
-function PlayerStatus() {
+function PlayerStatus(props) {
+  const { text, color } = props;
   return (
-    <View>
+    <View className="p-status">
-      <Text>Ready</Text>
+      <Text>{text}</Text>
     </View>
   )
 }
@@ -62,20 +67,24 @@ class Table extends Component {
 
   componentWillUnmount() {
     // 取消监听消息
-    removeMsgListener('api.ResGameFullStatus')
+    removeMsgListener('api.ResGameFullStatus');
-    removeMsgListener('api.ResKickOutTable')
+    removeMsgListener('api.ResKickOutTable');
   }
 
   componentDidMount() {
     // setTimeout(() => {
       // 监听状态变化消息
-      addMsgListen('api.ResGameFullStatus', res => this.handleResGameFullStatus(res));
+      addMsgListen('api.ResGameFullStatus', this.handleResGameFullStatus); // 牌桌状态变化
+      // 被房主踢出
       addMsgListen('api.ResKickOutTable', res => {
-        console.log('listener level table', res);
+        showToast({title: '您被请出牌桌'});
-        redirectTo({url: '/pages/lobby/lobby', complete() {
+        setTimeout(() => redirectTo({url: '/pages/lobby/lobby'}), 800);
-          showToast({title: '您被请出牌桌'})
-        }});
       });
+      // 牌桌解散
+      addMsgListen('api.ResDismissGameTable', res => {
+        showToast({title: '牌桌已解散'});
+        setTimeout(() => redirectTo({url: '/pages/lobby/lobby'}), 800);
+      })
 
       // 查询当前牌桌状态
       reqGameFullStatus()
@@ -92,7 +101,6 @@ class Table extends Component {
   }
 
   handleResGameFullStatus = res => {
-    console.log('res game...++', this, res)
     this.setState({
       playerId: res.playerId,
       inGame: !!res.inGame,
@@ -126,11 +134,65 @@ class Table extends Component {
             showToast({title: err})
           })
       }
+    });
+  }
+
+  // 退出
+  handleLeaveTable() {
+    Taro.showModal({
+      title: '提示',
+      content: "是否离开牌桌？",
+      success: res => {
+        if (!res.confirm) {
+          return;
+        }
+        reqLeaveTable()
+          .then(_ => {
+            redirectTo({url: '/pages/lobby/lobby'})
+          })
+          .catch(err => showToast({title: err}))
+      }
     })
   }
 
+  // 准备开始
+  handleReadyStart(playerStatus) {
+    (playerStatus === 1 ? reqReadyStart() : reqCancelReady())
+      .then(res => {
+        console.log('ready res:', res);
+      })
+      .catch(err => showToast({title: err}));
+  }
+
+  // 解散牌桌
+  handleResDismissGameTable() {
+    Taro.showModal({
+      title: '提示',
+      content: "是否解散牌桌？",
+      success: res => {
+        if (!res.confirm) {
+          return;
+        }
+        reqDismissGameTable()
+          .then(_ => {
+            redirectTo({url: '/pages/lobby/lobby'})
+          })
+          .catch(err => showToast({title: err}));
+      }
+    })
+  }
+
+  // 开始游戏
+  handleGameStart() {
+    reqGameStart()
+    .then(res => {
+      console.log('game start...', res)
+    })
+    .catch(err => showToast({title: err}));
+  }
+
   render() {
-    const { username, nickname, avatar } = this.props.user; // useSelector(state => state.user);
+    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;
@@ -160,13 +222,10 @@ class Table extends Component {
                 row.map(({index, player}, j) => (
                   <View key={j} className="player-wrap" onClick={(p => {console.log(p)}).bind(this, player)}>
                     {
-                      j % 2 === 0 &&
+                      player.status === 2 && <View className="p-status-ready"><Text>Ready!</Text></View>
-                      <View className={cnames('player-state-wrap', {'state-left': j % 2 === 0})}>
-                        <PlayerStatus action={1} />
-                      </View>
                     }
                     <View className="player-bar">
-                      <View className={cnames("player-no", { "player-no-running": player.index === 0 })}><Text>#{index}</Text></View>
+                      <View className={cnames("player-no", { "player-no-running": player.status > 1})}><Text>#{index}</Text></View>
                       {
                         stage === 1 && selfPlayer.master && player.id
                         ? <View className="kickout" onClick={this.handleKickoutPlayer.bind(this, player)}><Image className="kickout-icon" src={closeIcon} /></View>
@@ -233,14 +292,14 @@ class Table extends Component {
             <View className="hand-five">
               {
                 existsCard(selfPlayer.handCard[0]) && [1, 2, 3, 4, 5].map((_, i) => (
-                  <View key={i} className="hand-five-item"><Card w={28} h={36} dot={12} suit={2} /></View>
+                  <View key={i} className="hand-five-item"><Card w={28} h={36} dot={12} suit={'H'} /></View>
                 ))
               }
             </View>
             <View className='u-opt' style={{ display: 'flex' }}>
               <View>
                 <View className="s-info-wrap">
-                  <View className="s-avatar"><Image className="s-avatar-img" src={selfPlayer.avatar || avatar} /></View>
+                  <View className="s-avatar"><Image className="s-avatar-img" src={selfPlayer.avatar || avatar || defaultAvatar} /></View>
                   <View className="s-username"><Text>{selfPlayer.username}</Text></View>
                 </View>
                 <View className="s-wallet-wrap">
@@ -261,13 +320,13 @@ class Table extends Component {
                   stage === 1 ? (
                     // 是房主: 关闭牌桌, 开始游戏
                     selfPlayer.master ? <View className="ctl-opt-wrap">
-                      <View className="ctl-opt"><Button className={cnames("ctl-opt-btn-4", {'ctl-opt-btn-disable': selfPlayer.status === 2})}>关闭牌桌</Button></View>
+                      <View className="ctl-opt"><Button onClick={this.handleResDismissGameTable.bind(this)} className={cnames("ctl-opt-btn-4", {'ctl-opt-btn-disable': selfPlayer.status === 2})}>关闭牌桌</Button></View>
-                      <View className="ctl-opt"><Button className={cnames("ctl-opt-btn-6", {'ctl-opt-btn-disable': selfPlayer.status === 2})}>开始游戏</Button></View>
+                      <View className="ctl-opt"><Button onClick={this.handleGameStart.bind(this)} className={cnames("ctl-opt-btn-6", {'ctl-opt-btn-disable': selfPlayer.status === 2})}>开始游戏</Button></View>
                     </View>
                     // 是玩家：退出, 准备
                     : <View className="ctl-opt-wrap">
-                      <View className="ctl-opt"><Button style={{display: selfPlayer.status === 2 ? 'none' : 'block'}} className={cnames("ctl-opt-btn-4", {'ctl-opt-btn-disable': selfPlayer.status === 2})}>退出</Button></View>
+                      <View className="ctl-opt"><Button onClick={this.handleLeaveTable.bind(this)} style={{display: selfPlayer.status === 2 ? 'none' : 'block'}} className={cnames("ctl-opt-btn-4", {'ctl-opt-btn-disable': selfPlayer.status === 2})}>退出</Button></View>
-                      <View className="ctl-opt"><Button className={cnames("ctl-opt-btn-5", {'ctl-opt-btn-5-ready': selfPlayer.status === 2})}>{selfPlayer.status === 2 ? '已准备' : '准备'}</Button></View>
+                      <View className="ctl-opt"><Button onClick={this.handleReadyStart.bind(this, selfPlayer.status)} className={cnames("ctl-opt-btn-5", {'ctl-opt-btn-5-ready': selfPlayer.status === 2})}>{selfPlayer.status === 2 ? '已准备' : '准备'}</Button></View>
                     </View>
                   )
                   : <View className="ctl-opt-wrap">

src/pages/table/table.scss

@@ -14,25 +14,14 @@
     display: flex;
   }
 
-  .player-state-wrap {
+  .p-status-ready {
-    height: 53px;
-    width: 39px;
-    // background-color: #F1D09F;
     position: absolute;
-    left: -40px;
+    top: -25px;
-    top: 10px;
+    left: 30px;
-    display: flex;
+    color: #EE914E;
-    flex-direction: column;
+    font-weight: bold;
-    justify-content: center;
+    font-size: 12px;
-    align-items: center;
-  }
-
-  .state-left {
-    position: absolute;
-    left: 157px;
-    top: 10px;
   }
-
   .player-no {
     position: absolute;
     top: -25px;

src/store/user.js

@@ -3,13 +3,19 @@ import { createSlice } from '@reduxjs/toolkit';
 const userSlice = createSlice({
   name: 'user',
   initialState: {
-    username: 'Prometheus',
+    id: 0,
-    nickname: 'PrometheusNick',
+    username: 'Prom',
-    avatar: 'https://img0.baidu.com/it/u=2477829979,2171947490&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
+    nickname: 'PromNick',
+    avatar: '',
+    defaultAvatar: 'https://img0.baidu.com/it/u=2477829979,2171947490&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
   },
   reducers: {
-    setUserInfo(state, action) {
+    setUserInfo: (state, {payload}) => {
-      return {...state, ...action.payload}
+      console.log('setUserInfo', state, payload)
+      state.id = payload.id;
+      state.username = payload.username;
+      state.avatar = payload.avatar;
+      // return {...state, ...action.payload}
     }
   }
 })