Minor improvements

src/components/game/map/partials/ImageGroup.vue

@@ -1,5 +1,5 @@
 <template>
-  <Zone :depth="baseDepth" :originX="mapObj?.originX" :originY="mapObj?.originY" :width="mapObj?.frameWidth" :height="mapObj?.frameHeight" :x="x" :y="y" />
+  <Zone :depth="baseDepth" :origin-x="mapObj?.originX" :origin-y="mapObj?.originY" :width="mapObj?.frameWidth" :height="mapObj?.frameHeight" :x="x" :y="y" />
 </template>
 
 <script setup lang="ts">
@@ -7,94 +7,95 @@ import type { MapObject, PlacedMapObject } from '@/application/types'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { calculateIsometricDepth } from '@/services/mapService'
 import { onPreUpdate, useScene, Zone } from 'phavuer'
-import { computed, defineProps, onMounted, onUnmounted } from 'vue'
+import { computed, onUnmounted } from 'vue'
 
-const mapEditor = useMapEditorComposable()
+interface Props {
-const partitionPoints = [0]
-
-let baseDepth = 0
-
-const props = defineProps<{
   obj?: PlacedMapObject
   mapObj?: MapObject
   x?: number
   y?: number
-}>()
+}
 
+const props = defineProps<Props>()
+const mapEditor = useMapEditorComposable()
 const scene = useScene()
-const group = scene.add.group()
 
-const createImagePartition = (startX: number, endX: number, depthOffset: number) => {
+const group = scene.add.group()
+const partitionPoints = computed(() => {
+  if (!props.mapObj?.frameWidth || !props.mapObj?.depthOffsets.length) return []
+
+  const sliceCount = props.mapObj.depthOffsets.length
+  return Array.from({ length: sliceCount + 1 }, (_, i) => i * (props.mapObj!.frameWidth / sliceCount))
+})
+
+let baseDepth = 0
+
+const createImagePartition = (startX: number, endX: number, depthOffset: number): void => {
   if (!props.mapObj?.id) return
 
   const img = scene.add.image(0, 0, props.mapObj.id)
-
   img.setOrigin(props.mapObj.originX, props.mapObj.originY)
-  img.setCrop(startX, 0, endX, props.mapObj?.frameHeight)
+  img.setCrop(startX, 0, endX, props.mapObj.frameHeight)
   img.setDepth(baseDepth + depthOffset)
-
   group.add(img)
 }
 
-onPreUpdate(() => {
+const updateGroupProperties = (): void => {
   if (!props.obj || !props.x || !props.y) return
 
-  group.setXY(props.x, props.y)
-
   const isMoving = mapEditor.movingPlacedObject.value?.id === props.obj.id
   const isSelected = mapEditor.selectedMapObject.value?.id === props.obj.id
   const isPlacedSelected = mapEditor.selectedPlacedObject.value?.id === props.obj.id
 
-  baseDepth = calculateIsometricDepth(props.obj!.positionX, props.obj!.positionY)
+  baseDepth = calculateIsometricDepth(props.obj.positionX, props.obj.positionY)
 
+  group.setXY(props.x, props.y)
   group.setAlpha(isMoving || isSelected ? 0.5 : 1)
   group.setTint(isPlacedSelected ? 0x00ff00 : 0xffffff)
   group.setDepth(baseDepth)
+}
 
-  let orderedImages = group.getChildren()
+const updateImageProperties = (): void => {
+  const orderedImages = group.getChildren() as Phaser.GameObjects.Image[]
+
+  orderedImages.forEach((image, index) => {
+    if (!props.obj || !props.mapObj || !props.x) return
 
-  orderedImages.forEach((child, index) => {
-    const image = child as Phaser.GameObjects.Image
-    if (image && props.obj) {
     image.flipX = props.obj.isRotated
 
     if (props.obj.isRotated) {
-        var offsetNum = props.mapObj!.depthOffsets.length
+      const offsetNum = props.mapObj.depthOffsets.length
-
+      const xOffset = props.mapObj.frameWidth / offsetNum
-        //Could break in case of images with odd partion number
+      image.x = props.x + (index < offsetNum / 2 ? -xOffset : xOffset)
-        //Shifts image over so that it becomes aligned again after flipping
+      image.setDepth(baseDepth - props.mapObj.depthOffsets[index])
-        if (index < offsetNum / 2) {
-          image.x = props.x! - props.mapObj!.frameWidth / offsetNum
     } else {
-          image.x = props.x! + props.mapObj!.frameWidth / offsetNum
+      image.x = props.x
-        }
+      image.setDepth(baseDepth + props.mapObj.depthOffsets[index])
-
-        image.setDepth(baseDepth - props.mapObj!.depthOffsets[index])
-      } else {
-        image.x = props.x!
-        image.setDepth(baseDepth + props.mapObj!.depthOffsets[index])
-      }
     }
   })
+}
+
+onPreUpdate(() => {
+  updateGroupProperties()
+  updateImageProperties()
 })
 
 // Initial setup
-if (props.mapObj && props.x && props.y) {
+const initializeGroup = (): void => {
-  baseDepth = calculateIsometricDepth(props.obj!.positionX, props.obj!.positionY)
+  if (!props.mapObj || !props.x || !props.y || !props.obj) return
 
+  baseDepth = calculateIsometricDepth(props.obj.positionX, props.obj.positionY)
   group.setXY(props.x, props.y)
   group.setOrigin(props.mapObj.originX, props.mapObj.originY)
 
-  let sliceCount = props.mapObj.depthOffsets.length
+  const points = partitionPoints.value
-  for (let j = 1; j <= sliceCount; j++) {
+  for (let i = 0; i < points.length - 1; i++) {
-    partitionPoints.push(j * (props.mapObj.frameWidth / sliceCount))
+    createImagePartition(points[i], points[i + 1], props.mapObj.depthOffsets[i])
-  }
-
-  for (let i = 0; i < partitionPoints.length - 1; i++) {
-    createImagePartition(partitionPoints[i], partitionPoints[i + 1], props.mapObj.depthOffsets[i])
   }
 }
 
+initializeGroup()
+
 onUnmounted(() => {
   group.destroy(true, true)
 })