add game,home pages

client/src/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

client/src/App.vue

@@ -1,29 +1,67 @@
-<template>
-  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
-import HelloWorld from './components/HelloWorld.vue';
-
-@Component({
-  components: {
-    HelloWorld,
-  },
-})
-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;
-  margin-top: 60px;
-}
-</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;
+    }
+    b{
+      display: inline-block;
+      border: aliceblue;
+      border-radius: 8px;
+      padding: 5px 20px;
+      margin-left: 10px;
+    }
+  }
+}
+</style>

client/src/main.ts

@@ -8,5 +8,5 @@ Vue.config.productionTip = false;
 new Vue({
   router,
   store,
-  render: h => h(App),
+  render: (h) => h(App),
 }).$mount('#app');

client/src/router/index.ts

@@ -1,27 +1,37 @@
-import Vue from 'vue';
-import VueRouter, { RouteConfig } from 'vue-router';
-import Home from '../views/Home.vue';
-
-Vue.use(VueRouter);
-
-const routes: RouteConfig[] = [
-  {
-    path: '/',
-    name: 'Home',
-    component: Home,
-  },
-  {
-    path: '/login',
-    name: 'login',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import('../views/login.vue'),
-  },
-];
-
-const router = new VueRouter({
-  routes,
-});
-
-export default router;
+import Vue from 'vue';
+import VueRouter, { RouteConfig } from 'vue-router';
+import Home from '../views/Home.vue';
+import Login from '../views/login.vue';
+import Register from '../views/register.vue';
+import Game from '../views/game.vue';
+
+Vue.use(VueRouter);
+
+const routes: RouteConfig[] = [
+  {
+    path: '/',
+    name: 'home',
+    component: Home,
+  },
+  {
+    path: '/login',
+    name: 'login',
+    component: Login,
+  },
+  {
+    path: '/register',
+    name: 'register',
+    component: Register,
+  },
+  {
+    path: '/game/:roomNumber',
+    name: 'game',
+    component: Game,
+  },
+];
+
+const router = new VueRouter({
+  routes,
+});
+
+export default router;

client/src/service/index.ts

@@ -1,8 +1,20 @@
-import request from '../utils/request';
-
-export default {
-  register: (userName: string, password: string) => request({
-    url: '',
-    body: { userName, password },
-  }),
-};
+import request from '../utils/request';
+
+export default {
+  register: (userName: string, password: string) => request({
+    url: '/user/register',
+    body: { userName, password },
+  }),
+  login: (userAccount: string, password: string) => request({
+    url: '/user/login',
+    body: { userAccount, password },
+  }),
+  createRoom: () => request({
+    url: '/game/room',
+    body: { },
+  }),
+  buyIn: (buyInSize: number) => request({
+    url: '/game/buyIn',
+    body: { buyInSize },
+  }),
+};

client/src/utils/request.ts

@@ -1,26 +1,33 @@
-import axios, { AxiosRequestConfig, Method } from 'axios';
-import cookie from 'js-cookie';
-const request = async ({ method = 'post' as Method, url = '', body= {}, timeout = 8000 }) => {
-  const origin = '';
-  if (!url) {
-    return Promise.reject('Request url is null!');
-  }
-  const token = cookie.get('game_token');
-  const headers = {
-    Authorization: `Bearer ${token}`,
-  };
-  url = `${origin}/${url}`;
-  const option: AxiosRequestConfig = {
-    url,
-    method,
-    timeout,
-    withCredentials: true,
-    headers,
-  };
-  try {
-    return await axios(option);
-  } catch (e) {
-    throw e;
-  }
-};
-export default request;
+import axios, {AxiosRequestConfig, Method} from 'axios';
+import cookie from 'js-cookie';
+
+const request = async ({method = 'post' as Method, url = '', body = {}, timeout = 8000}) => {
+  const origin = 'http://127.0.0.1:7001/node';
+  if (!url) {
+    return Promise.reject('Request url is null!');
+  }
+  const token = cookie.get('token');
+  const headers = {
+    Authorization: `Bearer ${token}`,
+  };
+  url = `${origin}${url}`;
+  const option: AxiosRequestConfig = {
+    url,
+    method,
+    timeout,
+    data: body,
+    withCredentials: true,
+    headers,
+  };
+  try {
+    const result = await axios(option);
+    if (result.data.code === '000000') {
+      return result.data;
+    } else {
+      throw result.data;
+    }
+  } catch (e) {
+    throw e;
+  }
+};
+export default request;

client/src/views/Home.vue

@@ -1,16 +1,49 @@
-<template>
-  <div class="home">
-    <div class="create-room" @creatRoom = 'createRoom'>create room</div>
-    <div class="join room" @joinRoom = 'joinRoom'>join room</div>
-    <div class="room number">room number: </div>
-  </div>
-</template>
-
-<script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator';
-  export default class Login extends Vue {
-    roomNumber: string = '';
-    createRoom() {}
-    joinRoom() {}
-  }
-</script>
+<template>
+  <div class="home container">
+    <div class="create-room"
+         @click="createRoom">create room
+    </div>
+    <div class="join room"
+         @click="joinRoom">join room
+    </div>
+    <div class="room number">room number:</div>
+  </div>
+</template>
+
+<script lang="ts">
+  import {Vue} from 'vue-property-decorator';
+  import Component from 'vue-class-component';
+  import service from '../service';
+
+  @Component
+  export default class Home extends Vue {
+    public roomNumber: string = '';
+
+    private async createRoom() {
+      try {
+        const result = await service.createRoom();
+        const {roomNumber} = result.data;
+        console.log(result);
+        this.$router.replace({name: 'game', params: {roomNumber}});
+      } catch (e) {
+        console.log(e);
+      }
+    }
+
+    private joinRoom() {
+      console.log('');
+    }
+  }
+</script>
+<style lang="less">
+  .container{
+    .create-room{
+      padding: 10px;
+      background-color: #6796ff;
+      color: #fff;
+      border-radius: 8px;
+      width: 100px;
+      margin: auto;
+    }
+  }
+</style>

client/src/views/game.vue

@@ -1,22 +1,119 @@
-<template>
-  <div class="game-container">
-  </div>
-</template>
-
-<script>
-export default {
-  components: {},
-  data() {
-    return {}
-  },
-  methods : {},
-  computed: {},
-  mounted() {},
-}
-</script>
-
-<style lang="less" scoped>
-.game-container{
-}
-</style>
-
+<template>
+  <div class="game-container">
+    <div class="game-body">
+      <div class="users">
+        <span v-for="user in users"> {{user.nick_name}}: {{user.counter}}</span>
+      </div>
+      <div class="join">
+        {{joinMsg}}
+      </div>
+    </div>
+    <div class="buy-in">
+      <div class="input-bd">
+        <div class="input-name">buy in:</div>
+        <div class="input-text">
+          <input type="text"
+                 v-model="buyInSize"/>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import {Vue} from 'vue-property-decorator';
+  import Component from 'vue-class-component';
+  import io from 'socket.io-client';
+  import cookie from 'js-cookie';
+  import service from '../service';
+
+  interface IUser {
+    counter: number;
+    nick_name: string;
+  }
+
+  interface IMsg {
+    action: string;
+    clients: string[];
+    target: string;
+    message: string;
+  }
+
+  @Component
+  export default class Game extends Vue {
+    public socket: any = null;
+    private users: IUser[] = [];
+    private joinMsg = '';
+    private buyInSize = 0;
+
+    get roomId() {
+      return this.$route.params.roomNumber;
+    }
+
+    private socketInit() {
+      const token = cookie.get('token');
+      const log = console.log;
+      this.socket = io('http://127.0.0.1:7001/socket', {
+        // 实际使用中可以在这里传递参数
+        query: {
+          room: this.roomId,
+          token,
+        },
+        transports: ['websocket'],
+      });
+      this.socket.on('connect', () => {
+        const id: string = this.socket.id;
+
+        log('#connect,', id, this.socket);
+
+        // 监听自身 id 以实现 p2p 通讯
+        this.socket.on(id, (msg: IMsg) => {
+          log('#receive,', msg);
+        });
+      });
+
+      // 接收在线用户信息
+      this.socket.on('online', (msg: IMsg) => {
+        log('#online,', msg);
+        if (msg.action === 'join') {
+          this.joinMsg = msg.message;
+        }
+        if (msg.action === 'players') {
+          this.users = JSON.parse(msg.message);
+          console.log('users', JSON.parse(msg.message));
+        }
+      });
+
+      // 系统事件
+      this.socket.on('disconnect', (msg: IMsg) => {
+        log('#disconnect', msg);
+      });
+
+      this.socket.on('disconnecting', () => {
+        log('#disconnecting');
+      });
+
+      this.socket.on('error', () => {
+        log('#error');
+      });
+    }
+
+    private async buyIn() {
+      try {
+        const result = await service.buyIn(this.buyInSize);
+      } catch (e) {
+        console.log(e);
+      }
+    }
+
+    private mounted() {
+      this.socketInit();
+    }
+  }
+</script>
+
+<style lang="less"
+       scoped>
+  .game-container {
+  }
+</style>

client/src/views/login.vue

@@ -1,20 +1,53 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
-<script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator';
-  import HelloWorld from './components/HelloWorld.vue';
-
-  @Component({
-    components: {
-      HelloWorld,
-    },
-  })
-  export default class Login extends Vue {
-    userName: string = '';
-    password: string = '';
-    login() {}
-  }
-</script>
+<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'});
+        console.log(result);
+      } catch (e) {
+        console.log(e);
+      }
+    }
+  }
+</script>
+<style lang="less">
+</style>

client/src/views/register.vue

@@ -1,35 +1,53 @@
-<template>
-    <div class="register-container">
-        <div class="user-name">user name <input type="text" v-model="userName"></div>
-        <div class="password">user name <input type="password" v-model="password"></div>
-        <div class="re-password">password: <input type="password" v-model="rePassword"></div>
-        <div class="s-btn" > <span @click="register">submit</span></div>
-    </div>
-</template>
-<style type='less'>
-</style>
-<script lang="ts">
-  import {Component, Vue} from 'vue-property-decorator';
-  import service from '../service'
-
-  @Component({
-    components: {},
-  })
-  export default class Register extends Vue {
-    userName: string = '';
-    password: string = '';
-    rePassword: string = '';
-    async register() {
-      try {
-        const option = {
-          userName: this.userName,
-          password: this.password,
-        }
-        const result = await service.register(...option)
-      } catch (e) {
-        console.log(e)
-      }
-
-    }
-  }
-</script>
+<template>
+    <div class="register-container container">
+        <div class="user-name input-bd">
+            <div class="input-name">userName:</div>
+            <div class="input-text">
+                <input type="text"
+                       v-model="userName"/>
+            </div>
+        </div>
+        <div class="password input-bd">
+            <div class="input-name">password:</div>
+            <div class="input-text">
+                <input type="text"
+                       v-model="password"/>
+            </div>
+        </div>
+        <div class="re-password input-bd">
+            <div class="input-name">re-password:</div>
+            <div class="input-text">
+                <input type="text"
+                       v-model="rePassword"/>
+            </div>
+        </div>
+        <div class="s-btn btn"><span @click="register">submit</span></div>
+    </div>
+</template>
+<script lang="ts">
+  import {Vue} from 'vue-property-decorator';
+  import service from '../service';
+  import Component from 'vue-class-component';
+
+  @Component
+  export default class Register extends Vue {
+    public userName: string = '';
+    public password: string = '';
+    public rePassword: string = '';
+
+    get vaild() {
+      return this.password === this.rePassword;
+    }
+
+    private async register() {
+      try {
+        const result = await service.register(this.userName, this.password);
+      } catch (e) {
+        console.log(e);
+      }
+    }
+  }
+</script>
+<style lang="less">
+
+</style>