knowyt/client/src/pages/play.vue

<template>
  <div>
    <GameControls />
    <EngineDebug />
    <div v-if="gameState === 'idle'">
      <p>waiting ...</p>
    </div>
    <div v-if="gameState === 'ready-set'">
      <h1>{{ gamePhase }}</h1>
    </div>
    <div v-if="gameState === 'play'">
      <h2>Play</h2>
    </div>
  </div>
</template>

<script>
export default {
  async mounted() {
    await this.$engine.start()
  },
  async beforeDestroy() {
    await this.$engine.stop()
  },
  computed: {
    gameState() {
      return this.$store.state.game.state
    },
    gamePhase() {
      return this.$store.state.game.phase
    },
  },
}
</script>