From 0fcd5c4d7693806a9a0f1d7b6f94354b261c7eff Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Fri, 12 Jul 2024 12:44:37 +0200
Subject: [PATCH] Loading world works

---
 src/App.vue                                   |  28 +--
 src/components/World.vue                      | 203 ++++++++++++------
 src/components/forms/ChipsInput.vue           |   2 +-
 src/components/gui/Hud.vue                    |  16 +-
 src/components/sprites/Character.vue          |  14 +-
 .../assetManager/partials/TileDetails.vue     |   4 +-
 .../utilities/zoneEditor/Objects.vue          |  15 +-
 src/components/utilities/zoneEditor/Tiles.vue |  15 +-
 .../utilities/zoneEditor/Toolbar.vue          |   5 +-
 .../utilities/zoneEditor/ZoneEditor.vue       |  49 +++--
 .../utilities/zoneEditor/ZoneList.vue         |   2 +-
 src/config.ts                                 |   2 +-
 src/screens/Game.vue                          |  10 +-
 src/screens/Login.vue                         |   2 +-
 src/services/authentication.ts                |   2 +-
 src/services/zone.ts                          |  10 +-
 src/stores/assets.ts                          |  10 +-
 src/stores/zone.ts                            |  10 +-
 src/stores/zoneEditor.ts                      |   4 +-
 src/types.ts                                  |   2 +-
 20 files changed, 228 insertions(+), 177 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3e46ff1..b7e41f6 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/World.vue b/src/components/World.vue
index a676700..d7d95b9 100644
--- a/src/components/World.vue
+++ b/src/components/World.vue
@@ -1,104 +1,165 @@
-
-
 <template>
-  <TilemapLayerC :tilemap="tileMap" :tileset="zoneStore.tiles" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
-  <Controls :layer="layer" />
-  <Container>
-    <Character :layer="layer" v-for="character in zoneStore.characters" :key="character.id" :character="character" />
+  <TilemapLayerC :tilemap="zoneTilemap" :tileset="exampleTilesArray" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
+  <Controls :layer="tiles" />
+
+  <Container :depth="2">
+    <Image
+      v-for="object in zoneObjects"
+      :depth="object.depth"
+      :key="object.object.id"
+      :x="tileToWorldX(zoneTilemap, object.position_x, object.position_y)"
+      :y="tileToWorldY(zoneTilemap, object.position_x, object.position_y)"
+      :texture="object.object.id"
+      :originY="Number(object.object.origin_x)"
+      :originX="Number(object.object.origin_y)"
+    />
+    <Character :layer="zoneTilemap" v-for="character in zoneStore.characters" :key="character.id" :character="character" />
+  </Container>
+
+  <Container :depth="3">
+    <Image v-for="zoneEventTile in zoneEventTiles" :key="zoneEventTile.id" :x="tileToWorldX(zoneTilemap, zoneEventTile.position_x, zoneEventTile.position_y)" :y="tileToWorldY(zoneTilemap, zoneEventTile.position_x, zoneEventTile.position_y)" :texture="zoneEventTile.type" />
   </Container>
 </template>
 
 <script setup lang="ts">
 import config from '@/config'
-import Tileset = Phaser.Tilemaps.Tileset
-import TilemapLayer = Phaser.Tilemaps.TilemapLayer
-import { Container, TilemapLayer as TilemapLayerC, useScene } from 'phavuer'
-import Character from '@/components/sprites/Character.vue'
-import { type Character as CharacterType } from '@/types'
-import { onBeforeMount, onBeforeUnmount, ref, type Ref, watch } from 'vue'
+import { Container, Image, TilemapLayer as TilemapLayerC, useScene } from 'phavuer'
+import { onBeforeMount, onBeforeUnmount, ref, toRaw, watch } from 'vue'
 import Controls from '@/components/utilities/Controls.vue'
 import { useGameStore } from '@/stores/game'
+import Toolbar from '@/components/utilities/zoneEditor/Toolbar.vue'
+import Tiles from '@/components/utilities/zoneEditor/Tiles.vue'
+import { useZoneEditorStore } from '@/stores/zoneEditor'
+import ZoneSettings from '@/components/utilities/zoneEditor/ZoneSettings.vue'
+import { placeTile, setAllTiles, tileToWorldX, tileToWorldY } from '@/services/zone'
+import { useAssetStore } from '@/stores/assets'
+import Objects from '@/components/utilities/zoneEditor/Objects.vue'
+import type { Zone, ZoneEventTile, ZoneObject, Character as CharacterT } from '@/types'
+import { storeToRefs } from 'pinia'
+import ZoneList from '@/components/utilities/zoneEditor/ZoneList.vue'
+import Tileset = Phaser.Tilemaps.Tileset
+import TilemapLayer = Phaser.Tilemaps.TilemapLayer
 import { useZoneStore } from '@/stores/zone'
+import Character from '@/components/sprites/Character.vue'
 
-// Phavuer logic
-let scene = useScene()
-let tilemapLayer = ref()
-
-const tileMap = null
-let tileset: Tileset = tileMap.addTilesetImage('default', 'tiles') as Tileset
-let layer: TilemapLayer = tileMap.createBlankLayer('layer', tileset, 0, config.tile_size.y) as TilemapLayer
-
-// center camera
-const centerY = (tileMap.height * tileMap.tileHeight) / 2
-const centerX = (tileMap.width * tileMap.tileWidth) / 2
-scene.cameras.main.centerOn(centerX, centerY)
-
-// Multiplayer / server logics
-const zoneStore = useZoneStore()
+const scene = useScene()
 const gameStore = useGameStore()
+const assetStore = useAssetStore()
+const zoneStore = useZoneStore()
 
-// Watch for changes in the zoneStore and update the layer
-watch(
-  () => zoneStore.tiles,
-  () => {
-    // @TODO : change to zone for when loading other maps
-    zoneStore.tiles.forEach((row, y) => row.forEach((tile, x) => layer.putTileAt(tile, x, y)))
-  },
-  { deep: true }
-)
-
-// Load the zone from the server
-onBeforeMount(() => {
-  gameStore.connection.emit('character:zone:request', { zoneId: gameStore.character.zoneId })
+const zoneData = new Phaser.Tilemaps.MapData({
+  width: zoneStore.zone?.width ?? 10,
+  height: zoneStore.zone?.height ?? 10,
+  tileWidth: config.tile_size.x,
+  tileHeight: config.tile_size.y,
+  orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
+  format: Phaser.Tilemaps.Formats.ARRAY_2D
 })
 
-// Listen for the zone event from the server and load the zone
-gameStore.connection.on('character:zone:load', (data) => {
-  console.log('character:zone:load', data)
-  zoneStore.setTiles(data.zone.tiles)
+/**
+ * These variables are used to store the tileset images and the tilemap
+ * The tilesetImages are used to store the tileset images
+ * The zoneTilemap is used to store the tilemap
+ * The zoneTiles are used to store the tile data
+ * The zoneObjects are used to store the object data
+ */
+const tilesetImages: Tileset[] = []
+const zoneTilemap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
+let zoneTiles = [] as string[][]
+const zoneObjects = ref<ZoneObject[]>([])
+const zoneEventTiles = ref<ZoneEventTile[]>([])
 
-  let characters = data.characters
-  zoneStore.setCharacters(characters)
+/**
+ * Walk through object and add them to the zone as tilesetImages
+ */
+let tileCount = 1
+toRaw(assetStore.assets).forEach((asset) => {
+  if (asset.group !== 'tiles') return
+  tilesetImages.push(zoneTilemap.addTilesetImage(asset.key, asset.key, config.tile_size.x, config.tile_size.y, 0, 0, tileCount++) as Tileset)
 })
+tilesetImages.push(zoneTilemap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 0, 0, 0) as Tileset)
+
+const tiles = zoneTilemap.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as TilemapLayer
+const exampleTilesArray = Array.from({ length: zoneStore.zone?.width ?? 0 }, () => Array.from({ length: zoneStore.zone?.height ?? 0 }, () => 'blank_tile'))
 
 // Listen for player join events
-gameStore.connection.on('zone:character:join', (data: CharacterType) => {
+gameStore.connection?.on('zone:character:join', (data: CharacterT) => {
   console.log('character:zone:join', data)
   zoneStore.addCharacter(data)
 })
 
 // Listen for user:disconnect
-gameStore.connection.on('zone:character:leave', (data: CharacterType) => {
+gameStore.connection?.on('zone:character:leave', (data: CharacterT) => {
   zoneStore.removeCharacter(data)
 })
 
-gameStore.connection.on('character:moved', (data: CharacterType) => {
+gameStore.connection?.on('character:moved', (data: CharacterT) => {
   console.log('character:moved', data)
   zoneStore.updateCharacter(data)
 })
 
-onBeforeUnmount(() => {
-  zoneStore.reset()
-  gameStore.connection.emit('character:zone:leave')
-  gameStore.connection.off('character:zone:load')
-  gameStore.connection.off('zone:character:join')
-  gameStore.connection.off('user:disconnect')
-  gameStore.connection.off('character:moved')
+onBeforeMount(() => {
+  exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zoneTilemap, tiles, x, y, 'blank_tile')))
+  zoneTiles = exampleTilesArray
+
+  if (zoneStore.zone && zoneStore.zone.tiles) {
+    setAllTiles(zoneTilemap, tiles, zoneStore.zone.tiles)
+    zoneTiles = zoneStore.zone.tiles
+
+    // Determine the current zone dimensions
+    const currentZoneWidth = zoneStore.zone.width ?? 0
+    const currentZoneHeight = zoneStore.zone.height ?? 0
+
+    // Ensure zoneTiles matches the current zone dimensions, filling new spaces with 'blank_tile'
+    for (let y = 0; y < currentZoneHeight; y++) {
+      zoneTiles[y] = zoneTiles[y] || [] // Ensure the row exists
+      for (let x = 0; x < currentZoneWidth; x++) {
+        zoneTiles[y][x] = zoneTiles[y][x] || 'blank_tile' // Fill missing tiles with 'blank_tile'
+      }
+    }
+
+    // Update the tilemap with any new 'blank_tile' entries
+    zoneTiles.forEach((row, y) => {
+      row.forEach((tileId, x) => {
+        placeTile(zoneTilemap, tiles, x, y, tileId)
+      })
+    })
+  }
+
+  zoneObjects.value = zoneStore.zone?.zoneObjects ?? []
+
+  // Original
+  type TResponse = {
+    zone: Zone
+    characters: CharacterT[]
+  }
+
+  gameStore.connection?.emit('character:zone:request', { zoneId: gameStore.character?.zoneId }, (response: TResponse) => {
+    console.log(response)
+    zoneStore.setZone(response.zone)
+    zoneStore.setCharacters(response.characters)
+    setAllTiles(zoneTilemap, tiles, response.zone.tiles)
+    zoneObjects.value = response.zone.zoneObjects
+  })
 })
 
-/**
- * 1 tile is 64x32
- * the zone is 10x10
- * so the zone is 640x320
- */
-/**
- * Resources
- * https://clintbellanger.net/articles/isometric_math/
- * https://gist.github.com/veleek/3be73dc61d5f5a80abc0f72c3ffe390e
- * https://gamedev.stackexchange.com/questions/116485/how-to-center-a-tilemap-in-phaser
- * https://github.com/Nulligma/phaser-isometric-test/blob/master/src/main.ts
- * https://github.com/neki-dev/isometric-snippets
- * https://github.com/itsezc/CycloneIO/blob/next/packages/client/games/HabboEngine.ts
- * https://github.com/daan93/phaser-isometric-demo/tree/main
- */
+onBeforeUnmount(() => {
+  zoneEventTiles.value = []
+  zoneObjects.value = []
+  tiles.destroy()
+  zoneTilemap.removeAllLayers()
+  zoneTilemap.destroy()
+  zoneStore.reset()
+
+  gameStore.connection?.emit('character:zone:leave')
+  gameStore.connection?.off('character:zone:load')
+  gameStore.connection?.off('zone:character:join')
+  gameStore.connection?.off('user:disconnect')
+  gameStore.connection?.off('character:moved')
+})
+
+// center camera
+const centerY = (zoneTilemap.height * zoneTilemap.tileHeight) / 2
+const centerX = (zoneTilemap.width * zoneTilemap.tileWidth) / 2
+scene.cameras.main.centerOn(centerX, centerY)
 </script>
diff --git a/src/components/forms/ChipsInput.vue b/src/components/forms/ChipsInput.vue
index 237d346..30d3784 100644
--- a/src/components/forms/ChipsInput.vue
+++ b/src/components/forms/ChipsInput.vue
@@ -34,4 +34,4 @@ const backspaceDelete = (event) => {
     modelValue.value = modelValue.value.slice(0, -1)
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/gui/Hud.vue b/src/components/gui/Hud.vue
index 75af626..5726d1e 100644
--- a/src/components/gui/Hud.vue
+++ b/src/components/gui/Hud.vue
@@ -7,22 +7,22 @@
     <div class="absolute top-0 left-[30px] w-[280px] h-[84px] z-10 bg-[url('/assets/shapes/hud-shape-empty.svg')] bg-center bg-[length:cover] bg-no-repeat">
       <div class="h-[64px] flex flex-col items-end py-[10px] pl-[50px] pr-[20px]">
         <div class="w-full flex items-center justify-between mb-1.5">
-          <span class="text-ellipsis overflow-hidden whitespace-nowrap max-w-[125px] text-sm">{{ game.character.name }}</span>
-          <span class="text-sm">lvl. {{ game.character.level }}</span>
+          <span class="text-ellipsis overflow-hidden whitespace-nowrap max-w-[125px] text-sm">{{ gameStore.character.name }}</span>
+          <span class="text-sm">lvl. {{ gameStore.character.level }}</span>
         </div>
         <div class="w-full flex items-center justify-between">
           <label class="text-sm" for="hp">HP</label>
-          <progress class="h-2 rounded-lg w-full max-w-[175px] appearance-none accent-red" id="hp" :value="game.character.hitpoints" max="100">{{ socket.character.hitpoints }}%</progress>
+          <progress class="h-2 rounded-lg w-full max-w-[175px] appearance-none accent-red" id="hp" :value="gameStore.character.hitpoints" max="100">{{ gameStore.character.hitpoints }}%</progress>
         </div>
         <div class="w-full flex items-center justify-between">
           <label class="text-sm" for="mp">MP</label>
-          <progress class="h-2 rounded-lg w-full max-w-[175px] appearance-none accent-blue" id="mp" :value="game.character.mana" max="100">{{ socket.character.mana }}%</progress>
+          <progress class="h-2 rounded-lg w-full max-w-[175px] appearance-none accent-blue" id="mp" :value="gameStore.character.mana" max="100">{{ gameStore.character.mana }}%</progress>
         </div>
       </div>
     </div>
   </div>
 
-  <!-- TODO: Replace socket.character with other (selected) player's -->
+  <!-- TODO: Replace gameStore.character with other (selected) player's -->
   <div class="hud-wrapper other-player relative right-0 w-[310px] h-[84px]">
     <div class="absolute w-[54px] h-[54px] bg-white/80 rounded-full border-3 border-solid border-white top-1/2 translate-y-[-50%] right-0 z-20">
       <img class="w-[28px] absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] scale-x-[-1]" draggable="false" src="/assets/avatar/default/head.png" />
@@ -31,12 +31,12 @@
     <div class="absolute top-0 right-[30px] w-[280px] h-[84px] z-10 scale-x-[-1] bg-[url('/assets/shapes/hud-shape-empty.svg')] bg-center bg-[length:cover] bg-no-repeat">
       <div class="h-[64px] flex flex-col items-end scale-x-[-1] py-[10px] pr-[50px] pl-[20px]">
         <div class="w-full flex items-center justify-between mb-1.5">
-          <span class="text-ellipsis overflow-hidden whitespace-nowrap max-w-[125px] text-sm">{{ game.character.name }}</span>
-          <span class="text-sm">lvl. {{ socket.character.level }}</span>
+          <span class="text-ellipsis overflow-hidden whitespace-nowrap max-w-[125px] text-sm">{{ gameStore.character.name }}</span>
+          <span class="text-sm">lvl. {{ gameStore.character.level }}</span>
         </div>
         <div class="w-full flex items-center justify-between">
           <label class="text-sm" for="hp">HP</label>
-          <progress class="h-2 rounded-lg w-full max-w-[175px] appearance-none accent-red" id="hp" :value="game.character.hitpoints" max="100">{{ socket.character.hitpoints }}%</progress>
+          <progress class="h-2 rounded-lg w-full max-w-[175px] appearance-none accent-red" id="hp" :value="gameStore.character.hitpoints" max="100">{{ gameStore.character.hitpoints }}%</progress>
         </div>
       </div>
     </div>
diff --git a/src/components/sprites/Character.vue b/src/components/sprites/Character.vue
index 041ba1c..f53bb29 100644
--- a/src/components/sprites/Character.vue
+++ b/src/components/sprites/Character.vue
@@ -1,13 +1,13 @@
 <template>
   <Container>
-    <Rectangle :x="tileToWorldX(layer, props.character?.position_x)" :y="tileToWorldY(layer, props.character?.position_y)" :origin-x="0.5" :origin-y="10.5" :fillColor="0xffffff" :width="74" :height="8">
-      <Rectangle :x="tileToWorldX(layer, props.character?.position_x)" :y="tileToWorldY(layer, props.character?.position_y)" :origin-x="0.5" :origin-y="20.5" :fillColor="0x09ad19" :width="70" :height="4" />
+    <Rectangle :x="tileToWorldX(layer, props.character?.position_x, props.character?.position_y)" :y="tileToWorldY(layer, props.character?.position_x, props.character?.position_y)" :origin-x="0.5" :origin-y="10.5" :fillColor="0xffffff" :width="74" :height="8">
+      <Rectangle :x="tileToWorldX(layer, props.character?.position_x, props.character?.position_y)" :y="tileToWorldY(layer, props.character?.position_x, props.character?.position_y)" :origin-x="0.5" :origin-y="20.5" :fillColor="0x09ad19" :width="70" :height="4" />
     </Rectangle>
     <Text
       @create="createText"
       :text="props.character?.name"
-      :x="tileToWorldX(layer, props.character?.position_x)"
-      :y="tileToWorldY(layer, props.character?.position_y)"
+      :x="tileToWorldX(layer, props.character?.position_x, props.character?.position_y)"
+      :y="tileToWorldY(layer, props.character?.position_x, props.character?.position_y)"
       :origin-x="0.5"
       :origin-y="4.5"
       :style="{
@@ -16,7 +16,7 @@
         fontSize: '14px'
       }"
     />
-    <Sprite ref="sprite" :x="tileToWorldX(layer, props.character?.position_x)" :y="tileToWorldY(layer, props.character?.position_y)" play="walk" />
+    <Sprite ref="sprite" :x="tileToWorldX(layer, props.character?.position_x, props.character?.position_y)" :y="tileToWorldY(layer, props.character?.position_x, props.character?.position_y)" play="walk" />
   </Container>
 </template>
 
@@ -35,7 +35,7 @@ const props = defineProps({
 })
 
 const scene = useScene()
-const isSelf = props.character.id === socket.character.id
+const isSelf = props.character?.id === gameStore.character?.id
 
 const createText = (text: Phaser.GameObjects.Text) => {
   text.setLetterSpacing(1.5)
@@ -60,7 +60,7 @@ function onPointerClick(pointer: Phaser.Input.Pointer) {
     return
   }
 
-  gameStore.connection.emit('character:move', { position_x: pointer_tile.x, position_y: pointer_tile.y })
+  gameStore.connection?.emit('character:move', { position_x: pointer_tile.x, position_y: pointer_tile.y })
 
   //Directions for player sprites + animations
   if (px < 0 && py > 0) {
diff --git a/src/components/utilities/assetManager/partials/TileDetails.vue b/src/components/utilities/assetManager/partials/TileDetails.vue
index a00639b..518b800 100644
--- a/src/components/utilities/assetManager/partials/TileDetails.vue
+++ b/src/components/utilities/assetManager/partials/TileDetails.vue
@@ -13,7 +13,7 @@
           <input v-model="tileName" class="input-cyan" type="text" name="name" placeholder="Tile #1" />
         </div>
         <div class="w-full flex flex-col mb-5">
-        <label class="mb-1.5 font-titles" for="origin-x">Tags</label>
+          <label class="mb-1.5 font-titles" for="origin-x">Tags</label>
           <ChipsInput v-model="tileTags" @update:modelValue="tileTags = $event" />
         </div>
         <button class="btn-cyan px-[15px] py-1.5 min-w-[100px]" type="submit">Save</button>
@@ -88,7 +88,7 @@ function saveTile() {
     {
       id: selectedTile.value.id,
       name: tileName.value,
-      tags: tileTags.value,
+      tags: tileTags.value
     },
     (response: boolean) => {
       if (!response) {
diff --git a/src/components/utilities/zoneEditor/Objects.vue b/src/components/utilities/zoneEditor/Objects.vue
index 48c5370..1179a0f 100644
--- a/src/components/utilities/zoneEditor/Objects.vue
+++ b/src/components/utilities/zoneEditor/Objects.vue
@@ -7,14 +7,7 @@
           <div class="w-full flex gap-1.5 flex-row">
             <div>
               <label class="mb-1.5 font-titles hidden" for="search">Search...</label>
-              <input
-                @mousedown.stop
-                class="input-cyan"
-                type="text"
-                name="search"
-                placeholder="Search"
-                v-model="searchQuery"
-              />
+              <input @mousedown.stop class="input-cyan" type="text" name="search" placeholder="Search" v-model="searchQuery" />
             </div>
             <div>
               <label class="mb-1.5 font-titles hidden" for="depth">Depth</label>
@@ -68,9 +61,7 @@ const filteredObjects = computed(() => {
   if (!searchQuery.value) {
     return zoneEditorStore.objectList
   }
-  return zoneEditorStore.objectList.filter(object =>
-    object.name.toLowerCase().includes(searchQuery.value.toLowerCase())
-  )
+  return zoneEditorStore.objectList.filter((object) => object.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
 })
 
 onMounted(async () => {
@@ -81,4 +72,4 @@ onMounted(async () => {
     zoneEditorStore.setObjectList(response)
   })
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/utilities/zoneEditor/Tiles.vue b/src/components/utilities/zoneEditor/Tiles.vue
index d66e6db..e8222ae 100644
--- a/src/components/utilities/zoneEditor/Tiles.vue
+++ b/src/components/utilities/zoneEditor/Tiles.vue
@@ -7,14 +7,7 @@
           <div class="w-full flex gap-1.5 flex-row">
             <div>
               <label class="mb-1.5 font-titles hidden" for="search">Search...</label>
-              <input
-                @mousedown.stop
-                class="input-cyan"
-                type="text"
-                name="search"
-                placeholder="Search"
-                v-model="searchQuery"
-              />
+              <input @mousedown.stop class="input-cyan" type="text" name="search" placeholder="Search" v-model="searchQuery" />
             </div>
           </div>
         </div>
@@ -59,9 +52,7 @@ const filteredTiles = computed(() => {
   if (!searchQuery.value) {
     return zoneEditorStore.tileList
   }
-  return zoneEditorStore.tileList.filter(tile =>
-    tile.name.toLowerCase().includes(searchQuery.value.toLowerCase())
-  )
+  return zoneEditorStore.tileList.filter((tile) => tile.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
 })
 
 onMounted(async () => {
@@ -70,4 +61,4 @@ onMounted(async () => {
     zoneEditorStore.setTileList(response)
   })
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/utilities/zoneEditor/Toolbar.vue b/src/components/utilities/zoneEditor/Toolbar.vue
index 98a41ff..0c03b17 100644
--- a/src/components/utilities/zoneEditor/Toolbar.vue
+++ b/src/components/utilities/zoneEditor/Toolbar.vue
@@ -149,7 +149,7 @@ scene.input.on(Phaser.Input.Events.POINTER_MOVE, drawTiles)
 
 onMounted(() => {
   addEventListener('keydown', initKeyShortcuts)
-});
+})
 
 onBeforeUnmount(() => {
   scene.input.off(Phaser.Input.Events.POINTER_UP, drawTile)
@@ -157,9 +157,8 @@ onBeforeUnmount(() => {
   removeEventListener('keydown', initKeyShortcuts)
 })
 
-
 // Key bindings
-function initKeyShortcuts (event: KeyboardEvent) {
+function initKeyShortcuts(event: KeyboardEvent) {
   if (!zoneEditorStore.zone) return
 
   // prevent if focussed on input
diff --git a/src/components/utilities/zoneEditor/ZoneEditor.vue b/src/components/utilities/zoneEditor/ZoneEditor.vue
index 9bca68b..c68031a 100644
--- a/src/components/utilities/zoneEditor/ZoneEditor.vue
+++ b/src/components/utilities/zoneEditor/ZoneEditor.vue
@@ -1,9 +1,18 @@
 <template>
-  <TilemapLayerC :tilemap="zoneTilemap" :tileset="exampleTilesArray" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10"  />
+  <TilemapLayerC :tilemap="zoneTilemap" :tileset="exampleTilesArray" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
   <Controls :layer="tiles" />
 
   <Container :depth="2">
-    <Image v-for="object in zoneObjects" :depth="object.depth" :key="object.object.id" :x="tileToWorldX(zoneTilemap, object.position_x, object.position_y)" :y="tileToWorldY(zoneTilemap, object.position_x, object.position_y)" :texture="object.object.id" :originY="Number(object.object.origin_x)" :originX="Number(object.object.origin_y)" />
+    <Image
+      v-for="object in zoneObjects"
+      :depth="object.depth"
+      :key="object.object.id"
+      :x="tileToWorldX(zoneTilemap, object.position_x, object.position_y)"
+      :y="tileToWorldY(zoneTilemap, object.position_x, object.position_y)"
+      :texture="object.object.id"
+      :originY="Number(object.object.origin_x)"
+      :originX="Number(object.object.origin_y)"
+    />
   </Container>
 
   <Container :depth="3">
@@ -37,9 +46,7 @@ import Tileset = Phaser.Tilemaps.Tileset
 import TilemapLayer = Phaser.Tilemaps.TilemapLayer
 
 function uuidv4() {
-  return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, c =>
-    (+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16)
-  );
+  return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c) => (+c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))).toString(16))
 }
 
 const scene = useScene()
@@ -65,7 +72,7 @@ const zoneData = new Phaser.Tilemaps.MapData({
  */
 const tilesetImages: Tileset[] = []
 const zoneTilemap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
-let zoneTiles = [] as string[][];
+let zoneTiles = [] as string[][]
 const zoneObjects = ref<ZoneObject[]>([])
 const zoneEventTiles = ref<ZoneEventTile[]>([])
 
@@ -163,7 +170,7 @@ function pencil(tile: Phaser.Tilemaps.Tile) {
 function paint(tile: Phaser.Tilemaps.Tile) {
   if (zoneEditorStore.selectedTile === null) return
   exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zoneTilemap, tiles, x, y, zoneEditorStore.selectedTile.id)))
-  zoneTiles.forEach((row, y) => row.forEach((tile, x) => zoneTiles[y][x] = zoneEditorStore.selectedTile.id))
+  zoneTiles.forEach((row, y) => row.forEach((tile, x) => (zoneTiles[y][x] = zoneEditorStore.selectedTile.id)))
 }
 
 function save() {
@@ -175,14 +182,14 @@ function save() {
     width: zoneEditorStore.zone.width,
     height: zoneEditorStore.zone.height,
     tiles: zoneTiles,
-    zoneEventTiles: toRaw(zoneEventTiles.value).map(tile => ({
+    zoneEventTiles: toRaw(zoneEventTiles.value).map((tile) => ({
       id: tile.id,
       zoneId: tile.zoneId,
       type: tile.type,
       position_x: tile.position_x,
       position_y: tile.position_y
     })),
-    zoneObjects: toRaw(zoneObjects.value).map(obj => ({
+    zoneObjects: toRaw(zoneObjects.value).map((obj) => ({
       id: obj.id,
       zoneId: obj.zoneId,
       objectId: obj.objectId,
@@ -190,13 +197,13 @@ function save() {
       position_x: obj.position_x,
       position_y: obj.position_y
     }))
-  };
+  }
 
-  gameStore.connection.emit('gm:zone_editor:zone:update', data);
+  gameStore.connection.emit('gm:zone_editor:zone:update', data)
 
   gameStore.connection.emit('gm:zone_editor:zone:request', { zoneId: zoneEditorStore.zone.id }, (response: Zone) => {
     zoneEditorStore.setZone(response)
-  });
+  })
 
   if (zoneEditorStore.isSettingsModalShown) {
     zoneEditorStore.toggleSettingsModal()
@@ -215,27 +222,27 @@ onBeforeMount(() => {
   zoneTiles = exampleTilesArray
 
   if (zoneEditorStore.zone && zoneEditorStore.zone.tiles) {
-    setAllTiles(zoneTilemap, tiles, zoneEditorStore.zone.tiles);
-    zoneTiles = zoneEditorStore.zone.tiles;
+    setAllTiles(zoneTilemap, tiles, zoneEditorStore.zone.tiles)
+    zoneTiles = zoneEditorStore.zone.tiles
 
     // Determine the current zone dimensions
-    const currentZoneWidth = zoneEditorStore.zone.width ?? 0;
-    const currentZoneHeight = zoneEditorStore.zone.height ?? 0;
+    const currentZoneWidth = zoneEditorStore.zone.width ?? 0
+    const currentZoneHeight = zoneEditorStore.zone.height ?? 0
 
     // Ensure zoneTiles matches the current zone dimensions, filling new spaces with 'blank_tile'
     for (let y = 0; y < currentZoneHeight; y++) {
-      zoneTiles[y] = zoneTiles[y] || []; // Ensure the row exists
+      zoneTiles[y] = zoneTiles[y] || [] // Ensure the row exists
       for (let x = 0; x < currentZoneWidth; x++) {
-        zoneTiles[y][x] = zoneTiles[y][x] || 'blank_tile'; // Fill missing tiles with 'blank_tile'
+        zoneTiles[y][x] = zoneTiles[y][x] || 'blank_tile' // Fill missing tiles with 'blank_tile'
       }
     }
 
     // Update the tilemap with any new 'blank_tile' entries
     zoneTiles.forEach((row, y) => {
       row.forEach((tileId, x) => {
-        placeTile(zoneTilemap, tiles, x, y, tileId);
-      });
-    });
+        placeTile(zoneTilemap, tiles, x, y, tileId)
+      })
+    })
   }
 
   zoneEventTiles.value = zoneEditorStore.zone?.zoneEventTiles ?? []
diff --git a/src/components/utilities/zoneEditor/ZoneList.vue b/src/components/utilities/zoneEditor/ZoneList.vue
index ed451da..b57283b 100644
--- a/src/components/utilities/zoneEditor/ZoneList.vue
+++ b/src/components/utilities/zoneEditor/ZoneList.vue
@@ -53,7 +53,7 @@ function loadZone(id: number) {
   console.log('loadZone', id)
   gameStore.connection.emit('gm:zone_editor:zone:request', { zoneId: id }, (response: Zone) => {
     zoneEditorStore.setZone(response)
-  });
+  })
   zoneEditorStore.toggleZoneListModal()
 }
 
diff --git a/src/config.ts b/src/config.ts
index f6f5756..763f5d6 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,4 +1,4 @@
-const dev: boolean = true;
+const dev: boolean = true
 
 export default {
   name: 'New Quest',
diff --git a/src/screens/Game.vue b/src/screens/Game.vue
index 6cc3a49..37b012b 100644
--- a/src/screens/Game.vue
+++ b/src/screens/Game.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex justify-center items-center h-dvh p-[30px] relative">
-    <GmTools v-if="isLoaded" />
-    <GmPanel v-if="isLoaded" />
+    <GmTools v-if="isLoaded && gameStore.character?.role === 'gm'" />
+    <GmPanel v-if="isLoaded && gameStore.character?.role === 'gm'" />
 
     <Game :config="gameConfig" @create="createGame" v-if="!zoneEditorStore.active">
       <Scene name="main" @preload="preloadScene" @create="createScene">
@@ -9,7 +9,7 @@
           <Hud />
         </div>
         <div v-if="isLoaded">
-          <World />
+          <World :key="gameStore.character?.zoneId ?? 1" />
         </div>
         <div class="flex absolute justify-between left-0 right-0 bottom-[100px] h-[100px] mx-[48px] my-0" v-if="isLoaded">
           <Chat />
@@ -28,10 +28,11 @@
 <script setup lang="ts">
 import config from '@/config'
 import 'phaser'
-import { onUnmounted, toRaw, watch, ref } from 'vue'
+import { onUnmounted, watch, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { Game, Scene } from 'phavuer'
 import { useGameStore } from '@/stores/game'
+import { useZoneStore } from '@/stores/zone'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
 import { useAssetStore } from '@/stores/assets'
 import World from '@/components/World.vue'
@@ -43,6 +44,7 @@ import ZoneEditor from '@/components/utilities/zoneEditor/ZoneEditor.vue'
 import GmPanel from '@/components/utilities/GmPanel.vue'
 
 const gameStore = useGameStore()
+const zoneStore = useZoneStore()
 const zoneEditorStore = useZoneEditorStore()
 const assetStore = useAssetStore()
 const isLoaded = ref(false)
diff --git a/src/screens/Login.vue b/src/screens/Login.vue
index 4f3c80b..bac4675 100644
--- a/src/screens/Login.vue
+++ b/src/screens/Login.vue
@@ -52,7 +52,7 @@ onMounted(async () => {
   /**
    * Fetch assets from the server
    */
-  if (!await assetStore.fetchAssets()) {
+  if (!(await assetStore.fetchAssets())) {
     notifications.addNotification({ message: 'Failed to fetch assets, the server may be offline or in maintenance. Please try again later.' })
   }
 })
diff --git a/src/services/authentication.ts b/src/services/authentication.ts
index 3dacc22..09391c7 100644
--- a/src/services/authentication.ts
+++ b/src/services/authentication.ts
@@ -18,7 +18,7 @@ export async function login(username: string, password: string, gameStore = useG
     const response = await axios.post(`${config.server_endpoint}/login`, { username, password })
     useCookies().set('token', response.data.token as string, {
       // for whole domain
-      domain: window.location.hostname.split('.').slice(-2).join('.'),
+      domain: window.location.hostname.split('.').slice(-2).join('.')
     })
     return { success: true, token: response.data.token }
   } catch (error: any) {
diff --git a/src/services/zone.ts b/src/services/zone.ts
index 266b5c1..25351ad 100644
--- a/src/services/zone.ts
+++ b/src/services/zone.ts
@@ -18,13 +18,13 @@ export function tileToWorldXY(layer: Phaser.Tilemaps.TilemapLayer, pos_x: number
 }
 
 export function tileToWorldX(layer: Phaser.Tilemaps.TilemapLayer, pos_x: number, pos_y: number): number {
-  const worldPoint = layer.tileToWorldXY(pos_x, pos_y);
-  return worldPoint.x + config.tile_size.x / 2;
+  const worldPoint = layer.tileToWorldXY(pos_x, pos_y)
+  return worldPoint.x + config.tile_size.x / 2
 }
 
 export function tileToWorldY(layer: Phaser.Tilemaps.TilemapLayer, pos_x: number, pos_y: number): number {
-  const worldPoint = layer.tileToWorldXY(pos_x, pos_y);
-  return worldPoint.y + config.tile_size.y * 1.5;
+  const worldPoint = layer.tileToWorldXY(pos_x, pos_y)
+  return worldPoint.y + config.tile_size.y * 1.5
 }
 
 export function placeTile(zone: Tilemap, layer: TilemapLayer, x: number, y: number, tileName: string) {
@@ -39,4 +39,4 @@ export function setAllTiles(zone: Tilemap, layer: TilemapLayer, tiles: string[][
       placeTile(zone, layer, x, y, tile)
     })
   })
-}
\ No newline at end of file
+}
diff --git a/src/stores/assets.ts b/src/stores/assets.ts
index 35be40b..6ed046b 100644
--- a/src/stores/assets.ts
+++ b/src/stores/assets.ts
@@ -25,13 +25,13 @@ export const useAssetStore = defineStore('assets', {
       return fetch(config.server_endpoint + '/assets')
         .then((response) => response.json())
         .then((assets) => {
-          this.setAssets(assets);
-          return true;
+          this.setAssets(assets)
+          return true
         })
         .catch((error) => {
-          console.error('Error fetching assets:', error);
-          return false;
-        });
+          console.error('Error fetching assets:', error)
+          return false
+        })
     }
   }
 })
diff --git a/src/stores/zone.ts b/src/stores/zone.ts
index c28022d..58ebcfb 100644
--- a/src/stores/zone.ts
+++ b/src/stores/zone.ts
@@ -1,14 +1,14 @@
 import { defineStore } from 'pinia'
-import type { Character } from '@/types'
+import type { Character, Zone } from '@/types'
 
 export const useZoneStore = defineStore('zone', {
   state: () => ({
-    tiles: [] as number[][],
+    zone: null as Zone | null,
     characters: [] as Character[]
   }),
   actions: {
-    setTiles(tiles: number[][]) {
-      this.tiles = tiles
+    setZone(zone: Zone | null) {
+      this.zone = zone
     },
     setCharacters(characters: Character[]) {
       this.characters = characters
@@ -25,7 +25,7 @@ export const useZoneStore = defineStore('zone', {
       this.characters = this.characters.filter((c: Character) => c.id !== character.id)
     },
     reset() {
-      this.tiles = []
+      this.zone = null
       this.characters = []
     }
   }
diff --git a/src/stores/zoneEditor.ts b/src/stores/zoneEditor.ts
index f3c67c9..215075e 100644
--- a/src/stores/zoneEditor.ts
+++ b/src/stores/zoneEditor.ts
@@ -3,7 +3,7 @@ import type { Zone, Object, Tile } from '@/types'
 
 export const useZoneEditorStore = defineStore('zoneEditor', {
   state: () => ({
-    active: true,
+    active: false,
     zone: null as Zone | null,
     tool: 'move',
     drawMode: 'tile',
@@ -87,4 +87,4 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
       this.isCreateZoneModalShown = false
     }
   }
-})
\ No newline at end of file
+})
diff --git a/src/types.ts b/src/types.ts
index 2ecd381..1d062f3 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -102,7 +102,7 @@ export type ZoneEventTile = {
   id: string
   zoneId: number
   zone: Zone
-  type: "BLOCK" | "WARP" | "NPC" | "ITEM"
+  type: 'BLOCK' | 'WARP' | 'NPC' | 'ITEM'
   position_x: number
   position_y: number
 }