npm update, mobile scroll fix, zone editor object refactor work, removed redundant div

This commit is contained in:
Dennis Postma 2024-10-18 00:20:30 +02:00
parent 774871510e
commit aff32c33c7
6 changed files with 54 additions and 14 deletions

View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta name="viewport" content="width=device-width">
<title>Sylvan Quest - Play</title>
</head>
<body>

6
package-lock.json generated
View File

@ -3642,9 +3642,9 @@
}
},
"node_modules/electron-to-chromium": {
"version": "1.5.40",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.40.tgz",
"integrity": "sha512-LYm78o6if4zTasnYclgQzxEcgMoIcybWOhkATWepN95uwVVWV0/IW10v+2sIeHE+bIYWipLneTftVyQm45UY7g==",
"version": "1.5.41",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.41.tgz",
"integrity": "sha512-dfdv/2xNjX0P8Vzme4cfzHqnPm5xsZXwsolTYr0eyW18IUmNyG08vL+fttvinTfhKfIKdRoqkDIC9e9iWQCNYQ==",
"dev": true,
"license": "ISC"
},

View File

@ -1,8 +1,6 @@
<template>
<div class="overflow-hidden">
<Notifications />
<component :is="currentScreen" />
</div>
<Notifications />
<component :is="currentScreen" />
</template>
<script setup lang="ts">

View File

@ -12,7 +12,7 @@
//Globals
body {
@apply bg-black m-0 select-none overscroll-none overflow-hidden;
@apply bg-black m-0 select-none;
-ms-overflow-style: none;
scrollbar-width: none;

View File

@ -1,6 +1,10 @@
<template>
<SelectedZoneObject v-if="selectedZoneObject" :zoneObject="selectedZoneObject" />
<Image v-for="object in zoneEditorStore.zone?.zoneObjects" :key="object.id" v-bind="getObjectImageProps(object)" />
<Image
v-for="object in zoneEditorStore.zone?.zoneObjects"
v-bind="getObjectImageProps(object)"
@pointerup="() => selectedZoneObject = object"
/>
</template>
<script setup lang="ts">
@ -10,7 +14,7 @@ import { Image, useScene } from 'phavuer'
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
import type { ZoneObject } from '@/types'
import SelectedZoneObject from '@/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue'
import { onBeforeMount, onBeforeUnmount, ref } from 'vue'
import { onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'
const scene = useScene()
const zoneEditorStore = useZoneEditorStore()
@ -24,9 +28,10 @@ function getObjectImageProps(object: ZoneObject) {
return {
// alpha: object.id === movingZoneObject.value?.id ? .5 : 1,
depth: calculateIsometricDepth(object.positionX, object.positionY, object.object.frameWidth, object.object.frameHeight),
tint: selectedZoneObject?.id === object.id ? 0x00ff00 : 0xffffff,
tint: selectedZoneObject.value?.id === object.id ? 0x00ff00 : 0xffffff,
x: tileToWorldX(props.tilemap as any, object.positionX, object.positionY),
y: tileToWorldY(props.tilemap as any, object.positionX, object.positionY),
flipX: object.isRotated,
texture: object.object.id,
originY: Number(object.object.originX),
originX: Number(object.object.originY)
@ -80,4 +85,42 @@ onBeforeUnmount(() => {
scene.input.off(Phaser.Input.Events.POINTER_DOWN, addZoneObject)
scene.input.off(Phaser.Input.Events.POINTER_MOVE, addZoneObject)
})
// watch zoneEditorStore.objectList and update originX and originY of objects in zoneObjects
watch(
zoneEditorStore.objectList,
(newObjects) => {
// Check if zoneEditorStore.zone is set
if (!zoneEditorStore.zone) return
// Update zoneObjects
zoneEditorStore.zone.zoneObjects = zoneEditorStore.zone.zoneObjects.map((zoneObject) => {
const updatedObject = newObjects.find((obj) => obj.id === zoneObject.objectId)
if (updatedObject) {
return {
...zoneObject,
object: {
...zoneObject.object,
originX: updatedObject.originX,
originY: updatedObject.originY
}
}
}
return zoneObject
})
// Update selectedObject if it's set
if (zoneEditorStore.selectedObject) {
const updatedObject = newObjects.find((obj) => obj.id === zoneEditorStore.selectedObject?.id)
if (updatedObject) {
zoneEditorStore.setSelectedObject({
...zoneEditorStore.selectedObject,
originX: updatedObject.originX,
originY: updatedObject.originY
})
}
}
},
{ deep: true }
)
</script>

View File

@ -1,6 +1,5 @@
<template>
<Image v-for="object in zoneStore.zone?.zoneObjects" :key="object.id" v-bind="getObjectImageProps(object)" />
<!-- <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)" />-->
<Image v-for="object in zoneStore.zone?.zoneObjects" v-bind="getObjectImageProps(object)" />
</template>
<script setup lang="ts">