#91 : Zone editor: allow objects to be rotated

src/components/gameMaster/zoneEditor/ZoneEditor.vue

@@ -12,14 +12,14 @@
     <TeleportModal v-if="shouldShowTeleportModal" />
 
     <Container :depth="2">
-      <Image v-for="object in zoneObjects" :depth="calculateIsometricDepth(object.positionX, object.positionY, 0)" :key="object.id" v-bind="getObjectImageProps(object)" @pointerup="() => setSelectedZoneObject(object)" />
+      <Image v-for="object in zoneObjects" :depth="calculateIsometricDepth(object.positionX, object.positionY, 0)" :key="object.id" v-bind="getObjectImageProps(object)" @pointerup="() => setSelectedZoneObject(object)" :flipX="object.isRotated" />
     </Container>
 
     <Container :depth="3">
       <Image v-for="tile in zoneEventTiles" :key="tile.id" v-bind="getEventTileImageProps(tile)" />
     </Container>
 
-    <SelectedZoneObject v-if="zoneEditorStore.selectedZoneObject" @update_depth="updateZoneObjectDepth" @delete="deleteZoneObject" @move="handleMove" />
+    <SelectedZoneObject v-if="zoneEditorStore.selectedZoneObject" @update_depth="updateZoneObjectDepth" @delete="deleteZoneObject" @move="handleMove" @rotate="handleRotate" />
   </template>
 </template>
 
@@ -146,6 +146,7 @@ function addZoneObject(tile: Phaser.Tilemaps.Tile) {
     objectId: selectedObject.value!.id,
     object: selectedObject.value!,
     depth: 0,
+    isRotated: false,
     positionX: tile.x,
     positionY: tile.y
   }
@@ -208,7 +209,7 @@ function save() {
     tiles: tileArray,
     pvp: zone.value.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, positionX, positionY }) => ({ id, zoneId, objectId, depth, positionX, positionY }))
+    zoneObjects: zoneObjects.value.map(({ id, zoneId, objectId, depth, isRotated, positionX, positionY }) => ({ id, zoneId, objectId, depth, isRotated, positionX, positionY }))
   }
 
   if (zoneEditorStore.isSettingsModalShown) {
@@ -248,6 +249,13 @@ function handleMove() {
   console.log('move btn clicked')
 }
 
+function handleRotate(objectId: string) {
+  const object = zoneObjects.value.find(obj => obj.id === objectId);
+  if (object) {
+    object.isRotated = !object.isRotated;
+  }
+}
+
 // watch zoneEditorStore.objectList and update originX and originY of objects in zoneObjects
 watch(
   objectList,

src/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue

@@ -1,15 +1,15 @@
 <template>
-  <div class="flex flex-col items-center py-5 px-3 fixed bottom-14 right-0">
+  <div class="flex flex-col items-center py-5 px-3 fixed bottom-14 right-0" v-if="zoneEditorStore.selectedZoneObject">
     <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-cyan max-w-24 px-2 py-1 border rounded" type="number" name="depth" placeholder="Depth" :disabled="!isObjectSelected" />
+        <input v-model="objectDepth" @mousedown.stop @input="handleDepthInput" class="input-cyan max-w-24 px-2 py-1 border rounded" type="number" name="depth" placeholder="Depth" />
       </div>
-      <button @mousedown.stop @click="handleDelete" class="btn-bordeaux py-1.5 px-4" :disabled="!isObjectSelected">
+      <button @mousedown.stop @click="handleDelete" class="btn-bordeaux py-1.5 px-4">
         <img src="/assets/icons/trashcan.svg" class="w-4 h-4" alt="Delete" />
       </button>
-      <button @mousedown.stop @click="zoneEditorStore.setSelectedObject(zoneEditorStore.selectedZoneObject?.object)" class="btn-cyan py-1.5 px-4" :disabled="!isObjectSelected">S</button>
-      <button @mousedown.stop @click="handleMove" class="btn-cyan py-1.5 px-4 min-w-24" :disabled="!isObjectSelected">Move</button>
+      <button @mousedown.stop @click="handleRotate" class="btn-cyan py-1.5 px-4">Rotate</button>
+      <button @mousedown.stop @click="handleMove" class="btn-cyan py-1.5 px-4 min-w-24">Move</button>
     </div>
   </div>
 </template>
@@ -18,13 +18,11 @@
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { ref, computed, watch } from 'vue'
 
-const emit = defineEmits(['update_depth', 'move', 'delete'])
+const emit = defineEmits(['update_depth', 'move', 'delete', 'rotate'])
 const zoneEditorStore = useZoneEditorStore()
 
 const objectDepth = ref(zoneEditorStore.objectDepth)
 
-const isObjectSelected = computed(() => !!zoneEditorStore.selectedZoneObject)
-
 watch(
   () => zoneEditorStore.selectedZoneObject,
   (selectedZoneObject) => {
@@ -39,6 +37,10 @@ const handleDepthInput = () => {
   }
 }
 
+const handleRotate = () => {
+  emit('rotate', zoneEditorStore.selectedZoneObject?.id)
+}
+
 const handleMove = () => {
   emit('move')
 }

src/components/zone/Objects.vue

@@ -1,5 +1,5 @@
 <template>
-  <Image v-for="object in zoneStore.zone?.zoneObjects" :depth="calculateIsometricDepth(object.positionX, object.positionY, object.object.frameWidth, object.object.frameHeight)" :key="object.id" v-bind="getObjectImageProps(object)" />
+  <Image v-for="object in zoneStore.zone?.zoneObjects" :depth="calculateIsometricDepth(object.positionX, object.positionY, object.object.frameWidth, object.object.frameHeight)" :key="object.id" v-bind="getObjectImageProps(object)" :flipX="object.isRotated" />
   <!--    <Text v-for="object in zoneStore.zone?.zoneObjects" :key="object.id" :depth="99999" :text="Math.ceil(calculateIsometricDepth(object.positionX, object.positionY, object.object.frameWidth, object.object.frameHeight))" v-bind="getObjectProps(object)" />-->
 </template>