- 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`).
2026-02-19 17:43:22 +01:00
parent 2337c6b2db
commit 13fdf97f5a
9 changed files with 118 additions and 67 deletions
@@ -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>
@@ -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>