From 13fdf97f5aa7e0ab8fede13131241395333b98d9 Mon Sep 17 00:00:00 2001
From: Jonas <familiehimmelberg@gmail.com>
Date: Thu, 19 Feb 2026 17:43:22 +0100
Subject: [PATCH] - 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                |  7 ++
 GUI/public/Arrow/Arrow_White.svg              |  7 ++
 GUI/src/components/Game/Field.vue             | 54 ------------
 GUI/src/components/game/Field.vue             | 86 +++++++++++++++++++
 GUI/src/main.ts                               |  2 +-
 GUI/src/routes/LocalMode.vue                  | 29 ++++---
 .../{Interfaces => scripts/classes}/.gitkeep  |  0
 GUI/src/scripts/interfaces/.gitkeep           |  0
 GUI/src/{router => utils}/index.ts            |  0
 9 files changed, 118 insertions(+), 67 deletions(-)
 create mode 100644 GUI/public/Arrow/Arrow_Red.svg
 create mode 100644 GUI/public/Arrow/Arrow_White.svg
 delete mode 100644 GUI/src/components/Game/Field.vue
 create mode 100644 GUI/src/components/game/Field.vue
 rename GUI/src/{Interfaces => scripts/classes}/.gitkeep (100%)
 create mode 100644 GUI/src/scripts/interfaces/.gitkeep
 rename GUI/src/{router => utils}/index.ts (100%)

diff --git a/GUI/public/Arrow/Arrow_Red.svg b/GUI/public/Arrow/Arrow_Red.svg
new file mode 100644
index 0000000..ab220b0
--- /dev/null
+++ b/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>
diff --git a/GUI/public/Arrow/Arrow_White.svg b/GUI/public/Arrow/Arrow_White.svg
new file mode 100644
index 0000000..e3be6e0
--- /dev/null
+++ b/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>
diff --git a/GUI/src/components/Game/Field.vue b/GUI/src/components/Game/Field.vue
deleted file mode 100644
index 331c175..0000000
--- a/GUI/src/components/Game/Field.vue
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/GUI/src/components/game/Field.vue b/GUI/src/components/game/Field.vue
new file mode 100644
index 0000000..df6ac14
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/GUI/src/main.ts b/GUI/src/main.ts
index 9ce37d5..934aca6 100644
--- a/GUI/src/main.ts
+++ b/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'
diff --git a/GUI/src/routes/LocalMode.vue b/GUI/src/routes/LocalMode.vue
index 5062910..a34dc1f 100644
--- a/GUI/src/routes/LocalMode.vue
+++ b/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 = [
-    [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],
-];
+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, 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>
\ No newline at end of file
+<style scoped></style>
\ No newline at end of file
diff --git a/GUI/src/Interfaces/.gitkeep b/GUI/src/scripts/classes/.gitkeep
similarity index 100%
rename from GUI/src/Interfaces/.gitkeep
rename to GUI/src/scripts/classes/.gitkeep
diff --git a/GUI/src/scripts/interfaces/.gitkeep b/GUI/src/scripts/interfaces/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/GUI/src/router/index.ts b/GUI/src/utils/index.ts
similarity index 100%
rename from GUI/src/router/index.ts
rename to GUI/src/utils/index.ts