<template>
  <div>
    <div>
      <GameControls />
    </div>
    <hr />
    <div v-if="userJson">{{ userJson.role }}</div>
    <pre class="json">{{ userJson }}</pre>
    <pre class="json">{{ engineJson }}</pre>
  </div>
</template>

<script>
export default {
  async mounted() {
    await this.$engine.start()
  },
  async beforeDestroy() {
    await this.$engine.stop()
  },
  computed: {
    userJson() {
      return JSON.stringify(this.$store.state.engine.user, null, 2)
    },
    engineJson() {
      return JSON.stringify(this.$store.state.engine.json, null, 2)
    },
  }
}
</script>

<style lang="scss">
.json {
  margin: 1em 2em;
  color: #ffffff;
}
</style>
