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>
48 lines
1.1 KiB
Vue
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>
|