From 4fc4730e3428a5826a1500a9b8102126ae794456 Mon Sep 17 00:00:00 2001
From: Settel <settel@localhost>
Date: Sun, 10 Apr 2022 16:15:05 +0200
Subject: [PATCH] feat: create game: show PIN

---
 client/src/components/CreateGame.vue | 78 ++++++++++++++++++----------
 client/src/pages/index.vue           |  2 +-
 2 files changed, 53 insertions(+), 27 deletions(-)

diff --git a/client/src/components/CreateGame.vue b/client/src/components/CreateGame.vue
index b768aed..fb7cf45 100644
--- a/client/src/components/CreateGame.vue
+++ b/client/src/components/CreateGame.vue
@@ -6,29 +6,41 @@
     <template v-if="showModal">
       <div class="create-game__backdrop" />
       <div class="create-game__modal">
-        <div class="create-game__modal-content">
-          <div class="create-game__modal-close" @click="closeModal" />
-          <p>
-            Erstellt eine neues, leeres Spiel und einen Useraccount als Gamemaster.
-          </p>
-          <table class="create-game__modal-content-table">
-            <tr>
-              <td>Name</td>
-              <td><input v-model="name" size="16" /></td>
-            </tr>
-            <tr>
-              <td>Teamname</td>
-              <td><input v-model="teamname" size="16" /></td>
-            </tr>
-          </table>
-        </div>
-        <Button
-          class="create-game__modal-cta"
-          :disabled="name.length == 0 || teamname.length == 0"
-          @click="createGame"
-        >
-          create game
-        </Button>
+        <template v-if="authcode">
+          <div class="create-game__modal-success-message">
+            <p>Deine PIN lautet:</p>
+            <div class="create-game__modal-pin">
+              {{ authcode}}
+            </div>
+            <p>Schreibe sie Dir am besten gleich auf und logge dich anschließend damit ein.</p>
+          </div>
+          <PlayButton />
+        </template>
+        <template v-else>
+          <div class="create-game__modal-content">
+            <div class="create-game__modal-close" @click="closeModal" />
+            <p>
+              Erstellt eine neues, leeres Spiel und einen Useraccount als Gamemaster.
+            </p>
+            <table class="create-game__modal-content-table">
+              <tr>
+                <td>Name</td>
+                <td><input v-model="name" size="16" /></td>
+              </tr>
+              <tr>
+                <td>Teamname</td>
+                <td><input v-model="teamname" size="16" /></td>
+              </tr>
+            </table>
+          </div>
+          <Button
+            class="create-game__modal-cta"
+            :disabled="name.length == 0 || teamname.length == 0"
+            @click="createGame"
+          >
+            create game
+          </Button>
+        </template>
       </div>
     </template>
   </div>
@@ -40,12 +52,14 @@ export default {
     return {
       name: '',
       teamname: '',
+      authcode: '',
       showModal: false,
     }
   },
   methods: {
     openModal() {
       this.showModal = true
+      this.authcode = ''
     },
     closeModal() {
       this.showModal = false
@@ -53,7 +67,8 @@ export default {
     async createGame() {
       this.showModal = false
       const user = await this.$engine.createGame(this.name, this.teamname)
-      console.log(user)
+      this.showModal = true
+      this.authcode = user.data.authcode
     },
   },
 }
@@ -89,10 +104,11 @@ export default {
   &__modal {
     position: absolute;
     left: 50%;
-    top: 15%;
+    top: 10%;
     margin-left: -300px;
     width: 600px;
-    height: 300px;
+    height: 400px;
+    overflow: hidden;
     display: flex;
     flex-direction: column;
     z-index: 16;
@@ -117,6 +133,16 @@ export default {
       margin: auto 24px 24px auto;
     }
 
+    &-success-message {
+      font-size: 24px;
+      text-align: center;
+      margin: 1em 2em 2em 2em;
+    }
+    &-pin {
+      font-size: 32px;
+      font-weight: 800;
+    }
+
     &-close {
       float: right;
       margin: 16px -16px 16px 16px;
diff --git a/client/src/pages/index.vue b/client/src/pages/index.vue
index f26a929..bddf025 100644
--- a/client/src/pages/index.vue
+++ b/client/src/pages/index.vue
@@ -2,7 +2,7 @@
   <div class="startpage">
     <TitleBox />
     <PlayButton class="startpage__buttonline" />
-    <CreateGame class="startpage__creategame" />
+    <CreateGame v-if="!$store.state.engine.user" class="startpage__creategame" />
     <div class="startpage__copyright">
       v{{ $config.version }}, © 2021-2022, Settel
     </div>