noxious/client
6
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

#91 : Zone editor: allow objects to be rotated

Browse Source
This commit is contained in:
Dennis Postma
2024-10-01 22:00:08 +02:00
parent 7a50385420
commit f6b6b4b8ea
5 changed files with 93 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/gameMaster/zoneEditor/ZoneEditor.vue
View File

@ -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,