<template>
  <div class="page-admin">
    <template v-if="!isGamemasterOrAdmin">
      <p>You are not a game master.</p>
      <button @click="login">Go to login page</button>
    </template>
    <template v-if="isGamemasterOrAdmin">
      <GameControls />
      <div class="page-admin__tiles">
        <AdminTileMyself :user="user" />
        <AdminTileGameinfo :gameinfo="gameinfo" :players="players" />
        <AdminTilePlayers :gameinfo="gameinfo" :players="players" />
      </div>
    </template>
  </div>
</template>

<script>
export default {
  async fetch() {
    await this.$engine.fetchUserInfo()
    await this.$engine.fetchGameInfo({ g: this.$store.state.engine.user.game })
  },
  computed: {
    isGamemasterOrAdmin() {
      const user = this.$store.state.engine.user
      return user && ['gamemaster', 'admin'].indexOf(user.role) != -1
    },
    user() {
      return this.$store.state.engine.user || {}
    },
    gameinfo() {
      return this.$store.state.engine.gameinfo || {}
    },
    players() {
      const gameinfo = this.$store.state.engine.gameinfo || {}
      const players = [...gameinfo.players || []]
      return players.sort((a, b) => { return a.name.localeCompare(b.name) })
    },
  },
}
</script>

<style lang="scss">
.page-admin {
  color: #ffffff;

  &__tiles {
    display: flex;
    margin: 24px;
  }

  &__back-button {
    margin: 16px;
  }
}
</style>
