From 2848658e3dca7fe43ebce5a75043a92ce7964868 Mon Sep 17 00:00:00 2001
From: vikingowl <christian@nachtigall.dev>
Date: Mon, 11 Nov 2024 01:57:54 +0100
Subject: [PATCH] fixed functionality on landing page

---
 src/pages/index.vue | 55 ++++++++++++++++++++++++++++-----------------
 1 file changed, 35 insertions(+), 20 deletions(-)

diff --git a/src/pages/index.vue b/src/pages/index.vue
index 7b28590..e79a9ad 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,33 +1,46 @@
 <template>
   <v-sheet class="w-100 h-100 d-flex flex-column justify-center align-center" color="transparent">
     <h1 id="main-title">Tik Tak Blow</h1>
-    <v-btn
-      class="mt-12"
-      color="yellow"
-      height="5rem"
-      rounded
-      variant="tonal"
-      width="20rem"
-      @click="createGame">
-      Create Game
-    </v-btn>
-    <v-sheet class="mt-6 d-flex justify-center" color="transparent" height="3.5rem">
+    <v-sheet color="transparent" width="25rem">
       <v-text-field
-        v-model="lobbyId"
-        placeholder="Lobby ID"
+        v-model="username"
+        class="mt-12 mb-6"
+        placeholder="Username"
         rounded
-        style="margin-right: 1rem; height: 3.5rem"
+        style="height: 3.5rem"
+        type="username"
         variant="outlined"
-        width="9rem" />
+        width="100%" />
+
+      <v-sheet class="mb-6 d-flex justify-center" color="transparent" height="3.5rem">
+        <v-text-field
+          v-model="lobbyId"
+          placeholder="Lobby ID"
+          rounded
+          style="margin-right: 1rem; height: 3.5rem"
+          variant="outlined"
+          width="14rem" />
+        <v-btn
+          :disabled="!(username && lobbyId)"
+          color="yellow"
+          height="3.5rem"
+          rounded
+          variant="tonal"
+          width="10rem"
+          @click="joinGame">
+          Spiel beitreten
+        </v-btn>
+      </v-sheet>
+
       <v-btn
-        :disabled="!lobbyId"
+        :disabled="!(username && !lobbyId)"
         color="yellow"
-        height="3.5rem"
+        height="5rem"
         rounded
         variant="tonal"
-        width="10rem"
-        @click="joinGame">
-        Join Game
+        width="100%"
+        @click="createGame">
+        Spiel erstellen
       </v-btn>
     </v-sheet>
   </v-sheet>
@@ -37,7 +50,9 @@
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
+const username = ref('')
 const lobbyId = ref('')
+const password = ref('')
 
 const createGame = () => {
   // TODO Request to Server for new Game Lobby ID