Convert field to jagged arrays; add local SignalR UI

Change game field representation to jagged arrays (int[][]) for JSON/SignalR compatibility and add conversion helpers in GameManager. Make Coordinates JSON-serializable (constructor and JsonPropertyName attributes). Update GameHubSocket: validate field size, fix JoinGame parameter order/Group join, rename Place->Drop and send proper game id. Add client-side local play support: GameConnection SignalR client, LocalGame orchestration for two local players, and UI components (GameCreationMenu, Slider) plus GameSettings interface. Update LocalMode route to use the new creation UI and start local games. These changes enable reliable serialization over SignalR and a local two-player flow with a creation UI.
This commit is contained in:
Jonas
2026-03-05 21:58:17 +01:00
parent bec5df7e88
commit 0eed8020b8
10 changed files with 396 additions and 39 deletions
+76
View File
@@ -0,0 +1,76 @@
<script setup lang="ts">
import type { GameSettings } from '@/scripts/interfaces/GameSettings';
import Slider from './Slider.vue';
let settingsProp = defineModel<GameSettings>('settings', {
required: true,
});
defineEmits(['createGame']);
function gameFieldPreset(x: number, y: number) {
settingsProp.value.fieldSize.x = x;
settingsProp.value.fieldSize.y = y;
}
</script>
<template>
<v-sheet width="100%" class="text-centered pa-2 w-75" rounded>
<h1 class="text-center">Spiel Erstellen</h1>
<v-divider class="mb-4"></v-divider>
<v-row>
<v-col cols="12" md="6">
<h2 class="settingsCat">Spieler</h2>
<v-text-field
v-model="settingsProp.playerName1"
label="Name vom Spieler 1"
required
></v-text-field>
<v-text-field v-if="settingsProp.playerName2 != null"
v-model="settingsProp.playerName2"
label="Name vom Spieler 2"
required
></v-text-field>
</v-col>
<v-col cols="12" md="6">
<h2 class="settingsCat">Spielfeld</h2>
<v-chip-group>
<v-chip text="Klein" @click="gameFieldPreset(4, 5)"></v-chip>
<v-chip text="Standard" @click="gameFieldPreset(7, 6)"></v-chip>
<v-chip text="Groß" @click="gameFieldPreset(12, 10)"></v-chip>
</v-chip-group>
<Slider
v-model="settingsProp.fieldSize.x"
label="Breite"
:min="4"
:max="16"
:step="1"
:width="70"
/>
<Slider
v-model="settingsProp.fieldSize.y"
label="Höhe"
:min="4"
:max="16"
:step="1"
:width="70"
/>
</v-col>
</v-row>
<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>