<template>
  <div class="overflow-hidden">
    <Notifications />
    <Login v-if="screen === 'login'" />
    <Characters v-if="screen === 'characters'" />
    <Game v-if="screen === 'game'" />
  </div>
</template>

<script setup lang="ts">
import { useGameStore } from '@/stores/gameStore'
import Notifications from '@/components/utilities/Notifications.vue'
import Login from '@/screens/Login.vue'
import Characters from '@/screens/Characters.vue'
import Game from '@/screens/Game.vue'
import { computed } from 'vue'

const gameStore = useGameStore()

const screen = computed(() => {
  if (!gameStore.connection) {
    return 'login'
  } else if (gameStore.token && gameStore.connection) {
    if (gameStore.character) {
      return 'game'
    }
    return 'characters'
  }
  return 'login' // default fallback
})

// Disable right click
addEventListener('contextmenu', (event) => event.preventDefault())
</script>
