<script setup lang="ts">
import { ref } from 'vue';
import GameCreationMenu from '@/components/GameCreationMenu.vue';
import type { GameSettings } from '@/scripts/interfaces/GameSettings';
import LocalGame from '@/scripts/logic/localMode/LocalGame';
import Field from '@/components/game/Field.vue';

enum CurrentState {
  CreatingGame,
  Game,
}

let settings = ref<GameSettings>({
  playerName1: 'Spieler 1',
  playerName2: 'Spieler 2',
  fieldSize: { x: 7, y: 6 },
});

var currentState = ref<CurrentState>(CurrentState.CreatingGame);
const game = ref<LocalGame>(new LocalGame(settings.value));
const gameField = ref<number[][]>([]);
const currentSelectionIndex = ref<number | null>(null);

game.value.onGameStateChanged = (gameState) => {
  gameField.value = gameState?.currentField ?? [];
};

async function startGame() {
  await game.value.start();

  currentState.value = CurrentState.Game;
}
</script>

<template>
  <v-container
    class="d-flex align-center justify-center fill-height"
    v-if="currentState === CurrentState.CreatingGame"
  >
    <GameCreationMenu v-model:settings="settings" @create-game="startGame()" />
  </v-container>

  <Field
    v-else
    :game-state="gameField"
    v-model:current-selection-index="currentSelectionIndex"
    @click-on-game-field="game.drop(currentSelectionIndex ?? 1)"
  />
</template>

<style scoped></style>
