Wire up online game creation and show UI message

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.
This commit is contained in:
2026-03-08 20:53:04 +01:00
committed by Jonas
parent 466c1c387d
commit acae815a2a
4 changed files with 35 additions and 6 deletions
+3 -2
View File
@@ -19,7 +19,7 @@ function gameFieldPreset(x: number, y: number) {
<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>
<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
@@ -60,10 +60,11 @@ function gameFieldPreset(x: number, y: number) {
/>
</v-col>
</v-row>
<div class="d-flex align-center justify-space-evenly ma-4 w-100">
<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>