bet buttons

src/api/websocket.js

@@ -31,6 +31,9 @@ const websocket = {
     // window.proto = proto;
 
     const ws = new WebSocket(`ws://${wsAddr}/api/conn/ws`)
+    if (this.conn) {
+      this.conn.close();
+    }
     this.conn = ws
     console.log(this)
     ws.binaryType = 'arraybuffer'

src/pages/table/table.jsx

@@ -370,10 +370,10 @@ class Table extends Component {
             }
             {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>}
-            <View className="hand-five">
+            <View className="hand-five" style={{display:'none'}}>
               {
                 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={'H'} /></View>
+                  <View key={i} className="hand-five-item"><Card w={28} h={35} dot={12} suit={'H'} /></View>
                 ))
               }
             </View>
@@ -393,7 +393,7 @@ class Table extends Component {
               </View>
               <View className="control">
                 <View className="ctl-opt-wrap">
-                  <View className="amount-input"><Input placeholder='your chip' defaultValue={0} /></View>
+                  <View className="amount-input"><Input disabled placeholder='your chip' value={11} /></View>
                   <View className="amount-sub"><Image className="amount-sub-icon" src={sub1Icon} /></View>
                   <View className="amount-plus"><Image className="amount-plus-icon" src={plus1Icon} /></View>
                 </View>
@@ -410,10 +410,16 @@ class Table extends Component {
                       <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">
+                  : <View className="">
+                      <View className="ctl-opt-wrap">
+                        <View className="ctl-opt" style={{opacity: 0}}><Button className="ctl-opt-btn-2">弃牌</Button></View>
                         <View className="ctl-opt"><Button className="ctl-opt-btn-1">让牌</Button></View>
-                    <View className="ctl-opt"><Button className="ctl-opt-btn-2">弃牌</Button></View>
+                        <View className="ctl-opt"><Button className="ctl-opt-btn-1">跟注</Button></View>
-                    <View className="ctl-opt"><Button className="ctl-opt-btn-3">跟注</Button></View>
+                      </View>
+                      <View className="ctl-opt-wrap-cfm">
+                        <View className="ctl-opt"><Button className="ctl-opt-btn-3 ctl-opt-btn-ain">ALL-IN</Button></View>
+                        <View className="ctl-opt"><Button className="ctl-opt-btn-3 ctl-opt-btn-cfm">确认下注</Button></View>
+                      </View>
                   </View>
                 }
               </View>

src/pages/table/table.scss

@@ -310,12 +310,14 @@
   .chat-panel {}
 
   .self-box {
-    // width: 100%;
+    width: 380px;
     height: 109px;
     background-color: #EE914E;
-    margin: 30px 26px 0 26px;
+    // margin: 30px 26px 0 26px;
+    margin: 30px auto 0 auto;
     border-radius: 5px;
-    ;
+    display: flex;
+    justify-content: center;
   }
 
   .self-wrap {
@@ -329,7 +331,7 @@
 
   .s-avatar {
     align-self: center;
-    margin-left: 6px;
+    // margin-left: 6px;
   }
 
   .s-avatar-img {
@@ -357,7 +359,7 @@
     width: 97px;
     height: 18px;
     background-color: #fff;
-    margin-left: 4px;
+    // margin-left: 4px;
     border-radius: 5px;
     display: flex;
     justify-content: space-between;
@@ -409,7 +411,7 @@
   .hand-five {
     position: absolute;
     left: 188px;
-    top: -10px;
+    top: -24px;
     z-index: 999;
     width: 166px;
     height: 46px;
@@ -431,7 +433,7 @@
     margin-left: 30px;
   }
 
-  .ctl-opt-wrap {
+  .ctl-opt-wrap,.ctl-opt-wrap-cfm {
     display: flex;
     width: 170px;
     justify-content: space-between;
@@ -502,6 +504,16 @@
     background-color: #FF4400;
     color: #F1D09F;
   }
+  .ctl-opt-btn-ain {
+    width: 58px;
+  }
+  .ctl-opt-wrap-cfm {
+    justify-content: flex-end;
+  }
+  .ctl-opt-btn-cfm {
+    width: 71px;
+    margin-left: 6px;
+  }
 
   .ctl-opt-btn-4,
   .ctl-opt-btn-5,

src/store/user.js

@@ -11,7 +11,7 @@ const userSlice = createSlice({
   },
   reducers: {
     setUserInfo: (state, {payload}) => {
-      console.log('setUserInfo', state, payload)
+      // console.log('setUserInfo', state, payload)
       state.id = payload.id;
       state.username = payload.username;
       state.avatar = payload.avatar;