<template>
  <div class="row">
    <div class="col-12 col-md-8 offset-sm-2 col-lg-6 offset-md-3">
      <h2>Launch game id {{ gameId }} for {{ username }}</h2>
      <button
        class="btn btn-danger"
        v-if="isGameRunning"
        @click="isGameRunning = !isGameRunning"
      >
        Stop game
      </button>
      <button
        class="btn btn-success"
        v-else
        @click="isGameRunning = !isGameRunning"
      >
        Start game
      </button>
    </div>
  </div>
</template>

<script>
import { globalEventsBus } from '../main';
import { socketService } from '../main';
export default {
  props: ['game-id', 'username'],
  data() {
    return {
      isGameRunning: false
    };
  },
  watch: {
    isGameRunning() {
      if (this.isGameRunning) {
        globalEventsBus.$emit('game-running');
      } else {
        socketService.removeCreatedGames(this.username).catch(err => {
          console.log('Error communicating to server to remove games : ' + err);
        });
        globalEventsBus.$emit('game-stopped');
      }
    }
  },
  methods: {}
};
</script>

<style></style>
