1
0
forked from noxious/client

npm update, npm run format

This commit is contained in:
Dennis Postma 2025-03-21 21:52:37 +01:00
parent fc34a488d9
commit 0d5acd48ce
6 changed files with 40 additions and 54 deletions

6
package-lock.json generated
View File

@ -1998,9 +1998,9 @@
}
},
"node_modules/@types/node": {
"version": "20.17.24",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.24.tgz",
"integrity": "sha512-d7fGCyB96w9BnWQrOsJtpyiSaBcAYYr75bnK6ZRjDbql2cGLj/3GsL5OYmLPNq76l7Gf2q4Rv9J2o6h5CrD9sA==",
"version": "20.17.25",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.25.tgz",
"integrity": "sha512-bT+r2haIlplJUYtlZrEanFHdPIZTeiMeh/fSOEbOOfWf9uTn+lg8g0KU6Q3iMgjd9FLuuMAgfCNSkjUbxL6E3Q==",
"devOptional": true,
"license": "MIT",
"dependencies": {

View File

@ -56,23 +56,21 @@ onPreUpdate(() => {
orderedImages.forEach((child, index) => {
const image = child as Phaser.GameObjects.Image
if (image && props.obj) {
image.flipX = props.obj.isRotated;
image.flipX = props.obj.isRotated
if (props.obj.isRotated) {
var offsetNum = props.mapObj!.depthOffsets.length
//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)
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 {
} else {
image.x = props.x!
image.setDepth(baseDepth + props.mapObj!.depthOffsets[index])
}
@ -80,7 +78,6 @@ onPreUpdate(() => {
})
})
// Initial setup
if (props.mapObj && props.x && props.y) {
baseDepth = calculateIsometricDepth(props.obj!.positionX, props.obj!.positionY)
@ -88,13 +85,13 @@ if (props.mapObj && props.x && props.y) {
group.setXY(props.x, props.y)
group.setOrigin(props.mapObj.originX, props.mapObj.originY)
let sliceCount = props.mapObj.depthOffsets.length;
let sliceCount = props.mapObj.depthOffsets.length
for (let j = 1; j <= sliceCount; j++) {
partitionPoints.push(j * (props.mapObj.frameWidth/sliceCount))
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])
createImagePartition(partitionPoints[i], partitionPoints[i + 1], props.mapObj.depthOffsets[i])
}
}

View File

@ -3,26 +3,22 @@
<div class="relative p-2.5 flex flex-col items-center justify-center h-72 rounded-md default-border bg-gray">
<div class="grid grid-cols-[160px_auto_max-content] gap-12">
<div>
<input type="checkbox" checked v-model="showOrigin"><label>Show Origin</label>
<br>
<input type="checkbox" checked v-model="showPartitionOverlay"><label>Show Partitions</label>
<input type="checkbox" checked v-model="showOrigin" /><label>Show Origin</label>
<br />
<input type="checkbox" checked v-model="showPartitionOverlay" /><label>Show Partitions</label>
</div>
<div class="relative w-fit h-fit">
<img class="max-h-56" :src="`${config.server_endpoint}/textures/map_objects/${selectedMapObject?.id}.png`" :alt="'Object ' + selectedMapObject?.id" ref="imageRef" />
<svg ref="svg" class="absolute top-0 left-0 w-full h-full inline-block pointer-events-none">
<circle v-if="showOrigin && svg" r="4" :cx="mapObjectOriginX*width" :cy="mapObjectOriginY*height" stroke="white" stroke-width="2" />
<rect v-if="showPartitionOverlay && svg" v-for="(offset, index) in mapObjectDepthOffsets" style="opacity:0.5" stroke="red"
:x="index*(width/mapObjectDepthOffsets.length)"
:width="width/mapObjectDepthOffsets.length"
:y="0"
:height="height"/>
<circle v-if="showOrigin && svg" r="4" :cx="mapObjectOriginX * width" :cy="mapObjectOriginY * height" stroke="white" stroke-width="2" />
<rect v-if="showPartitionOverlay && svg" v-for="(offset, index) in mapObjectDepthOffsets" style="opacity: 0.5" stroke="red" :x="index * (width / mapObjectDepthOffsets.length)" :width="width / mapObjectDepthOffsets.length" :y="0" :height="height" />
</svg>
</div>
<div>
<button class="btn-cyan px-4 py-1.5 min-w-24" @click="mapObjectDepthOffsets.push(0)">Add Partition</button>
<p>Depth Offset</p>
<div class="text-white grid grid-cols-[120px_80px_auto] items-baseline gap-2" v-for="(offset, index) in mapObjectDepthOffsets">
<input class="input-field max-h-4 mt-2" type="number" :value="offset" @change="setPartitionDepth($event, index)">
<input class="input-field max-h-4 mt-2" type="number" :value="offset" @change="setPartitionDepth($event, index)" />
<button @click="mapObjectDepthOffsets.splice(index, 1)">Remove</button>
</div>
</div>
@ -77,15 +73,15 @@ import ChipsInput from '@/components/forms/ChipsInput.vue'
import { socketManager } from '@/managers/SocketManager'
import { MapObjectStorage } from '@/storage/storages'
import { useAssetManagerStore } from '@/stores/assetManagerStore'
import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue'
import { Rectangle } from 'phavuer'
import { useElementSize } from '@vueuse/core'
import { Rectangle } from 'phavuer'
import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue'
const assetManagerStore = useAssetManagerStore()
const selectedMapObject = computed(() => assetManagerStore.selectedMapObject)
const svg = useTemplateRef('svg')
const {width, height} = useElementSize(svg)
const { width, height } = useElementSize(svg)
const mapObjectName = ref('')
const mapObjectTags = ref<string[]>([])
@ -96,8 +92,8 @@ const mapObjectFrameRate = ref(0)
const mapObjectFrameWidth = ref(0)
const mapObjectFrameHeight = ref(0)
const imageRef = ref<HTMLImageElement | null>(null)
const showOrigin = ref(true);
const showPartitionOverlay = ref(true);
const showOrigin = ref(true)
const showPartitionOverlay = ref(true)
if (!selectedMapObject.value) {
console.error('No map mapObject selected')
@ -114,7 +110,7 @@ if (selectedMapObject.value) {
mapObjectFrameHeight.value = selectedMapObject.value.frameHeight
}
const setPartitionDepth = (event: any, idx: number) => mapObjectDepthOffsets.value[idx] = Number.parseInt(event.target.value)
const setPartitionDepth = (event: any, idx: number) => (mapObjectDepthOffsets.value[idx] = Number.parseInt(event.target.value))
async function removeObject() {
if (!selectedMapObject.value) return

View File

@ -24,16 +24,16 @@
<div v-if="imageDimensions[index]" class="absolute bottom-1 right-1 bg-black/50 text-white text-xs px-1 py-0.5 rounded transition-opacity font-default">{{ imageDimensions[index].width }}x{{ imageDimensions[index].height }}</div>
</div>
</div>
<div class="flex items-center mb-3">
<div class="mr-3 space-x-2">
<button class="btn-cyan px-4 py-1.5 min-w-24 text-left" type="button" @click.stop.prevent="openEditorModal(action)">
Editor
<div class="flex">
<small class="text-xs font-default">{{ action.action }}</small>
</div>
</button>
</div>
<div class="flex items-center mb-3">
<div class="mr-3 space-x-2">
<button class="btn-cyan px-4 py-1.5 min-w-24 text-left" type="button" @click.stop.prevent="openEditorModal(action)">
Editor
<div class="flex">
<small class="text-xs font-default">{{ action.action }}</small>
</div>
</button>
</div>
</div>
</div>
<SpriteEditor
v-for="[actionId, editorData] in Array.from(openEditors.entries())"

View File

@ -235,7 +235,7 @@ onUnmounted(() => {
mapEditor.reset()
})
setInterval( () => {
setInterval(() => {
scene.children.queueDepthSort()
}, 0.2)

View File

@ -1,20 +1,13 @@
<template>
<PlacedMapObject
v-if="mapEditor.tool.value === 'pencil' && mapEditor.drawMode.value === 'map_object' && mapEditor.isPlacedMapObjectPreviewEnabled.value && mapEditor.selectedMapObject.value && previewPlacedMapObject"
:tileMap
:tileMapLayer
:key="previewPlacedMapObject?.id"
:placedMapObject="previewPlacedMapObject as PlacedMapObjectT"
v-if="mapEditor.tool.value === 'pencil' && mapEditor.drawMode.value === 'map_object' && mapEditor.isPlacedMapObjectPreviewEnabled.value && mapEditor.selectedMapObject.value && previewPlacedMapObject"
:tileMap
:tileMapLayer
:key="previewPlacedMapObject?.id"
:placedMapObject="previewPlacedMapObject as PlacedMapObjectT"
/>
<SelectedPlacedMapObjectComponent v-if="mapEditor.selectedPlacedObject.value" :key="mapEditor.selectedPlacedObject.value.id" :map :placedMapObject="mapEditor.selectedPlacedObject.value" @move="moveMapObject" @rotate="rotatePlacedMapObject" @delete="deletePlacedMapObject" />
<PlacedMapObject
v-for="placedMapObject in mapEditor.currentMap.value?.placedMapObjects"
:tileMap
:tileMapLayer
:placedMapObject
@pointerdown="clickPlacedMapObject(placedMapObject)"
:key="`${placedMapObject.id}-${placedMapObjectKey}`"
/>
<PlacedMapObject v-for="placedMapObject in mapEditor.currentMap.value?.placedMapObjects" :tileMap :tileMapLayer :placedMapObject @pointerdown="clickPlacedMapObject(placedMapObject)" :key="`${placedMapObject.id}-${placedMapObjectKey}`" />
</template>
<script setup lang="ts">