style: add prettier configuration and format code

frontend/.prettierrc.json

@@ -0,0 +1,8 @@
+{
+    "semi": true,
+    "tabWidth": 4,
+    "trailingComma": "es5",
+    "printWidth": 200,
+    "bracketSpacing": true,
+    "arrowParens": "always"
+}

frontend/README.md

@@ -42,6 +42,6 @@ If you have state that's important to retain within a component, consider creati
 ```ts
 // store.ts
 // An extremely simple external store
-import { writable } from 'svelte/store'
+import { writable } from "svelte/store";
-export default writable(0)
+export default writable(0);
 ```

frontend/package.json

@@ -17,6 +17,7 @@
         "flowbite": "^3.1.2",
         "flowbite-svelte": "^0.48.4",
         "flowbite-svelte-icons": "^2.0.2",
+        "prettier": "3.5.3",
         "sass-embedded": "^1.85.1",
         "svelte": "^5.22.5",
         "svelte-check": "^4.1.4",

frontend/src/app.scss

@@ -38,7 +38,7 @@
 
 @layer base {
     button,
-  [role='button'] {
+    [role="button"] {
         cursor: pointer;
     }
 }
@@ -47,7 +47,9 @@ body {
     margin: 0;
     color: var(--default-element-color);
     background-color: var(--default-background-color);
-  transition: color 0.4s ease, background-color 0.2s ease;
+    transition:
+        color 0.4s ease,
+        background-color 0.2s ease;
 }
 
 :root {

frontend/src/i18n/i18n.ts

@@ -1,18 +1,18 @@
-import { addMessages, register, init, getLocaleFromNavigator } from 'svelte-i18n';
+import { addMessages, register, init, getLocaleFromNavigator } from "svelte-i18n";
 
-import en from './en.json';
+import en from "./en.json";
-import de from './de.json';
+import de from "./de.json";
 
-addMessages('en', en);
+addMessages("en", en);
-addMessages('de', de);
+addMessages("de", de);
 
-register('en', () => import('./en.json'));
+register("en", () => import("./en.json"));
-register('de', () => import('./de.json'));
+register("de", () => import("./de.json"));
 
 const initialLocale = getLocaleFromNavigator();
-console.log('Initial locale:', initialLocale);
+console.log("Initial locale:", initialLocale);
 
 init({
-  fallbackLocale: 'en',
+    fallbackLocale: "en",
     initialLocale: initialLocale,
 });

frontend/src/index.css

@@ -1,5 +1,5 @@
-@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100..900&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100..900&display=swap");
-@import 'tailwindcss';
+@import "tailwindcss";
 @plugin 'flowbite/plugin';
 @custom-variant dark {
     @media not print {
@@ -7,6 +7,6 @@
             @slot;
         }
     }
-  }
+}
 @source "../node_modules/flowbite-svelte/dist";
-@import './app.scss';
+@import "./app.scss";

frontend/src/main.ts

@@ -1,11 +1,10 @@
-import { mount } from 'svelte'
+import { mount } from "svelte";
-import './i18n/i18n'
+import "./i18n/i18n";
-import './index.css'
+import "./index.css";
-import App from './App.svelte'
+import App from "./App.svelte";
 
 const app = mount(App, {
-  target: document.getElementById('app')!,
+    target: document.getElementById("app")!,
-})
+});
-
-export default app
 
+export default app;

frontend/src/routes/Game.svelte

@@ -5,11 +5,10 @@
     import { _ } from "svelte-i18n";
     import { onMount } from "svelte";
     import { GameState, sessionStore } from "../stores/sessionStore";
-    import { Button, Spinner, Tooltip } from "flowbite-svelte";
+    import { Spinner } from "flowbite-svelte";
     import { SvelteDate } from "svelte/reactivity";
     import { requestJoinRoom } from "../stores/roomStore";
-    import gameStore, { toggleLobbyOverlay } from "../stores/gameStore";
+    import gameStore from "../stores/gameStore";
-    import { UsersRound } from "lucide-svelte";
 
     onMount(async () => {
         // TODO: check if already connected to room, currently its overwriting the session
@@ -31,9 +30,7 @@
 
 {#if !$sessionStore.connected}
     <div class="flex flex-row w-full mt-32 h-full justify-center items-center">
-        <div
+        <div class="flex flex-col items-center gap-6 p-7 md:flex-row md:gap-8 rounded-2xl">
-            class="flex flex-col items-center gap-6 p-7 md:flex-row md:gap-8 rounded-2xl"
-        >
             <div>
                 <Spinner size="12" class="text-primary-100" />
             </div>
@@ -42,9 +39,7 @@
                     {$_("game_screen.loading")}
                 </span>
                 <span class="font-medium text-sky-500">
-                    {$sessionStore.players?.find(
+                    {$sessionStore.players?.find((player) => player.PlayerId == $sessionStore.userId)?.Username}
-                        (player) => player.PlayerId == $sessionStore.userId,
-                    )?.Username}
                 </span>
                 <span class="flex gap-2 font-medium text-gray-600 dark:text-gray-400">
                     <span>{new SvelteDate().toLocaleString()}</span>

frontend/src/routes/_module.svelte

@@ -88,11 +88,7 @@
     }
 
     .Header {
-        background: linear-gradient(
+        background: linear-gradient(180deg, var(--default-background-color) 30%, transparent 100%);
-            180deg,
-            var(--default-background-color) 30%,
-            transparent 100%
-        );
         opacity: 1;
         position: fixed;
         height: 100px;
@@ -103,11 +99,7 @@
     }
 
     .Header-bg {
-        background: linear-gradient(
+        background: linear-gradient(180deg, var(--primary) 50%, transparent 100%);
-            180deg,
-            var(--primary) 50%,
-            transparent 100%
-        );
         z-index: -1;
         margin: 0px;
         position: absolute;

frontend/src/stores/gameStore.ts

@@ -1,4 +1,4 @@
-import { writable } from 'svelte/store';
+import { writable } from "svelte/store";
 
 interface GameState {
     isLobbyOverlayShown: boolean;
@@ -11,7 +11,7 @@ const initialState: GameState = {
 const gameStore = writable<GameState>(initialState);
 
 export const toggleLobbyOverlay = () => {
-    gameStore.update(state => ({
+    gameStore.update((state) => ({
         ...state,
         isLobbyOverlayShown: !state.isLobbyOverlayShown,
     }));

frontend/src/stores/pageoptions.ts

@@ -1,7 +1,7 @@
-import { Gamepad2 } from 'lucide-svelte';
+import { Gamepad2 } from "lucide-svelte";
 
 const options = {
     page_icon: Gamepad2,
-}
+};
 
 export default options;

frontend/src/stores/roomStore.ts

@@ -1,5 +1,5 @@
-import { writable } from 'svelte/store';
+import { writable } from "svelte/store";
-import { sessionStore } from './sessionStore';
+import { sessionStore } from "./sessionStore";
 
 export const loading = writable<"join" | "create" | false>(false);
 export const join_error = writable<string | false>(false);

frontend/src/stores/sessionStore.ts

@@ -1,18 +1,18 @@
-import { writable, get } from 'svelte/store';
+import { writable, get } from "svelte/store";
-import { io, Socket } from 'socket.io-client';
+import { io, Socket } from "socket.io-client";
 
 export enum GameState {
     Undefined = -1,
     Lobby,
     Running,
-  Ended
+    Ended,
 }
 
 interface PlayerPermissionObj {
     isHost: boolean;
 }
 
-interface GameOptions { }
+interface GameOptions {}
 
 interface PlayerObj {
     PlayerId: string;
@@ -87,7 +87,7 @@ class SessionManager {
     hasSessionData(): boolean {
         const state = this.getState();
         if (state.sessionToken && state.userId) return true;
-    const sessionIds = localStorage.getItem('currentSessionIds');
+        const sessionIds = localStorage.getItem("currentSessionIds");
         if (!sessionIds) return false;
         const sessionIdsJson = JSON.parse(sessionIds);
         return typeof sessionIdsJson.userId === "string" && typeof sessionIdsJson.sessionToken === "string";
@@ -101,15 +101,15 @@ class SessionManager {
         if (!PlayerId) PlayerId = this.getState().userId ?? undefined;
         const playerPermissionNumber: number = this.getState().players?.find((player) => player.PlayerId == PlayerId)?.Permissions ?? 0;
         return {
-      isHost: this.checkPermissionBit(playerPermissionNumber, 0)
+            isHost: this.checkPermissionBit(playerPermissionNumber, 0),
         };
     }
 
     subscribe = this.store.subscribe;
 
-  private getStoredSessionIds(): { sessionToken: string, userId: string } | null {
+    private getStoredSessionIds(): { sessionToken: string; userId: string } | null {
-    if (typeof window === 'undefined') return null;
+        if (typeof window === "undefined") return null;
-    const sessionIds = localStorage.getItem('currentSessionIds');
+        const sessionIds = localStorage.getItem("currentSessionIds");
         if (!sessionIds) return null;
         const sessionIdsJson = JSON.parse(sessionIds);
         if (typeof sessionIdsJson.userId !== "string" || typeof sessionIdsJson.sessionToken !== "string") {
@@ -119,26 +119,26 @@ class SessionManager {
     }
 
     private saveSessionIds(sessionToken: string, userId: string) {
-    if (typeof window !== 'undefined') {
+        if (typeof window !== "undefined") {
-      localStorage.setItem('currentSessionIds', JSON.stringify({ sessionToken, userId, joinCode: this.getState().joinCode }));
+            localStorage.setItem("currentSessionIds", JSON.stringify({ sessionToken, userId, joinCode: this.getState().joinCode }));
         }
     }
 
     private saveJoinCode() {
-    const sessionIds = localStorage.getItem('currentSessionIds');
+        const sessionIds = localStorage.getItem("currentSessionIds");
         if (!sessionIds) return;
         const sessionIdsJson = JSON.parse(sessionIds);
-    localStorage.setItem('currentSessionIds', JSON.stringify({ sessionToken: sessionIdsJson.sessionToken, userId: sessionIdsJson.userId, joinCode: this.getState().joinCode }));
+        localStorage.setItem("currentSessionIds", JSON.stringify({ sessionToken: sessionIdsJson.sessionToken, userId: sessionIdsJson.userId, joinCode: this.getState().joinCode }));
     }
 
     private clearSessionIds() {
-    if (typeof window !== 'undefined') {
+        if (typeof window !== "undefined") {
-      const sessionIds = localStorage.getItem('currentSessionIds');
+            const sessionIds = localStorage.getItem("currentSessionIds");
             if (!sessionIds) return;
             const sessionIdsJson = JSON.parse(sessionIds);
             const lastSessionData = { joinCode: sessionIdsJson.joinCode };
-      localStorage.setItem('lastSessionIds', JSON.stringify(lastSessionData));
+            localStorage.setItem("lastSessionIds", JSON.stringify(lastSessionData));
-      localStorage.removeItem('currentSessionIds');
+            localStorage.removeItem("currentSessionIds");
         }
     }
 
@@ -190,7 +190,7 @@ class SessionManager {
         }
 
         this.socket = io({
-      transports: ['websocket'],
+            transports: ["websocket"],
             query: { sessionToken },
         });
 
@@ -198,15 +198,15 @@ class SessionManager {
     }
 
     private setupSocketEventHandlers(sessionToken: string, userId: string) {
-    this.socket?.on('connect', () => this.handleConnect(sessionToken, userId));
+        this.socket?.on("connect", () => this.handleConnect(sessionToken, userId));
-    this.socket?.on('disconnect', this.handleDisconnect.bind(this));
+        this.socket?.on("disconnect", this.handleDisconnect.bind(this));
-    this.socket?.on('Status', this.handleStatus.bind(this));
+        this.socket?.on("Status", this.handleStatus.bind(this));
-    this.socket?.on('RoomInfo', this.handleRoomInfo.bind(this));
+        this.socket?.on("RoomInfo", this.handleRoomInfo.bind(this));
-    this.socket?.on('error', this.handleError.bind(this));
+        this.socket?.on("error", this.handleError.bind(this));
     }
 
     private handleConnect(sessionToken: string, userId: string) {
-    console.info('Connected to room');
+        console.info("Connected to room");
         this.saveSessionIds(sessionToken, userId);
         window.history.replaceState({}, "", "/Game");
         this.store.update((state) => ({
@@ -219,7 +219,7 @@ class SessionManager {
     }
 
     private handleDisconnect() {
-    console.info('Disconnected from server');
+        console.info("Disconnected from server");
         this.store.update((state) => ({ ...state, connected: false }));
     }
 
@@ -256,12 +256,12 @@ class SessionManager {
     }
 
     private handleError(error: string) {
-    console.error('Socket error:', error);
+        console.error("Socket error:", error);
     }
 
     sendMessage(message: string) {
         if (this.socket && message.trim()) {
-      this.socket.emit('event', message);
+            this.socket.emit("event", message);
         }
     }
 
@@ -275,7 +275,7 @@ class SessionManager {
             fetch(`/api/room/leave`, {
                 method: "POST",
                 body: JSON.stringify({
-          SessionToken: this.getState().sessionToken
+                    SessionToken: this.getState().sessionToken,
                 }),
                 headers: {
                     "Content-Type": "application/json",

frontend/src/stores/theme.ts

@@ -1,6 +1,6 @@
-import { writable } from 'svelte/store';
+import { writable } from "svelte/store";
 
-const getSystemTheme = () => window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+const getSystemTheme = () => (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
 
 const storedTheme = localStorage.getItem("theme") as Theme | null;
 const initialTheme: Theme = storedTheme === "dark" || storedTheme === "light" ? storedTheme : "system";
@@ -24,7 +24,7 @@ theme.subscribe(applyTheme);
 // Watch for system theme changes when "system" mode is enabled
 const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
 mediaQuery.addEventListener("change", () => {
-    theme.update(current => {
+    theme.update((current) => {
         if (current === "system") applyTheme("system");
         return current;
     });
@@ -35,7 +35,7 @@ export const setTheme = (value: Theme) => {
 };
 
 export const toggleTheme = () => {
-    theme.update(current => {
+    theme.update((current) => {
         if (current === "dark") return "light";
         if (current === "light") return "system";
         return "dark";

frontend/svelte.config.js

@@ -1,7 +1,7 @@
-import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
 
 export default {
     // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
     // for more information about preprocessors
     preprocess: vitePreprocess(),
-}
+};

frontend/tsconfig.json

@@ -1,7 +1,4 @@
 {
     "files": [],
-  "references": [
+    "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
 }

frontend/vite.config.ts

@@ -1,26 +1,28 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from "vite";
-import { svelte } from '@sveltejs/vite-plugin-svelte'
+import { svelte } from "@sveltejs/vite-plugin-svelte";
-import routify from '@roxi/routify/vite-plugin'
+import routify from "@roxi/routify/vite-plugin";
-import tailwindcss from '@tailwindcss/vite'
+import tailwindcss from "@tailwindcss/vite";
 
 export default defineConfig({
     plugins: [
-    routify({/* config */ }),
+        routify({
+            /* config */
+        }),
         tailwindcss(),
-    svelte()
+        svelte(),
     ],
     server: {
         host: true,
         proxy: {
-      '/api': {
+            "/api": {
-        target: 'http://10.10.39.145:3000',
+                target: "http://10.10.39.145:3000",
                 changeOrigin: true,
             },
-      '/socket.io': {
+            "/socket.io": {
-        target: 'http://10.10.39.145:3000',
+                target: "http://10.10.39.145:3000",
                 ws: true,
                 changeOrigin: true,
-      }
+            },
-    }
+        },
-  }
+    },
-})
+});