Files
4Gewinnt/GUI/src/components/GameEndedMenu.vue
T
2026-03-12 23:20:05 +01:00

41 lines
1.3 KiB
Vue

<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>