Loading world works

src/App.vue

@@ -1,11 +1,11 @@
 <template>
-<div class="overflow-hidden">
-  <Notifications />
-  <Login v-if="screen === 'login'" />
-  <Register v-if="screen === 'register'" />
-  <Characters v-if="screen === 'characters'" />
-  <Game v-if="screen === 'game'" />
-</div>
+  <div class="overflow-hidden">
+    <Notifications />
+    <Login v-if="screen === 'login'" />
+    <Register v-if="screen === 'register'" />
+    <Characters v-if="screen === 'characters'" />
+    <Game v-if="screen === 'game'" />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -18,27 +18,27 @@ import Game from '@/screens/Game.vue'
 import { storeToRefs } from 'pinia'
 
 const gameStore = useGameStore()
-const {screen} = storeToRefs(gameStore);
+const { screen } = storeToRefs(gameStore)
 
 gameStore.$subscribe(
   (mutation, state) => {
-    let newScreen = screen.value;
+    let newScreen = screen.value
 
     if (!state.connection) {
-      newScreen = 'login';
+      newScreen = 'login'
     } else if (state.token && state.connection) {
-      newScreen = 'characters';
+      newScreen = 'characters'
 
       if (state.character) {
-        newScreen = 'game';
+        newScreen = 'game'
       }
     }
 
     // Update screen.value only if it's different from the new state
     if (screen.value !== newScreen) {
-      screen.value = newScreen;
+      screen.value = newScreen
     }
   },
   { detached: true }
-);
+)
 </script>