ci: bump version to v0.4.0

feat: FRO-17 Added Rule Component and changed Mainmenu structure (#11 )
Added a Rule Component and changed MainMenu Structure Co-authored-by: LQ63 <lkhermann@web.de> Reviewed-on: #11 Reviewed-by: Janis <janis-e@gmx.de> Co-authored-by: lq64 <lq@blackhole.local> Co-committed-by: lq64 <lq@blackhole.local>
2025-12-10 13:13:18 +00:00 · 2025-12-10 14:12:12 +01:00 · 2025-12-10 11:15:32 +00:00 · 2025-12-10 12:14:05 +01:00 · 2025-12-10 11:50:53 +01:00 · 2025-12-10 10:46:27 +00:00
35 changed files with 2250 additions and 409 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -32,3 +32,34 @@
 ### Bug Fixes

 * FRO-28 Integrate Frontend Build as a seperate image ([#3](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/3)) ([ecc78ab](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/ecc78ab1b3772bffbae62a7b926cfc0ca8be4ff4))
+## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.1.1...0.0.0) (2025-12-07)
+## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.1.2...0.0.0) (2025-12-08)
+## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.1.3...0.0.0) (2025-12-10)
+
+### Features
+
+* **ui:** Vue Create Game component ([#5](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/5)) ([3efacde](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/3efacde49d295cc615a3ff61939a3a5e8ec7e7af))
+## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.2.0...0.0.0) (2025-12-10)
+
+### Bug Fixes
+
+* FRO-29 Websocket Communication ([#7](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/7)) ([64d528b](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/64d528bf5c8b5d4f0d31274d600b3f05b8c47740))
+## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.2.1...0.0.0) (2025-12-10)
+
+### Features
+
+* FRO-2 Implement Login Component ([#8](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/8)) ([eac315b](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/eac315bea1a2075858648bbc49c200b8020e1ff7))
+## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.3.0...0.0.0) (2025-12-10)
+
+### Bug Fixes
+
+* removed defaults ([#9](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/9)) ([946550f](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/946550f0ab141a8352f94b6c4ab5fa53cb81c53b))
+
+### Reverts
+
+* deleted MainMenuBoxes.vue ([#10](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/10)) ([4582306](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/458230622bcf0a5d6f5fe5cec028ab46651b6760))
+## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.3.1...0.0.0) (2025-12-10)
+
+### Features
+
+* FRO-17 Added Rule Component and changed Mainmenu structure ([#11](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/11)) ([adbe2be](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/adbe2be5345b95cd3bcd9deba936614b489268fd))
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -19,7 +19,12 @@
    "@quasar/extras": "^1.17.0",
    "quasar": "^2.18.6",
    "vue": "^3.5.25",
-    "vue-router": "^4.6.3"
+    "vue-router": "^4.6.3",
+    "tsparticles": "~3.9.1",
+    "@tsparticles/vue3": "~3.0.1",
+    "axios": "^1.13.2",
+    "vue-axios": "^3.5.2",
+    "pinia": "^3.0.4"
  },
  "devDependencies": {
    "@quasar/vite-plugin": "^1.10.0",
--- a/public/env.js
+++ b/public/env.js
@@ -0,0 +1,4 @@
+window.__RUNTIME_CONFIG__ = {
+  API_URL: "http://localhost:9000"
+};
+
--- a/public/env.template.js
+++ b/public/env.template.js
@@ -1,4 +1,4 @@
-globalThis.__RUNTIME_CONFIG__ = {
+window.__RUNTIME_CONFIG__ = {
  API_URL: "${API_URL}"
 };

--- a/public/logo.png
+++ b/public/logo.png
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,85 +1,10 @@
 <script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router'
-import HelloWorld from './components/HelloWorld.vue'
+import { RouterView } from 'vue-router'
 </script>

 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-
-      <nav>
-        <RouterLink to="/">Home</RouterLink>
-        <RouterLink to="/about">About</RouterLink>
-      </nav>
-    </div>
-  </header>
-
-  <RouterView />
+  <router-view />
 </template>

 <style scoped>
-header {
-  line-height: 1.5;
-  max-height: 100vh;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-nav {
-  width: 100%;
-  font-size: 12px;
-  text-align: center;
-  margin-top: 2rem;
-}
-
-nav a.router-link-exact-active {
-  color: var(--color-text);
-}
-
-nav a.router-link-exact-active:hover {
-  background-color: transparent;
-}
-
-nav a {
-  display: inline-block;
-  padding: 0 1rem;
-  border-left: 1px solid var(--color-border);
-}
-
-nav a:first-of-type {
-  border: 0;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-
-  nav {
-    text-align: left;
-    margin-left: -1rem;
-    font-size: 1rem;
-
-    padding: 1rem 0;
-    margin-top: 1rem;
-  }
-}
 </style>
--- a/src/assets/logo.svg
+++ b/src/assets/logo.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -20,16 +20,3 @@ a,
    background-color: hsla(160, 100%, 37%, 0.2);
  }
 }
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-}
--- a/src/components/DefaultMenu.vue
+++ b/src/components/DefaultMenu.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+
+import MainMenuBoxes from "@/components/MainMenuBoxes.vue";
+</script>
+
+<template>
+  <header class="text-center q-mb-xl">
+  <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 />
+</template>
+
+<style scoped>
+
+</style>
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,41 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  msg: string
-}>()
-</script>
-
-<template>
-  <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
-    <h3>
-      You’ve successfully created a project with
-      <a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
-      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
-    </h3>
-  </div>
-</template>
-
-<style scoped>
-h1 {
-  font-weight: 500;
-  font-size: 2.6rem;
-  position: relative;
-  top: -10px;
-}
-
-h3 {
-  font-size: 1.2rem;
-}
-
-.greetings h1,
-.greetings h3 {
-  text-align: center;
-}
-
-@media (min-width: 1024px) {
-  .greetings h1,
-  .greetings h3 {
-    text-align: left;
-  }
-}
-</style>
--- a/src/components/MainMenuBoxes.vue
+++ b/src/components/MainMenuBoxes.vue
@@ -0,0 +1,86 @@
+<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'
+  },
+  {
+    title: 'Rules',
+    description: 'Look at the rules to have a clear understanding for playing the game.',
+    icon: 'settings',
+    routeName: 'rules-Game',
+    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>
--- a/src/components/Rules.vue
+++ b/src/components/Rules.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="q-pa-md row justify-center">
+    <div style="width: 100%; max-width: 980px; min-width: 980px;">
+
+      <q-card class="rules-card bg-grey-10 text-white shadow-10">
+
+        <q-card-section class="text-center bg-grey-9 q-py-md">
+          <div class="text-h5 text-weight-bold rules-title">
+            <q-icon name="menu_book" class="q-mr-sm" /> Game Rules Overview
+          </div>
+        </q-card-section>
+
+        <q-card-section class="q-pa-none">
+
+          <q-list class="rules-list">
+
+            <QExpansionItem
+              icon="groups"
+              label="Players"
+              header-class="text-weight-bold bg-grey-8"
+            >
+              <q-card-section>
+                Two to seven players. The aim is to be the last player left in the game.
+              </q-card-section>
+            </QExpansionItem>
+
+            <QExpansionItem
+              icon="style"
+              label="Equipment & Card Ranks"
+              header-class="text-weight-bold bg-grey-8"
+            >
+              <q-card-section>
+                <p>A standard 52-card pack is used.</p>
+                <p>In each suit, cards rank from highest to lowest: **A K Q J 10 9 8 7 6 5 4 3 2**.</p>
+              </q-card-section>
+            </QExpansionItem>
+
+            <QExpansionItem
+              icon="casino"
+              label="Deal and Trumps"
+              header-class="text-weight-bold bg-grey-8"
+            >
+              <q-card-section>
+                <div class="text-subtitle1 text-primary q-mb-sm">First Hand (Deal)</div>
+                <p>The dealer deals seven cards to each player. One card is turned up to determine the trump suit for the round.</p>
+                <q-separator inset dark class="q-my-sm"/>
+                <div class="text-subtitle1 text-primary q-mb-sm">Subsequent Hands (Deal)</div>
+                <p>The deal rotates clockwise. The player who took the most tricks in the previous hand selects the trump suit. If there's a tie, players cut cards to decide who calls trumps. **One fewer card is dealt in each successive hand until the final hand consists of one card each.**</p>
+              </q-card-section>
+            </QExpansionItem>
+
+            <QExpansionItem
+              icon="play_circle_outline"
+              label="Play & Winning a Trick"
+              header-class="text-weight-bold bg-grey-8"
+            >
+              <q-card-section>
+                <div class="text-subtitle1 text-primary q-mb-sm">Play</div>
+                <p>The player to the dealer's left (eldest hand) leads the first trick. Any card can be led. Other players must follow suit if possible. A player with no cards of the suit led may play any card.</p>
+
+                <div class="text-subtitle1 text-primary q-my-sm">Winning a Trick</div>
+                <p>The highest card of the suit led wins, **unless** a trump is played, in which case the highest trump wins. The winner of the trick leads the next.</p>
+
+                <div class="text-subtitle1 text-primary q-my-sm">Leading Trumps</div>
+                <p>Some rules disallow leading trumps before the suit has been 'broken' (a trump has been played to the lead of another suit). Leading trumps is always permissible if a player holds only trumps.</p>
+              </q-card-section>
+            </QExpansionItem>
+
+            <QExpansionItem
+              icon="flare"
+              label="Knockout & Dog's Life (Special Rules)"
+              header-class="text-weight-bold bg-red-9"
+            >
+              <q-card-section>
+                <div class="text-subtitle1 text-red-4 q-mb-sm">Knockout</div>
+                <p>At the end of each hand, any player who took no tricks is knocked out and takes no further part in the game.</p>
+
+                <div class="text-subtitle1 text-red-4 q-my-sm">Winning the Game</div>
+                <p>The game is won when a player takes all the tricks in a round, as all other players are knocked out, leaving only one player remaining.</p>
+
+                <q-separator inset dark class="q-my-sm"/>
+
+                <div class="text-subtitle1 text-red-4 q-my-sm">Dog's Life (Optional)</div>
+                <p>The first player who takes no tricks is awarded a "dog's life". In the next hand, that player is dealt one card and can decide which trick to play it to. Each time a trick is played the dog may either play the card or knock on the table and wait to play it later. If the dog wins a trick, the player to the left leads the next and the dog re-enters the game properly in the next hand. If the dog fails, they are knocked out.</p>
+              </q-card-section>
+            </QExpansionItem>
+
+          </q-list>
+        </q-card-section>
+      </q-card>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.rules-card {
+  width: 100%;
+  border: 2px solid #5a5a5a;
+}
+.rules-list .q-item {
+  border-bottom: 1px solid #333;
+}
+</style>
--- a/src/components/TheWelcome.vue
+++ b/src/components/TheWelcome.vue
@@ -1,95 +0,0 @@
-<script setup lang="ts">
-import WelcomeItem from './WelcomeItem.vue'
-import DocumentationIcon from './icons/IconDocumentation.vue'
-import ToolingIcon from './icons/IconTooling.vue'
-import EcosystemIcon from './icons/IconEcosystem.vue'
-import CommunityIcon from './icons/IconCommunity.vue'
-import SupportIcon from './icons/IconSupport.vue'
-
-const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
-</script>
-
-<template>
-  <WelcomeItem>
-    <template #icon>
-      <DocumentationIcon />
-    </template>
-    <template #heading>Documentation</template>
-
-    Vue’s
-    <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
-    provides you with all information you need to get started.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <ToolingIcon />
-    </template>
-    <template #heading>Tooling</template>
-
-    This project is served and bundled with
-    <a href="https://vite.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
-    recommended IDE setup is
-    <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
-    +
-    <a href="https://github.com/vuejs/language-tools" target="_blank" rel="noopener"
-      >Vue - Official</a
-    >. If you need to test your components and web pages, check out
-    <a href="https://vitest.dev/" target="_blank" rel="noopener">Vitest</a>
-    and
-    <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>
-    /
-    <a href="https://playwright.dev/" target="_blank" rel="noopener">Playwright</a>.
-
-    <br />
-
-    More instructions are available in
-    <a href="javascript:void(0)" @click="openReadmeInEditor"><code>README.md</code></a
-    >.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <EcosystemIcon />
-    </template>
-    <template #heading>Ecosystem</template>
-
-    Get official tools and libraries for your project:
-    <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
-    <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
-    <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
-    <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
-    you need more resources, we suggest paying
-    <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
-    a visit.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <CommunityIcon />
-    </template>
-    <template #heading>Community</template>
-
-    Got stuck? Ask your question on
-    <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>
-    (our official Discord server), or
-    <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
-      >StackOverflow</a
-    >. You should also follow the official
-    <a href="https://bsky.app/profile/vuejs.org" target="_blank" rel="noopener">@vuejs.org</a>
-    Bluesky account or the
-    <a href="https://x.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
-    X account for latest news in the Vue world.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <SupportIcon />
-    </template>
-    <template #heading>Support Vue</template>
-
-    As an independent project, Vue relies on community backing for its sustainability. You can help
-    us by
-    <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
-  </WelcomeItem>
-</template>
--- a/src/components/WelcomeItem.vue
+++ b/src/components/WelcomeItem.vue
@@ -1,87 +0,0 @@
-<template>
-  <div class="item">
-    <i>
-      <slot name="icon"></slot>
-    </i>
-    <div class="details">
-      <h3>
-        <slot name="heading"></slot>
-      </h3>
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.item {
-  margin-top: 2rem;
-  display: flex;
-  position: relative;
-}
-
-.details {
-  flex: 1;
-  margin-left: 1rem;
-}
-
-i {
-  display: flex;
-  place-items: center;
-  place-content: center;
-  width: 32px;
-  height: 32px;
-
-  color: var(--color-text);
-}
-
-h3 {
-  font-size: 1.2rem;
-  font-weight: 500;
-  margin-bottom: 0.4rem;
-  color: var(--color-heading);
-}
-
-@media (min-width: 1024px) {
-  .item {
-    margin-top: 0;
-    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
-  }
-
-  i {
-    top: calc(50% - 25px);
-    left: -26px;
-    position: absolute;
-    border: 1px solid var(--color-border);
-    background: var(--color-background);
-    border-radius: 8px;
-    width: 50px;
-    height: 50px;
-  }
-
-  .item:before {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    bottom: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:after {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    top: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:first-of-type:before {
-    display: none;
-  }
-
-  .item:last-of-type:after {
-    display: none;
-  }
-}
-</style>
--- a/src/components/icons/IconCommunity.vue
+++ b/src/components/icons/IconCommunity.vue
@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
-    <path
-      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
-    />
-  </svg>
-</template>
--- a/src/components/icons/IconDocumentation.vue
+++ b/src/components/icons/IconDocumentation.vue
@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
-    <path
-      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
-    />
-  </svg>
-</template>
--- a/src/components/icons/IconEcosystem.vue
+++ b/src/components/icons/IconEcosystem.vue
@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
-    <path
-      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
-    />
-  </svg>
-</template>
--- a/src/components/icons/IconSupport.vue
+++ b/src/components/icons/IconSupport.vue
@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
-    <path
-      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
-    />
-  </svg>
-</template>
--- a/src/components/icons/IconTooling.vue
+++ b/src/components/icons/IconTooling.vue
@@ -1,19 +0,0 @@
-<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-    aria-hidden="true"
-    role="img"
-    class="iconify iconify--mdi"
-    width="24"
-    height="24"
-    preserveAspectRatio="xMidYMid meet"
-    viewBox="0 0 24 24"
-  >
-    <path
-      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
-      fill="currentColor"
-    ></path>
-  </svg>
-</template>
--- a/src/composables/useUserInfo.ts
+++ b/src/composables/useUserInfo.ts
@@ -0,0 +1,19 @@
+import { defineStore } from 'pinia'
+import {ref, type Ref} from 'vue'
+
+export const useUserInfo = defineStore('userInfo', () => {
+  const username: Ref<string | null> = ref(null);
+  const userId: Ref<number | null> = ref(null);
+
+  function setUserInfo(name: string, id: number) {
+    username.value = name;
+    userId.value = id;
+  }
+
+  function clearUserInfo() {
+    username.value = null;
+    userId.value = null;
+  }
+
+  return { username, userId, setUserInfo, clearUserInfo };
+});
--- a/src/composables/useWebsocket.ts
+++ b/src/composables/useWebsocket.ts
@@ -0,0 +1,55 @@
+import { ref, onMounted, onBeforeUnmount } from "vue";
+import {
+  connectWebSocket,
+  disconnectWebSocket,
+  sendEvent,
+  sendEventAndWait,
+  onEvent,
+  isWebSocketConnected,
+} from "@/services/ws";
+
+export function useWebSocket() {
+  const isConnected = ref(isWebSocketConnected());
+  const lastMessage = ref<any>(null);
+
+  const lastError = ref<string | null>(null);
+
+  async function safeConnect(url?: string) {
+    return connectWebSocket(url)
+      .then(() => {
+        isConnected.value = true;
+      })
+      .catch((err) => {
+        lastError.value = err?.message ?? "Unknown WS error";
+        throw err;
+      });
+  }
+
+  function useEvent<T = any>(event: string, handler: (data: T) => void) {
+    const wrapped = (data: T) => {
+      lastMessage.value = { event, data };
+      handler(data);
+    };
+
+    onMounted(() => {
+      onEvent(event, wrapped);
+    });
+
+    onBeforeUnmount(() => {
+      onEvent(event, () => {});
+    });
+  }
+
+  return {
+    isConnected,
+    lastMessage,
+    lastError,
+
+    connect: safeConnect,
+    disconnect: disconnectWebSocket,
+    send: sendEvent,
+    sendAndWait: sendEventAndWait,
+
+    useEvent,
+  };
+}
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,9 +3,46 @@ import './assets/main.css'
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
+import Particles from "@tsparticles/vue3";
+import { loadFull } from "tsparticles";
+import { Quasar, Notify, QExpansionItem } from 'quasar'
+import '@quasar/extras/material-icons/material-icons.css'
+import 'quasar/dist/quasar.css'
+import { createPinia } from 'pinia'
+import axios from 'axios'
+import VueAxios from 'vue-axios'
+import {useUserInfo} from "@/composables/useUserInfo.ts";

 const app = createApp(App)
+const pinia = createPinia()

+app.use(pinia)
 app.use(router)
+app.use(Quasar, {
+  plugins: {
+    Notify
+  },
+  components: {
+    QExpansionItem
+  }
+})
+app.use(VueAxios, axios)
+app.use(Particles, {
+  init: async engine => {
+    await loadFull(engine);
+  },
+})
+
+axios.interceptors.response.use(
+  res => res,
+  err => {
+    if (err.response?.status === 401) {
+      const info = useUserInfo();
+      info.clearUserInfo();
+      router.replace({name: 'login'});
+    }
+    return Promise.reject(err);
+  }
+);

 app.mount('#app')
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,23 +1,75 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import LoginView from '../views/LoginView.vue'
+import MainMenuView from '../views/MainMenuView.vue'
+import createGameView from '../views/CreateGame.vue'
+import joinGameView from "@/views/JoinGameView.vue";
+import defaultMenu from "../components/DefaultMenu.vue"
+import axios from "axios";
+import { useUserInfo } from "@/composables/useUserInfo";
+import rulesView from "../components/Rules.vue";
+
+const api = window?.__RUNTIME_CONFIG__?.API_URL;

 const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
-      path: '/',
-      name: 'home',
-      component: HomeView,
+      path: '/mainmenu/',
+      component: MainMenuView,
+      meta: { requiresAuth: true },
+      children: [
+        {
+          path: '',
+          name: 'mainmenu',
+          component: defaultMenu,
+          meta: { requiresAuth: true }
        },
        {
-      path: '/about',
-      name: 'about',
-      // route level code-splitting
-      // this generates a separate chunk (About.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import('../views/AboutView.vue'),
+          path: 'create',
+          name: 'create-Game',
+          component: createGameView,
+          meta: {requiresAuth: true }
+        },
+        {
+          path: 'join',
+          name: 'join-Game',
+          component: joinGameView,
+          meta: {requiresAuth: true }
+        },
+        {
+          path: 'rules',
+          name: 'rules-Game',
+          component: rulesView,
+          meta: {requiresAuth: true }
+        },
+      ],
+    },
+    {
+      path: '/login',
+      name: 'login',
+      component: LoginView,
+      meta: { requiresAuth: false }
    },
  ],
 })

+router.beforeEach(async (to, from, next) => {
+  const info = useUserInfo();
+  if (!to.meta.requiresAuth) return next();
+  try {
+    await axios.get(`${api}/userInfo`, { withCredentials: true }).then(
+      res => {
+        info.setUserInfo(res.data.username, res.data.userId);
+      }
+    );
+    next();
+  } catch (err) {
+    info.clearUserInfo();
+    next('/login');
+  }
+});
+
 export default router
+
+
+
--- a/src/services/ws.ts
+++ b/src/services/ws.ts
@@ -0,0 +1,236 @@
+const api = window.__RUNTIME_CONFIG__?.API_URL;
+
+// ---------- Types ---------------------------------------------------------
+
+export type ServerMessage<T = any> = {
+  id?: string;
+  event?: string;
+  status?: "success" | "error";
+  data?: T;
+  error?: string;
+};
+
+export type ClientMessage<T = any> = {
+  id: string;
+  event: string;
+  data: T;
+};
+
+export type HandlerFn<T = any> = (data: T) => unknown | Promise<unknown>;
+
+interface PendingEntry {
+  resolve: (data: any) => void;
+  reject: (err: Error) => void;
+  timer: ReturnType<typeof setTimeout>;
+}
+
+let ws: WebSocket | null = null;
+
+const pending = new Map<string, PendingEntry>();
+const handlers = new Map<string, HandlerFn>();
+
+let heartbeatTimer: ReturnType<typeof setInterval> | null = null;
+
+function uuid(): string {
+  return crypto.randomUUID();
+}
+
+function failAllPending(reason: string) {
+  for (const [, entry] of pending.entries()) {
+    clearTimeout(entry.timer);
+    entry.reject(new Error(reason));
+  }
+  pending.clear();
+}
+
+function startHeartbeat() {
+  stopHeartbeat();
+  heartbeatTimer = setInterval(() => {
+    if (ws && ws.readyState === WebSocket.OPEN) {
+      sendEventAndWait("ping", {}, 4000)
+        .then(() => console.debug("[WS] Heartbeat OK"))
+        .catch((err) => console.warn("[WS] Heartbeat failed:", err.message));
+    }
+  }, 5000);
+}
+
+function stopHeartbeat() {
+  if (heartbeatTimer) {
+    clearInterval(heartbeatTimer);
+    heartbeatTimer = null;
+  }
+}
+
+function setupSocketHandlers(socket: WebSocket) {
+  socket.onmessage = async (raw) => {
+    console.debug("[WS] MESSAGE:", raw.data);
+
+    let msg: ServerMessage;
+    try {
+      msg = JSON.parse(raw.data);
+    } catch (err) {
+      console.warn("[WS] Bad JSON:", raw.data, err);
+      return;
+    }
+
+    const { id, event, status, data } = msg;
+
+    // RPC response branch
+    if (id && status) {
+      const entry = pending.get(id);
+      if (!entry) return;
+
+      pending.delete(id);
+      clearTimeout(entry.timer);
+
+      if (status === "success") {
+        entry.resolve(data ?? {});
+      } else {
+        entry.reject(new Error(msg.error || "Server returned error"));
+      }
+      return;
+    }
+
+    // Server event → handler branch
+    if (id && event) {
+      const handler = handlers.get(event);
+
+      const reply = (status: "success" | "error", error?: string) => {
+        if (socket.readyState !== WebSocket.OPEN) return;
+        const resp = { id, event, status, error };
+        socket.send(JSON.stringify(resp));
+      };
+
+      if (!handler) {
+        console.warn("[WS] No handler for event:", event);
+        reply("error", `No handler for '${event}'`);
+        return;
+      }
+
+      try {
+        await handler(data ?? {});
+        reply("success");
+      } catch (err) {
+        reply("error", (err as Error).message);
+      }
+    }
+  };
+
+  socket.onerror = (err) => {
+    console.error("[WS] ERROR:", err);
+    stopHeartbeat();
+    failAllPending("WebSocket error");
+  };
+
+  socket.onclose = (ev) => {
+    stopHeartbeat();
+    failAllPending("WebSocket closed");
+
+    if (ev.wasClean) {
+      console.log(`[WS] Closed cleanly: code=${ev.code} reason=${ev.reason}`);
+    } else {
+      console.warn("[WS] Connection died");
+    }
+
+    // You redirect here — if you don’t want auto reconnect, keep as is.
+    location.href = "/mainmenu";
+  };
+}
+
+export function connectWebSocket(url?: string): Promise<void> {
+  if (!url) {
+    const loc = window.location;
+    const protocol = loc.protocol === "https:" ? "wss:" : "ws:";
+    url = `${protocol}//${api}/websocket`;
+  }
+
+  if (ws && ws.readyState === WebSocket.OPEN) {
+    return Promise.resolve();
+  }
+
+  if (ws && ws.readyState === WebSocket.CONNECTING) {
+    return new Promise((resolve, reject) => {
+      const prevOnOpen = ws!.onopen;
+      const prevOnError = ws!.onerror;
+      ws!.onopen = (ev) => {
+        if (prevOnOpen) prevOnOpen.call(ws!, ev);
+        resolve();
+      };
+      ws!.onerror = (err) => {
+        if (prevOnError) prevOnError.call(ws!, err);
+        reject(err);
+      };
+    });
+  }
+
+  // New connection
+  ws = new WebSocket(url);
+  setupSocketHandlers(ws);
+
+  return new Promise((resolve, reject) => {
+    ws!.onopen = () => {
+      console.log("[WS] Connected");
+      startHeartbeat();
+      resolve();
+    };
+
+    ws!.onerror = (err) => reject(err);
+  });
+}
+
+export function disconnectWebSocket(code = 1000, reason = "Client disconnect") {
+  stopHeartbeat();
+  failAllPending("Disconnected");
+
+  if (ws) {
+    try {
+      ws.close(code, reason);
+    } catch {}
+    ws = null;
+  }
+}
+
+export function sendEvent(event: string, data: any) {
+  if (!ws || ws.readyState !== WebSocket.OPEN) {
+    console.warn("[WS] Send failed: not open");
+    return;
+  }
+
+  const message: ClientMessage = { id: uuid(), event, data };
+  console.debug("[WS] SEND:", message);
+  ws.send(JSON.stringify(message));
+}
+
+export function sendEventAndWait(
+  event: string,
+  data: any,
+  timeoutMs = 10000
+): Promise<any> {
+  if (!ws || ws.readyState !== WebSocket.OPEN) {
+    return Promise.reject(new Error("WebSocket is not open"));
+  }
+
+  const id = uuid();
+  const message: ClientMessage = { id, event, data };
+
+  const promise = new Promise((resolve, reject) => {
+    const timer = setTimeout(() => {
+      pending.delete(id);
+      reject(new Error(`Timeout waiting for '${event}'`));
+    }, timeoutMs);
+
+    pending.set(id, { resolve, reject, timer });
+  });
+
+  console.debug("[WS] SEND (await):", message);
+  ws.send(JSON.stringify(message));
+
+  return promise;
+}
+
+export function onEvent(event: string, handler: HandlerFn) {
+  handlers.set(event, handler);
+}
+
+export const isWebSocketConnected = () =>
+  !!ws && ws.readyState === WebSocket.OPEN;
--- a/src/types/GameSubTypes.ts
+++ b/src/types/GameSubTypes.ts
@@ -0,0 +1,47 @@
+type Card = {
+  identifier: string
+  path: string
+  idx: number | null
+}
+
+type Hand = {
+  cards: Card[]
+}
+
+type Player = {
+  id: string
+  name: string
+  dogLife: string
+}
+
+type PlayerQueue = {
+  currentPlayer: Player | null
+  players: Player[]
+}
+
+type PodiumPlayer = {
+  player: Player
+  position: number
+  roundsWon: number
+  tricksWon: number
+}
+
+type Round = {
+  trumpSuit: Card
+  firstRound: boolean
+  trickList: Trick[]
+}
+
+type Trick = {
+  cards: { [player: string]: Card }
+  firstCard: Card | null
+  winner: Player | null
+}
+
+type User = {
+  id: string
+  username: string
+  host: boolean
+}
+
+export type { Card, Hand, Player, PlayerQueue, PodiumPlayer, Round, Trick, User }
--- a/src/types/GameTypes.ts
+++ b/src/types/GameTypes.ts
@@ -0,0 +1,49 @@
+import type {
+  Hand,
+  Player,
+  PlayerQueue,
+  PodiumPlayer,
+  Round,
+  Trick,
+  User
+} from "@/types/GameSubTypes.ts";
+
+
+type GameInfo = {
+  gameId: string
+  self: Player | null
+  hand: Hand | null
+  playerQueue: PlayerQueue
+  currentTrick: Trick | null
+  currentRound: Round | null
+}
+
+type LobbyInfo = {
+  gameId: string
+  users: User[]
+  self: User
+  maxPlayers: number
+}
+
+type TieInfo = {
+  gameId: string
+  currentPlayer: Player | null
+  self: Player | null
+  tiedPlayers: Player[]
+  highestAmount: number
+}
+
+type TrumpInfo = {
+  gameId: string
+  chooser: Player | null
+  self: Player | null
+  selfHand: Hand | null
+}
+
+type WonInfo = {
+  gameId: string
+  winner: PodiumPlayer | null
+  allPlayers: PodiumPlayer[]
+}
+
+export type { GameInfo, LobbyInfo, TieInfo, TrumpInfo, WonInfo }
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -1,15 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
-
-<style>
-@media (min-width: 1024px) {
-  .about {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-  }
-}
-</style>
--- a/src/views/CreateGame.vue
+++ b/src/views/CreateGame.vue
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useQuasar } from 'quasar';
+import { useRouter } from 'vue-router';
+
+const lobbyName = ref('');
+const isPublic = ref(false);
+const playerAmount = ref(2);
+const $q = useQuasar();
+const isLoading = ref(false);
+const router = useRouter();
+const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
+const createGameQuasar = async () => {
+  if (!lobbyName.value) {
+    $q.notify({ message: 'Lobby-Name wird benötigt', color: 'red', position: 'top', icon: 'cancel' });
+    return;
+  }
+  isLoading.value = true;
+  //TODO: Implement Logic to Create the Game and Redirect to Lobby
+  await delay(3000)
+  isLoading.value = false;
+    $q.notify({
+      message: `Lobby "${lobbyName.value}" erfolgreich erstellt!`,
+      color: 'green-6',
+      icon: 'check_circle',
+      position: 'top'
+    });
+    router.push({ name: 'mainmenu'});
+}
+</script>
+
+<template>
+  <header class="text-center q-mb-xl">
+    <p
+      class="text-h5 text-grey-4 q-mt-md"
+      style="max-width: 900px; margin-left: auto; margin-right: auto;"
+    >
+      Are you ready to play? Please select a lobbyname of your choice, the amount of players you want
+      to play with and you are ready to go!
+    </p>
+  </header>
+        <div class="q-pa-md" style="width: 100%; max-width: 400px;">
+          <div>
+            <q-input
+              v-model="lobbyName"
+              label="Lobbyname"
+              placeholder="Lobby 1"
+              filled
+              dark
+              label-color="white"
+              color="white"
+              :rules="[val => !!val || 'Lobbyname is missing']"
+            />
+          </div>
+
+          <div class="q-mb-md">
+            <q-toggle
+              v-model="isPublic"
+              label="public/private"
+              checked-icon="check"
+              unchecked-icon="close"
+              color="primary"
+              disable
+              dark
+            />
+          </div>
+
+          <div class="q-mb-md">
+            <div class="text-subtitle1 q-mb-xs text-white">Players: {{ playerAmount }}</div>
+
+            <q-slider
+              v-model="playerAmount"
+              :min="2"
+              :max="7"
+              :step="1"
+              color="primary"
+              dark
+            />
+
+            <div class="row justify-between q-mt-sm text-caption text-grey-4">
+              <span>2</span>
+              <span>3</span>
+              <span>4</span>
+              <span>5</span>
+              <span>6</span>
+              <span>7</span>
+            </div>
+          </div>
+
+          <div class="text-center q-mt-lg">
+            <q-btn
+              :loading="isLoading"
+              label="Create Game"
+              color="positive"
+              rounded
+              @click="createGameQuasar"
+              size="lg"
+              class="full-width"
+            />
+          </div>
+
+        </div>
+</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);
+}
+</style>
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-import TheWelcome from '../components/TheWelcome.vue'
-</script>
-
-<template>
-  <main>
-    <TheWelcome />
-  </main>
-</template>
--- a/src/views/JoinGameView.vue
+++ b/src/views/JoinGameView.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import {ref} from "vue";
+import { useRouter } from 'vue-router';
+import {useQuasar} from "quasar";
+const router = useRouter();
+const lobbyCode = ref('');
+const isLoading = ref(false);
+const $q = useQuasar();
+const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
+const startGameQuasar = async() => {
+  if (!lobbyCode.value) {
+    $q.notify({ message: 'Lobby-Name wird benötigt', color: 'red', position: 'top', icon: 'cancel' });
+    return;
+  }
+  isLoading.value = true;
+  //TODO: Implement Logic to Start the Game and Redirect to Ingame
+  await delay(3000)
+  isLoading.value = false;
+  $q.notify({
+    message: `Lobby "${lobbyCode.value}" erfolgreich gefunden`,
+    color: 'green-6',
+    icon: 'check_circle',
+    position: 'top'
+  });
+  router.push({ name: 'mainmenu'});
+}
+</script>
+
+<template>
+        <header class="text-center q-mb-xl">
+          <p
+            class="text-h5 text-grey-4 q-mt-md"
+            style="max-width: 900px; margin-left: auto; margin-right: auto;"
+          >
+            Enter the Lobbycode below to join your friend's game and you are ready to go!
+          </p>
+        </header>
+
+        <div class="q-pa-md" style="width: 100%; max-width: 400px;">
+
+          <div>
+            <q-input
+              v-model="lobbyCode"
+              label="Lobbycode"
+              placeholder="123abc"
+              filled
+              dark
+              label-color="white"
+              color="white"
+              :rules="[val => !!val || 'Lobbycode is missing']"
+            />
+          </div>
+
+          <div class="text-center q-mt-lg">
+            <q-btn
+              :loading="isLoading"
+              label="Join Game"
+              color="positive"
+              rounded
+              @click="startGameQuasar"
+              size="lg"
+              class="full-width"
+            />
+          </div>
+
+        </div>
+</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);
+}
+</style>
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -0,0 +1,218 @@
+<template>
+  <div class="login-box q-col-gutter-sm">
+    <div class="text-h3 text-center row">
+      <img src="/logo.png" alt="Logo" style="height: 60px; margin-right: 10px;" />
+    </div>
+    <q-form @submit.prevent="onSubmit"
+            class="q-gutter-md row justify-center"
+            style="width: 100%">
+
+      <div class="row q-col-gutter-sm" style="width: 100%">
+        <q-input
+          style="width: 100%"
+          filled
+          dark
+          label-color="white"
+          color="white"
+          v-model="username"
+          label="Username *"
+
+          :error="!!loginError"
+          :error-message="loginError"
+
+          lazy-rules
+          :rules="[ val => val && val.length > 0 || 'Username is required']"
+        />
+      </div>
+
+      <div class="row q-col-gutter-sm" style="width: 100%">
+        <q-input
+          style="width: 100%"
+          filled
+          dark
+          type="password"
+          label-color="white"
+          color="white"
+          v-model="password"
+          label="Password *"
+          :error="!!loginError"
+          :error-message="loginError"
+
+          lazy-rules
+          :rules="[
+            val => !!val || 'Password is required'
+          ]"
+        />
+      </div>
+
+      <div class="row justify-center">
+        <q-btn type="submit" label="Login" push color="dark" />
+      </div>
+    </q-form>
+  </div>
+  <vue-particles
+    id="particles-js"
+    :options='options'
+  />
+</template>
+
+<script lang="ts" setup>
+
+import { useQuasar } from 'quasar'
+import { ref } from 'vue'
+import axios from "axios";
+import router from "@/router";
+import {useUserInfo} from "@/composables/useUserInfo.ts";
+
+const api = window?.__RUNTIME_CONFIG__?.API_URL;
+
+const $q = useQuasar()
+
+const username = ref(null)
+const password = ref(null)
+const inProgress = ref(false)
+const loginError = ref('')
+const uInfo = useUserInfo()
+
+const onSubmit = () => {
+  if (inProgress.value) return
+  inProgress.value = true
+  loginError.value = ''
+  axios.post(`${api}/login`, {username: username.value, password: password.value}, {withCredentials: true}).then((response) => {
+    uInfo.setUserInfo(response.data.user.username, response.data.user.id)
+    router.push("/")
+  }).catch(() => {
+    loginError.value = 'Invalid username or password'
+  }).finally(() =>
+    inProgress.value = false
+  )
+}
+
+const options = {
+  "particles": {
+    "number": {
+      "value": 80,
+      "density": {
+        "enable": true,
+        "area": 800
+      }
+    },
+    "color": {
+      "value": "#ffffff"
+    },
+    "shape": {
+      "type": "circle",
+      "stroke": {
+        "width": 0,
+        "color": "#000000"
+      },
+      "polygon": {
+        "sides": 5
+      }
+    },
+    "opacity": {
+      "value": 0.5,
+      "random": false,
+      "animation": {
+        "enable": false,
+        "speed": 1,
+        "minimumValue": 0.1,
+        "sync": false
+      }
+    },
+    "size": {
+      "value": 3,
+      "random": true,
+      "animation": {
+        "enable": false,
+        "speed": 40,
+        "minimumValue": 0.1,
+        "sync": false
+      }
+    },
+    "links": {
+      "enable": true,
+      "distance": 150,
+      "color": "#ffffff",
+      "opacity": 0.4,
+      "width": 1
+    },
+    "move": {
+      "enable": true,
+      "speed": 1,
+      "direction": "none",
+      "random": false,
+      "straight": false,
+      "outModes": {
+        "default": "out"
+      },
+      "attract": {
+        "enable": false,
+        "rotate": {
+          "x": 600,
+          "y": 1200
+        }
+      }
+    }
+  },
+  "interactivity": {
+    "detectsOn": "canvas",
+    "events": {
+      "onHover": {
+        "enable": false,
+        "mode": "repulse"
+      },
+      "onClick": {
+        "enable": false,
+        "mode": "push"
+      },
+      "resize": true
+    },
+    "modes": {
+      "grab": {
+        "distance": 400,
+        "links": {
+          "opacity": 1
+        }
+      },
+      "bubble": {
+        "distance": 400,
+        "size": 40,
+        "duration": 2,
+        "opacity": 8,
+        "speed": 3
+      },
+      "repulse": {
+        "distance": 200,
+        "duration": 0.4
+      },
+      "push": {
+        "quantity": 4
+      },
+      "remove": {
+        "quantity": 2
+      }
+    }
+  },
+  "detectRetina": true
+};
+
+</script>
+
+<style scoped>
+.login-box {
+  position: fixed;
+  align-items: center;
+  justify-content: center;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  width: 100%;
+  max-width: 420px;
+  padding: 1rem;
+  z-index: 2;
+  background-color: var(--color-background);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+</style>
--- a/src/views/MainMenuView.vue
+++ b/src/views/MainMenuView.vue
@@ -0,0 +1,41 @@
+<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>
+        </header>
+          <router-view></router-view>
+      </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>
--- a/versions.env
+++ b/versions.env
@@ -1,3 +1,3 @@
 MAJOR=0
-MINOR=1
-PATCH=1
+MINOR=4
+PATCH=0
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,15 +2,17 @@ import { fileURLToPath, URL } from 'node:url'

 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import vueDevTools from 'vite-plugin-vue-devtools'

 // https://vite.dev/config/
 export default defineConfig({
  plugins: [
-    vue(),
+    vue({ template: { transformAssetUrls } }),
    vueJsx(),
    vueDevTools(),
+    quasar(),
  ],
  resolve: {
    alias: {
Author	SHA1	Message	Date
TeamCity	4f04cf7dfe	ci: bump version to v0.4.0	2025-12-10 13:13:18 +00:00
lq64	adbe2be534	feat: FRO-17 Added Rule Component and changed Mainmenu structure (#11 ) Added a Rule Component and changed MainMenu Structure Co-authored-by: LQ63 <lkhermann@web.de> Reviewed-on: #11 Reviewed-by: Janis <janis-e@gmx.de> Co-authored-by: lq64 <lq@blackhole.local> Co-committed-by: lq64 <lq@blackhole.local>	2025-12-10 14:12:12 +01:00
TeamCity	b2f56bcd6f	ci: bump version to v0.3.1	2025-12-10 11:15:32 +00:00
Janis	458230622b	revert: deleted MainMenuBoxes.vue (#10 ) Reviewed-on: #10 Co-authored-by: Janis <janis.e.20@gmx.de> Co-committed-by: Janis <janis.e.20@gmx.de>	2025-12-10 12:14:05 +01:00
Janis	946550f0ab	fix: removed defaults (#9 ) Reviewed-on: #9 Co-authored-by: Janis <janis.e.20@gmx.de> Co-committed-by: Janis <janis.e.20@gmx.de>	2025-12-10 11:50:53 +01:00
TeamCity	3aceb48057	ci: bump version to v0.3.0	2025-12-10 10:46:27 +00:00
Janis	eac315bea1	feat: FRO-2 Implement Login Component (#8 ) Reviewed-on: #8 Reviewed-by: lq64 <lq@blackhole.local> Co-authored-by: Janis <janis.e.20@gmx.de> Co-committed-by: Janis <janis.e.20@gmx.de>	2025-12-10 11:44:33 +01:00
TeamCity	f47b757398	ci: bump version to v0.2.1	2025-12-10 08:46:01 +00:00
Janis	64d528bf5c	fix: FRO-29 Websocket Communication (#7 ) Reviewed-on: #7 Co-authored-by: Janis <janis.e.20@gmx.de> Co-committed-by: Janis <janis.e.20@gmx.de>	2025-12-10 09:43:28 +01:00
TeamCity	696c33b25a	ci: bump version to v0.2.0	2025-12-10 00:17:13 +00:00
lq64	4bfd541ecd	feat/FRO-15 Added Join Game Component (#6 ) Added a Join Game Component to be able to Join a game but without logic behind. Co-authored-by: LQ63 <lkhermann@web.de> Reviewed-on: #6	2025-12-10 01:15:39 +01:00
lq64	3efacde49d	feat(ui): Vue Create Game component (#5 ) Added a create Game vue template without logic Co-authored-by: LQ63 <lkhermann@web.de> Reviewed-on: #5	2025-12-10 00:27:08 +01:00
TeamCity	84c9552b1b	ci: bump version to v0.1.3	2025-12-08 20:33:06 +00:00
Janis	ed2dff4cda	chore: implemented login version (#4 ) Reviewed-on: #4 Co-authored-by: Janis <janis.e.20@gmx.de> Co-committed-by: Janis <janis.e.20@gmx.de>	2025-12-08 21:31:37 +01:00
TeamCity	4e6cb4a350	ci: bump version to v0.1.2	2025-12-07 20:50:29 +00:00
				`@@ -1 +0,0 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>`