Major refractor, cleaning and improvements.

src/components/zone/Zone.vue

@@ -0,0 +1,41 @@
+<template>
+  <Tiles :key="zoneStore.zone?.id ?? 0" />
+  <Objects />
+  <Characters />
+</template>
+
+<script setup lang="ts">
+import { useGameStore } from '@/stores/game'
+import { useZoneStore } from '@/stores/zone'
+import { onBeforeMount, onBeforeUnmount, watch } from 'vue'
+import type { Character as CharacterT, Zone as ZoneT } from '@/types'
+import Tiles from '@/components/zone/Tiles.vue'
+import Objects from '@/components/zone/Objects.vue'
+import Characters from '@/components/zone/Characters.vue'
+
+const gameStore = useGameStore()
+const zoneStore = useZoneStore()
+
+type zoneLoadData = {
+  zone: ZoneT
+  characters: CharacterT[]
+}
+
+gameStore.connection?.emit('zone:characterJoin', { zoneId: gameStore.character?.zoneId }, (response: zoneLoadData) => {
+  zoneStore.setZone(response.zone)
+  zoneStore.setCharacters(response.characters)
+})
+
+watch(() => zoneStore.zone, (newZone) => {
+  console.log('Zone changed:', newZone)
+}, { deep: true })
+
+
+onBeforeMount(() => {
+
+});
+
+onBeforeUnmount(() => {
+
+});
+</script>