feat: create game: show PIN

client/src/components/CreateGame.vue

@@ -6,6 +6,17 @@
     <template v-if="showModal">
       <div class="create-game__backdrop" />
       <div class="create-game__modal">
+        <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>
@@ -29,6 +40,7 @@
           >
             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;

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>