Add JoinMenu and join error handling
Add a new JoinMenu.vue component to provide a UI for joining existing games (emits a "join" event and offers Cancel/Join buttons). Improve UX by adding spacing to GameCreationMenu.vue header. Update OnlineMode.vue to import GameCreationMenu. In the API, send a client-side error message when adding a player fails (GameManager.cs now notifies the player's connection with "Spiel Existiert nicht!" before returning null) so users receive immediate feedback when a join attempt is invalid.
This commit is contained in:
@@ -21,7 +21,11 @@ public class GameManager(IGameRepository gameRepository, IHubContext<GameHubSock
|
|||||||
|
|
||||||
var success = game != null && game.State == GameState.Lobby && game.AddPlayer(player);
|
var success = game != null && game.State == GameState.Lobby && game.AddPlayer(player);
|
||||||
|
|
||||||
if (!success) return null;
|
if (!success)
|
||||||
|
{
|
||||||
|
await hubContext.Clients.Client(player.ConnectionId).SendAsync("Error", "Spiel Existiert nicht!");
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
if (game.Players.Count == 2)
|
if (game.Players.Count == 2)
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -17,7 +17,7 @@ function gameFieldPreset(x: number, y: number) {
|
|||||||
<template>
|
<template>
|
||||||
<v-container class="d-flex align-center justify-center fill-height">
|
<v-container class="d-flex align-center justify-center fill-height">
|
||||||
<v-sheet width="100%" class="text-centered pa-2 w-75" rounded>
|
<v-sheet width="100%" class="text-centered pa-2 w-75" rounded>
|
||||||
<h1 class="text-center">Spiel Erstellen</h1>
|
<h1 class="text-center mb-4">Spiel Erstellen</h1>
|
||||||
<v-divider class="mb-4"></v-divider>
|
<v-divider class="mb-4"></v-divider>
|
||||||
<v-row>
|
<v-row>
|
||||||
<v-col cols="12" md="6">
|
<v-col cols="12" md="6">
|
||||||
|
|||||||
@@ -0,0 +1,21 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
defineEmits(["join"]);
|
||||||
|
</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>
|
||||||
|
<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>
|
||||||
@@ -1,5 +1,6 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import CreateOrJoinMenu from '@/components/CreateOrJoinMenu.vue';
|
import CreateOrJoinMenu from '@/components/CreateOrJoinMenu.vue';
|
||||||
|
import GameCreationMenu from '@/components/GameCreationMenu.vue';
|
||||||
import type { GameSettings } from '@/scripts/interfaces/GameSettings';
|
import type { GameSettings } from '@/scripts/interfaces/GameSettings';
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user