programing player action

client/src/App.vue

@@ -1,67 +1,68 @@
-<template>
-  <div id="app">
-    <router-view/>
-  </div>
-</template>
-
-<script lang="ts">
-import { Vue } from 'vue-property-decorator';
-
-export default class App extends Vue {}
-</script>
-
-<style lang="less">
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-  *{
-    padding: 0;
-    margin: 0;
-  }
-  body{
-    box-sizing: border-box;
-  }
-
-.container{
-  margin-top: 30px;
-  .input-bd{
-    line-height: 30px;
-    margin: 10px;
-    .input-name{
-      display: inline-block;
-      width: 100px;
-      text-align: right;
-    }
-    .input-text{
-      display: inline-block;
-      padding-left: 10px;
-      input{
-        height: 30px;
-        width: 180px;
-        padding:0 5px;
-      }
-    }
-  }
-  .btn {
-    margin-top: 15px;
-    span{
-      color: #fff;
-      background-color: #6796ff;
-      border-radius: 8px;
-      padding: 5px 20px;
-      display: inline-block;
-    }
-    b{
-      display: inline-block;
-      border: aliceblue;
-      border-radius: 8px;
-      padding: 5px 20px;
-      margin-left: 10px;
-    }
-  }
-}
-</style>
+<template>
+  <div id="app">
+    <router-view/>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue } from 'vue-property-decorator';
+
+export default class App extends Vue {}
+</script>
+
+<style lang="less">
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+  *{
+    padding: 0;
+    margin: 0;
+  }
+  body{
+    box-sizing: border-box;
+  }
+
+.container{
+  margin-top: 30px;
+  .input-bd{
+    line-height: 30px;
+    margin: 10px;
+    .input-name{
+      display: inline-block;
+      width: 100px;
+      text-align: right;
+    }
+    .input-text{
+      display: inline-block;
+      padding-left: 10px;
+      input{
+        height: 30px;
+        width: 180px;
+        padding:0 5px;
+      }
+    }
+  }
+  .btn {
+    margin-top: 15px;
+    span{
+      color: #fff;
+      background-color: #6796ff;
+      border-radius: 8px;
+      padding: 5px 20px;
+      display: inline-block;
+      margin: 10px;
+    }
+    b{
+      display: inline-block;
+      border: aliceblue;
+      border-radius: 8px;
+      padding: 5px 20px;
+      margin-left: 10px;
+    }
+  }
+}
+</style>

client/src/main.ts

@@ -1,16 +1,16 @@
-import Vue from 'vue';
-import App from './App.vue';
-import router from './router';
-import store from './store';
-import VConsole from 'vconsole';
-
-Vue.config.productionTip = false;
-
-// tslint:disable-next-line:no-unused-expression
-new VConsole();
-
-new Vue({
-  router,
-  store,
-  render: (h) => h(App),
-}).$mount('#app');
+import Vue from 'vue';
+import App from './App.vue';
+import router from './router';
+import store from './store';
+import VConsole from 'vconsole';
+
+Vue.config.productionTip = false;
+
+// tslint:disable-next-line:no-unused-expression
+new VConsole();
+
+new Vue({
+  router,
+  store,
+  render: (h) => h(App),
+}).$mount('#app');

client/src/utils/request.ts

@@ -3,6 +3,7 @@ import cookie from 'js-cookie';
 
 const request = async ({method = 'post' as Method, url = '', body = {}, timeout = 8000}) => {
   const origin = 'http://192.168.0.105:7001/node';
+  // const origin = 'http://172.22.72.70:7001/node';
   if (!url) {
     return Promise.reject('Request url is null!');
   }

client/src/views/game.vue

@@ -9,8 +9,26 @@
       </div>
     </div>
     <div class="game-body">
+      <div class="pot">pot: {{pot}}</div>
       <div class="common-card">commonCard:{{commonCardString}}</div>
       <div class="hand-card">handCard:{{handCardString}}</div>
+      <div class="action">
+         <div class="action-type btn" v-show="isAction">
+           <span @click="action('check')">check</span>
+           <span @click="action('fold')">fold</span>
+           <span @click="action('call')">call</span>
+           <span @click="action('raise')">raise</span>
+         </div>
+         <div class="raise-size" v-show="isRaise">
+           <i @click="raise(pot / 3)">1/3 pot</i>
+           <i @click="raise(pot / 2)">1/2 pot</i>
+           <i @click="raise(pot / 4)">3/4 pot</i>
+           <i @click="raise(pot)">1 pot</i>
+           <i @click="raise(pot * 2)">2 pot</i>
+           <i @click="raise(pot * 3)">3 pot</i>
+           <i @click="raise(-1)">allin</i>
+         </div>
+      </div>
       <div class="btn play"><span @click="play">play game</span></div>
     </div>
     <div class="buy-in">
@@ -36,23 +54,39 @@
   interface IUser {
     counter: number;
     nick_name: string;
+    actionSize: number;
+    type: string;
+    userId?: number;
+  }
+
+  export enum ECommand {
+    CALL = 'call',
+    ALL_IN = 'allin',
+    RAISE = 'raise',
+    CHECK = 'check',
+    FOLD = 'fold',
   }
 
   interface IMsg {
     action: string;
     clients: string[];
     target: string;
-    message: string;
+    data: any;
   }
 
   @Component
   export default class Game extends Vue {
     public socket: any = null;
     private users: IUser[] = [];
+    private userInfo: any = {};
     private joinMsg = '';
     private handCard = [];
     private commonCard = [];
     private buyInSize = 0;
+    private pot = 0;
+    private prevSize = 0;
+    private isAction = false;
+    private isRaise = false;
 
     get roomId() {
       return this.$route.params.roomNumber;
@@ -78,10 +112,26 @@
       });
     }
 
+    private raise(size: number) {
+      if (size === -1) {
+        size = this.userInfo.counter;
+      }
+      this.emit('action', { command: `raise:${size}` });
+    }
+
+    private action(type: string) {
+      this.isAction = false;
+      if (type === ECommand.RAISE) {
+        this.isRaise = true;
+      }
+    }
+
     private socketInit() {
       const token = cookie.get('token');
       const log = console.log;
-      this.socket = io('http://192.168.0.105:7001/socket', {
+      // const origin = 'http://172.22.72.70:7001';
+      const origin = 'http://192.168.0.105:7001';
+      this.socket = io(`${origin}/socket`, {
         // 实际使用中可以在这里传递参数
         query: {
           room: this.roomId,
@@ -101,6 +151,9 @@
           if (data.action === 'handCard') {
             this.handCard = data.payload.handCard;
           }
+          if (data.action === 'userInfo') {
+            this.userInfo = data.payload;
+          }
         });
       });
 
@@ -108,15 +161,21 @@
       this.socket.on('online', (msg: IMsg) => {
         log('#online,', msg);
         if (msg.action === 'join') {
-          this.joinMsg = msg.message;
+          this.joinMsg = msg.data;
         }
         if (msg.action === 'players') {
-          this.users = JSON.parse(msg.message);
-          console.log('users', JSON.parse(msg.message));
+          this.users = msg.data.players;
         }
         if (msg.action === 'commonCard') {
-          this.commonCard = JSON.parse(msg.message);
-          console.log('users', JSON.parse(msg.message));
+          this.commonCard = msg.data.commonCard;
+          console.log('users', msg.data);
+        }
+        if (msg.action === 'gameInfo') {
+          this.users = msg.data.players;
+          this.pot = msg.data.pot;
+          this.prevSize = msg.data.prevSize;
+          this.isAction = !!(this.userInfo && this.userInfo.userId === msg.data.currPlayer.userId);
+          console.log('gameInfo', msg.data);
         }
       });
 
@@ -167,5 +226,20 @@
 <style lang="less"
        scoped>
   .game-container {
+    .raise-size{
+      i{
+        padding: 5px;
+        width: 30px;
+        height: 30px;
+        display: inline-block;
+        font-style: normal;
+        font-size: 12px;
+        line-height: 30px;
+        border-radius: 50%;
+        border: 1px solid #bababa;
+        margin: 10px;
+        vertical-align: middle;
+      }
+    }
   }
 </style>

client/src/views/login.vue

@@ -1,52 +1,52 @@
-<template>
-    <div class="login container">
-        <div class="user-name input-bd">
-            <div class="input-name">userName:</div>
-            <div class="input-text">
-                <input type="text"
-                       v-model="userAccount"/>
-            </div>
-        </div>
-        <div class="password input-bd">
-            <div class="input-name">password:</div>
-            <div class="input-text">
-                <input type="password"
-                       v-model="password"/>
-            </div>
-        </div>
-        <div class="login-btn btn">
-            <span @click="login">sign in</span>
-            <b @click="signUp">sign up</b>
-        </div>
-    </div>
-</template>
-<script lang="ts">
-  import {Vue} from 'vue-property-decorator';
-  import service from '../service';
-  import Component from 'vue-class-component';
-  import cookie from 'js-cookie';
-
-  @Component
-  export default class Login extends Vue {
-    public userAccount: string = '';
-    public password: string = '';
-
-    private signUp() {
-      this.$router.replace({name: 'register'});
-      return;
-    }
-
-    private async login() {
-      try {
-        const result = await service.login(this.userAccount, this.password);
-        const { token } = result.data;
-        cookie.set('token', token, {expires: 1});
-        this.$router.replace({name: 'home'});
-      } catch (e) {
-        console.log(e);
-      }
-    }
-  }
-</script>
-<style lang="less">
-</style>
+<template>
+    <div class="login container">
+        <div class="user-name input-bd">
+            <div class="input-name">userName:</div>
+            <div class="input-text">
+                <input type="text"
+                       v-model="userAccount"/>
+            </div>
+        </div>
+        <div class="password input-bd">
+            <div class="input-name">password:</div>
+            <div class="input-text">
+                <input type="password"
+                       v-model="password"/>
+            </div>
+        </div>
+        <div class="login-btn btn">
+            <span @click="login">sign in</span>
+            <b @click="signUp">sign up</b>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+  import {Vue} from 'vue-property-decorator';
+  import service from '../service';
+  import Component from 'vue-class-component';
+  import cookie from 'js-cookie';
+
+  @Component
+  export default class Login extends Vue {
+    public userAccount: string = '';
+    public password: string = '';
+
+    private signUp() {
+      this.$router.replace({name: 'register'});
+      return;
+    }
+
+    private async login() {
+      try {
+        const result = await service.login(this.userAccount, this.password);
+        const { token } = result.data;
+        cookie.set('token', token, {expires: 1});
+        this.$router.replace({name: 'home'});
+      } catch (e) {
+        console.log(e);
+      }
+    }
+  }
+</script>
+<style lang="less">
+</style>