refactoring: split engine.js into components

client/nuxt.config.js

@@ -18,7 +18,7 @@ export default {
   ],
   components: true,
   modules: ['@nuxtjs/axios'],
-  plugins: [{ src: '~/plugins/engine.js', mode: 'client' }],
+  plugins: [{ src: '~/plugins/engine', mode: 'client' }],
   axios: { proxy: true },
   publicRuntimeConfig: {
     serverBaseUrl: 'http://localhost:3000/',

client/src/components/GameControls.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <nav>
+      <h1 v-if="isGamemaster">Gamemaster</h1>
+    </nav>
+  </div>
+</template>
+
+<script>
+export default {
+  computed: {
+    user() {
+      return this.$store.state.engine.user || {}
+    },
+    isGamemaster() {
+      const user = this.$store.state.engine.user
+      return user && user.role === 'gamemaster'
+    },
+  },
+}
+</script>

client/src/pages/play.vue

@@ -1,5 +1,10 @@
 <template>
   <div>
+    <div>
+      <GameControls />
+    </div>
+    <hr />
+    <div v-if="userJson">{{ userJson.role }}</div>
     <pre class="json">{{ userJson }}</pre>
     <pre class="json">{{ engineJson }}</pre>
   </div>

client/src/plugins/engine/index.js

@@ -1,14 +1,14 @@
 import buildUrl from 'build-url'
 
 export default (context, inject) => {
-  const { store, $axios, $config, redirect } = context
-
   const engine = {
+    context,
     lastFetched: [0, 0, 0, 0, 0],
     isActive: false,
     shouldStop: false,
 
     async start() {
+      const { store, redirect } = this.context
       if (!store.state.engine.user) {
         if (!await this.fetchUserInfo()) {
           redirect('/')
@@ -29,6 +29,8 @@ export default (context, inject) => {
     },
 
     async fetchUpdate() {
+      const { store, $axios, $config } = this.context
+
       if (this.shouldStop || !this.isActive) {
         this.isActive = false
         this.shouldStop = false
@@ -69,6 +71,8 @@ export default (context, inject) => {
     },
 
     async fetchUserInfo() {
+      const { store, $axios } = this.context
+
       try {
         const response = await $axios.get('/api/userinfo')
         store.commit('engine/setUser', response.data)
@@ -80,5 +84,6 @@ export default (context, inject) => {
       return true
     },
   }
+  
   inject('engine', engine)
 }