Replaced modal resize icon, started writing components for character type management, spride field made optional

Styling fixes
#137 : Listen for zoneEffects in effects component
2024-10-19 02:15:48 +02:00 · 2024-10-18 23:08:01 +02:00 · 2024-10-18 22:41:42 +02:00 · 2024-10-18 22:23:56 +02:00 · 2024-10-18 19:53:02 +02:00 · 2024-10-18 19:45:25 +02:00
34 changed files with 846 additions and 272 deletions
--- a/1
+++ b/1
@ -27,5 +27,6 @@ RUN npm run build-ntc
 # Production stage
 FROM nginx:1.26.1-alpine
 COPY --from=builder /usr/src/app/dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
 EXPOSE 80
 CMD ["nginx", "-g", "daemon off;"]
--- a/index.html
+++ b/index.html
@ -3,7 +3,7 @@
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
-    <meta name="viewport" content="width=device-width">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sylvan Quest - Play</title>
  </head>
  <body>
--- a/nginx.conf
+++ b/nginx.conf
@ -0,0 +1,16 @@
+server {
+    listen 80;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Redirect example
+    location /discord {
+        return 301 https://discord.gg/JTev3nzeDa;
+    }
+
+    # Serve static files
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}
--- a/package-lock.json
+++ b/package-lock.json
@ -5417,9 +5417,9 @@
      }
    },
    "node_modules/npm-run-all2": {
-      "version": "6.2.3",
-      "resolved": "https://registry.npmjs.org/npm-run-all2/-/npm-run-all2-6.2.3.tgz",
-      "integrity": "sha512-5RsxC7jEc/RjxOYBVdEfrJf5FsJ0pHA7jr2/OxrThXknajETCTYjigOCG3iaGjdYIKEQlDuCG0ir0T1HTva8pg==",
+      "version": "6.2.4",
+      "resolved": "https://registry.npmjs.org/npm-run-all2/-/npm-run-all2-6.2.4.tgz",
+      "integrity": "sha512-h/v0JWs0P12iR076jL0iTi4JzZVaJPnwse2+s4XzaIxwjtybQbQM2kg/Wd7Lxi0iEOXy3ZX2tLPNbm3MqzIFqw==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
@ -5429,7 +5429,8 @@
        "minimatch": "^9.0.0",
        "pidtree": "^0.6.0",
        "read-package-json-fast": "^3.0.2",
-        "shell-quote": "^1.7.3"
+        "shell-quote": "^1.7.3",
+        "which": "^3.0.1"
      },
      "bin": {
        "npm-run-all": "bin/npm-run-all/index.js",
@ -5455,6 +5456,22 @@
        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
      }
    },
+    "node_modules/npm-run-all2/node_modules/which": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-3.0.1.tgz",
+      "integrity": "sha512-XA1b62dzQzLfaEOSQFTCOd5KFf/1VSzZo7/7TUjnya6u0vGGKzU96UQBZTAThCb2j4/xjBAyii1OhRLJEivHvg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/which.js"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
    "node_modules/npm-run-path": {
      "version": "5.3.0",
      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz",
@ -6409,9 +6426,9 @@
      "license": "MIT"
    },
    "node_modules/sass": {
-      "version": "1.80.1",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.80.1.tgz",
-      "integrity": "sha512-9lBwDZ7j3y/1DKj5Ec249EVGo5CVpwnzIyIj+cqlCjKkApLnzsJ/l9SnV4YnORvW9dQwQN+gQvh/mFZ8CnDs7Q==",
+      "version": "1.80.2",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.80.2.tgz",
+      "integrity": "sha512-9wXY8cGBlUmoUoT+vwOZOFCiS+naiWVjqlreN9ar9PudXbGwlMTFwCR5K9kB4dFumJ6ib98wZyAObJKsWf1nAA==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
--- a/public/assets/icons/increase-size-option.svg
+++ b/public/assets/icons/increase-size-option.svg
@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="438.529px" height="438.529px" viewBox="0 0 438.529 438.529" style="enable-background:new 0 0 438.529 438.529;"
+	 xml:space="preserve">
+<g>
+	<g>
+		<path d="M180.156,225.828c-1.903-1.902-4.093-2.854-6.567-2.854c-2.475,0-4.665,0.951-6.567,2.854l-94.787,94.787l-41.112-41.117
+			c-3.617-3.61-7.895-5.421-12.847-5.421c-4.952,0-9.235,1.811-12.851,5.421c-3.617,3.621-5.424,7.905-5.424,12.854v127.907
+			c0,4.948,1.807,9.229,5.424,12.847c3.619,3.613,7.902,5.424,12.851,5.424h127.906c4.949,0,9.23-1.811,12.847-5.424
+			c3.615-3.617,5.424-7.898,5.424-12.847s-1.809-9.233-5.424-12.854l-41.112-41.104l94.787-94.793
+			c1.902-1.903,2.853-4.086,2.853-6.564c0-2.478-0.953-4.66-2.853-6.57L180.156,225.828z"/>
+		<path d="M433.11,5.424C429.496,1.807,425.212,0,420.263,0H292.356c-4.948,0-9.227,1.807-12.847,5.424
+			c-3.614,3.615-5.421,7.898-5.421,12.847s1.807,9.233,5.421,12.847l41.106,41.112l-94.786,94.787
+			c-1.901,1.906-2.854,4.093-2.854,6.567s0.953,4.665,2.854,6.567l32.552,32.548c1.902,1.903,4.086,2.853,6.563,2.853
+			s4.661-0.95,6.563-2.853l94.794-94.787l41.104,41.109c3.62,3.616,7.905,5.428,12.854,5.428s9.229-1.812,12.847-5.428
+			c3.614-3.614,5.421-7.898,5.421-12.847V18.268C438.53,13.315,436.734,9.04,433.11,5.424z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
--- a/src/App.vue
+++ b/src/App.vue
@ -1,5 +1,8 @@
 <template>
  <Notifications />
+  <GmTools v-if="gameStore.character?.role === 'gm'" />
+  <GmPanel v-if="gameStore.character?.role === 'gm'" />
+
  <component :is="currentScreen" />
 </template>

@ -7,6 +10,8 @@
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import Notifications from '@/components/utilities/Notifications.vue'
+import GmTools from '@/components/gameMaster/GmTools.vue'
+import GmPanel from '@/components/gameMaster/GmPanel.vue'
 import Login from '@/screens/Login.vue'
 import Characters from '@/screens/Characters.vue'
 import Game from '@/screens/Game.vue'
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@ -129,3 +129,12 @@ button {
 ::-webkit-scrollbar {
  @apply hidden;
 }
+
+canvas {
+  image-rendering: -moz-crisp-edges;
+  image-rendering: -webkit-crisp-edges;
+  image-rendering: pixelated;
+  position: fixed;
+  left: 0;
+  top: 0;
+}
--- a/src/components/Effects.vue
+++ b/src/components/Effects.vue
@ -4,26 +4,18 @@

 <script setup lang="ts">
 import { Scene } from 'phavuer'
-import { useGameStore } from '@/stores/gameStore'
-import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import { onBeforeMount, onBeforeUnmount, ref } from 'vue'
+import { useZoneStore } from '@/stores/zoneStore'
+import { onBeforeUnmount, ref, watch } from 'vue'

-const gameStore = useGameStore()
-const zoneEditorStore = useZoneEditorStore()
-
-// See if there's a dat
+const zoneStore = useZoneStore()

 const sceneRef = ref<Phaser.Scene | null>(null)

 // Effect-related refs
-const dayNightCycle = ref<Phaser.GameObjects.Graphics | null>(null)
+const lightEffect = ref<Phaser.GameObjects.Graphics | null>(null)
 const rainEmitter = ref<Phaser.GameObjects.Particles.ParticleEmitter | null>(null)
 const fogSprite = ref<Phaser.GameObjects.Sprite | null>(null)

-// Effect parameters
-const dayNightDuration = 300000 // 5 minutes in milliseconds
-const maxDarkness = 0.7
-
 const preloadScene = async (scene: Phaser.Scene) => {
  scene.load.image('raindrop', 'assets/raindrop.png')
  scene.load.image('fog', 'assets/fog.png')
@ -31,28 +23,18 @@ const preloadScene = async (scene: Phaser.Scene) => {

 const createScene = async (scene: Phaser.Scene) => {
  sceneRef.value = scene
-  createDayNightCycle(scene)
+  createLightEffect(scene)
  createRainEffect(scene)
  createFogEffect(scene)
 }

-const updateScene = (scene: Phaser.Scene, time: number) => {
-  updateDayNightCycle(time)
-  updateFogEffect()
+const updateScene = () => {
+  updateEffects()
 }

-const createDayNightCycle = (scene: Phaser.Scene) => {
-  dayNightCycle.value = scene.add.graphics()
-  dayNightCycle.value.setDepth(1000)
-}
-
-const updateDayNightCycle = (time: number) => {
-  if (!dayNightCycle.value) return
-
-  const darkness = Math.sin(((time % dayNightDuration) / dayNightDuration) * Math.PI) * maxDarkness
-  dayNightCycle.value.clear()
-  dayNightCycle.value.fillStyle(0x000000, darkness)
-  dayNightCycle.value.fillRect(0, 0, window.innerWidth, window.innerHeight)
+const createLightEffect = (scene: Phaser.Scene) => {
+  lightEffect.value = scene.add.graphics()
+  lightEffect.value.setDepth(1000)
 }

 const createRainEffect = (scene: Phaser.Scene) => {
@ -67,13 +49,7 @@ const createRainEffect = (scene: Phaser.Scene) => {
    blendMode: 'ADD'
  })
  rainEmitter.value.setDepth(900)
-  toggleRain(true) // Start with rain off
-}
-
-const toggleRain = (isRaining: boolean) => {
-  if (rainEmitter.value) {
-    rainEmitter.value.setVisible(isRaining)
-  }
+  rainEmitter.value.stop()
 }

 const createFogEffect = (scene: Phaser.Scene) => {
@ -83,28 +59,52 @@ const createFogEffect = (scene: Phaser.Scene) => {
  fogSprite.value.setDepth(950)
 }

-const updateFogEffect = () => {
-  if (fogSprite.value) {
-    // Example: Oscillate fog opacity
-    const fogOpacity = ((Math.sin(Date.now() / 5000) + 1) / 2) * 0.3
-    fogSprite.value.setAlpha(fogOpacity)
-  }
-}
+const updateEffects = () => {
+  const effects = zoneStore.zone?.zoneEffects || []

-// Expose methods to control effects
-const controlEffects = {
-  toggleRain,
-  setFogDensity: (density: number) => {
-    if (fogSprite.value) {
-      fogSprite.value.setAlpha(density)
+  effects.forEach((effect) => {
+    switch (effect.effect) {
+      case 'light':
+        updateLightEffect(effect.strength)
+        break
+      case 'rain':
+        updateRainEffect(effect.strength)
+        break
+      case 'fog':
+        updateFogEffect(effect.strength)
+        break
    }
+  })
+}
+
+const updateLightEffect = (strength: number) => {
+  if (!lightEffect.value) return
+  const darkness = 1 - strength / 100
+  lightEffect.value.clear()
+  lightEffect.value.fillStyle(0x000000, darkness)
+  lightEffect.value.fillRect(0, 0, window.innerWidth, window.innerHeight)
+}
+
+const updateRainEffect = (strength: number) => {
+  if (!rainEmitter.value) return
+  if (strength > 0) {
+    rainEmitter.value.start()
+    rainEmitter.value.setQuantity(Math.floor((strength / 100) * 10))
+  } else {
+    rainEmitter.value.stop()
  }
 }

-// Make control methods available to parent components
-defineExpose(controlEffects)
+const updateFogEffect = (strength: number) => {
+  if (!fogSprite.value) return
+  fogSprite.value.setAlpha(strength / 100)
+}
+
+watch(() => zoneStore.zone?.zoneEffects, updateEffects, { deep: true })

 onBeforeUnmount(() => {
  if (sceneRef.value) sceneRef.value.scene.remove('effects')
 })
+
+// @TODO : Fix resize issue
 </script>
--- a/src/components/gameMaster/GmPanel.vue
+++ b/src/components/gameMaster/GmPanel.vue
@ -1,7 +1,6 @@
 <template>
  <Modal :isModalOpen="gameStore.uiSettings.isGmPanelOpen" @modal:close="() => gameStore.toggleGmPanel()" :modal-width="1000" :modal-height="650" :can-full-screen="true">
    <template #modalHeader>
-      <h3 class="m-0 font-medium shrink-0 text-white">GM Panel</h3>
      <div class="flex gap-1.5 flex-wrap">
        <button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">General</button>
        <button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">Users</button>
--- a/src/components/gameMaster/assetManager/AssetManager.vue
+++ b/src/components/gameMaster/assetManager/AssetManager.vue
@ -22,8 +22,16 @@
        <span>NPC's</span>
        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
-      <a class="relative p-2.5 hover:cursor-pointer">
-        <span>Characters</span>
+      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'shops' }" @click="() => (selectedCategory = 'shops')">
+        <span>Shops</span>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
+      </a>
+      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'characterTypes' }" @click="() => (selectedCategory = 'characterTypes')">
+        <span>Character types</span>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
+      </a>
+      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'characterHair' }" @click="() => (selectedCategory = 'characterHair')">
+        <span>Character hair</span>
        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
      <a class="relative p-2.5 hover:cursor-pointer">
@ -34,6 +42,10 @@
        <span>Pets</span>
        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
+      <a class="relative p-2.5 hover:cursor-pointer">
+        <span>Emoticons</span>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
+      </a>
    </div>
    <div class="absolute w-px bg-gray-500 h-full top-0 left-1/6"></div>

@ -42,6 +54,7 @@
      <TileList v-if="selectedCategory === 'tiles'" />
      <ObjectList v-if="selectedCategory === 'objects'" />
      <SpriteList v-if="selectedCategory === 'sprites'" />
+      <CharacterTypeList v-if="selectedCategory === 'characterTypes'" />
    </div>

    <div class="absolute w-px bg-gray-500 h-full top-0 left-1/2"></div>
@ -51,6 +64,7 @@
      <TileDetails v-if="selectedCategory === 'tiles' && assetManagerStore.selectedTile" />
      <ObjectDetails v-if="selectedCategory === 'objects' && assetManagerStore.selectedObject" />
      <SpriteDetails v-if="selectedCategory === 'sprites' && assetManagerStore.selectedSprite" />
+      <CharacterTypeDetails v-if="selectedCategory === 'characterTypes' && assetManagerStore.selectedCharacterType" />
    </div>
  </div>
 </template>
@ -64,6 +78,8 @@ import ObjectList from '@/components/gameMaster/assetManager/partials/object/Obj
 import ObjectDetails from '@/components/gameMaster/assetManager/partials/object/ObjectDetails.vue'
 import SpriteList from '@/components/gameMaster/assetManager/partials/sprite/SpriteList.vue'
 import SpriteDetails from '@/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue'
+import CharacterTypeList from '@/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue'
+import CharacterTypeDetails from '@/components/gameMaster/assetManager/partials/characterType/CharacterTypeDetails.vue'

 const assetManagerStore = useAssetManagerStore()
 const selectedCategory = ref('tiles')
--- a/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeDetails.vue
+++ b/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeDetails.vue
@ -0,0 +1,117 @@
+<template>
+  <div class="h-full overflow-auto">
+    <div class="m-2.5 p-2.5 block">
+      <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveCharacterType">
+        <div class="form-field-full">
+          <label for="name">Name</label>
+          <input v-model="characterName" class="input-field" type="text" name="name" placeholder="Character Type Name" />
+        </div>
+        <div class="form-field-half">
+          <label for="gender">Gender</label>
+          <select v-model="characterGender" class="input-field" name="gender">
+            <option v-for="gender in genderOptions" :key="gender" :value="gender">{{ gender }}</option>
+          </select>
+        </div>
+        <div class="form-field-half">
+          <label for="race">Race</label>
+          <select v-model="characterRace" class="input-field" name="race">
+            <option v-for="race in raceOptions" :key="race" :value="race">{{ race }}</option>
+          </select>
+        </div>
+        <div class="form-field-full">
+          <label for="spriteId">Sprite ID</label>
+          <input v-model="characterSpriteId" class="input-field" type="text" name="spriteId" placeholder="Sprite ID" />
+        </div>
+        <button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
+        <button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="removeCharacterType">Remove</button>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { CharacterType, CharacterGender, CharacterRace } from '@/types'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useAssetManagerStore } from '@/stores/assetManagerStore'
+import { useGameStore } from '@/stores/gameStore'
+
+const gameStore = useGameStore()
+const assetManagerStore = useAssetManagerStore()
+
+const selectedCharacterType = computed(() => assetManagerStore.selectedCharacterType)
+
+const characterName = ref('')
+const characterGender = ref<CharacterGender>('MALE' as CharacterGender.MALE)
+const characterRace = ref<CharacterRace>('HUMAN' as CharacterRace.HUMAN)
+const characterSpriteId = ref('')
+
+const genderOptions: CharacterGender[] = ['MALE' as CharacterGender.MALE, 'FEMALE' as CharacterGender.FEMALE]
+const raceOptions: CharacterRace[] = ['HUMAN' as CharacterRace.HUMAN, 'ELF' as CharacterRace.ELF, 'DWARF' as CharacterRace.DWARF, 'ORC' as CharacterRace.ORC, 'GOBLIN' as CharacterRace.GOBLIN]
+
+if (!selectedCharacterType.value) {
+  console.error('No character type selected')
+}
+
+if (selectedCharacterType.value) {
+  characterName.value = selectedCharacterType.value.name
+  characterGender.value = selectedCharacterType.value.gender
+  characterRace.value = selectedCharacterType.value.race
+  characterSpriteId.value = selectedCharacterType.value.spriteId
+}
+
+function removeCharacterType() {
+  if (!selectedCharacterType.value) return
+
+  gameStore.connection?.emit('gm:characterType:remove', { id: selectedCharacterType.value.id }, (response: boolean) => {
+    if (!response) {
+      console.error('Failed to remove character type')
+      return
+    }
+    refreshCharacterTypeList()
+  })
+}
+
+function refreshCharacterTypeList(unsetSelectedCharacterType = true) {
+  gameStore.connection?.emit('gm:characterType:list', {}, (response: CharacterType[]) => {
+    assetManagerStore.setCharacterTypeList(response)
+
+    if (unsetSelectedCharacterType) {
+      assetManagerStore.setSelectedCharacterType(null)
+    }
+  })
+}
+
+function saveCharacterType() {
+  const characterTypeData = {
+    id: selectedCharacterType.value?.id,
+    name: characterName.value,
+    gender: characterGender.value,
+    race: characterRace.value,
+    spriteId: characterSpriteId.value
+  }
+
+  gameStore.connection?.emit('gm:characterType:update', characterTypeData, (response: boolean) => {
+    if (!response) {
+      console.error('Failed to save character type')
+      return
+    }
+    refreshCharacterTypeList(false)
+  })
+}
+
+watch(selectedCharacterType, (characterType: CharacterType | null) => {
+  if (!characterType) return
+  characterName.value = characterType.name
+  characterGender.value = characterType.gender
+  characterRace.value = characterType.race
+  characterSpriteId.value = characterType.spriteId
+})
+
+onMounted(() => {
+  if (!selectedCharacterType.value) return
+})
+
+onBeforeUnmount(() => {
+  assetManagerStore.setSelectedCharacterType(null)
+})
+</script>
--- a/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue
+++ b/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue
@ -0,0 +1,93 @@
+<template>
+  <div class="relative p-2.5 flex items-center gap-x-2.5">
+    <input v-model="searchQuery" class="input-field flex-grow" placeholder="Search..." @input="handleSearch" />
+    <label for="create-character" class="bg-cyan/50 border border-solid border-white/25 rounded drop-shadow-20 p-2 inline-flex items-center justify-center hover:bg-cyan hover:cursor-pointer">
+      <button id="create-character" @click="createNewCharacterType">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+        </svg>
+      </button>
+    </label>
+    <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
+  </div>
+  <div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll">
+    <div v-bind="wrapperProps" ref="elementToScroll">
+      <a v-for="{ data: characterType } in list" :key="characterType.id" class="relative p-2.5 cursor-pointer block" :class="{ 'bg-cyan/80': assetManagerStore.selectedCharacterType?.id === characterType.id }" @click="assetManagerStore.setSelectedCharacterType(characterType as CharacterType)">
+        <div class="flex items-center gap-2.5">
+          <span>{{ characterType.name }}</span>
+        </div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
+      </a>
+    </div>
+    <button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-md bg-cyan/50 p-0 hover:bg-cyan" v-show="hasScrolled" @click="toTop">
+      <img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useGameStore } from '@/stores/gameStore'
+import { onMounted, ref, computed } from 'vue'
+import { useAssetManagerStore } from '@/stores/assetManagerStore'
+import type { CharacterType } from '@/types'
+import { useVirtualList } from '@vueuse/core'
+
+const gameStore = useGameStore()
+const assetManagerStore = useAssetManagerStore()
+
+const searchQuery = ref('')
+
+const hasScrolled = ref(false)
+const elementToScroll = ref()
+
+const handleSearch = () => {
+  // Trigger a re-render of the virtual list
+  virtualList.value?.scrollTo(0)
+}
+
+const createNewCharacterType = () => {
+  gameStore.connection?.emit('gm:characterType:create', {}, (response: boolean) => {
+    if (!response) {
+      console.error('Failed to create new character type')
+      return
+    }
+
+    gameStore.connection?.emit('gm:characterType:list', {}, (response: CharacterType[]) => {
+      assetManagerStore.setCharacterTypeList(response)
+    })
+  })
+}
+
+const filteredCharacterTypes = computed(() => {
+  if (!searchQuery.value) {
+    return assetManagerStore.characterTypeList
+  }
+  return assetManagerStore.characterTypeList.filter((character) => character.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
+})
+
+const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(filteredCharacterTypes, {
+  itemHeight: 48
+})
+
+const virtualList = ref({ scrollTo })
+
+const onScroll = () => {
+  let scrollTop = elementToScroll.value.style.marginTop.replace('px', '')
+
+  if (scrollTop > 80) {
+    hasScrolled.value = true
+  } else if (scrollTop <= 80) {
+    hasScrolled.value = false
+  }
+}
+
+function toTop() {
+  virtualList.value?.scrollTo(0)
+}
+
+onMounted(() => {
+  gameStore.connection?.emit('gm:characterType:list', {}, (response: CharacterType[]) => {
+    assetManagerStore.setCharacterTypeList(response)
+  })
+})
+</script>
--- a/src/components/gameMaster/zoneEditor/EventTiles.vue
+++ b/src/components/gameMaster/zoneEditor/EventTiles.vue
@ -1,14 +1,112 @@
-<template></template>
+<template>
+  <Image v-for="tile in zoneEditorStore.zone?.zoneEventTiles" v-bind="getImageProps(tile)" />
+</template>

 <script setup lang="ts">
-import type { ZoneEventTile } from '@/types'
-import { tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
+import { type ZoneEventTile, ZoneEventTileType } from '@/types'
+import { useZoneEditorStore } from '@/stores/zoneEditorStore'
+import { Image, useScene } from 'phavuer'
+import { getTile, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
+import { uuidv4 } from '@/utilities'
+import { onBeforeMount, onBeforeUnmount } from 'vue'

-// function getEventTileImageProps(tile: ZoneEventTile) {
-//   return {
-//     x: tileToWorldX(zoneTilemap as any, tile.positionX, tile.positionY),
-//     y: tileToWorldY(zoneTilemap as any, tile.positionX, tile.positionY),
-//     texture: tile.type
-//   }
-// }
+const scene = useScene()
+const zoneEditorStore = useZoneEditorStore()
+
+const props = defineProps<{
+  tilemap: Phaser.Tilemaps.Tilemap
+}>()
+
+function getImageProps(tile: ZoneEventTile) {
+  return {
+    x: tileToWorldX(props.tilemap, tile.positionX, tile.positionY),
+    y: tileToWorldY(props.tilemap, tile.positionX, tile.positionY),
+    texture: tile.type,
+    depth: 999
+  }
+}
+
+function pencil(pointer: Phaser.Input.Pointer) {
+  // Check if zone is set
+  if (!zoneEditorStore.zone) return
+
+  // Check if tool is pencil
+  if (zoneEditorStore.tool !== 'pencil') return
+
+  // Check if draw mode is blocking tile or teleport
+  if (zoneEditorStore.drawMode !== 'blocking tile' && zoneEditorStore.drawMode !== 'teleport') return
+
+  // Check if left mouse button is pressed
+  if (!pointer.isDown) return
+
+  // Check if there is a tile
+  const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
+  if (!tile) return
+
+  // Check if event tile already exists on position
+  const existingEventTile = zoneEditorStore.zone.zoneEventTiles.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y)
+  if (existingEventTile) return
+
+  // If teleport, check if there is a selected zone
+  if (zoneEditorStore.drawMode === 'teleport' && !zoneEditorStore.teleportSettings.toZoneId) return
+
+  const newEventTile = {
+    id: uuidv4(),
+    zoneId: zoneEditorStore.zone.id,
+    zone: zoneEditorStore.zone,
+    type: zoneEditorStore.drawMode === 'blocking tile' ? ZoneEventTileType.BLOCK : ZoneEventTileType.TELEPORT,
+    positionX: tile.x,
+    positionY: tile.y,
+    teleport:
+      zoneEditorStore.drawMode === 'teleport'
+        ? {
+            toZoneId: zoneEditorStore.teleportSettings.toZoneId,
+            toPositionX: zoneEditorStore.teleportSettings.toPositionX,
+            toPositionY: zoneEditorStore.teleportSettings.toPositionY,
+            toRotation: zoneEditorStore.teleportSettings.toRotation
+          }
+        : undefined
+  }
+
+  zoneEditorStore.zone.zoneEventTiles = zoneEditorStore.zone.zoneEventTiles.concat(newEventTile as ZoneEventTile)
+}
+
+function eraser(pointer: Phaser.Input.Pointer) {
+  // Check if zone is set
+  if (!zoneEditorStore.zone) return
+
+  // Check if tool is pencil
+  if (zoneEditorStore.tool !== 'eraser') return
+
+  // Check if draw mode is blocking tile or teleport
+  if (zoneEditorStore.eraserMode !== 'blocking tile' && zoneEditorStore.eraserMode !== 'teleport') return
+
+  // Check if left mouse button is pressed
+  if (!pointer.isDown) return
+
+  // Check if there is a tile
+  const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
+  if (!tile) return
+
+  // Check if event tile already exists on position
+  const existingEventTile = zoneEditorStore.zone.zoneEventTiles.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y)
+  if (!existingEventTile) return
+
+  // Remove existing event tile
+  zoneEditorStore.zone.zoneEventTiles = zoneEditorStore.zone.zoneEventTiles.filter((eventTile) => eventTile.id !== existingEventTile.id)
+}
+
+onBeforeMount(() => {
+  scene.input.on(Phaser.Input.Events.POINTER_DOWN, pencil)
+  scene.input.on(Phaser.Input.Events.POINTER_MOVE, pencil)
+  scene.input.on(Phaser.Input.Events.POINTER_DOWN, eraser)
+  scene.input.on(Phaser.Input.Events.POINTER_MOVE, eraser)
+})
+
+onBeforeUnmount(() => {
+  scene.input.off(Phaser.Input.Events.POINTER_DOWN, pencil)
+  scene.input.off(Phaser.Input.Events.POINTER_MOVE, pencil)
+  scene.input.off(Phaser.Input.Events.POINTER_DOWN, eraser)
+  scene.input.off(Phaser.Input.Events.POINTER_MOVE, eraser)
+})
 </script>
--- a/src/components/gameMaster/zoneEditor/Objects.vue
+++ b/src/components/gameMaster/zoneEditor/Objects.vue
@ -1,10 +1,6 @@
 <template>
-  <SelectedZoneObject v-if="selectedZoneObject" :zoneObject="selectedZoneObject" />
-  <Image
-    v-for="object in zoneEditorStore.zone?.zoneObjects"
-    v-bind="getObjectImageProps(object)"
-    @pointerup="() => selectedZoneObject = object"
-  />
+  <SelectedZoneObject v-if="selectedZoneObject" :zoneObject="selectedZoneObject" @move="moveZoneObject" @rotate="rotateZoneObject" @delete="deleteZoneObject" />
+  <Image v-for="object in zoneEditorStore.zone?.zoneObjects" v-bind="getImageProps(object)" @pointerup="() => (selectedZoneObject = object)" />
 </template>

 <script setup lang="ts">
@ -19,26 +15,28 @@ import { onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'
 const scene = useScene()
 const zoneEditorStore = useZoneEditorStore()
 const selectedZoneObject = ref<ZoneObject | null>(null)
+const movingZoneObject = ref<ZoneObject | null>(null)

 const props = defineProps<{
  tilemap: Phaser.Tilemaps.Tilemap
 }>()

-function getObjectImageProps(object: ZoneObject) {
+function getImageProps(zoneObject: ZoneObject) {
  return {
-    // alpha: object.id === movingZoneObject.value?.id ? .5 : 1,
-    depth: calculateIsometricDepth(object.positionX, object.positionY, object.object.frameWidth, object.object.frameHeight),
-    tint: selectedZoneObject.value?.id === object.id ? 0x00ff00 : 0xffffff,
-    x: tileToWorldX(props.tilemap as any, object.positionX, object.positionY),
-    y: tileToWorldY(props.tilemap as any, object.positionX, object.positionY),
-    flipX: object.isRotated,
-    texture: object.object.id,
-    originY: Number(object.object.originX),
-    originX: Number(object.object.originY)
+    alpha: zoneObject.id === movingZoneObject.value?.id ? 0.5 : 1,
+    depth: calculateIsometricDepth(zoneObject.positionX, zoneObject.positionY, zoneObject.object.frameWidth, zoneObject.object.frameHeight),
+    tint: selectedZoneObject.value?.id === zoneObject.id ? 0x00ff00 : 0xffffff,
+    x: tileToWorldX(props.tilemap, zoneObject.positionX, zoneObject.positionY),
+    y: tileToWorldY(props.tilemap, zoneObject.positionX, zoneObject.positionY),
+    flipX: zoneObject.isRotated,
+    texture: zoneObject.object.id,
+    originY: Number(zoneObject.object.originX),
+    originX: Number(zoneObject.object.originY)
  }
 }

-function addZoneObject(pointer: Phaser.Input.Pointer) {
+function pencil(pointer: Phaser.Input.Pointer) {
+  // Check if zone is set
  if (!zoneEditorStore.zone) return

  // Check if tool is pencil
@ -47,16 +45,16 @@ function addZoneObject(pointer: Phaser.Input.Pointer) {
  // Check if draw mode is object
  if (zoneEditorStore.drawMode !== 'object') return

+  // Check if there is a selected object
+  if (!zoneEditorStore.selectedObject) return
+
  // Check if left mouse button is pressed
  if (!pointer.isDown) return

-  // Check if there is a tile @TODO chekc if props.tilemap words
+  // Check if there is a tile
  const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
  if (!tile) return

-  // Check if there is a selected object
-  if (!zoneEditorStore.selectedObject) return
-
  // Check if object already exists on position
  const existingObject = zoneEditorStore.zone?.zoneObjects.find((object) => object.positionX === tile.x && object.positionY === tile.y)
  if (existingObject) return
@ -76,26 +74,102 @@ function addZoneObject(pointer: Phaser.Input.Pointer) {
  zoneEditorStore.zone.zoneObjects = zoneEditorStore.zone.zoneObjects.concat(newObject as ZoneObject)
 }

+function eraser(pointer: Phaser.Input.Pointer) {
+  // Check if zone is set
+  if (!zoneEditorStore.zone) return
+
+  // Check if tool is eraser
+  if (zoneEditorStore.tool !== 'eraser') return
+
+  // Check if draw mode is object
+  if (zoneEditorStore.eraserMode !== 'object') return
+
+  // Check if left mouse button is pressed
+  if (!pointer.isDown) return
+
+  // Check if there is a tile
+  const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
+  if (!tile) return
+
+  // Check if object already exists on position
+  const existingObject = zoneEditorStore.zone.zoneObjects.find((object) => object.positionX === tile.x && object.positionY === tile.y)
+  if (!existingObject) return
+
+  // Remove existing object
+  zoneEditorStore.zone.zoneObjects = zoneEditorStore.zone.zoneObjects.filter((object) => object.id !== existingObject.id)
+}
+
+function moveZoneObject(id: string) {
+  // Check if zone is set
+  if (!zoneEditorStore.zone) return
+
+  movingZoneObject.value = zoneEditorStore.zone.zoneObjects.find((object) => object.id === id) as ZoneObject
+
+  function handlePointerMove(pointer: Phaser.Input.Pointer) {
+    if (!movingZoneObject.value) return
+
+    const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
+    if (!tile) return
+
+    movingZoneObject.value.positionX = tile.x
+    movingZoneObject.value.positionY = tile.y
+  }
+
+  scene.input.on(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
+
+  function handlePointerUp() {
+    scene.input.off(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
+    movingZoneObject.value = null
+  }
+
+  scene.input.on(Phaser.Input.Events.POINTER_UP, handlePointerUp)
+}
+
+function rotateZoneObject(id: string) {
+  // Check if zone is set
+  if (!zoneEditorStore.zone) return
+
+  zoneEditorStore.zone.zoneObjects = zoneEditorStore.zone.zoneObjects.map((object) => {
+    if (object.id === id) {
+      return {
+        ...object,
+        isRotated: !object.isRotated
+      }
+    }
+    return object
+  })
+}
+
+function deleteZoneObject(id: string) {
+  // Check if zone is set
+  if (!zoneEditorStore.zone) return
+
+  zoneEditorStore.zone.zoneObjects = zoneEditorStore.zone.zoneObjects.filter((object) => object.id !== id)
+  selectedZoneObject.value = null
+}
+
 onBeforeMount(() => {
-  scene.input.on(Phaser.Input.Events.POINTER_DOWN, addZoneObject)
-  scene.input.on(Phaser.Input.Events.POINTER_MOVE, addZoneObject)
+  scene.input.on(Phaser.Input.Events.POINTER_DOWN, pencil)
+  scene.input.on(Phaser.Input.Events.POINTER_MOVE, pencil)
+  scene.input.on(Phaser.Input.Events.POINTER_DOWN, eraser)
+  scene.input.on(Phaser.Input.Events.POINTER_MOVE, eraser)
 })

 onBeforeUnmount(() => {
-  scene.input.off(Phaser.Input.Events.POINTER_DOWN, addZoneObject)
-  scene.input.off(Phaser.Input.Events.POINTER_MOVE, addZoneObject)
+  scene.input.off(Phaser.Input.Events.POINTER_DOWN, pencil)
+  scene.input.off(Phaser.Input.Events.POINTER_MOVE, pencil)
+  scene.input.off(Phaser.Input.Events.POINTER_DOWN, eraser)
+  scene.input.off(Phaser.Input.Events.POINTER_MOVE, eraser)
 })

 // watch zoneEditorStore.objectList and update originX and originY of objects in zoneObjects
 watch(
-  zoneEditorStore.objectList,
+  () => zoneEditorStore.objectList,
  (newObjects) => {
-    // Check if zoneEditorStore.zone is set
    if (!zoneEditorStore.zone) return

-    // Update zoneObjects
-    zoneEditorStore.zone.zoneObjects = zoneEditorStore.zone.zoneObjects.map((zoneObject) => {
-      const updatedObject = newObjects.find((obj) => obj.id === zoneObject.objectId)
+    const updatedZoneObjects = zoneEditorStore.zone.zoneObjects.map((zoneObject) => {
+      const updatedObject = newObjects.find((obj) => obj.id === zoneObject.object.id)
      if (updatedObject) {
        return {
          ...zoneObject,
@ -109,6 +183,12 @@ watch(
      return zoneObject
    })

+    // Update the zone with the new zoneObjects
+    zoneEditorStore.setZone({
+      ...zoneEditorStore.zone,
+      zoneObjects: updatedZoneObjects
+    })
+
    // Update selectedObject if it's set
    if (zoneEditorStore.selectedObject) {
      const updatedObject = newObjects.find((obj) => obj.id === zoneEditorStore.selectedObject?.id)
--- a/src/components/gameMaster/zoneEditor/Tiles.vue
+++ b/src/components/gameMaster/zoneEditor/Tiles.vue
@ -8,7 +8,7 @@ import { useScene } from 'phavuer'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { onBeforeMount, onBeforeUnmount } from 'vue'
-import { getTile, placeTile, setAllTiles } from '@/composables/zoneComposable'
+import { createTileArray, getTile, placeTile, setAllTiles } from '@/composables/zoneComposable'
 import Controls from '@/components/utilities/Controls.vue'

 const emit = defineEmits(['tilemap:create'])
@ -19,7 +19,6 @@ const zoneEditorStore = useZoneEditorStore()

 const zoneTilemap = createTilemap()
 const tiles = createTileLayer()
-let tileArray = createTileArray()

 function createTilemap() {
  const zoneData = new Phaser.Tilemaps.MapData({
@ -47,17 +46,19 @@ function createTileLayer() {
  return layer
 }

-function createTileArray() {
-  return Array.from({ length: zoneTilemap.height || 0 }, () => Array.from({ length: zoneTilemap.width || 0 }, () => 'blank_tile'))
-}
+function pencil(pointer: Phaser.Input.Pointer) {
+  // Check if zone is set
+  if (!zoneEditorStore.zone) return

-function handleTileClick(pointer: Phaser.Input.Pointer) {
  // Check if tool is pencil
  if (zoneEditorStore.tool !== 'pencil') return

  // Check if draw mode is tile
  if (zoneEditorStore.drawMode !== 'tile') return

+  // Check if there is a selected tile
+  if (!zoneEditorStore.selectedTile) return
+
  // Check if left mouse button is pressed
  if (!pointer.isDown) return

@ -65,10 +66,55 @@ function handleTileClick(pointer: Phaser.Input.Pointer) {
  const tile = getTile(tiles, pointer.worldX, pointer.worldY)
  if (!tile) return

+  // Place tile
+  placeTile(zoneTilemap, tiles, tile.x, tile.y, zoneEditorStore.selectedTile.id)
+
+  // Adjust zoneEditorStore.zone.tiles
+  zoneEditorStore.zone.tiles[tile.y][tile.x] = zoneEditorStore.selectedTile.id
+}
+
+function eraser(pointer: Phaser.Input.Pointer) {
+  // Check if zone is set
+  if (!zoneEditorStore.zone) return
+
+  // Check if tool is pencil
+  if (zoneEditorStore.tool !== 'eraser') return
+
+  // Check if draw mode is tile
+  if (zoneEditorStore.eraserMode !== 'tile') return
+
+  // Check if left mouse button is pressed
+  if (!pointer.isDown) return
+
+  // Check if there is a tile
+  const tile = getTile(tiles, pointer.worldX, pointer.worldY)
+  if (!tile) return
+
+  // Place tile
+  placeTile(zoneTilemap, tiles, tile.x, tile.y, 'blank_tile')
+
+  // Adjust zoneEditorStore.zone.tiles
+  zoneEditorStore.zone.tiles[tile.y][tile.x] = 'blank_tile'
+}
+
+function paint(pointer: Phaser.Input.Pointer) {
+  // Check if zone is set
+  if (!zoneEditorStore.zone) return
+
+  // Check if tool is pencil
+  if (zoneEditorStore.tool !== 'paint') return
+
  // Check if there is a selected tile
  if (!zoneEditorStore.selectedTile) return

-  placeTile(zoneTilemap, tiles, tile.x, tile.y, zoneEditorStore.selectedTile.id)
+  // Check if left mouse button is pressed
+  if (!pointer.isDown) return
+
+  // Set new tileArray with selected tile
+  setAllTiles(zoneTilemap, tiles, createTileArray(zoneTilemap.width, zoneTilemap.height, zoneEditorStore.selectedTile.id))
+
+  // Adjust zoneEditorStore.zone.tiles
+  zoneEditorStore.zone.tiles = createTileArray(zoneTilemap.width, zoneTilemap.height, zoneEditorStore.selectedTile.id)
 }

 onBeforeMount(() => {
@ -76,13 +122,16 @@ onBeforeMount(() => {
    return
  }
  setAllTiles(zoneTilemap, tiles, zoneEditorStore.zone.tiles)
-  tileArray = zoneEditorStore.zone.tiles.map((row) => row.map((tileId) => tileId || 'blank_tile'))

-  scene.input.on(Phaser.Input.Events.POINTER_MOVE, handleTileClick)
+  scene.input.on(Phaser.Input.Events.POINTER_MOVE, pencil)
+  scene.input.on(Phaser.Input.Events.POINTER_MOVE, eraser)
+  scene.input.on(Phaser.Input.Events.POINTER_DOWN, paint)
 })

 onBeforeUnmount(() => {
-  scene.input.off(Phaser.Input.Events.POINTER_MOVE, handleTileClick)
+  scene.input.off(Phaser.Input.Events.POINTER_MOVE, pencil)
+  scene.input.off(Phaser.Input.Events.POINTER_MOVE, eraser)
+  scene.input.off(Phaser.Input.Events.POINTER_DOWN, paint)

  zoneTilemap.destroyLayer('tiles')
  zoneTilemap.removeAllLayers()
--- a/src/components/gameMaster/zoneEditor/ZoneEditor.vue
+++ b/src/components/gameMaster/zoneEditor/ZoneEditor.vue
@ -19,7 +19,7 @@ import { useScene } from 'phavuer'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { loadAssets } from '@/composables/zoneComposable'
-import { type ZoneObject, type ZoneEventTile, type Zone } from '@/types'
+import { type Zone } from '@/types'

 // Components
 import Toolbar from '@/components/gameMaster/zoneEditor/partials/Toolbar.vue'
@ -37,9 +37,6 @@ const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()

 const tileMap = ref(null as Phaser.Tilemaps.Tilemap | null)
-const tileArray = ref<string[][]>([])
-const zoneObjects = ref<ZoneObject[]>([])
-const zoneEventTiles = ref<ZoneEventTile[]>([])

 function save() {
  if (!zoneEditorStore.zone) return
@ -49,10 +46,11 @@ function save() {
    name: zoneEditorStore.zoneSettings.name,
    width: zoneEditorStore.zoneSettings.width,
    height: zoneEditorStore.zoneSettings.height,
-    tiles: tileArray,
+    tiles: zoneEditorStore.zone.tiles,
    pvp: zoneEditorStore.zone.pvp,
-    zoneEventTiles: zoneEventTiles.value.map(({ id, zoneId, type, positionX, positionY, teleport }) => ({ id, zoneId, type, positionX, positionY, teleport })),
-    zoneObjects: zoneObjects.value.map(({ id, zoneId, objectId, depth, isRotated, positionX, positionY }) => ({ id, zoneId, objectId, depth, isRotated, positionX, positionY }))
+    zoneEffects: zoneEditorStore.zone.zoneEffects.map(({ id, zoneId, effect, strength }) => ({ id, zoneId, effect, strength })),
+    zoneEventTiles: zoneEditorStore.zone.zoneEventTiles.map(({ id, zoneId, type, positionX, positionY, teleport }) => ({ id, zoneId, type, positionX, positionY, teleport })),
+    zoneObjects: zoneEditorStore.zone.zoneObjects.map(({ id, zoneId, objectId, depth, isRotated, positionX, positionY }) => ({ id, zoneId, objectId, depth, isRotated, positionX, positionY }))
  }

  if (zoneEditorStore.isSettingsModalShown) {
--- a/src/components/gameMaster/zoneEditor/partials/ObjectList.vue
+++ b/src/components/gameMaster/zoneEditor/partials/ObjectList.vue
@ -3,20 +3,16 @@
    <Modal :isModalOpen="zoneEditorStore.isObjectListModalShown" :modal-width="645" :modal-height="260" @modal:close="() => (zoneEditorStore.isObjectListModalShown = false)">
      <template #modalHeader>
        <h3 class="text-lg text-white">Objects</h3>
-        <div class="flex">
+      </template>
+      <template #modalBody>
+        <div class="flex pt-4 pl-4">
          <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-field" type="text" name="search" placeholder="Search" v-model="searchQuery" />
            </div>
-            <!--            <div>-->
-            <!--              <label class="mb-1.5 font-titles hidden" for="depth">Depth</label>-->
-            <!--              <input v-model="objectDepth" @mousedown.stop class="input-field" type="number" name="depth" placeholder="Depth" />-->
-            <!--            </div>-->
          </div>
        </div>
-      </template>
-      <template #modalBody>
        <div class="flex flex-col h-full p-4">
          <div class="mb-4 flex flex-wrap gap-2">
            <button v-for="tag in uniqueTags" :key="tag" @click="toggleTag(tag)" class="btn-cyan" :class="{ 'opacity-50': !selectedTags.includes(tag) }">
--- a/src/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue
+++ b/src/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue
@ -1,10 +1,6 @@
 <template>
  <div class="flex flex-col items-center py-5 px-3 fixed bottom-14 right-0">
    <div class="self-end mt-2 flex gap-2">
-      <div>
-        <label class="mb-1.5 font-titles block text-sm text-gray-700 hidden" for="depth">Depth</label>
-        <input v-model="objectDepth" @mousedown.stop @input="handleDepthInput" class="input-field max-w-24 px-2 py-1 border rounded" type="number" name="depth" placeholder="Depth" />
-      </div>
      <button @mousedown.stop @click="handleDelete" class="btn-red py-1.5 px-4">
        <img src="/assets/icons/trashcan.svg" class="w-4 h-4" alt="Delete" />
      </button>
@ -15,38 +11,23 @@
 </template>

 <script setup lang="ts">
-import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import { ref, computed, watch } from 'vue'
+import type { ZoneObject } from '@/types'

-const emit = defineEmits(['update_depth', 'move', 'delete', 'rotate'])
-const zoneEditorStore = useZoneEditorStore()
+const props = defineProps<{
+  zoneObject: ZoneObject
+}>()

-const objectDepth = ref(zoneEditorStore.objectDepth)
+const emit = defineEmits(['move', 'rotate', 'delete'])

-watch(
-  () => zoneEditorStore.selectedZoneObject,
-  (selectedZoneObject) => {
-    objectDepth.value = selectedZoneObject?.depth ?? 0
-  }
-)
-
-const handleDepthInput = () => {
-  const depth = parseFloat(objectDepth.value.toString())
-  if (!isNaN(depth)) {
-    emit('update_depth', depth)
-  }
+const handleMove = () => {
+  emit('move', props.zoneObject.id)
 }

 const handleRotate = () => {
-  emit('rotate', zoneEditorStore.selectedZoneObject?.id)
-}
-
-const handleMove = () => {
-  emit('move', zoneEditorStore.selectedZoneObject?.id)
+  emit('rotate', props.zoneObject.id)
 }

 const handleDelete = () => {
-  emit('delete', zoneEditorStore.selectedZoneObject?.id)
-  zoneEditorStore.setSelectedZoneObject(null)
+  emit('delete', props.zoneObject.id)
 }
 </script>
--- a/src/components/gameMaster/zoneEditor/partials/TileList.vue
+++ b/src/components/gameMaster/zoneEditor/partials/TileList.vue
@ -3,7 +3,9 @@
    <Modal :isModalOpen="zoneEditorStore.isTileListModalShown" :modal-width="645" :modal-height="600" @modal:close="() => (zoneEditorStore.isTileListModalShown = false)">
      <template #modalHeader>
        <h3 class="text-lg text-white">Tiles</h3>
-        <div class="flex">
+      </template>
+      <template #modalBody>
+        <div class="flex pt-4 pl-4">
          <div class="w-full flex gap-1.5 flex-row">
            <div>
              <label class="mb-1.5 font-titles hidden" for="search">Search...</label>
@ -11,8 +13,6 @@
            </div>
          </div>
        </div>
-      </template>
-      <template #modalBody>
        <div class="flex flex-col h-full p-4">
          <div class="mb-4 flex flex-wrap gap-2">
            <button v-for="tag in uniqueTags" :key="tag" @click="toggleTag(tag)" class="btn-cyan" :class="{ 'opacity-50': !selectedTags.includes(tag) }">
--- a/src/components/gameMaster/zoneEditor/partials/Toolbar.vue
+++ b/src/components/gameMaster/zoneEditor/partials/Toolbar.vue
@ -138,7 +138,9 @@ function cycleToolMode(tool: 'pencil' | 'eraser') {
 }

 function initKeyShortcuts(event: KeyboardEvent) {
+  // Check if zone is set
  if (!zoneEditorStore.zone) return
+
  // prevent if focused on composables
  if (document.activeElement?.tagName === 'INPUT') return

--- a/src/components/gameMaster/zoneEditor/partials/ZoneSettings.vue
+++ b/src/components/gameMaster/zoneEditor/partials/ZoneSettings.vue
@ -6,19 +6,23 @@

    <template #modalBody>
      <div class="m-4">
-        <form method="post" @submit.prevent="" class="inline">
-          <div class="gap-2.5 flex flex-wrap">
+        <div class="space-x-2">
+          <button class="btn-cyan py-1.5 px-4" type="button" @click.prevent="screen = 'settings'">Settings</button>
+          <button class="btn-cyan py-1.5 px-4" type="button" @click.prevent="screen = 'effects'">Effects</button>
+        </div>
+        <form method="post" @submit.prevent="" class="inline" v-if="screen === 'settings'">
+          <div class="gap-2.5 flex flex-wrap mt-4">
            <div class="form-field-full">
              <label for="name">Name</label>
              <input class="input-field" v-model="name" name="name" id="name" />
            </div>
            <div class="form-field-half">
-              <label for="name">Width</label>
-              <input class="input-field" v-model="width" name="name" id="name" type="number" />
+              <label for="width">Width</label>
+              <input class="input-field" v-model="width" name="width" id="width" type="number" />
            </div>
            <div class="form-field-half">
-              <label for="name">Height</label>
-              <input class="input-field" v-model="height" name="name" id="name" type="number" />
+              <label for="height">Height</label>
+              <input class="input-field" v-model="height" name="height" id="height" type="number" />
            </div>
            <div class="form-field-full">
              <label for="pvp">PVP enabled</label>
@ -29,6 +33,14 @@
            </div>
          </div>
        </form>
+        <form method="post" @submit.prevent="" class="inline" v-if="screen === 'effects'">
+          <div v-for="(effect, index) in zoneEffects" :key="effect.id" class="mb-2 flex items-center space-x-2 mt-4">
+            <input class="input-field flex-grow" v-model="effect.effect" placeholder="Effect name" />
+            <input class="input-field w-20" v-model.number="effect.strength" type="number" placeholder="Strength" />
+            <button class="btn-red py-1 px-2" type="button" @click="removeEffect(index)">Delete</button>
+          </div>
+          <button class="btn-green py-1 px-2 mt-2" type="button" @click="addEffect">Add Effect</button>
+        </form>
      </div>
    </template>
  </Modal>
@ -40,16 +52,19 @@ import Modal from '@/components/utilities/Modal.vue'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'

 const zoneEditorStore = useZoneEditorStore()
+const screen = ref('settings')

 zoneEditorStore.setZoneName(zoneEditorStore.zone?.name)
 zoneEditorStore.setZoneWidth(zoneEditorStore.zone?.width)
 zoneEditorStore.setZoneHeight(zoneEditorStore.zone?.height)
 zoneEditorStore.setZonePvp(zoneEditorStore.zone?.pvp)
+zoneEditorStore.setZoneEffects(zoneEditorStore.zone?.zoneEffects)

 const name = ref(zoneEditorStore.zoneSettings?.name)
 const width = ref(zoneEditorStore.zoneSettings?.width)
 const height = ref(zoneEditorStore.zoneSettings?.height)
 const pvp = ref(zoneEditorStore.zoneSettings?.pvp)
+const zoneEffects = ref(zoneEditorStore.zoneSettings?.zoneEffects || [])

 watch(name, (value) => {
  zoneEditorStore.setZoneName(value)
@ -66,4 +81,26 @@ watch(height, (value) => {
 watch(pvp, (value) => {
  zoneEditorStore.setZonePvp(value)
 })
+
+watch(
+  zoneEffects,
+  (value) => {
+    zoneEditorStore.setZoneEffects(value)
+  },
+  { deep: true }
+)
+
+const addEffect = () => {
+  zoneEffects.value.push({
+    id: Date.now().toString(), // Simple unique id generation
+    zoneId: zoneEditorStore.zone?.id,
+    zone: zoneEditorStore.zone,
+    effect: '',
+    strength: 1
+  })
+}
+
+const removeEffect = (index) => {
+  zoneEffects.value.splice(index, 1)
+}
 </script>
--- a/src/components/gui/Hotkeys.vue
+++ b/src/components/gui/Hotkeys.vue
@ -0,0 +1,52 @@
+<template>
+  <div class="absolute top-4 left-[300px] w-[422px]">
+    <div class="flex gap-2.5">
+      <div class="relative">
+        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
+        <span class="z-10 text-pixel absolute top-1 left-2">F1</span>
+        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f1-icon.png')] bg-no-repeat"></div>
+      </div>
+      <div class="relative">
+        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
+        <span class="z-10 text-pixel absolute top-1 left-2">F2</span>
+        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f2-icon.png')] bg-no-repeat"></div>
+      </div>
+      <div class="relative">
+        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
+        <span class="z-10 text-pixel absolute top-1 left-2">F3</span>
+        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f3-icon.png')] bg-no-repeat"></div>
+      </div>
+      <div class="relative">
+        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
+        <span class="z-10 text-pixel absolute top-1 left-2">F4</span>
+        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f4-icon.png')] bg-no-repeat"></div>
+      </div>
+      <div class="relative">
+        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
+        <span class="z-10 text-pixel absolute top-1 left-2">F5</span>
+        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f5-icon.png')] bg-no-repeat"></div>
+      </div>
+      <div class="relative">
+        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
+        <span class="z-10 text-pixel absolute top-1 left-2">F6</span>
+        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f6-icon.png')] bg-no-repeat"></div>
+      </div>
+      <div class="relative">
+        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
+        <span class="z-10 text-pixel absolute top-1 left-2">F7</span>
+        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f7-icon.png')] bg-no-repeat"></div>
+      </div>
+      <div class="relative">
+        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
+        <span class="z-10 text-pixel absolute top-1 left-2">F8</span>
+        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f8-icon.png')] bg-no-repeat"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useGameStore } from '@/stores/gameStore'
+
+const gameStore = useGameStore()
+</script>
--- a/src/components/gui/Keybindings.vue
+++ b/src/components/gui/Keybindings.vue
@ -1,48 +0,0 @@
-<template>
-  <div class="absolute left-[300px] top-4">
-    <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
-    <span class="z-10 text-pixel absolute top-1 left-2">F1</span>
-    <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f1-icon.png')] bg-no-repeat"></div>
-  </div>
-  <div class="absolute left-[346px] top-4">
-    <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
-    <span class="z-10 text-pixel absolute top-1 left-2">F2</span>
-    <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f2-icon.png')] bg-no-repeat"></div>
-  </div>
-  <div class="absolute left-[392px] top-4">
-    <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
-    <span class="z-10 text-pixel absolute top-1 left-2">F3</span>
-    <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f3-icon.png')] bg-no-repeat"></div>
-  </div>
-  <div class="absolute left-[438px] top-4">
-    <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
-    <span class="z-10 text-pixel absolute top-1 left-2">F4</span>
-    <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f4-icon.png')] bg-no-repeat"></div>
-  </div>
-  <div class="absolute left-[484px] top-4">
-    <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
-    <span class="z-10 text-pixel absolute top-1 left-2">F5</span>
-    <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f5-icon.png')] bg-no-repeat"></div>
-  </div>
-  <div class="absolute left-[530px] top-4">
-    <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
-    <span class="z-10 text-pixel absolute top-1 left-2">F6</span>
-    <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f6-icon.png')] bg-no-repeat"></div>
-  </div>
-  <div class="absolute left-[576px] top-4">
-    <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
-    <span class="z-10 text-pixel absolute top-1 left-2">F7</span>
-    <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f7-icon.png')] bg-no-repeat"></div>
-  </div>
-  <div class="absolute left-[622px] top-4">
-    <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
-    <span class="z-10 text-pixel absolute top-1 left-2">F8</span>
-    <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f8-icon.png')] bg-no-repeat"></div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useGameStore } from '@/stores/gameStore'
-
-const gameStore = useGameStore()
-</script>
--- a/src/components/gui/Menu.vue
+++ b/src/components/gui/Menu.vue
@ -24,7 +24,7 @@
        <p class="absolute w-full bottom-0 m-0 text-xs leading-6 text-white">Open Chat</p>
        <div class="group-hover:block absolute -left-2 bg-gray-500 h-3.5 w-2 [clip-path:polygon(100%_0,_0_50%,_100%_100%)] top-1/2 -translate-y-1/2 hidden"></div>
      </div>
-      <a class="group-hover:bg-gray-800 group-hover:cursor-pointer border border-b-4 border-solid rounded border-gray-500 block w-[34px] h-[31px]">
+      <a class="group-hover:bg-gray-800 bg-gray-900 group-hover:cursor-pointer border border-b-4 border-solid rounded border-gray-500 block w-[34px] h-[31px]">
        <img class="group-hover:drop-shadow-default w-6 h-6 m-[5px] object-contain" draggable="false" src="/assets/icons/chat-icon.svg" />
      </a>
    </li>
@ -33,7 +33,7 @@
        <p class="absolute w-full bottom-0 m-0 text-xs leading-6 text-white">World map</p>
        <div class="group-hover:block absolute -left-2 bg-gray-500 h-3.5 w-2 [clip-path:polygon(100%_0,_0_50%,_100%_100%)] top-1/2 -translate-y-1/2 hidden"></div>
      </div>
-      <a class="group-hover:bg-gray-800 group-hover:cursor-pointer border border-b-4 border-solid rounded border-gray-500 block w-[34px] h-[31px]">
+      <a class="group-hover:bg-gray-800 bg-gray-900 group-hover:cursor-pointer border border-b-4 border-solid rounded border-gray-500 block w-[34px] h-[31px]">
        <img class="group-hover:drop-shadow-default w-6 h-6 m-[5px] object-contain" draggable="false" src="/assets/icons/map-icon.svg" />
      </a>
    </li>
@ -42,7 +42,7 @@
        <p class="absolute w-full bottom-0 m-0 text-xs leading-6 text-white">Users</p>
        <div class="group-hover:block absolute -left-2 bg-gray-500 h-3.5 w-2 [clip-path:polygon(100%_0,_0_50%,_100%_100%)] top-1/2 -translate-y-1/2 hidden"></div>
      </div>
-      <a class="group-hover:bg-gray-800 group-hover:cursor-pointer border border-b-4 border-solid rounded border-gray-500 block w-[34px] h-[31px]">
+      <a class="group-hover:bg-gray-800 bg-gray-900 group-hover:cursor-pointer border border-b-4 border-solid rounded border-gray-500 block w-[34px] h-[31px]">
        <img class="group-hover:drop-shadow-default w-6 h-6 m-[5px] object-contain" draggable="false" src="/assets/icons/socials-icon.svg" />
      </a>
    </li>
--- a/src/components/gui/Minimap.vue
+++ b/src/components/gui/Minimap.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="absolute top-4 right-4">
+  <div class="absolute top-4 right-4 hidden lg:block">
    <div class="w-40 h-40 rounded-full border border-solid border-gray-500 bg-[url('/assets/ui-texture.png')] bg-no-repeat">
      <div class="w-40 h-40 rounded-full shadow-inner"></div>
    </div>
--- a/src/components/utilities/Modal.vue
+++ b/src/components/utilities/Modal.vue
@ -8,7 +8,7 @@
        </div>
        <div class="flex gap-2.5">
          <button @click="toggleFullScreen" class="w-5 h-5 m-0 p-0 relative hover:scale-110 transition-transform duration-300 ease-in-out" v-if="canFullScreen">
-            <img :alt="isFullScreen ? 'exit full-screen' : 'full-screen'" draggable="false" :src="isFullScreen ? '/assets/icons/minimize.svg' : '/assets/icons/full-screen.svg'" class="w-3.5 h-3.5 invert" />
+            <img :alt="isFullScreen ? 'exit full-screen' : 'full-screen'" draggable="false" :src="isFullScreen ? '/assets/icons/minimize.svg' : '/assets/icons/increase-size-option.svg'" class="w-3.5 h-3.5 invert" />
          </button>
          <button @click="close" v-if="closable" class="w-3.5 h-3.5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
            <img alt="close" draggable="false" src="/assets/icons/close-button-white.svg" class="w-full h-full" />
--- a/src/components/zone/Objects.vue
+++ b/src/components/zone/Objects.vue
@ -1,5 +1,5 @@
 <template>
-  <Image v-for="object in zoneStore.zone?.zoneObjects" v-bind="getObjectImageProps(object)" />
+  <Image v-for="object in zoneStore.zone?.zoneObjects" v-bind="getImageProps(object)" />
 </template>

 <script setup lang="ts">
@ -14,7 +14,7 @@ const props = defineProps<{
  tilemap: Phaser.Tilemaps.Tilemap
 }>()

-const getObjectImageProps = (object: ZoneObject) => {
+const getImageProps = (object: ZoneObject) => {
  return {
    depth: calculateIsometricDepth(object.positionX, object.positionY, object.object.frameWidth, object.object.frameHeight),
    x: tileToWorldX(props.tilemap as any, object.positionX, object.positionY),
--- a/src/components/zone/Tiles.vue
+++ b/src/components/zone/Tiles.vue
@ -17,7 +17,6 @@ const scene = useScene()

 const zoneTilemap = createTilemap()
 const tiles = createTileLayer()
-let tileArray = createTileArray()

 function createTilemap() {
  const zoneData = new Phaser.Tilemaps.MapData({
@ -51,16 +50,11 @@ function createTileLayer() {
  return layer
 }

-function createTileArray() {
-  return Array.from({ length: zoneTilemap.height || 0 }, () => Array.from({ length: zoneTilemap.width || 0 }, () => 'blank_tile'))
-}
-
 onBeforeMount(() => {
  if (!zoneStore.zone?.tiles) {
    return
  }
  setAllTiles(zoneTilemap, tiles, zoneStore.zone.tiles)
-  tileArray = zoneStore.zone.tiles.map((row) => row.map((tileId) => tileId || 'blank_tile'))
 })

 onBeforeUnmount(() => {
--- a/src/composables/zoneComposable.ts
+++ b/src/composables/zoneComposable.ts
@ -11,30 +11,50 @@ export function getTile(layer: TilemapLayer | Tilemap, x: number, y: number): Ti
  return tile
 }

-export function tileToWorldXY(layer: TilemapLayer, pos_x: number, pos_y: number) {
+export function tileToWorldXY(layer: TilemapLayer | Tilemap, pos_x: number, pos_y: number) {
  const worldPoint = layer.tileToWorldXY(pos_x, pos_y)
+  if (!worldPoint) return { positionX: 0, positionY: 0 }
+
  const positionX = worldPoint.x + config.tile_size.y
  const positionY = worldPoint.y

  return { positionX, positionY }
 }

-export function tileToWorldX(layer: TilemapLayer, pos_x: number, pos_y: number): number {
+export function tileToWorldX(layer: TilemapLayer | Tilemap, pos_x: number, pos_y: number): number {
  const worldPoint = layer.tileToWorldXY(pos_x, pos_y)
+  if (!worldPoint) return 0
+
  return worldPoint.x + config.tile_size.x / 2
 }

-export function tileToWorldY(layer: TilemapLayer, pos_x: number, pos_y: number): number {
+export function tileToWorldY(layer: TilemapLayer | Tilemap, pos_x: number, pos_y: number): number {
  const worldPoint = layer.tileToWorldXY(pos_x, pos_y)
+  if (!worldPoint) return 0
+
  return worldPoint.y + config.tile_size.y * 1.5
 }

+/**
+ * Can also be used to replace tiles
+ * @param zone
+ * @param layer
+ * @param x
+ * @param y
+ * @param tileName
+ */
 export function placeTile(zone: Tilemap, layer: TilemapLayer, x: number, y: number, tileName: string) {
-  const tileImg = zone.getTileset(tileName) as Tileset
-  if (!tileImg) return
+  let tileImg = zone.getTileset(tileName) as Tileset
+  if (!tileImg) {
+    tileImg = zone.getTileset('blank_tile') as Tileset
+  }
  layer.putTileAt(tileImg.firstgid, x, y)
 }

+export function deleteTile(layer: TilemapLayer, x: number, y: number) {
+  layer.removeTileAt(x, y)
+}
+
 export function setAllTiles(zone: Tilemap, layer: TilemapLayer, tiles: string[][]) {
  tiles.forEach((row: string[], y: number) => {
    row.forEach((tile: string, x: number) => {
@ -43,6 +63,10 @@ export function setAllTiles(zone: Tilemap, layer: TilemapLayer, tiles: string[][
  })
 }

+export function createTileArray(width: number, height: number, tile: string = 'blank_tile') {
+  return Array.from({ length: height }, () => Array.from({ length: width }, () => tile))
+}
+
 export const calculateIsometricDepth = (x: number, y: number, width: number = 0, height: number = 0, isCharacter: boolean = false) => {
  const baseDepth = x + y
  if (isCharacter) {
@ -59,7 +83,9 @@ export const sortByIsometricDepth = <T extends { positionX: number; positionY: n
  })
 }

-export const clearAssets = (scene: Phaser.Scene) => {}
+export const clearAssets = (scene: Phaser.Scene) => {
+  scene.load.destroy()
+}

 export const loadAssets = (scene: Phaser.Scene): Promise<void> => {
  return new Promise((resolve) => {
--- a/src/screens/Game.vue
+++ b/src/screens/Game.vue
@ -1,14 +1,11 @@
 <template>
  <div class="flex justify-center items-center h-dvh relative">
-    <GmTools v-if="gameStore.character?.role === 'gm'" />
-    <GmPanel v-if="gameStore.character?.role === 'gm'" />
-
    <Game :config="gameConfig" @create="createGame">
      <Scene name="main" @preload="preloadScene" @create="createScene">
        <div v-if="isLoaded">
          <Menu />
          <Hud />
-          <Keybindings />
+          <Hotkeys />
          <Minimap />
          <Zone />
          <Chat />
@ -32,10 +29,8 @@ import Menu from '@/components/gui/Menu.vue'
 import ExpBar from '@/components/gui/ExpBar.vue'
 import Hud from '@/components/gui/Hud.vue'
 import Zone from '@/components/zone/Zone.vue'
-import Keybindings from '@/components/gui/Keybindings.vue'
+import Hotkeys from '@/components/gui/Hotkeys.vue'
 import Chat from '@/components/gui/Chat.vue'
-import GmTools from '@/components/gameMaster/GmTools.vue'
-import GmPanel from '@/components/gameMaster/GmPanel.vue'
 import Inventory from '@/components/gui/UserPanel.vue'
 import Effects from '@/components/Effects.vue'
 import { loadAssets } from '@/composables/zoneComposable'
@ -111,10 +106,7 @@ const preloadScene = async (scene: Phaser.Scene) => {
  /**
   * Load the base assets into the Phaser scene
   */
-  scene.load.image('BLOCK', '/assets/zone/bt_tile.png')
-  scene.load.image('TELEPORT', '/assets/zone/tp_tile.png')
  scene.load.image('blank_tile', '/assets/zone/blank_tile.png')
-  scene.load.image('blank_object', '/assets/zone/blank_tile.png')
  scene.load.image('waypoint', '/assets/waypoint.png')

  /**
@ -144,11 +136,3 @@ onBeforeUnmount(() => {
  isLoaded.value = false
 })
 </script>
-
-<style lang="scss">
-canvas {
-  image-rendering: -moz-crisp-edges;
-  image-rendering: -webkit-crisp-edges;
-  image-rendering: pixelated;
-}
-</style>
--- a/src/screens/ZoneEditor.vue
+++ b/src/screens/ZoneEditor.vue
@ -1,8 +1,5 @@
 <template>
  <div class="flex justify-center items-center h-dvh relative">
-    <GmTools v-if="gameStore.character?.role === 'gm'" />
-    <GmPanel v-if="gameStore.character?.role === 'gm'" />
-
    <Game :config="gameConfig" @create="createGame">
      <Scene name="main" @preload="preloadScene" @create="createScene">
        <ZoneEditor v-if="isLoaded" :key="JSON.stringify(`${zoneEditorStore.zone?.id}_${zoneEditorStore.zone?.createdAt}_${zoneEditorStore.zone?.updatedAt}`)" />
@ -18,9 +15,7 @@ import { ref, onBeforeUnmount } from 'vue'
 import { Game, Scene } from 'phavuer'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import GmTools from '@/components/gameMaster/GmTools.vue'
 import ZoneEditor from '@/components/gameMaster/zoneEditor/ZoneEditor.vue'
-import GmPanel from '@/components/gameMaster/GmPanel.vue'
 import { loadAssets } from '@/composables/zoneComposable'

 const gameStore = useGameStore()
@ -97,7 +92,6 @@ const preloadScene = async (scene: Phaser.Scene) => {
  scene.load.image('BLOCK', '/assets/zone/bt_tile.png')
  scene.load.image('TELEPORT', '/assets/zone/tp_tile.png')
  scene.load.image('blank_tile', '/assets/zone/blank_tile.png')
-  scene.load.image('blank_object', '/assets/zone/blank_tile.png')
  scene.load.image('waypoint', '/assets/waypoint.png')

  /**
@ -127,11 +121,3 @@ onBeforeUnmount(() => {
  isLoaded.value = false
 })
 </script>
-
-<style lang="scss">
-canvas {
-  image-rendering: -moz-crisp-edges;
-  image-rendering: -webkit-crisp-edges;
-  image-rendering: pixelated;
-}
-</style>
--- a/src/stores/assetManagerStore.ts
+++ b/src/stores/assetManagerStore.ts
@ -1,6 +1,6 @@
 import { ref } from 'vue'
 import { defineStore } from 'pinia'
-import type { Tile, Object, Sprite } from '@/types'
+import type { Tile, Object, Sprite, CharacterType } from '@/types'

 export const useAssetManagerStore = defineStore('assetManager', () => {
  const tileList = ref<Tile[]>([])
@ -12,6 +12,9 @@ export const useAssetManagerStore = defineStore('assetManager', () => {
  const spriteList = ref<Sprite[]>([])
  const selectedSprite = ref<Sprite | null>(null)

+  const characterTypeList = ref<CharacterType[]>([])
+  const selectedCharacterType = ref<CharacterType | null>(null)
+
  function setTileList(tiles: Tile[]) {
    tileList.value = tiles
  }
@ -36,6 +39,14 @@ export const useAssetManagerStore = defineStore('assetManager', () => {
    selectedSprite.value = sprite
  }

+  function setCharacterTypeList(characterTypes: CharacterType[]) {
+    characterTypeList.value = characterTypes
+  }
+
+  function setSelectedCharacterType(characterType: CharacterType | null) {
+    selectedCharacterType.value = characterType
+  }
+
  return {
    tileList,
    selectedTile,
@ -43,11 +54,15 @@ export const useAssetManagerStore = defineStore('assetManager', () => {
    selectedObject,
    spriteList,
    selectedSprite,
+    characterTypeList,
+    selectedCharacterType,
    setTileList,
    setSelectedTile,
    setObjectList,
+    setCharacterTypeList,
    setSelectedObject,
    setSpriteList,
-    setSelectedSprite
+    setSelectedSprite,
+    setSelectedCharacterType
  }
 })
--- a/src/stores/zoneEditorStore.ts
+++ b/src/stores/zoneEditorStore.ts
@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import { useGameStore } from '@/stores/gameStore'
-import type { Zone, Object, Tile, ZoneObject, ZoneEffects } from '@/types'
+import type { Zone, Object, Tile, ZoneEffect } from '@/types'

 export type TeleportSettings = {
  toZoneId: number
@ -12,7 +12,7 @@ export type TeleportSettings = {
 export const useZoneEditorStore = defineStore('zoneEditor', {
  state: () => {
    return {
-      active: true,
+      active: false,
      zone: null as Zone | null,
      tool: 'move',
      drawMode: 'tile',
@ -33,7 +33,7 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
        width: 0,
        height: 0,
        pvp: false,
-        effects: [] as ZoneEffects[]
+        zoneEffects: [] as ZoneEffect[]
      },
      teleportSettings: {
        toZoneId: 0,
@ -66,9 +66,9 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
      if (!this.zone) return
      this.zone.pvp = pvp
    },
-    setZoneEffects(zoneEffects: ZoneEffects) {
+    setZoneEffects(zoneEffects: ZoneEffect[]) {
      if (!this.zone) return
-      this.zone.zoneEffects = zoneEffects
+      this.zoneSettings.zoneEffects = zoneEffects
    },
    setTool(tool: string) {
      this.tool = tool
--- a/src/types.ts
+++ b/src/types.ts
@ -53,7 +53,7 @@ export type Zone = {
  height: number
  tiles: any | null
  pvp: boolean
-  zoneEffects: ZoneEffects
+  zoneEffects: ZoneEffect[]
  zoneEventTiles: ZoneEventTile[]
  zoneObjects: ZoneObject[]
  characters: Character[]
@ -62,7 +62,7 @@ export type Zone = {
  updatedAt: Date
 }

-export type ZoneEffects = {
+export type ZoneEffect = {
  id: string
  zoneId: number
  zone: Zone
@ -136,8 +136,8 @@ export type CharacterType = {
  gender: CharacterGender
  race: CharacterRace
  characters: Character[]
-  spriteId: string
-  sprite: Sprite
+  spriteId?: string
+  sprite?: Sprite
  createdAt: Date
  updatedAt: Date
 }
Author	SHA1	Message	Date
Dennis Postma	a0f0b40ed3	Replaced modal resize icon, started writing components for character type management, spride field made optional	2024-10-19 02:15:48 +02:00
Dennis Postma	68222ab511	Styling fixes	2024-10-18 23:08:01 +02:00
Dennis Postma	fe804037d0	#137 : Listen for zoneEffects in effects component	2024-10-18 22:41:42 +02:00
Dennis Postma	5d288772b5	#137 : Added logic to set effects per zone in zone editor	2024-10-18 22:23:56 +02:00
Dennis Postma	3c9b92ccbd	Better func. naming	2024-10-18 19:53:02 +02:00
Dennis Postma	13cb46658f	nginx conf. test	2024-10-18 19:45:25 +02:00
Dennis Postma	222614b856	Moved GmTools and GmPanel to App.vue	2024-10-18 19:27:22 +02:00
Dennis Postma	9f10db142b	don't have ZE enabled by default	2024-10-18 19:21:06 +02:00
Dennis Postma	860fe705c6	Saving maps works again	2024-10-18 19:10:41 +02:00
Dennis Postma	352ec3fad8	Moved search input into modal	2024-10-18 17:55:58 +02:00
Dennis Postma	c7a3d74408	Removed todo comment	2024-10-18 17:47:11 +02:00
Dennis Postma	1e0da5f7cc	Removed unused imports, re-added paint func, more refactor work	2024-10-18 17:45:50 +02:00
Dennis Postma	7ce054191a	Re-added & Improved delete logics for tiles, zone objects and event tiles. Added more code comments for better DX.	2024-10-18 15:43:50 +02:00
Dennis Postma	34f547f0a6	Added deleteTile() func. to zone composable	2024-10-18 15:40:28 +02:00
Dennis Postma	14e07aa4a1	npm update	2024-10-18 15:40:14 +02:00
Dennis Postma	95dcf237cf	npm run format	2024-10-18 02:49:35 +02:00
Dennis Postma	5cc1821922	Removed unused import	2024-10-18 02:49:04 +02:00
Dennis Postma	9d774bcb18	Removed redundant code , refactor event tile code	2024-10-18 02:48:27 +02:00
Dennis Postma	c6869f47b1	Typescript improvements, added move zone object logic.	2024-10-18 02:33:51 +02:00
Dennis Postma	390b9517e0	Moved styling to main.scss as it's global	2024-10-18 00:42:15 +02:00
Dennis Postma	2497da30b7	Re-added initial-scale=1	2024-10-18 00:40:50 +02:00
Dennis Postma	66e56d3626	Renamed Keybindings > Hotkeys	2024-10-18 00:33:06 +02:00
Dennis Postma	d68ee120ab	Merge remote-tracking branch 'origin/feature/refactor-zone-editor' # Conflicts: # src/components/gui/Keybindings.vue # src/components/gui/Minimap.vue	2024-10-18 00:21:03 +02:00
Colin Kallemein	3c8744dc75	Reworked layout for keybindings, hide minimap on smaller screens	2024-10-17 23:26:25 +02:00