Add OnlineMode route and extract app styles

Introduce an OnlineMode route and placeholder component, wire it into the router and Home menu (replace the removed local-vs-bot entry). Rename utils/index.ts to router/index.ts and add the new /onlineMode route; update main.ts to import the router from ./router and include the new app.css. Extract shared #game and .game-content styles into GUI/src/app.css and remove the duplicate styles from LocalMode.vue. Make small UI tweaks: adjust GameEndedMenu width, minor formatting/attribute fixes in Layout.vue and LocalMode.vue.

GUI/src/Home.vue

@@ -6,15 +6,11 @@ let buttons = [
         color: "red",
         componentName: "LocalMode"
     },
-    {
-        name: "Lokal gegen Bot",
-        icon: "mdi-robot-angry-outline",
-        color: "green",
-    },
     {
         name: "Online Multiplayer",
         icon: "mdi-web",
         color: "blue",
+        componentName: "OnlineMode"
     },
 ]
 </script>

GUI/src/Layout.vue

@@ -7,10 +7,10 @@
       <template v-slot:image>
         <v-img gradient="to top right, rgba(5, 5, 5, 0.6), rgba(50, 50, 60, 0.6)"></v-img>
       </template>
-      <v-app-bar-title 
+      <v-app-bar-title
-        class="font-weight-semibold text-white" 
+        class="font-weight-semibold text-white"
         @click="$router.push('/')"
-        style="cursor: pointer;"
+        style="cursor: pointer"
       >
         4-Gewinnt
       </v-app-bar-title>
@@ -22,4 +22,4 @@
   </v-app>
 </template>
 
-<style scoped></style>
+<style scoped></style>

GUI/src/app.css

@@ -0,0 +1,17 @@
+#game {
+  width: 100%;
+  min-height: calc(100dvh - var(--v-layout-top));
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 16px;
+  box-sizing: border-box;
+}
+
+.game-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  width: 100%;
+}

GUI/src/components/GameEndedMenu.vue

@@ -21,7 +21,7 @@ const message = computed(() => {
 </script>
 
 <template>
-    <v-sheet width="100%" class="text-centered pa-2 w-75" rounded>
+    <v-sheet class="text-centered pa-2 w-50" rounded>
         <h1 class="text-center">{{ message}}</h1>
         <h3 class="text-center">Spiele erneut oder beende das Spiel</h3>
         <v-divider class="mb-4"></v-divider>

GUI/src/main.ts

@@ -1,6 +1,6 @@
 import { createApp } from 'vue'
 import App from './Layout.vue'
-import router from './utils'
+import router from './router'
 // Vuetify
 import 'vuetify/styles'
 import { createVuetify } from 'vuetify'
@@ -22,6 +22,8 @@ import '@fontsource/roboto/700-italic.css'
 import '@fontsource/roboto/900-italic.css'
 // Icons
 import '@mdi/font/css/materialdesignicons.css'
+// Styles
+import "./app.css"
 
 // Vuetify
 const vuetify = createVuetify({

GUI/src/router/index.ts

@@ -1,6 +1,7 @@
 import Home from '@/Home.vue'
 import NotFound from '@/NotFound.vue'
 import LocalMode from '@/routes/LocalMode.vue'
+import OnlineMode from '@/routes/OnlineMode.vue'
 import { createRouter, createWebHistory } from 'vue-router'
 
 const router = createRouter({
@@ -16,6 +17,11 @@ const router = createRouter({
       name: "LocalMode",
       component: LocalMode
     },
+    {
+      path: "/onlineMode",
+      name: "OnlineMode",
+      component: OnlineMode
+    },
     { path: '/:pathMatch(.*)*', name: 'Nicht gefunden', component: NotFound },
   ],
 })

GUI/src/routes/LocalMode.vue

@@ -33,7 +33,7 @@ game.value.onGameStateChanged = (gameState) => {
 game.value.onGameEnded = (gameEndedInfo) => {
   gameEndedInformation.value = gameEndedInfo;
   currentState.value = CurrentState.EndScreen;
-}
+};
 
 async function startGame() {
   await game.value.start(settings.value);
@@ -41,50 +41,42 @@ async function startGame() {
   currentState.value = CurrentState.Game;
 }
 
-async function restart(){
+async function restart() {
   await game.value.disconnectAll();
 
   startGame();
 }
-
 </script>
 
 <template>
-  <v-container class="d-flex align-center justify-center fill-height" v-if="currentState === CurrentState.CreatingGame">
+  <v-container
+    class="d-flex align-center justify-center fill-height"
+    v-if="currentState === CurrentState.CreatingGame"
+  >
     <GameCreationMenu v-model:settings="settings" @create-game="startGame()" />
   </v-container>
 
-  <v-container class="d-flex align-center justify-center fill-height"
+  <v-container
-    v-else-if="currentState === CurrentState.EndScreen">
+    class="d-flex align-center justify-center fill-height"
-    <GameEndedMenu :game-ended-information="gameEndedInformation" @restart-game="restart"></GameEndedMenu>
+    v-else-if="currentState === CurrentState.EndScreen"
+  >
+    <GameEndedMenu
+      :game-ended-information="gameEndedInformation"
+      @restart-game="restart"
+    ></GameEndedMenu>
   </v-container>
 
   <div id="game" v-else>
     <div class="game-content">
-      <Field :game-state="gameField" v-model:current-selection-index="currentSelectionIndex"
+      <Field
-        @click-on-game-field="game.drop(currentSelectionIndex ?? 1)" />
+        :game-state="gameField"
+        v-model:current-selection-index="currentSelectionIndex"
+        @click-on-game-field="game.drop(currentSelectionIndex ?? 1)"
+      />
 
       <InfoField :msg="game.currentDescription"></InfoField>
     </div>
   </div>
 </template>
 
-<style scoped>
+<style scoped></style>
-#game {
-  width: 100%;
-  min-height: calc(100dvh - var(--v-layout-top));
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 16px;
-  box-sizing: border-box;
-}
-
-.game-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-  width: 100%;
-}
-</style>

GUI/src/routes/OnlineMode.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+</script>
+
+<template>
+    <h1>Online Modus</h1>
+</template>
+
+<style scoped>
+</style>