<script setup lang="ts">
import type JoinGameObject from '@/scripts/interfaces/JoinGameObject';

defineEmits(['join']);

let joiningModel = defineModel<JoinGameObject>('joinGameObject', {
  required: true,
});
</script>

<template>
  <v-container class="d-flex align-center justify-center fill-height">
    <v-sheet class="text-centered pa-2 w-50" rounded>
      <h1 class="text-center mb-5">Spiel Beitreten</h1>
      <h3 class="text-center">
        Hier kannst du einem bestehenden Spiel beitreten, indem du den Spiel Code eingibst, die dir
        dein Freund gegeben hat.
      </h3>
      <v-divider class="mb-5 mt-5"></v-divider>
      <v-text-field
            v-model="joiningModel.playerName"
            label="Name vom Spieler 1"
            required
          ></v-text-field>
      <v-otp-input
        length="6"
        v-model="joiningModel.gameCode"
        type="number"
        inputmode="numeric"
        :error="joiningModel.failed"
      ></v-otp-input>
      <div class="d-flex align-center justify-space-evenly ma-4 w-100">
        <v-btn color="red" @click="$router.push('/')" rounded="xl"> Abbrechen </v-btn>
        <v-btn color="primary" @click="$emit('join')" rounded="xl"> Beitreten </v-btn>
      </div>
    </v-sheet>
  </v-container>
</template>

<style scoped></style>
