From 7395b6d3bf4237472f45e7a9d025fda4426d5891 Mon Sep 17 00:00:00 2001
From: Jonas <familiehimmelberg@gmail.com>
Date: Thu, 19 Feb 2026 21:05:33 +0100
Subject: [PATCH] Introduce LocalGame logic and integrate with LocalMode
 rendering.

---
 GUI/.prettierrc.json                         |  2 +-
 GUI/src/Layout.vue                           |  3 ++-
 GUI/src/components/game/Field.vue            | 21 ++++++++++++---
 GUI/src/routes/LocalMode.vue                 | 27 ++++++++++----------
 GUI/src/scripts/classes/.gitkeep             |  0
 GUI/src/scripts/interfaces/.gitkeep          |  0
 GUI/src/scripts/interfaces/FieldSize.ts      |  5 ++++
 GUI/src/scripts/logic/localMode/LocalGame.ts | 25 ++++++++++++++++++
 8 files changed, 63 insertions(+), 20 deletions(-)
 delete mode 100644 GUI/src/scripts/classes/.gitkeep
 delete mode 100644 GUI/src/scripts/interfaces/.gitkeep
 create mode 100644 GUI/src/scripts/interfaces/FieldSize.ts
 create mode 100644 GUI/src/scripts/logic/localMode/LocalGame.ts

diff --git a/GUI/.prettierrc.json b/GUI/.prettierrc.json
index 29a2402..334a585 100644
--- a/GUI/.prettierrc.json
+++ b/GUI/.prettierrc.json
@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/prettierrc",
-  "semi": false,
+  "semi": true,
   "singleQuote": true,
   "printWidth": 100
 }
diff --git a/GUI/src/Layout.vue b/GUI/src/Layout.vue
index f63f0ca..edafb16 100644
--- a/GUI/src/Layout.vue
+++ b/GUI/src/Layout.vue
@@ -1,4 +1,5 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+</script>
 
 <template>
   <v-app>
diff --git a/GUI/src/components/game/Field.vue b/GUI/src/components/game/Field.vue
index df6ac14..0f621bd 100644
--- a/GUI/src/components/game/Field.vue
+++ b/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>
\ No newline at end of file
diff --git a/GUI/src/routes/LocalMode.vue b/GUI/src/routes/LocalMode.vue
index a34dc1f..5afdb73 100644
--- a/GUI/src/routes/LocalMode.vue
+++ b/GUI/src/routes/LocalMode.vue
@@ -1,25 +1,24 @@
 <script setup lang="ts">
 import Field from '@/components/game/Field.vue'
 import { ref } from 'vue'
+import type { FieldSize } from '@/scripts/interfaces/FieldSize.ts'
+import LocalGame from '@/scripts/logic/localMode/LocalGame.ts'
 
-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],
-]
+const gameFieldSize: FieldSize = {
+  x: 7,
+  y: 6,
+}
 
-let currentSelection = ref(null)
-
-setInterval(() => {
-  console.log(currentSelection.value)
-}, 1000)
+const game = ref(new LocalGame(gameFieldSize))
+const currentSelection = ref(null)
 </script>
 
 <template>
-  <Field :game-state="gameField" v-model:current-selection-index="currentSelection" ></Field>
+  <Field
+    v-model:current-selection-index="currentSelection"
+    :gameState="game.field"
+    @clickOnGameField="game.place(currentSelection)"
+  ></Field>
 </template>
 
 <style scoped></style>
\ No newline at end of file
diff --git a/GUI/src/scripts/classes/.gitkeep b/GUI/src/scripts/classes/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/GUI/src/scripts/interfaces/.gitkeep b/GUI/src/scripts/interfaces/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/GUI/src/scripts/interfaces/FieldSize.ts b/GUI/src/scripts/interfaces/FieldSize.ts
new file mode 100644
index 0000000..548452d
--- /dev/null
+++ b/GUI/src/scripts/interfaces/FieldSize.ts
@@ -0,0 +1,5 @@
+export interface FieldSize {
+  x: number,
+  y: number
+}
+
diff --git a/GUI/src/scripts/logic/localMode/LocalGame.ts b/GUI/src/scripts/logic/localMode/LocalGame.ts
new file mode 100644
index 0000000..0a61086
--- /dev/null
+++ b/GUI/src/scripts/logic/localMode/LocalGame.ts
@@ -0,0 +1,25 @@
+import type { FieldSize } from '@/scripts/interfaces/FieldSize.ts'
+
+class LocalGame {
+  public field: number[][]
+
+  private currentPlayer: number = 1;
+  constructor(fieldSize: FieldSize) {
+    this.field = Array.from({ length: fieldSize.y }, () => Array(fieldSize.x).fill(0))
+  }
+
+  place(locationX: number): void {
+    for (let y = this.field.length - 1; y >= 0; y--) {
+      const row = this.field[y]
+
+      if (row && row[locationX] === 0) {
+        row[locationX] = this.currentPlayer
+        break
+      }
+    }
+
+    this.currentPlayer = this.currentPlayer === 1 ? 2 : 1
+  }
+}
+
+export default LocalGame
\ No newline at end of file