<template>
  <main id="app" class="section">
  <section id="content" class="columns is-desktop">
    <Player></Player>
    <div class="column">
        <GroupChest></GroupChest>
    </div>
  </section>
  </main>
</template>

<script>
import Player from './components/Player.vue'
import GroupChest from './components/GroupChest.vue'
import 'bulma/css/bulma.css'

export const store = {
    debug: true,
    state: {
        player_id: 0,
        show_player_chest: false,
        // methods
        isPlayer () {
            this.player_id != 0
        },
        isGroup () {
            this.player_id == 0
        },
    },
    setActivePlayer (newPlayerId) {
        if (this.debug) console.log('setActivePlayer to ', newPlayerId)
        this.state.player_id = newPlayerId
    },
    switchPlayerChestVisibility () {
        if (this.debug) console.log('switchPlayerChestVisibility', !this.state.show_player_chest)
        this.state.show_player_chest = !this.state.show_player_chest
    }
}

export default {
  name: 'app',
  components: {
    Player,
    GroupChest
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
