Minor fix and format

src/components/game/gui/Chat.vue

@@ -82,7 +82,6 @@ const scrollToBottom = () => {
 gameStore.connection?.on(SocketEvent.CHAT_MESSAGE, (data: { character: string; message: string }) => {
   if (!data.character || !data.message) return
 
-
   chats.value.push({ character: data.character, message: data.message })
   scrollToBottom()
 

src/components/gameMaster/mapEditor/Map.vue

@@ -5,18 +5,16 @@
 </template>
 
 <script setup lang="ts">
-
+import type { MapEventTile, Map as MapT, PlacedMapObject as PlacedMapObjectT } from '@/application/types'
 import MapEventTiles from '@/components/gameMaster/mapEditor/mapPartials/MapEventTiles.vue'
 import MapTiles from '@/components/gameMaster/mapEditor/mapPartials/MapTiles.vue'
 import PlacedMapObjects from '@/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { cloneArray, createTileArray, createTileLayer, createTileMap, placeTiles } from '@/services/mapService'
 import { TileStorage } from '@/storage/storages'
-import { useScene } from 'phavuer'
-
-import { onBeforeUnmount, onMounted, onUnmounted, ref, shallowRef, useTemplateRef, watch } from 'vue'
-import type { PlacedMapObject as PlacedMapObjectT, Map as MapT, MapEventTile } from '@/application/types'
 import { useManualRefHistory, useRefHistory } from '@vueuse/core'
+import { useScene } from 'phavuer'
+import { onBeforeUnmount, onMounted, onUnmounted, ref, shallowRef, useTemplateRef, watch } from 'vue'
 
 const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
 const tileMapLayer = shallowRef<Phaser.Tilemaps.TilemapLayer>()
@@ -29,14 +27,14 @@ const mapObjects = useTemplateRef('mapObjects')
 const eventTiles = useTemplateRef('eventTiles')
 
 //Record of commands
-let commandStack: (EditorCommand | number) [] = []
+let commandStack: (EditorCommand | number)[] = []
 let commandIndex = ref(0)
 
 let originTiles: string[][] = []
 let originEventTiles: MapEventTile[] = []
 let originObjects = ref<PlacedMapObjectT[]>(mapEditor.currentMap.value.placedMapObjects)
 
-const {undo, redo, commit, pause, resume, canUndo, canRedo} = useRefHistory(originObjects, {deep:true, capacity:9})
+const { undo, redo, commit, pause, resume, canUndo, canRedo } = useRefHistory(originObjects, { deep: true, capacity: 9 })
 
 //Command Pattern basic interface, extended to store what elements have been changed by each edit
 export interface EditorCommand {
@@ -81,12 +79,10 @@ function update(commands: (EditorCommand | number)[]) {
             originEventTiles = base.apply(originEventTiles) as MapEventTile[]
             break
         }
-      }
-      else {
+      } else {
         commandStack.shift()
       }
-    }
-    else if (typeof commandStack[0] === 'number') {
+    } else if (typeof commandStack[0] === 'number') {
       commandStack.shift()
     }
   }
@@ -124,7 +120,7 @@ function addCommand(command: EditorCommand) {
 
 function undoEdit() {
   if (commandIndex.value > 0) {
-    if (typeof(commandStack[--commandIndex.value]) === 'number' && canUndo) {
+    if (typeof commandStack[--commandIndex.value] === 'number' && canUndo) {
       undo()
     }
     update(commandStack.slice(0, commandIndex.value))
@@ -133,7 +129,7 @@ function undoEdit() {
 
 function redoEdit() {
   if (commandIndex.value <= 9 && commandIndex.value < commandStack.length) {
-    if (typeof(commandStack[commandIndex.value++]) === 'number' && canRedo) {
+    if (typeof commandStack[commandIndex.value++] === 'number' && canRedo) {
       redo()
     }
     update(commandStack.slice(0, commandIndex.value))
@@ -185,7 +181,7 @@ function handlePointerMove(pointer: Phaser.Input.Pointer) {
 }
 
 function handlePointerUp(pointer: Phaser.Input.Pointer) {
-  switch(mapEditor.drawMode.value) {
+  switch (mapEditor.drawMode.value) {
     case 'tile':
       mapTiles.value!.finalizeCommand()
       break

src/components/gameMaster/mapEditor/mapPartials/MapEventTiles.vue

@@ -3,17 +3,16 @@
 </template>
 
 <script setup lang="ts">
-
 import { MapEventTileType, type MapEventTile, type Map as MapT, type UUID } from '@/application/types'
 import { uuidv4 } from '@/application/utilities'
+import { type EditorCommand } from '@/components/gameMaster/mapEditor/Map.vue'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { cloneArray, getTile, tileToWorldX, tileToWorldY } from '@/services/mapService'
 import { Image } from 'phavuer'
-import { type EditorCommand } from '@/components/gameMaster/mapEditor/Map.vue'
 
 const mapEditor = useMapEditorComposable()
 
-defineExpose({ handlePointer, finalizeCommand, clearTiles})
+defineExpose({ handlePointer, finalizeCommand, clearTiles })
 
 const emit = defineEmits(['createCommand'])
 
@@ -21,7 +20,6 @@ const props = defineProps<{
   tileMap: Phaser.Tilemaps.Tilemap
 }>()
 
-
 // *** COMMAND STATE ***
 
 let currentCommand: EventTileCommand | null = null
@@ -35,11 +33,9 @@ class EventTileCommand implements EditorCommand {
     let tileVersion = cloneArray(elements) as MapEventTile[]
     if (this.operation === 'draw') {
       tileVersion = tileVersion.concat(this.affectedTiles)
-    }
-    else if (this.operation === 'erase') {
+    } else if (this.operation === 'erase') {
       tileVersion = tileVersion.filter((v) => !this.affectedTiles.includes(v))
-    }
-    else if (this.operation === 'clear') {
+    } else if (this.operation === 'clear') {
       tileVersion = []
     }
     return tileVersion
@@ -69,10 +65,8 @@ function finalizeCommand() {
   currentCommand = null
 }
 
-
 // *** HANDLERS ***
 
-
 function getImageProps(tile: MapEventTile) {
   return {
     x: tileToWorldX(props.tileMap, tile.positionX, tile.positionY),
@@ -159,5 +153,4 @@ function clearTiles() {
   createCommandUpdate(null, 'clear')
   finalizeCommand()
 }
-
 </script>

src/components/gameMaster/mapEditor/mapPartials/MapTiles.vue

@@ -3,11 +3,11 @@
 </template>
 
 <script setup lang="ts">
+import { type EditorCommand } from '@/components/gameMaster/mapEditor/Map.vue'
 import Controls from '@/components/utilities/Controls.vue'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { cloneArray, createTileArray, getTile, placeTile, placeTiles } from '@/services/mapService'
 import { onMounted, ref, watch } from 'vue'
-import { type EditorCommand } from '@/components/gameMaster/mapEditor/Map.vue'
 
 const mapEditor = useMapEditorComposable()
 
@@ -34,8 +34,7 @@ class TileCommand implements EditorCommand {
     let tileVersion
     if (this.operation === 'clear') {
       tileVersion = createTileArray(props.tileMapLayer.width, props.tileMapLayer.height, 'blank_tile')
-    }
-    else {
+    } else {
       tileVersion = cloneArray(elements) as string[][]
       for (const position of this.affectedTiles) {
         tileVersion[position[1]][position[0]] = this.tileName
@@ -69,10 +68,8 @@ function finalizeCommand() {
   currentCommand = null
 }
 
-
 // *** HANDLERS ***
 
-
 function draw(pointer: Phaser.Input.Pointer, tileName: string) {
   let map = mapEditor.currentMap.value
   if (!map) return
@@ -84,7 +81,7 @@ function draw(pointer: Phaser.Input.Pointer, tileName: string) {
   // Place tile
   placeTile(props.tileMap, props.tileMapLayer, tile.x, tile.y, tileName)
 
-  createCommandUpdate(tile.x, tile.y, tileName, tileName === 'blank_tile' ? 'erase': 'draw')
+  createCommandUpdate(tile.x, tile.y, tileName, tileName === 'blank_tile' ? 'erase' : 'draw')
 
   // Adjust mapEditorStore.map.tiles
   map.tiles[tile.y][tile.x] = tileName
@@ -147,7 +144,7 @@ function handlePointer(pointer: Phaser.Input.Pointer) {
 function clearTiles() {
   const tileArray = createTileArray(props.tileMap.width, props.tileMap.height, 'blank_tile')
   placeTiles(props.tileMap, props.tileMapLayer, tileArray)
-  createCommandUpdate(0,0,"blank_tile",'clear')
+  createCommandUpdate(0, 0, 'blank_tile', 'clear')
   finalizeCommand()
 }
 

src/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue

@@ -18,7 +18,7 @@ import SelectedPlacedMapObjectComponent from '@/components/gameMaster/mapEditor/
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { getTile } from '@/services/mapService'
 import { useScene } from 'phavuer'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import {computed, onMounted, onUnmounted, ref, watch} from 'vue'
 
 import Tilemap = Phaser.Tilemaps.Tilemap
 import TilemapLayer = Phaser.Tilemaps.TilemapLayer
@@ -27,7 +27,7 @@ const scene = useScene()
 const mapEditor = useMapEditorComposable()
 const map = computed(() => mapEditor.currentMap.value!)
 
-const emit = defineEmits<{(e: 'update', map: MapT): void, (e: 'updateAndCommit', map: MapT): void, (e:'pauseObjectTracking'), (e:'resumeObjectTracking')}>()
+const emit = defineEmits<{ (e: 'update', map: MapT): void; (e: 'updateAndCommit', map: MapT): void; (e: 'pauseObjectTracking'): void; (e: 'resumeObjectTracking'): void }>()
 
 defineExpose({ handlePointer })
 
@@ -37,10 +37,9 @@ const props = defineProps<{
 }>()
 
 const previewPosition = ref({ x: 0, y: 0 })
-
 const previewPlacedMapObject = computed(() => ({
   id: mapEditor.selectedMapObject.value!.id,
-  mapObject: mapEditor.selectedMapObject.value!,
+  mapObject: mapEditor.selectedMapObject.value!.id,
   isRotated: false,
   positionX: previewPosition.value.x,
   positionY: previewPosition.value.y
@@ -54,7 +53,6 @@ function updatePreviewPosition(pointer: Phaser.Input.Pointer) {
 }
 
 function pencil(pointer: Phaser.Input.Pointer, map: MapT) {
-
   emit('pauseObjectTracking')
   const tile = getTile(props.tileMap, pointer.worldX, pointer.worldY)
   if (!tile) return
@@ -136,7 +134,8 @@ function moveMapObject(id: string, map: MapT) {
       if (placed.id === id) {
         placed.positionX = tile.x
         placed.positionY = tile.y
-      }})
+      }
+    })
 
     mapEditor.movingPlacedObject.value = null
 
@@ -147,11 +146,11 @@ function moveMapObject(id: string, map: MapT) {
 }
 
 function rotatePlacedMapObject(id: string, map: MapT) {
-
   map.placedMapObjects.map((placed) => {
     if (placed.id === id) {
       placed.isRotated = !placed.isRotated
-    }})
+    }
+  })
 
   emit('updateAndCommit', map)
 }

src/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue

@@ -41,13 +41,13 @@
 </template>
 
 <script setup lang="ts">
+import { SocketEvent } from '@/application/enums'
 import type { MapObject, Map as MapT, PlacedMapObject } from '@/application/types'
 import Modal from '@/components/utilities/Modal.vue'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { MapObjectStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
 import { onMounted, ref } from 'vue'
-import {SocketEvent} from "@/application/enums";
 
 const props = defineProps<{
   placedMapObject: PlacedMapObject

src/components/gameMaster/mapEditor/partials/Toolbar.vue

@@ -150,7 +150,7 @@ function handleClick(tool: string) {
   mapEditor.setTool(tool)
   selectPencilOpen.value = tool === 'pencil' ? !selectPencilOpen.value : false
   selectEraserOpen.value = tool === 'eraser' ? !selectEraserOpen.value : false
-  if (mapEditor.drawMode.value === 'teleport') emit("open-teleport")
+  if (mapEditor.drawMode.value === 'teleport') emit('open-teleport')
 }
 
 function cycleToolMode(tool: 'pencil' | 'eraser') {

src/components/screens/MapEditor.vue

@@ -5,7 +5,7 @@
         <div v-if="!isLoaded" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white text-3xl font-ui">Loading...</div>
         <div v-else>
           <Map v-if="mapEditor.currentMap.value" :key="mapEditor.currentMap.value?.id" />
-          <Toolbar ref="toolbar" @save="save" @clear="clear" @open-maps="mapModal?.open" @open-settings="mapSettingsModal?.open" @open-teleport="teleportModal?.open"/>
+          <Toolbar ref="toolbar" @save="save" @clear="clear" @open-maps="mapModal?.open" @open-settings="mapSettingsModal?.open" @open-teleport="teleportModal?.open" />
           <MapList ref="mapModal" @open-create-map="mapSettingsModal?.open" />
           <TileList />
           <MapObjectList />

src/services/mapService.ts

@@ -62,18 +62,13 @@ export function createTileArray(width: number, height: number, tile: string = 'b
   return Array.from({ length: height }, () => Array.from({ length: width }, () => tile))
 }
 
-export const calculateIsometricDepth = (
-    positionX: number,
-    positionY: number,
-    objectWidth: number = 0,
-    objectHeight: number = 0
-): number => {
-  const tileWidth = config.tile_size.width;
-  const tileHeight = config.tile_size.height;
-  const tileSize = Math.max(tileWidth, tileHeight);
-  const objectSize = Math.max(objectWidth, objectHeight);
-  return Math.floor(positionY * tileSize + positionX * objectSize);
-};
+export const calculateIsometricDepth = (positionX: number, positionY: number, width: number = 0, height: number = 0, isCharacter: boolean = false) => {
+  const baseDepth = positionX + positionY
+  if (isCharacter) {
+    return baseDepth
+  }
+  return baseDepth + (width + height) / (2 * config.tile_size.width)
+}
 
 async function loadTileTextures(tiles: TileT[], scene: Phaser.Scene) {
   // Load each tile into the scene

src/stores/mapStore.ts

@@ -5,7 +5,7 @@ export const useMapStore = defineStore('map', {
   state: () => {
     return {
       mapId: '',
-      characters: [] as MapCharacter[],
+      characters: [] as MapCharacter[]
     }
   },
   getters: {