<script setup lang="ts">
import { computed } from 'vue'
import type { GameEnded } from '@/scripts/logic/signalR/GameConnection'

const props = defineProps<{ gameEndedInformation: GameEnded | null }>()

const message = computed(() => {
    switch (props.gameEndedInformation?.method) {
        case "PlayerDisconnected":
            return `Bei Spieler ${props.gameEndedInformation.player?.name} ist die Verbindung abgebrochen`
        case "Draw":
            return "Das Spielfeld ist voll und es ist ein Unentschieden"
        case "Win":
            return `Spieler ${props.gameEndedInformation.player?.name} hat gewonnen!`
        default:
            return ""
    }
})
</script>

<template>
    <v-sheet width="100%" class="text-centered pa-2 w-75" rounded>
        <h1 class="text-center">Spiel Beendet</h1>
        <h3 class="test-center">{{ message }}</h3>
        <v-divider class="mb-4"></v-divider>
        <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('createGame')" rounded="xl">
                Spiel Starten
            </v-btn>
        </div>
    </v-sheet>
</template>

<style scoped>
.settingsCat {
    margin-top: 5px;
}
</style>