ci: bump version to v0.3.0

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>

CHANGELOG.md

@@ -34,3 +34,18 @@
 * 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))

public/env.js

@@ -0,0 +1,4 @@
+window.__RUNTIME_CONFIG__ = {
+  API_URL: "http://localhost:9000"
+};
+

public/env.template.js

@@ -1,4 +1,4 @@
-globalThis.__RUNTIME_CONFIG__ = {
+window.__RUNTIME_CONFIG__ = {
   API_URL: "${API_URL}"
 };
 

src/App.vue

@@ -1,84 +1,10 @@
 <script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router'
+import { RouterView } from 'vue-router'
-import HelloWorld from './components/HelloWorld.vue'
 </script>
 
 <template>
-  <header>
+  <router-view />
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-
-      <nav>
-        <RouterLink to="/">Home</RouterLink>
-        <RouterLink to="/about">About</RouterLink>
-        <RouterLink to="/login">Login</RouterLink>
-      </nav>
-    </div>
-  </header>
-
-  <RouterView />
 </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>

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;
-  }
-}

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>

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 };
+});

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,
+  };
+}

src/main.ts

@@ -11,17 +11,18 @@ 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
   },
 })
-app.use(pinia)
 app.use(VueAxios, axios)
 app.use(Particles, {
   init: async engine => {
@@ -29,4 +30,16 @@ app.use(Particles, {
   },
 })
 
+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')

src/router/index.ts

@@ -1,29 +1,60 @@
 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 axios from "axios";
+import { useUserInfo } from "@/composables/useUserInfo";
+
+const api = window?.__RUNTIME_CONFIG__?.API_URL;
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
       path: '/',
-      name: 'home',
+      name: 'mainmenu',
-      component: HomeView,
+      component: MainMenuView,
+      meta: { requiresAuth: true }
     },
     {
       path: '/login',
       name: 'login',
       component: LoginView,
+      meta: { requiresAuth: false }
     },
     {
-      path: '/about',
+      path: '/create',
-      name: 'about',
+      name: 'create-Game',
-      // route level code-splitting
+      component: createGameView,
-      // this generates a separate chunk (About.[hash].js) for this route
+      meta: { requiresAuth: true }
-      // which is lazy-loaded when the route is visited.
-      component: () => import('../views/AboutView.vue'),
     },
+    {
+      path: '/join',
+      name: 'join-Game',
+      component: joinGameView,
+      meta: { requiresAuth: true }
+    }
   ],
 })
 
+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
+
+
+

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;

src/stores/auth.ts

@@ -1,60 +0,0 @@
-import {type credentials, type token, type user} from '@/types/authTypes'
-import { defineStore } from 'pinia'
-import {ref, computed, type Ref} from 'vue'
-
-export const useAuthStore = defineStore('auth', () => {
-  const user: Ref<user | null> = ref(null)
-  const token = ref(localStorage.getItem('token') || null)
-
-  const isAuthenticated = computed(() => !!token.value)
-
-  async function login(credentials: credentials) {
-    const response = await fakeLoginApi(credentials)
-
-    token.value = response.token
-    user.value = response.user
-
-    localStorage.setItem('token', token.value)
-  }
-
-  function setToken(newToken: string) {
-    token.value = newToken
-    localStorage.setItem('token', newToken)
-  }
-
-  function logout() {
-    token.value = null
-    user.value = null
-    localStorage.removeItem('token')
-  }
-
-  async function fetchUser() {
-    if (!token.value) return
-
-    const response = await fakeFetchUserApi(token.value)
-    user.value = response.user
-  }
-
-  return {
-    user,
-    token,
-    isAuthenticated,
-    login,
-    setToken,
-    logout,
-    fetchUser,
-  }
-})
-
-async function fakeLoginApi(credentials: credentials): Promise<token> {
-  return {
-    token: 'abc123',
-    user: { id: 1, name: 'John Doe' }
-  }
-}
-
-async function fakeFetchUserApi(token: string): Promise<{ user: user }> {
-  return {
-    user: { id: 1, name: 'John Doe' }
-  }
-}

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 }

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 }

src/types/authTypes.ts

@@ -1,16 +0,0 @@
-
-type token = {
-  token: string
-  user: user
-}
-type user = {
-  id: number
-  name: string
-}
-type credentials = {
-  username: string
-  password: string
-}
-
-export type { token, user, credentials }
-

src/views/CreateGame.vue

@@ -0,0 +1,131 @@
+<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>
+  <q-layout>
+    <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;"
+          >
+            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>
+      </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);
+}
+</style>

src/views/JoinGameView.vue

@@ -0,0 +1,93 @@
+<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>
+  <q-layout>
+    <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;"
+          >
+            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>
+      </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);
+}
+</style>

src/views/LoginView.vue

@@ -30,6 +30,7 @@
           style="width: 100%"
           filled
           dark
+          type="password"
           label-color="white"
           color="white"
           v-model="password"
@@ -60,8 +61,8 @@
 import { useQuasar } from 'quasar'
 import { ref } from 'vue'
 import axios from "axios";
-import {useAuthStore} from "@/stores/auth.ts";
 import router from "@/router";
+import {useUserInfo} from "@/composables/useUserInfo.ts";
 
 const api = window?.__RUNTIME_CONFIG__?.API_URL;
 
@@ -71,14 +72,14 @@ 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}).then(response => {
+  axios.post(`${api}/login`, {username: username.value, password: password.value}, {withCredentials: true}).then((response) => {
-    const auth = useAuthStore()
+    uInfo.setUserInfo(response.data.user.username, response.data.user.id)
-    auth.setToken(response.data.token)
     router.push("/")
   }).catch(() => {
     loginError.value = 'Invalid username or password'
@@ -107,11 +108,6 @@ const options = {
       },
       "polygon": {
         "sides": 5
-      },
-      "image": {
-        "src": "img/github.svg",
-        "width": 100,
-        "height": 100
       }
     },
     "opacity": {

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>

versions.env

@@ -1,3 +1,3 @@
 MAJOR=0
-MINOR=1
+MINOR=3
-PATCH=3
+PATCH=0