added a new site and a gamefield component

GUI/public/Game/Chips/Red/ChipRed.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000" zoomAndPan="magnify" viewBox="0 0 750 749.999995" height="1000" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="e7b8afbede"><path d="M 75 75 L 675 75 L 675 675 L 75 675 Z M 75 75 " clip-rule="nonzero"/></clipPath><clipPath id="440a805226"><path d="M 375 75 C 209.316406 75 75 209.316406 75 375 C 75 540.683594 209.316406 675 375 675 C 540.683594 675 675 540.683594 675 375 C 675 209.316406 540.683594 75 375 75 Z M 375 75 " clip-rule="nonzero"/></clipPath><clipPath id="7f2c195106"><path d="M 0 0 L 600 0 L 600 600 L 0 600 Z M 0 0 " clip-rule="nonzero"/></clipPath><clipPath id="e3354956bd"><path d="M 300 0 C 134.316406 0 0 134.316406 0 300 C 0 465.683594 134.316406 600 300 600 C 465.683594 600 600 465.683594 600 300 C 600 134.316406 465.683594 0 300 0 Z M 300 0 " clip-rule="nonzero"/></clipPath><clipPath id="1c631abcde"><rect x="0" width="600" y="0" height="600"/></clipPath></defs><g clip-path="url(#e7b8afbede)"><g clip-path="url(#440a805226)"><g transform="matrix(1, 0, 0, 1, 75, 75)"><g clip-path="url(#1c631abcde)"><g clip-path="url(#7f2c195106)"><g clip-path="url(#e3354956bd)"><rect x="-240" width="1080" fill="#ff3131" height="1079.999992" y="-239.999999" fill-opacity="1"/></g></g></g></g></g></g></svg>

GUI/public/Game/Chips/Yellow/ChipYellow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000" zoomAndPan="magnify" viewBox="0 0 750 749.999995" height="1000" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="ad6cd27943"><path d="M 75 75 L 675 75 L 675 675 L 75 675 Z M 75 75 " clip-rule="nonzero"/></clipPath><clipPath id="9a98a26f9b"><path d="M 375 75 C 209.316406 75 75 209.316406 75 375 C 75 540.683594 209.316406 675 375 675 C 540.683594 675 675 540.683594 675 375 C 675 209.316406 540.683594 75 375 75 Z M 375 75 " clip-rule="nonzero"/></clipPath><clipPath id="60f8a42e73"><path d="M 0 0 L 600 0 L 600 600 L 0 600 Z M 0 0 " clip-rule="nonzero"/></clipPath><clipPath id="9c1234e484"><path d="M 300 0 C 134.316406 0 0 134.316406 0 300 C 0 465.683594 134.316406 600 300 600 C 465.683594 600 600 465.683594 600 300 C 600 134.316406 465.683594 0 300 0 Z M 300 0 " clip-rule="nonzero"/></clipPath><clipPath id="d93f14d70b"><rect x="0" width="600" y="0" height="600"/></clipPath></defs><g clip-path="url(#ad6cd27943)"><g clip-path="url(#9a98a26f9b)"><g transform="matrix(1, 0, 0, 1, 75, 75)"><g clip-path="url(#d93f14d70b)"><g clip-path="url(#60f8a42e73)"><g clip-path="url(#9c1234e484)"><rect x="-240" width="1080" fill="#ffcc00" height="1079.999992" y="-239.999999" fill-opacity="1"/></g></g></g></g></g></g></svg>

GUI/public/Game/Gamefield/Gamefield.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000" zoomAndPan="magnify" viewBox="0 0 750 749.999995" height="1000" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="7bb6b410f0"><path d="M 0 0 L 750 0 L 750 750 L 0 750 Z M 0 0 " clip-rule="nonzero"/></clipPath><clipPath id="987972088d"><rect x="0" width="750" y="0" height="750"/></clipPath><clipPath id="04d1f86e7b"><path d="M 75 75 L 675 75 L 675 675 L 75 675 Z M 75 75 " clip-rule="nonzero"/></clipPath><clipPath id="d06cb80b9a"><path d="M 375 75 C 209.316406 75 75 209.316406 75 375 C 75 540.683594 209.316406 675 375 675 C 540.683594 675 675 540.683594 675 375 C 675 209.316406 540.683594 75 375 75 Z M 375 75 " clip-rule="nonzero"/></clipPath><clipPath id="65f0859d55"><path d="M 0 0 L 600 0 L 600 600 L 0 600 Z M 0 0 " clip-rule="nonzero"/></clipPath><clipPath id="459a82968f"><path d="M 300 0 C 134.316406 0 0 134.316406 0 300 C 0 465.683594 134.316406 600 300 600 C 465.683594 600 600 465.683594 600 300 C 600 134.316406 465.683594 0 300 0 Z M 300 0 " clip-rule="nonzero"/></clipPath><clipPath id="f5a651b72f"><rect x="0" width="600" y="0" height="600"/></clipPath></defs><rect x="-75" width="900" fill="#ffffff" y="-74.999999" height="899.999994" fill-opacity="1"/><rect x="-75" width="900" fill="#ffffff" y="-74.999999" height="899.999994" fill-opacity="1"/><g transform="matrix(1, 0, 0, 1, 0, -0.000000000000042435)"><g clip-path="url(#987972088d)"><g clip-path="url(#7bb6b410f0)"><rect x="-165" width="1080" fill="#004aad" height="1079.999992" y="-164.999999" fill-opacity="1"/></g></g></g><g clip-path="url(#04d1f86e7b)"><g clip-path="url(#d06cb80b9a)"><g transform="matrix(1, 0, 0, 1, 75, 75)"><g clip-path="url(#f5a651b72f)"><g clip-path="url(#65f0859d55)"><g clip-path="url(#459a82968f)"><rect x="-240" width="1080" fill="#ffffff" height="1079.999992" y="-239.999999" fill-opacity="1"/></g></g></g></g></g></g></svg>

GUI/src/Home.vue

@@ -4,6 +4,7 @@ let buttons = [
         name: "Lokaler Multiplayer",
         icon: "mdi-account-switch",
         color: "red",
+        componentName: "LocalMode"
     },
     {
         name: "Lokal gegen Bot",
@@ -31,6 +32,7 @@ let buttons = [
                     v-for="button of buttons"
                     :key="button.name"
                     :color="button.color"
+                    :to="{ name: button.componentName }"
                     size="x-large"
                     min-width="340"
                     rounded="xl"

GUI/src/Layout.vue

@@ -6,7 +6,11 @@
       <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 class="font-weight-semibold text-white">
+      <v-app-bar-title 
+        class="font-weight-semibold text-white" 
+        @click="$router.push('/')"
+        style="cursor: pointer;"
+      >
         4-Gewinnt
       </v-app-bar-title>
     </v-app-bar>

GUI/src/components/Game/Field.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const gameState = defineModel<number[][]>('gameState', {
+  required: true
+})
+</script>
+
+<template>
+  <div id="spielfeld" class="d-flex flex-collum">
+    <div v-for="row in gameState">
+      <v-img v-for="field in row" src="./Game/Gamefield/Gamefield.svg" height="100px" width="100px"></v-img>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

GUI/src/router/index.ts

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

GUI/src/routes/LocalMode.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import Field from '@/components/Game/Field.vue';
+
+const gameField = [
+    [0, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0, 0, 0],
+];
+
+</script>
+
+<template>
+    <Field :game-state="gameField"></Field>
+</template>
+
+<style scoped>
+</style>