<template>
  <Notifications />
  <Login v-if="screen === 'login'" />
  <Register v-if="screen === 'register'" />
  <Characters v-if="screen === 'characters'" />
  <Game v-if="screen === 'game'" />
</template>

<script setup lang="ts">
import { useGameStore } from '@/stores/game'
import Notifications from '@/components/utilities/Notifications.vue'
import Login from '@/screens/Login.vue'
import Register from '@/screens/Register.vue'
import Characters from '@/screens/Characters.vue'
import Game from '@/screens/Game.vue'
import { storeToRefs } from 'pinia'
import { useSocketStore } from '@/stores/socket'

const socket = useSocketStore()
const gameStore = useGameStore()
const {screen} = storeToRefs(gameStore);

socket.$subscribe(
  (mutation, state) => {
    if (!state.connection) {
      screen.value = 'login'
    }

    if (state.token && state.connection) {
      screen.value = 'characters'

      if (state.character) {
        screen.value = 'game'
      }
    }
  },
  { detached: true }
)
</script>
