startseite

GUI/src/Home.vue

@@ -1,10 +1,44 @@
 <script setup lang="ts">
-
+let buttons = [
+    {
+        name: "Lokaler Multiplayer",
+        icon: "mdi-account-switch",
+        color: "red"
+    },
+    {
+        name: "Lokal gegen Bot",
+        icon: "mdi-robot-angry-outline",
+        color: "green"
+    },
+    {
+        name: "Online Multiplayer",
+        icon: "mdi-web",
+        color: "blue"
+    }
+]
 </script>
 
 <template>
-    <h1>Home</h1>
+    <v-container class="fill-height d-flex justify-space-evenly align-center flex-column" fluid>
+        <h1>Wähle dein Spielmodi aus:</h1>
+        <v-row justify="center" align="center">
+            <v-col cols="12" class="text-center">
+                <div v-for="button of buttons" :key="button.name" class="pa-2">
+                    <v-btn :color="button.color" size="x-large" min-width="325" class="justify-start">
+                        <template v-slot:prepend>
+                            <div class="d-flex justify-start" style="width: 30px;">
+                                <v-icon :icon="button.icon"></v-icon>
+                            </div>
                         </template>
 
-<style scoped>
+                        <span class="flex-grow-1 text-center">
-</style>
+                            {{ button.name }}
+                        </span>
+                    </v-btn>
+                </div>
+            </v-col>
+        </v-row>
+    </v-container>
+</template>
+
+<style scoped></style>

GUI/src/Layout.vue

@@ -2,9 +2,18 @@
 
 <template>
   <v-app>
-    <v-app-bar :elevation="6">
+    <v-app-bar :elevation="6" image="./background.png">
-      <v-app-bar-title>4 Gewinnt</v-app-bar-title>
+      <template v-slot:image>
+        <v-img gradient="to top right, rgba(5, 5, 5, 0.6), rgba(50, 50, 60, 0.6)"></v-img>
+      </template>
+      <v-app-bar-title class="font-weight-semibold text-white">
+        4-Gewinnt
+      </v-app-bar-title>
     </v-app-bar>
+
+    <v-main>
+      <router-view></router-view>
+    </v-main>
   </v-app>
 </template>