add client ui

client/src/App.vue

@@ -1,68 +1,67 @@
-<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>
+<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{
+  .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/components/CommonCard.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="common-card-container">
+    <i></i>
+    <i></i>
+    <i></i>
+    <i></i>
+    <i></i>
+  </div>
+</template>
+
+<script lang="ts">
+  import {Component, Prop, Vue} from 'vue-property-decorator';
+
+  @Component
+  export default class SitList extends Vue {
+    @Prop() private msg!: string;
+    @Prop() private currPlayer: any;
+    private sitList: ISit[] = [];
+
+    private sitDown(sit: ISit) {
+      if (!sit.player) {
+        sit.player = this.currPlayer;
+      }
+    }
+
+    private mounted() {
+      for (let i = 0; i < 9; i++) {
+        const sit = {
+          position: i + 1,
+        };
+        this.sitList.push(sit);
+      }
+    }
+  }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="less">
+  .common-card-container{
+    position: absolute;
+    top: 50vh;
+    left: 50%;
+    margin: -35px -122px;
+    i{
+      background: url("../assets/poke.png");
+      height: 237/3.5px;
+      width: 155/3.5px;
+      background-size: 100% 100%;
+      display: inline-block;
+      margin:0 2px;
+    }
+  }
+</style>

client/src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-
-@Component
-export default class HelloWorld extends Vue {
-  @Prop() private msg!: string;
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="less">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

client/src/components/SitList.vue

@@ -0,0 +1,204 @@
+<template>
+  <div class="sit-list-container">
+    <div class="sit-list">
+      <div class="item" v-for="(sit,key) in sitList" :key="key" @click="sitDown(key)">
+        <div class="default"></div>
+        <div class="player">
+          <div class="user-name">test</div>
+          <div class="icon"></div>
+          <div class="counter">100</div>
+          <div class="action-size">200</div>
+          <div class="action-command">call</div>
+          <div class="type">bb</div>
+          <div class="hand-card"></div>
+        </div>
+        <div class="cards">
+          <div class="hand-card"></div>
+          <div class="card-style"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import {Component, Prop, Vue} from 'vue-property-decorator';
+  import {IUser} from '../../../server/src/interface/IUser';
+
+  interface ISit {
+    player?: IUser;
+    position: number;
+  }
+
+  @Component
+  export default class SitList extends Vue {
+    @Prop() private msg!: string;
+    @Prop() private currPlayer: any;
+    private sitList: ISit[] = [];
+
+    private sitDown(sit: ISit) {
+      if (!sit.player) {
+        sit.player = this.currPlayer;
+      }
+    }
+
+    private mounted() {
+      for (let i = 0; i < 9; i++) {
+        const sit = {
+          position: i + 1,
+        };
+        this.sitList.push(sit);
+      }
+    }
+  }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="less">
+  .sit-list-container {
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    height: 100vh;
+    width: 100vw;
+    .sit-list {
+      position: relative;
+      width: 100vw;
+      height: 620px;
+      padding: 10px;
+      margin:0 15px;
+      box-sizing: border-box;
+      .item {
+        position: absolute;
+        font-size: 12px;
+        .player{
+          position: relative;
+          .icon{
+            width: 45px;
+            height: 45px;
+            background: url("../assets/poke-icon.png") #fff;
+            background-size: 100% 100%;
+            border-radius: 2px;
+            border: 1px solid #bababa;
+            margin-bottom: 2px;
+          }
+          .user-name{
+            color: #fff;
+          }
+          .counter{
+            background-color: rgba(0,0,0,0.8);
+            color: #fff;
+            font-weight: 600;
+            font-size: 12px;
+            border-radius: 2px;
+          }
+          .action-command{
+            top: 15px;
+            left: 45px;
+            padding: 1px 8px;
+            border-radius: 9px;
+            color: #ffffff;
+            background-color: #2c3e50;
+            text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3);
+            position: absolute;
+          }
+          .type{
+            background-color: #fff;
+            color: #2b2b2b;
+            border-radius: 50%;
+            padding: 2px;
+            width: 18px;
+            height: 18px;
+            line-height: 18px;
+            position: absolute;
+            top: 53px;
+            left: 38px;
+            font-size: 12px;
+            transform: scale(0.8);
+          }
+          .action-size{
+            background-color: rgba(0, 0, 0, 0.3);
+            border-radius: 2px;
+            padding:1px 4px;
+            text-align: center;
+            min-width: 35px;
+            color: #fff;
+            font-weight: 600;
+            position: absolute;
+            top: 35px;
+            left: 40px;
+          }
+        }
+        &:nth-child(1) {
+          left: 75px;
+          top: 0;
+        }
+
+        &:nth-child(2) {
+          left: 240px;
+          top: 0;
+        }
+
+        &:nth-child(3) {
+          left: 296px;
+          top: 100px;
+        }
+
+        &:nth-child(4) {
+          left: 296px;
+          top: 200px;
+        }
+
+        &:nth-child(5) {
+          left: 296px;
+          top: 330px;
+        }
+
+        &:nth-child(6) {
+          left: 100px;
+          top: 460px;
+          .action-command{
+            left: -22px;
+          }
+          .type{
+            left: -16px;
+          }
+          .action-size{
+            top: -5px;
+            left: 57px;
+            padding-right: 15px;
+            text-align: right;
+          }
+        }
+
+        &:nth-child(7) {
+          left: 0;
+          top: 330px;
+        }
+
+        &:nth-child(8) {
+          left: 0;
+          top: 200px;
+        }
+
+        &:nth-child(9) {
+          left: 0;
+          top: 100px;
+        }
+        &:nth-child(2),&:nth-child(3),&:nth-child(4),&:nth-child(5){
+          .action-command{
+            left: -22px;
+          }
+          .type{
+            left: -16px;
+          }
+          .action-size{
+            left: -40px;
+            padding-right: 15px;
+            text-align: right;
+          }
+        }
+      }
+    }
+  }
+</style>

client/src/interface/user.ts

@@ -0,0 +1,10 @@
+export interface IUser {
+  counter: number;
+  nick_name: string;
+  actionSize: number;
+  actionCommand: string;
+  type: string;
+  userId?: number;
+  handCard?: string[];
+  buyIn: number;
+}

client/src/views/game.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="game-container container">
+    <sitList></sitList>
+    <common-card></common-card>
     <div class="game-body" v-show="hasBuyIn">
       <div class="game-player-info">
         <div class="users"
@@ -58,28 +60,20 @@
 </template>
 
 <script lang="ts">
-  import { Vue } from 'vue-property-decorator';
+  import {Vue} from 'vue-property-decorator';
   import Component from 'vue-class-component';
   import io from 'socket.io-client';
   import cookie from 'js-cookie';
-
-  interface IUser {
-    counter: number;
-    nick_name: string;
-    actionSize: number;
-    actionCommand: string;
-    type: string;
-    userId?: number;
-    handCard?: string[];
-    buyIn: number;
-  }
+  import sitList from '../components/SitList.vue';
+  import commonCard from '../components/CommonCard.vue';
+  import {IUser} from '@/interface/user';
 
   export enum ECommand {
-    CALL   = 'call',
+    CALL = 'call',
     ALL_IN = 'allin',
-    RAISE  = 'raise',
-    CHECK  = 'check',
-    FOLD   = 'fold',
+    RAISE = 'raise',
+    CHECK = 'check',
+    FOLD = 'fold',
   }
 
   interface IMsg {
@@ -89,7 +83,12 @@
     data: any;
   }
 
-  @Component
+  @Component({
+    components: {
+      sitList,
+      commonCard,
+    },
+  })
   export default class Game extends Vue {
     public socket: any = null;
     private users: IUser[] = [];
@@ -196,7 +195,7 @@
     }
 
     private action(command: string) {
-      this.emit('action', { command });
+      this.emit('action', {command});
       this.isAction = false;
       this.isRaise = false;
     }
@@ -328,6 +327,8 @@
 <style lang="less"
        scoped>
   .game-container {
+    background: url("../assets/bg.png");
+    background-size: 100% 100%;
     .raise-size {
       i {
         padding: 5px;
@@ -343,5 +344,13 @@
         vertical-align: middle;
       }
     }
+
+    .sit-list {
+      .sit {
+        i {
+
+        }
+      }
+    }
   }
 </style>