feat: game buy in

client/src/views/game.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="game-container">
-    <div class="game-body">
+  <div class="game-container container">
+    <div class="game-player-info">
       <div class="users">
         <span v-for="user in users"> {{user.nick_name}}: {{user.counter}}</span>
       </div>
@@ -8,6 +8,9 @@
         {{joinMsg}}
       </div>
     </div>
+    <div class="game-body">
+      <div class="btn play"><span @click="play">play game</span></div>
+    </div>
     <div class="buy-in">
       <div class="input-bd">
         <div class="input-name">buy in:</div>
@@ -16,6 +19,7 @@
                  v-model="buyInSize"/>
         </div>
       </div>
+      <div class="btn"><span @click="buyIn">buy in</span></div>
     </div>
   </div>
 </template>
@@ -100,11 +104,26 @@
 
     private async buyIn() {
       try {
-        const result = await service.buyIn(this.buyInSize);
+        this.emit('buyIn', {
+          buyInSize: this.buyInSize
+        });
       } catch (e) {
         console.log(e);
       }
     }
+    play() {
+      console.log('play')
+      this.emit('playGame')
+    }
+
+    emit(eventType: string, data: any = {}) {
+      this.socket.emit(eventType, {
+        target: '',
+        payload: {
+          ...data,
+        },
+      });
+    }
 
     private mounted() {
       this.socketInit();