<template>
  <div id="app">
    <Game v-if="isLoggedIn && isSocketConnected"/>
    <div v-else class="container mainMenu">
      <img src="./assets/logo.png" alt="TronIo logo" width="150px"/>
      <h1 class="title">tron.io</h1>
      <b-button @click="loginPrompt">Start</b-button>
      <hr>
      <b-field label="Music" position="is-centered">
        <b-radio-button v-model="music" native-value="1">
          Original
        </b-radio-button>
        <b-radio-button v-model="music" native-value="2">
          None
        </b-radio-button>
      </b-field>
    </div>
    <b-loading v-model="isLoading"/>
  </div>
</template>

<script>
import { send } from './store/socketPlugin'
import { sound } from '@/game/sound.js'
import Game from './components/Game'

export default {
  name: 'App',
  components: {
    Game
  },
  data () {
    return {
      music: '2'
    }
  },
  computed: {
    isSocketConnected () {
      return this.$store.state.game.socketConnected
    },
    isLoading () {
      return !this.isSocketConnected
    },
    isLoggedIn () {
      return this.$store.state.game.loggedIn
    }
  },
  watch: {
    music: function (music) {
      sound.stopBackgroundMusic()
      sound.startBackgroundMusic(music)
    }
  },
  methods: {
    loginPrompt () {
      this.$buefy.dialog.prompt({
        message: 'Choose a name',
        trapFocus: true,
        inputAttrs: {
          placeholder: 'user',
          minlength: 1,
          maxlength: 15
        },
        confirmText: 'Go',
        onConfirm: (name) => {
          localStorage.setItem('name', name)
          this.login(name)
        }
      })
    },
    login (name) {
      send({
        type: 'login',
        name: name
      })
    }
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.mainMenu {
  top: 30vh;
}
</style>
