Refactor App.vue

src/App.vue

@@ -1,34 +1,31 @@
 <template>
   <div class="overflow-hidden">
     <Notifications />
-    <Login v-if="screen === 'login'" />
-    <Characters v-if="screen === 'characters'" />
-    <Game v-if="screen === 'game'" />
+    <component :is="currentScreen" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { useGameStore } from '@/stores/gameStore'
+import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 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 ZoneEditor from '@/screens/ZoneEditor.vue'
 import { computed } from 'vue'
 
 const gameStore = useGameStore()
+const zoneEditorStore = useZoneEditorStore()
 
-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
+const currentScreen = computed(() => {
+  if (!gameStore.connection) return Login
+  if (!gameStore.token) return Login
+  if (!gameStore.character) return Characters
+  if (zoneEditorStore.active) return ZoneEditor
+  return Game
 })
 
 // Disable right click
 addEventListener('contextmenu', (event) => event.preventDefault())
-</script>
+</script>