From 047ca43c4a2a89814318cf9407b3338dbc0a9c05 Mon Sep 17 00:00:00 2001
From: LQ63 <lkhermann@web.de>
Date: Wed, 10 Dec 2025 00:31:42 +0100
Subject: [PATCH] feat(ui): Vue Join Game Component

Added Main Menu with different design. Added buttons for create game, join game, settings
---
 src/components/MainMenuBoxes.vue | 79 ++++++++++++++++++++++++++++++++
 src/views/MainMenuView.vue       | 50 ++++++++++++++++++++
 2 files changed, 129 insertions(+)
 create mode 100644 src/components/MainMenuBoxes.vue
 create mode 100644 src/views/MainMenuView.vue

diff --git a/src/components/MainMenuBoxes.vue b/src/components/MainMenuBoxes.vue
new file mode 100644
index 0000000..9e7a46a
--- /dev/null
+++ b/src/components/MainMenuBoxes.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+const menuItems = [
+  {
+    title: 'Create game',
+    description: 'Create a new game and invite your friends to play with you.',
+    icon: 'add_circle_outline',
+    routeName: 'create-Game',
+    color: 'green-9'
+  },
+  {
+    title: 'Spiel beitreten',
+    description: 'Join a game by typing in the game identifier.',
+    icon: 'login',
+    routeName: 'join-game',
+    color: 'blue-9'
+  },
+  {
+    title: 'Settings',
+    description: 'This area is currently under construction.',
+    icon: 'settings',
+    routeName: 'settings',
+    color: 'grey-8'
+  }
+];
+
+const navigateTo = (routeName: string) => {
+  router.push({ name: routeName });
+};
+</script>
+
+<template>
+  <div class="row q-col-gutter-md justify-center" style="width: 100%; max-width: 1000px;">
+
+    <div
+      v-for="(item, index) in menuItems"
+      :key="index"
+      class="col-12 col-sm-6 col-md-4"
+    >
+      <q-card
+        class="menu-card bg-dark text-white q-pa-sm cursor-pointer"
+        v-ripple
+        @click="navigateTo(item.routeName)"
+      >
+        <q-card-section class="row items-center no-wrap">
+          <q-avatar
+            :icon="item.icon"
+            :color="item.color"
+            text-color="white"
+            size="lg"
+            class="q-mr-md shadow-2"
+          />
+          <div>
+            <div class="text-h6">{{ item.title }}</div>
+            <div class="text-caption text-grey-5">
+              {{ item.description }}
+            </div>
+          </div>
+        </q-card-section>
+      </q-card>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.menu-card {
+  transition: transform 0.2s, background-color 0.2s;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* Hover-Effekt für die Karten */
+.menu-card:hover {
+  transform: translateY(-5px);
+  background-color: #2c3e50 !important;
+  border-color: var(--q-primary);
+}
+</style>
diff --git a/src/views/MainMenuView.vue b/src/views/MainMenuView.vue
new file mode 100644
index 0000000..4cc2ce2
--- /dev/null
+++ b/src/views/MainMenuView.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import MainMenuBoxes from "@/components/MainMenuBoxes.vue";
+</script>
+
+<template>
+  <q-layout view="hHh lpR fFf" class="font-roboto">
+    <q-page-container>
+      <q-page class="flex justify-start items-center column">
+
+        <header class="text-center q-mb-xl">
+          <h1 class="game-title text-white q-my-none">
+            KnockOutWhist
+          </h1>
+          <p
+            class="text-h5 text-grey-4 q-mt-md"
+            style="max-width: 900px; margin-left: auto; margin-right: auto;"
+          >
+            Welcome to KnockOutWhist! In this game you have to "knock-out" your opponents until you are the last player standing.
+            Do you have what it takes to be crowned the champion?
+          </p>
+        </header>
+
+        <MainMenuBoxes />
+
+      </q-page>
+    </q-page-container>
+  </q-layout>
+</template>
+
+<style scoped>
+.game-title {
+  font-family: serif;
+
+
+  font-size: 5rem;
+  font-weight: 900;
+  letter-spacing: 3px;
+  color: #FFD700;
+
+  text-shadow:
+    2px 2px 0px #000000,
+    4px 4px 0px #8B4513,
+    6px 6px 12px rgba(0, 0, 0, 0.9);
+}
+@media (max-width: 600px) {
+  .game-title {
+    font-size: 3rem;
+  }
+}
+</style>