- Rename and restructure components and assets for uniformity.

- Refactor `Field.vue` for better state management and event handling.
- Update path references for SVG assets.
- Add selection highlighting in game field with red and white arrows.
- Simplify and organize styles in game components.
- Minor updates to local mode game logic (`LocalMode.vue`).

GUI/public/Arrow/Arrow_Red.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 750 750" version="1.0">
+  <g>
+    <path d="M 345.0 250.0 L 405.0 250.0 L 405.0 390.0 L 460.0 390.0 L 375 510.0 L 290.0 390.0 L 345.0 390.0 Z"
+          fill="#e53935"
+          stroke="none"/>
+  </g>
+</svg>

GUI/public/Arrow/Arrow_White.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 750 750" version="1.0">
+  <g>
+    <path d="M 345.0 250.0 L 405.0 250.0 L 405.0 390.0 L 460.0 390.0 L 375 510.0 L 290.0 390.0 L 345.0 390.0 Z"
+          fill="#FFFFFF"
+          stroke="none"/>
+  </g>
+</svg>

GUI/src/components/Game/Field.vue

@@ -1,54 +0,0 @@
-<script setup lang="ts">
-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 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>
-.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/components/game/Field.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{ gameState: number[][] }>()
+let currentSelectionIndex = defineModel<number | null>('currentSelectionIndex', {
+  required: true,
+})
+
+const gameFieldSize = computed(() => ({
+  x: props.gameState[0]?.length || 7,
+  y: props.gameState.length || 6,
+}))
+
+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'
+  }
+}
+
+function selectionUpdate(index: number, active: boolean) {
+  const newValue = active ? index : null
+
+  if (
+    (active && currentSelectionIndex.value !== index) ||
+    (!active && currentSelectionIndex.value === index)
+  ) {
+    currentSelectionIndex.value = newValue
+  }
+}
+</script>
+
+<template>
+  <div class="game-container">
+    <div id="spielfeld" class="d-flex flex-column" style="gap: 0">
+      <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'"
+          class="game-cell"
+          :aspect-ratio="1"
+          cover
+          @mouseenter="selectionUpdate(index - 1, true)"
+          @mouseleave="selectionUpdate(index - 1, false)"
+        />
+      </div>
+      <div v-for="row in props.gameState" class="d-flex flex-row" style="gap: 0">
+        <v-img
+          v-for="(field, index) in row"
+          :key="index"
+          :src="translateNumberToImage(field)"
+          class="game-cell"
+          :aspect-ratio="1"
+          cover
+          @mouseenter="selectionUpdate(index, true)"
+          @mouseleave="selectionUpdate(index, false)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<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('gameFieldSize.x || 7');
+  --rows: v-bind('gameFieldSize.y || 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;
+}
+</style>

GUI/src/main.ts

@@ -1,6 +1,6 @@
 import { createApp } from 'vue'
 import App from './Layout.vue'
-import router from './router'
+import router from './utils'
 // Vuetify
 import 'vuetify/styles'
 import { createVuetify } from 'vuetify'

GUI/src/routes/LocalMode.vue

@@ -1,20 +1,25 @@
 <script setup lang="ts">
-import Field from '@/components/Game/Field.vue';
+import Field from '@/components/game/Field.vue'
+import { ref } from 'vue'
 
-const gameField = [
+let gameField = [
   [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, 1, 0, 0, 1, 1],
   [1, 0, 2, 0, 1, 2, 2],
   [1, 1, 2, 1, 2, 1, 2],
-];
+]
 
+let currentSelection = ref(null)
+
+setInterval(() => {
+  console.log(currentSelection.value)
+}, 1000)
 </script>
 
 <template>
-    <Field :game-state="gameField"></Field>
+  <Field :game-state="gameField" v-model:current-selection-index="currentSelection" ></Field>
 </template>
 
-<style scoped>
+<style scoped></style>
-</style>