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
+18 -3
View File
@@ -33,7 +33,22 @@ const gameField = ref<number[][]>([]);
const currentSelectionIndex = ref<number | null>(null);
const gameEndedInformation = ref<GameEnded | null>(null);
async function createGame() {}
game.value.onGameStateChanged = (gameState) => {
gameField.value = gameState?.currentField ?? [];
};
game.value.onGameEnded = (gameEndedInfo) => {
gameEndedInformation.value = gameEndedInfo;
currentState.value = CurrentState.EndScreen;
};
game.value.onGameCreated = (gameCode: string) => {
settings.value.message = `Das Spiel ist erstellt, deine Freund kann über folgendem Code Beitreten: ${gameCode}`;
};
async function createGame() {
await game.value.createGame(settings.value);
}
async function tryToJoin() {}
</script>
@@ -48,12 +63,12 @@ async function tryToJoin() {}
<GameCreationMenu
v-model:settings="settings"
@create-game="createGame()"
v-if="currentState === CurrentState.CreatingGame"
v-else-if="currentState === CurrentState.CreatingGame || currentState === CurrentState.WaitingForOpponent"
/>
<GameJoinMenu
:joinGameObject="joiningModel"
v-if="currentState === CurrentState.JoiningGame"
v-else-if="currentState === CurrentState.JoiningGame"
@join="tryToJoin()"
/>