jonas
acae815a2a
Add game creation lifecycle hooks and UI feedback for online games. - OnlineGame: add onGameCreated and onGameJoinedFailed callbacks, wire player.onGameCreated to set gameId and invoke onGameCreated, and implement createGame to connect and create a game on the player connection. Small cleanup in drop(). - GameSettings: add optional message field to carry informational text to the UI. - OnlineMode.vue: register handlers for onGameStateChanged, onGameEnded and onGameCreated to update the reactive state and transition to the end/waiting states; update createGame to call OnlineGame.createGame; adjust component rendering logic to include WaitingForOpponent state. - GameCreationMenu.vue: hide form controls when a settings.message exists and display the message instead; minor layout class adjustments. These changes enable creating a game, propagating the generated game code to the UI, and showing a message to the user while waiting for opponents.
77 lines
2.4 KiB
Vue
77 lines
2.4 KiB
Vue
<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-container class="d-flex align-center justify-center fill-height">
|
|
<v-sheet width="100%" class="text-centered pa-2 w-75" rounded>
|
|
<h1 class="text-center mb-4">Spiel Erstellen</h1>
|
|
<v-divider class="mb-4"></v-divider>
|
|
<v-row class="d-flex align-center justify-space-evenly ma-4 w-100" v-if="!settingsProp.message">
|
|
<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-if="!settingsProp.message">
|
|
<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>
|
|
<h2 v-else class="text-center">{{ settingsProp.message }}</h2>
|
|
</v-sheet>
|
|
</v-container>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.settingsCat {
|
|
margin-top: 5px;
|
|
}
|
|
</style>
|