better design and working setting cells

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

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

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

@@ -1 +0,0 @@
-<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/public/Game/Gamefield_Empty.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1000" viewBox="0 0 750 750" height="1000" version="1.0">
+  <defs>
+    <mask id="circle-cutout">
+      <rect width="750" height="750" fill="white"/>
+      <circle cx="375" cy="375" r="300" fill="black"/>
+    </mask>
+    <linearGradient id="blue-grad" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#0058cc"/>
+      <stop offset="100%" stop-color="#003fa0"/>
+    </linearGradient>
+  </defs>
+  <rect width="750" height="750" fill="url(#blue-grad)" mask="url(#circle-cutout)"/>
+  <circle cx="375" cy="375" r="300" fill="none" stroke="#002255" stroke-width="8"/>
+  <rect x="2" y="2" width="746" height="746" fill="none" stroke="#001a44" stroke-width="4" rx="4"/>
+</svg>

GUI/public/Game/Gamefield_Red.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1000" viewBox="0 0 750 750" height="1000" version="1.0">
+  <defs>
+    <mask id="circle-cutout">
+      <rect width="750" height="750" fill="white"/>
+      <circle cx="375" cy="375" r="300" fill="black"/>
+    </mask>
+    <linearGradient id="blue-grad" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#0058cc"/>
+      <stop offset="100%" stop-color="#003fa0"/>
+    </linearGradient>
+  </defs>
+  <circle cx="375" cy="375" r="300" fill="#dd0000"/>
+  <circle cx="375" cy="375" r="286" fill="none" stroke="#8b0000" stroke-width="12"/>
+  <rect width="750" height="750" fill="url(#blue-grad)" mask="url(#circle-cutout)"/>
+  <circle cx="375" cy="375" r="300" fill="none" stroke="#002255" stroke-width="8"/>
+  <rect x="2" y="2" width="746" height="746" fill="none" stroke="#001a44" stroke-width="4" rx="4"/>
+</svg>

GUI/public/Game/Gamefield_Yellow.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1000" viewBox="0 0 750 750" height="1000" version="1.0">
+  <defs>
+    <mask id="circle-cutout">
+      <rect width="750" height="750" fill="white"/>
+      <circle cx="375" cy="375" r="300" fill="black"/>
+    </mask>
+    <linearGradient id="blue-grad" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#0058cc"/>
+      <stop offset="100%" stop-color="#003fa0"/>
+    </linearGradient>
+  </defs>
+  <circle cx="375" cy="375" r="300" fill="#ffcc00"/>
+  <circle cx="375" cy="375" r="286" fill="none" stroke="#997700" stroke-width="12"/>
+  <rect width="750" height="750" fill="url(#blue-grad)" mask="url(#circle-cutout)"/>
+  <circle cx="375" cy="375" r="300" fill="none" stroke="#002255" stroke-width="8"/>
+  <rect x="2" y="2" width="746" height="746" fill="none" stroke="#001a44" stroke-width="4" rx="4"/>
+</svg>

GUI/public/Game/Other_Versions/Gamefield.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1000" viewBox="0 0 750 750" height="1000" version="1.0">
+  <defs>
+    <mask id="circle-cutout">
+      <rect width="750" height="750" fill="white"/>
+      <circle cx="375" cy="375" r="300" fill="black"/>
+    </mask>
+  </defs>
+  <rect width="750" height="750" fill="#004aad" mask="url(#circle-cutout)"/>
+</svg>

GUI/public/Game/Other_Versions/Gamefield_1.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1000" viewBox="0 0 750 750" height="1000" version="1.0">
+  <defs>
+    <mask id="circle-cutout">
+      <rect width="750" height="750" fill="white"/>
+      <circle cx="375" cy="375" r="300" fill="black"/>
+    </mask>
+    <linearGradient id="blue-grad" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#0055cc"/>
+      <stop offset="50%" stop-color="#003d99"/>
+      <stop offset="100%" stop-color="#002d73"/>
+    </linearGradient>
+  </defs>
+  <!-- Blaues Feld mit Gradient und Loch -->
+  <rect width="750" height="750" fill="url(#blue-grad)" mask="url(#circle-cutout)"/>
+  <!-- Dunklerer Rand um das Loch -->
+  <circle cx="375" cy="375" r="300" fill="none" stroke="#002255" stroke-width="8"/>
+  <!-- Äußerer Rand des Feldes -->
+  <rect x="2" y="2" width="746" height="746" fill="none" stroke="#001a44" stroke-width="4" rx="4"/>
+</svg>

GUI/public/Game/Other_Versions/Gamefield_Red.svg

@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1000" viewBox="0 0 750 750" height="1000" version="1.0">
+  <defs>
+    <mask id="circle-cutout">
+      <rect width="750" height="750" fill="white"/>
+      <circle cx="375" cy="375" r="300" fill="black"/>
+    </mask>
+    <radialGradient id="chip-gradient" cx="40%" cy="38%" r="50%">
+      <stop offset="0%" stop-color="#ff4444"/>
+      <stop offset="70%" stop-color="#dd0000"/>
+      <stop offset="100%" stop-color="#aa0000"/>
+    </radialGradient>
+    <radialGradient id="shine" cx="35%" cy="30%" r="40%">
+      <stop offset="0%" stop-color="white" stop-opacity="0.4"/>
+      <stop offset="100%" stop-color="white" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+  <!-- Blaues Feld mit Loch -->
+  <rect width="750" height="750" fill="#004aad" mask="url(#circle-cutout)"/>
+  <!-- Spielstein -->
+  <circle cx="375" cy="375" r="290" fill="url(#chip-gradient)"/>
+  <circle cx="375" cy="375" r="290" fill="url(#shine)"/>
+  <!-- Dunklere Outline -->
+  <circle cx="375" cy="375" r="288" fill="none" stroke="#8b0000" stroke-width="6"/>
+  <!-- Innerer Ring für Realismus -->
+  <circle cx="375" cy="375" r="250" fill="none" stroke="#aa0000" stroke-width="3" opacity="0.5"/>
+</svg>

GUI/public/Game/Other_Versions/Gamefield_Yellow.svg

@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1000" viewBox="0 0 750 750" height="1000" version="1.0">
+  <defs>
+    <mask id="circle-cutout">
+      <rect width="750" height="750" fill="white"/>
+      <circle cx="375" cy="375" r="300" fill="black"/>
+    </mask>
+    <radialGradient id="chip-gradient" cx="40%" cy="38%" r="50%">
+      <stop offset="0%" stop-color="#ffee55"/>
+      <stop offset="70%" stop-color="#ffcc00"/>
+      <stop offset="100%" stop-color="#ccaa00"/>
+    </radialGradient>
+    <radialGradient id="shine" cx="35%" cy="30%" r="40%">
+      <stop offset="0%" stop-color="white" stop-opacity="0.45"/>
+      <stop offset="100%" stop-color="white" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+  <!-- Blaues Feld mit Loch -->
+  <rect width="750" height="750" fill="#004aad" mask="url(#circle-cutout)"/>
+  <!-- Spielstein -->
+  <circle cx="375" cy="375" r="290" fill="url(#chip-gradient)"/>
+  <circle cx="375" cy="375" r="290" fill="url(#shine)"/>
+  <!-- Dunklere Outline -->
+  <circle cx="375" cy="375" r="288" fill="none" stroke="#997700" stroke-width="6"/>
+  <!-- Innerer Ring für Realismus -->
+  <circle cx="375" cy="375" r="250" fill="none" stroke="#bbaa00" stroke-width="3" opacity="0.5"/>
+</svg>

GUI/public/Game/Other_Versions/Red.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1000" viewBox="0 0 750 750" height="1000" version="1.0">
+  <defs>
+    <mask id="circle-cutout">
+      <rect width="750" height="750" fill="white"/>
+      <circle cx="375" cy="375" r="300" fill="black"/>
+    </mask>
+  </defs>
+  <circle cx="375" cy="375" r="300" fill="#dd0000"/>
+  <circle cx="375" cy="375" r="286" fill="none" stroke="#8b0000" stroke-width="12"/>
+  <rect width="750" height="750" fill="#004aad" mask="url(#circle-cutout)"/>
+</svg>

GUI/public/Game/Other_Versions/Yellow.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1000" viewBox="0 0 750 750" height="1000" version="1.0">
+  <defs>
+    <mask id="circle-cutout">
+      <rect width="750" height="750" fill="white"/>
+      <circle cx="375" cy="375" r="300" fill="black"/>
+    </mask>
+  </defs>
+  <circle cx="375" cy="375" r="300" fill="#ffcc00"/>
+  <circle cx="375" cy="375" r="286" fill="none" stroke="#997700" stroke-width="12"/>
+  <rect width="750" height="750" fill="#004aad" mask="url(#circle-cutout)"/>
+</svg>

GUI/src/components/Game/Field.vue

@@ -2,14 +2,53 @@
 const gameState = defineModel<number[][]>('gameState', {
   required: true
 })
+
+function translateNumberToImage(num: number): string {
+  switch (num) {
+    case 1:
+      return './Game/Gamefield_Red.svg'
+    case 2:
+      return './Game/Gamefield_Yellow.svg'
+    default:
+      return './Game/Gamefield_Empty.svg'
+  }
+}
 </script>
 
 <template>
-  <div id="spielfeld" class="d-flex flex-collum">
+  <div class="game-container">
-    <div v-for="row in gameState">
+    <div id="spielfeld" class="d-flex flex-column" style="gap: 0;">
-      <v-img v-for="field in row" src="./Game/Gamefield/Gamefield.svg" height="100px" width="100px"></v-img>
+      <div v-for="row in gameState" class="d-flex flex-row" style="gap: 0;">
+        <v-img
+          v-for="field in row"
+          :src="translateNumberToImage(field)"
+          class="game-cell"
+          :aspect-ratio="1"
+          cover
+        />
+      </div>
     </div>
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.game-container {
+  height: calc(100dvh - var(--v-layout-top));
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.game-cell {
+  --cols: v-bind('gameState[0]?.length || 7');
+  --rows: v-bind('gameState.length || 6');
+  width: min(calc(85vw / var(--cols)), calc((100dvh - var(--v-layout-top)) * 0.85 / var(--rows)));
+  height: min(calc(85vw / var(--cols)), calc((100dvh - var(--v-layout-top)) * 0.85 / var(--rows)));
+  flex: 0 0 auto;
+  user-select: none;
+  -webkit-user-drag: none;
+  pointer-events: none;
+}
+</style>

GUI/src/routes/LocalMode.vue

@@ -4,10 +4,10 @@ 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, 2, 1],
-    [0, 0, 0, 0, 0, 0, 0],
+    [1, 0, 0, 0, 0, 1, 1],
-    [0, 0, 0, 0, 0, 0, 0],
+    [1, 0, 2, 0, 1, 2, 2],
-    [0, 0, 0, 0, 0, 0, 0],
+    [1, 1, 2, 1, 2, 1, 2],
 ];
 
 </script>