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

Minor improvements

Browse Source
This commit is contained in:
Dennis Postma 2025-03-21 21:55:12 +01:00
parent 0d5acd48ce
commit 27c775821a
1 changed files with 48 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
src/components/game/map/partials/ImageGroup.vue
View File

@ -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()
const partitionPoints = [0]
let baseDepth = 0
const props = defineProps<{
interface Props {
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((child, index) => {
const image = child as Phaser.GameObjects.Image
if (image && props.obj) {
image.flipX = props.obj.isRotated
orderedImages.forEach((image, index) => {
if (!props.obj || !props.mapObj || !props.x) return
if (props.obj.isRotated) {
var offsetNum = props.mapObj!.depthOffsets.length
image.flipX = props.obj.isRotated
//Could break in case of images with odd partion number
//Shifts image over so that it becomes aligned again after flipping
if (index < offsetNum / 2) {
image.x = props.x! - props.mapObj!.frameWidth / offsetNum
} else {
image.x = props.x! + props.mapObj!.frameWidth / offsetNum
}
image.setDepth(baseDepth - props.mapObj!.depthOffsets[index])
} else {
image.x = props.x!
image.setDepth(baseDepth + props.mapObj!.depthOffsets[index])
}
if (props.obj.isRotated) {
const offsetNum = props.mapObj.depthOffsets.length
const xOffset = props.mapObj.frameWidth / offsetNum
image.x = props.x + (index < offsetNum / 2 ? -xOffset : xOffset)
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) {
baseDepth = calculateIsometricDepth(props.obj!.positionX, props.obj!.positionY)
const initializeGroup = (): void => {
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
for (let j = 1; j <= sliceCount; j++) {
partitionPoints.push(j * (props.mapObj.frameWidth / sliceCount))
}
for (let i = 0; i < partitionPoints.length - 1; i++) {
createImagePartition(partitionPoints[i], partitionPoints[i + 1], props.mapObj.depthOffsets[i])
const points = partitionPoints.value
for (let i = 0; i < points.length - 1; i++) {
createImagePartition(points[i], points[i + 1], props.mapObj.depthOffsets[i])
}
}
initializeGroup()
onUnmounted(() => {
group.destroy(true, true)
})