From da0760850af75cef51cb4b08fd937638f21f56a0 Mon Sep 17 00:00:00 2001
From: Settel <settel@localhost>
Date: Fri, 13 Aug 2021 00:12:04 +0200
Subject: [PATCH] refactoring

---
 client/src/components/EngineDebug.vue  | 33 ++++++++++++++++++++++++++
 client/src/components/GameControls.vue | 20 ++++++++++++----
 client/src/pages/play.vue              | 24 ++-----------------
 3 files changed, 50 insertions(+), 27 deletions(-)
 create mode 100644 client/src/components/EngineDebug.vue

diff --git a/client/src/components/EngineDebug.vue b/client/src/components/EngineDebug.vue
new file mode 100644
index 0000000..b3463f4
--- /dev/null
+++ b/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>
diff --git a/client/src/components/GameControls.vue b/client/src/components/GameControls.vue
index b722aaf..90c90d8 100644
--- a/client/src/components/GameControls.vue
+++ b/client/src/components/GameControls.vue
@@ -1,9 +1,7 @@
 <template>
-  <div>
-    <nav>
-      <h1 v-if="isGamemaster">Gamemaster</h1>
-    </nav>
-  </div>
+  <nav v-if="isGamemaster" class="gamecontrols">
+    <button @click="startGame">Start</button>
+  </nav>
 </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>
diff --git a/client/src/pages/play.vue b/client/src/pages/play.vue
index 15cedef..dfed701 100644
--- a/client/src/pages/play.vue
+++ b/client/src/pages/play.vue
@@ -1,12 +1,7 @@
 <template>
   <div>
-    <div>
-      <GameControls />
-    </div>
-    <hr />
-    <div v-if="userJson">{{ userJson.role }}</div>
-    <pre class="json">{{ userJson }}</pre>
-    <pre class="json">{{ engineJson }}</pre>
+    <GameControls />
+    <EngineDebug />
   </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>