40 lines
1014 B
Vue
40 lines
1014 B
Vue
<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>
|