refactoring

client/src/components/EngineDebug.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="enginedebug">
+    <pre class="enginedebug__json">{{ userJson }}</pre>
+    <pre class="enginedebug__json">{{ engineJson }}</pre>
+  </div>
+</template>
+
+<script>
+export default {
+  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">
+.enginedebug {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  background-color: #002040;
+
+  &__json {
+    margin: 1em 2em;
+    color: #808080;
+  }
+}
+</style>

client/src/components/GameControls.vue

@@ -1,9 +1,7 @@
 <template>
-  <div>
+  <nav v-if="isGamemaster" class="gamecontrols">
-    <nav>
+    <button @click="startGame">Start</button>
-      <h1 v-if="isGamemaster">Gamemaster</h1>
+  </nav>
-    </nav>
-  </div>
 </template>
 
 <script>
@@ -17,5 +15,17 @@ export default {
       return user && user.role === 'gamemaster'
     },
   },
+  methods: {
+    startGame() {
+      alert('start game')
+    },
+  },
 }
 </script>
+
+<style lang="scss">
+.gamecontrols {
+  padding: 8px 1em;
+  border-bottom: 1px solid #808080;
+}
+</style>

client/src/pages/play.vue

@@ -1,12 +1,7 @@
 <template>
   <div>
-    <div>
+    <GameControls />
-      <GameControls />
+    <EngineDebug />
-    </div>
-    <hr />
-    <div v-if="userJson">{{ userJson.role }}</div>
-    <pre class="json">{{ userJson }}</pre>
-    <pre class="json">{{ engineJson }}</pre>
   </div>
 </template>
 
@@ -18,20 +13,5 @@ export default {
   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>