<template>
  <div id="app">
    <Game v-if="isLoggedIn && isSocketConnected" v-bind:showDebug="debugInfos" v-bind:showLeaderboard="leaderboard"/>
    <div v-else class="container mainMenu">
      <div>
        <h1 class="gameTitle">tron.i</h1>
        <img src="./assets/logo_invert.png" alt="TronIo logo" width="110px" class="gameLogo"/>
      </div>
      <b-button @click="loginPrompt" class="startButton">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>
      <b-switch v-model="debugInfos">Debug info</b-switch>
      <b-switch v-model="leaderboard">Leaderboard</b-switch>
    </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',
      debugInfos: false,
      leaderboard: true
    }
  },
  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 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: rgb(235, 226, 233);
  background-color: #2a374a;
}

.gameLogo {
  display: inline-block;
  margin-right: 25px;
}

.gameTitle {
  display: inline-block;
  font-family: TRON;
  font-size: 110px;
  color: #cf0cb4ff;
}

.startButton {
  margin-top: 75px;
}

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