Game Logic in Frontend

2026-03-07 14:05:28 +01:00
parent 34f683854b
commit 919bb71f19
8 changed files with 148 additions and 54 deletions
@@ -0,0 +1,41 @@
+<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>