Introduce LocalGame logic and integrate with LocalMode rendering.

GUI/src/components/game/Field.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, type ComputedRef } from 'vue'
+import type { FieldSize } from '@/scripts/interfaces/FieldSize.ts'
 
+defineEmits(['clickOnGameField'])
 const props = defineProps<{ gameState: number[][] }>()
 let currentSelectionIndex = defineModel<number | null>('currentSelectionIndex', {
   required: true,
 })
 
-const gameFieldSize = computed(() => ({
+const gameFieldSize: ComputedRef<FieldSize> = computed(() => ({
   x: props.gameState[0]?.length || 7,
   y: props.gameState.length || 6,
 }))
@@ -36,12 +38,19 @@ function selectionUpdate(index: number, active: boolean) {
 
 <template>
   <div class="game-container">
-    <div id="spielfeld" class="d-flex flex-column" style="gap: 0">
+    <div
+      id="gameField"
+      class="d-flex flex-column"
+      style="gap: 0"
+      @click="$emit('clickOnGameField')"
+    >
       <div id="selectors" class="d-flex flex-row" style="gap: 0">
         <v-img
           v-for="index in gameFieldSize.x"
           :key="index"
-          :src="(index - 1) == currentSelectionIndex ? '/Arrow/Arrow_Red.svg' : '/Arrow/Arrow_White.svg'"
+          :src="
+            index - 1 == currentSelectionIndex ? '/Arrow/Arrow_Red.svg' : '/Arrow/Arrow_White.svg'
+          "
           class="game-cell"
           :aspect-ratio="1"
           cover
@@ -83,4 +92,8 @@ function selectionUpdate(index: number, active: boolean) {
   flex: 0 0 auto;
   user-select: none;
 }
+
+#gameField {
+  cursor: cell;
+}
 </style>