better design and working setting cells

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 v-for="row in gameState">
-      <v-img v-for="field in row" src="./Game/Gamefield/Gamefield.svg" height="100px" width="100px"></v-img>
+  <div class="game-container">
+    <div id="spielfeld" class="d-flex flex-column" style="gap: 0;">
+      <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, 0, 0],
-    [0, 0, 0, 0, 0, 0, 0],
-    [0, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0, 2, 1],
+    [1, 0, 0, 0, 0, 1, 1],
+    [1, 0, 2, 0, 1, 2, 2],
+    [1, 1, 2, 1, 2, 1, 2],
 ];
 
 </script>