Add game join UI and OnlineGame scaffold

Rename JoinMenu to GameJoinMenu and add a JoinGameObject model + OTP input for entering a 6-digit game code. Introduce a new JoinGameObject interface file. Update OnlineMode.vue to import and render GameJoinMenu and GameEndedMenu, add refs for joiningModel, game, gameField, currentSelectionIndex and gameEndedInformation, wire create/ join handlers (stubbed) and the main game view (Field and InfoField). Refactor LocalGame to OnlineGame, export it as default and add a stubbed drop method; adjust import path formatting. Several functions remain as stubs to be implemented in follow-up commits.
This commit is contained in:
2026-03-08 20:33:21 +01:00
committed by Jonas
parent a5019fc27a
commit 466c1c387d
4 changed files with 70 additions and 6 deletions
+35
View File
@@ -0,0 +1,35 @@
<script setup lang="ts">
import type JoinGameObject from '@/scripts/interfaces/JoinGameObject';
defineEmits(['join']);
let joiningModel = defineModel<JoinGameObject>('joinGameObject', {
required: true,
});
</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>
<v-otp-input
length="6"
v-model="joiningModel.gameCode"
type="number"
inputmode="numeric"
:error="joiningModel.failed"
></v-otp-input>
<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>