<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";
import {ref, watch} from "vue";

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' || state === 'SelectTrump' || state === 'TieBreak'"/>
    <lobby-component v-if="state === 'Lobby'"/>
  </div>
</template>

<style scoped>
.lobby-background {
  background-color: var(--body-background-color);
  width: 100%;
  min-height: 100vh;
}
</style>
