feat: FRO-2 Implement Login Component wip

CHANGELOG.md

@@ -1,46 +0,0 @@
-## 0.0.0 (2025-12-07)
-
-### Features
-
-* FRO-16 Switch to Quasar ([#1](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/1)) ([7bc6ac8](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/7bc6ac89f01df9a6bd5ec236d79041772839d907))
-## 0.0.0 (2025-12-07)
-
-### Features
-
-* FRO-16 Switch to Quasar ([#1](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/1)) ([7bc6ac8](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/7bc6ac89f01df9a6bd5ec236d79041772839d907))
-* FRO-28 Integrate Frontend Build as a seperate image ([#2](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/2)) ([aa399bf](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/aa399bf035d4c0f2702c2adf296865ec99e03fbb))
-## 0.0.0 (2025-12-07)
-
-### Features
-
-* FRO-16 Switch to Quasar ([#1](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/1)) ([7bc6ac8](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/7bc6ac89f01df9a6bd5ec236d79041772839d907))
-* FRO-28 Integrate Frontend Build as a seperate image ([#2](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/2)) ([aa399bf](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/aa399bf035d4c0f2702c2adf296865ec99e03fbb))
-## 0.0.0 (2025-12-07)
-
-### Features
-
-* FRO-16 Switch to Quasar ([#1](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/1)) ([7bc6ac8](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/7bc6ac89f01df9a6bd5ec236d79041772839d907))
-* FRO-28 Integrate Frontend Build as a seperate image ([#2](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/2)) ([aa399bf](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/aa399bf035d4c0f2702c2adf296865ec99e03fbb))
-## 0.0.0 (2025-12-07)
-
-### Features
-
-* FRO-16 Switch to Quasar ([#1](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/1)) ([7bc6ac8](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/7bc6ac89f01df9a6bd5ec236d79041772839d907))
-* FRO-28 Integrate Frontend Build as a seperate image ([#2](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/2)) ([aa399bf](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/aa399bf035d4c0f2702c2adf296865ec99e03fbb))
-## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.1.0...0.0.0) (2025-12-07)
-
-### 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))

Dockerfile

@@ -1,24 +0,0 @@
-FROM node:lts-alpine3.23 AS builder
-
-WORKDIR /app
-
-COPY package*.json ./
-COPY pnpm-lock.yaml* yarn.lock* ./
-
-RUN npm install
-COPY . .
-RUN npm run build
-
-FROM nginx:stable-alpine AS production
-
-RUN apk add --no-cache gettext
-
-RUN rm -rf /usr/share/nginx/html/*
-COPY --from=builder /app/dist /usr/share/nginx/html
-
-COPY public/env.template.js /usr/share/nginx/html/env.template.js
-COPY docker-entrypoint.sh /docker-entrypoint.sh
-RUN chmod +x /docker-entrypoint.sh
-
-EXPOSE 80
-ENTRYPOINT ["/docker-entrypoint.sh"]

docker-entrypoint.sh

@@ -1,19 +0,0 @@
-#!/bin/sh
-set -e
-
-# Replace placeholders in env.template.js with environment variables and write env.js
-TEMPLATE_PATH="/usr/share/nginx/html/env.template.js"
-TARGET_PATH="/usr/share/nginx/html/env.js"
-
-if [ -f "$TEMPLATE_PATH" ]; then
-  echo "Rendering runtime config from $TEMPLATE_PATH"
-  # export all variables for envsubst to access
-  # only substitute variables present in the template
-  envsubst < "$TEMPLATE_PATH" > "$TARGET_PATH"
-else
-  echo "No runtime template found at $TEMPLATE_PATH, skipping"
-fi
-
-# Start nginx in foreground
-exec nginx -g 'daemon off;'
-

env.d.ts

@@ -1,7 +1 @@
 /// <reference types="vite/client" />
-
-declare global {
-  interface Window { __RUNTIME_CONFIG__?: { API_URL?: string } }
-}
-
-export {};

index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="">
   <head>
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
@@ -8,8 +8,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <!-- runtime config injected at container start -->
-    <script src="/env.js"></script>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

package.json

@@ -16,18 +16,13 @@
     "format": "prettier --write --experimental-cli src/"
   },
   "dependencies": {
-    "@quasar/extras": "^1.17.0",
-    "quasar": "^2.18.6",
     "vue": "^3.5.25",
     "vue-router": "^4.6.3",
     "tsparticles": "~3.9.1",
     "@tsparticles/vue3": "~3.0.1",
-    "axios": "^1.13.2",
+    "bootstrap-vue-next": "~0.40.9"
-    "vue-axios": "^3.5.2",
-    "pinia": "^3.0.4"
   },
   "devDependencies": {
-    "@quasar/vite-plugin": "^1.10.0",
     "@tsconfig/node24": "^24.0.3",
     "@types/node": "^24.10.1",
     "@vitejs/plugin-vue": "^6.0.2",
@@ -40,7 +35,6 @@
     "jiti": "^2.6.1",
     "npm-run-all2": "^8.0.4",
     "prettier": "3.6.2",
-    "sass-embedded": "^1.93.3",
     "typescript": "~5.9.0",
     "vite": "^7.2.4",
     "vite-plugin-vue-devtools": "^8.0.5",

public/env.template.js

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

src/App.vue

@@ -1,10 +1,88 @@
 <script setup lang="ts">
-import { RouterView } from 'vue-router'
+import { RouterLink, RouterView } from 'vue-router'
+import HelloWorld from './components/HelloWorld.vue'
+import LoginView from "@/views/LoginView.vue";
 </script>
 
 <template>
-  <router-view />
+  <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>-->
+<!--        <RouterLink to="/login">Login</RouterLink>-->
+<!--      </nav>-->
+      <LoginView/>
+    </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,3 +20,16 @@ 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

@@ -1,79 +0,0 @@
-<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/useWebsocket.ts

@@ -1,55 +0,0 @@
-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

@@ -5,24 +5,10 @@ import App from './App.vue'
 import router from './router'
 import Particles from "@tsparticles/vue3";
 import { loadFull } from "tsparticles";
-import { Quasar, Notify } 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'
 
 const app = createApp(App)
-const pinia = createPinia()
 
 app.use(router)
-app.use(Quasar, {
-  plugins: {
-    Notify
-  },
-})
-app.use(pinia)
-app.use(VueAxios, axios)
 app.use(Particles, {
   init: async engine => {
     await loadFull(engine);

src/router/index.ts

@@ -1,9 +1,6 @@
 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";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -26,23 +23,6 @@ const router = createRouter({
       // which is lazy-loaded when the route is visited.
       component: () => import('../views/AboutView.vue'),
     },
-    {
-      path: '/mainmenu',
-      name: 'mainmenu',
-      component: MainMenuView
-    },
-    {
-      path: '/create',
-      name: 'create-Game',
-      component: createGameView
-    },
-    {
-      path: '/join',
-      name: 'join-Game',
-      component: joinGameView
-    },
-
-
   ],
 })
 

src/runtimeConfig.ts

@@ -1,14 +0,0 @@
-// runtimeConfig.ts
-// Reads runtime configuration injected into window.__RUNTIME_CONFIG__ (created by env.js at container start)
-
-declare global {
-  interface Window { __RUNTIME_CONFIG__?: { API_URL?: string } }
-}
-
-const runtime = (globalThis as any).__RUNTIME_CONFIG__ || {};
-
-export const API_URL = runtime.API_URL || (import.meta.env.VITE_API_URL as string) || 'http://localhost:9000';
-
-export function getApiUrl(): string {
-  return API_URL;
-}

src/services/ws.ts

@@ -1,236 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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[]
-}

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

@@ -1,131 +0,0 @@
-<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

@@ -1,93 +0,0 @@
-<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

@@ -1,92 +1,5 @@
-<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
-          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 {useAuthStore} from "@/stores/auth.ts";
-import router from "@/router";
-
-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 onSubmit = () => {
-  if (inProgress.value) return
-  inProgress.value = true
-  loginError.value = ''
-  axios.post(`${api}/login`, {username: username.value, password: password.value}).then(response => {
-    const auth = useAuthStore()
-    auth.setToken(response.data.token)
-    router.push("/")
-  }).catch(() => {
-    loginError.value = 'Invalid username or password'
-  }).finally(() =>
-    inProgress.value = false
-  )
-}
-
 const options = {
   "particles": {
     "number": {
@@ -203,6 +116,16 @@ const options = {
 
 </script>
 
+<template>
+  <div class="login-box">
+
+  </div>
+  <vue-particles
+    id="particles-js"
+    :options='options'
+  />
+</template>
+
 <style scoped>
 .login-box {
   position: fixed;
@@ -216,7 +139,12 @@ const options = {
   max-width: 420px;
   padding: 1rem;
   z-index: 2;
-  background-color: var(--color-background);
+}
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+
+#loginParticles {
+  background-color: rgb(11, 8, 8);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
 }
 </style>

src/views/MainMenuView.vue

@@ -1,50 +0,0 @@
-<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 +0,0 @@
-MAJOR=0
-MINOR=2
-PATCH=1

vite.config.ts

@@ -2,17 +2,15 @@ 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({ template: { transformAssetUrls } }),
+    vue(),
     vueJsx(),
     vueDevTools(),
-    quasar(),
   ],
   resolve: {
     alias: {