Introduce LocalGame logic and integrate with LocalMode rendering.

GUI/.prettierrc.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/prettierrc",
-  "semi": false,
+  "semi": true,
   "singleQuote": true,
   "printWidth": 100
 }

GUI/src/Layout.vue

@@ -1,4 +1,5 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+</script>
 
 <template>
   <v-app>

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>

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 = [
+const gameFieldSize: FieldSize = {
-  [0, 0, 0, 0, 0, 0, 0],
+  x: 7,
-  [0, 0, 0, 0, 0, 0, 0],
+  y: 6,
-  [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)
+const game = ref(new LocalGame(gameFieldSize))
-
+const currentSelection = ref(null)
-setInterval(() => {
-  console.log(currentSelection.value)
-}, 1000)
 </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>

GUI/src/scripts/interfaces/FieldSize.ts

@@ -0,0 +1,5 @@
+export interface FieldSize {
+  x: number,
+  y: number
+}
+

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