parse game state and phase

client/src/pages/play.vue

@@ -2,6 +2,15 @@
   <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>
 
@@ -13,5 +22,13 @@ export default {
   async beforeDestroy() {
     await this.$engine.stop()
   },
+  computed: {
+    gameState() {
+      return this.$store.state.game.state
+    },
+    gamePhase() {
+      return this.$store.state.game.phase
+    },
+  },
 }
 </script>

client/src/plugins/engine/fetchUpdate.js

@@ -14,8 +14,13 @@ export default async function() {
         g: store.state.engine.user?.game,
     })
 
-    store.commit('engine/setJson', response.data)
+    this.parseSyncData(response.data)
   } catch (e) {
+    if (!e.response) {
+      // request aborted or other causes
+      return
+    }
+
     const { status, statusText } = e.response
     if (status != 200) {
       console.warn(`HTTP ${status} ${statusText}`)

client/src/plugins/engine/index.js

@@ -4,6 +4,7 @@ import stop from './stop'
 import fetchUpdate from './fetchUpdate'
 import fetchUserInfo from './fetchUserInfo'
 import startGame from './startGame'
+import parseSyncData from './parseSyncData'
 
 export default (context, inject) => {
   const engine = {
@@ -18,6 +19,7 @@ export default (context, inject) => {
     fetchUpdate,
     fetchUserInfo,
     startGame,
+    parseSyncData,
   }
 
   inject('engine', engine)

client/src/plugins/engine/parseSyncData.js

@@ -0,0 +1,6 @@
+export default function(data) {
+  const { store } = this.context
+
+  store.commit('engine/setJson', data)
+  store.commit('game/setStateAndPhase', data.game)
+}

client/src/store/game.js

@@ -0,0 +1,11 @@
+export const state = () => ({
+  state: "...",
+  phase: "...",
+})
+
+export const mutations = {
+  setStateAndPhase(state, { state: gameState, phase }) {
+    state.state = gameState
+    state.phase = phase
+  },
+}