Files
KnockOutWhist-Frontend/src/views/Game.vue
lq64 bb6355d9ed feat(ui): FRO-34 Lobby (#21)
Started with Lobby Component

Co-authored-by: LQ63 <lkhermann@web.de>
Co-authored-by: Janis <janis-e@gmx.de>
Reviewed-on: #21
Reviewed-by: Janis <janis-e@gmx.de>
Co-authored-by: lq64 <lq@blackhole.local>
Co-committed-by: lq64 <lq@blackhole.local>
2025-12-14 15:10:27 +01:00

48 lines
1.1 KiB
Vue

<script lang="ts" setup>
import {useWebSocket} from "@/composables/useWebsocket.ts";
import {useIngame} from "@/composables/useIngame.ts";
import Ingame from "@/components/Ingame.vue";
import {useUserInfo} from "@/composables/useUserInfo.ts";
import LobbyComponent from "@/components/lobby/LobbyComponent.vue";
import {storeToRefs} from "pinia";
import {useQuasar} from "quasar";
import router from "@/router";
const wb = useWebSocket()
const ig = useIngame()
const { state } = storeToRefs(ig)
const ui = useUserInfo()
const $q = useQuasar();
ui.requestState().then(() => {
if (ui.gameId == null) {
$q.notify({
message: "You're not in any game!",
color: "negative"
})
router.replace("/")
} else {
ig.requestGame(ui.gameId).then(() => {
wb.connect()
})
}
})
</script>
<template>
<div class="lobby-background">
<Ingame v-if="state === 'InGame'"/>
<lobby-component v-if="state === 'Lobby'"/>
</div>
</template>
<style scoped>
.lobby-background {
background-color: var(--body-background-color);
width: 100%;
min-height: 100vh;
}
</style>