diff --git a/index.html b/index.html
index 742d964..7649e46 100644
--- a/index.html
+++ b/index.html
@@ -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>
diff --git a/package-lock.json b/package-lock.json
index 33a369a..aa49034 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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"
},
diff --git a/src/App.vue b/src/App.vue
index efc6e89..c4d4ede 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,6 @@
<template>
- <div class="overflow-hidden">
- <Notifications />
- <component :is="currentScreen" />
- </div>
+ <Notifications />
+ <component :is="currentScreen" />
</template>
<script setup lang="ts">
diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index bd77ab3..fcba8d7 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -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;
diff --git a/src/components/gameMaster/zoneEditor/Objects.vue b/src/components/gameMaster/zoneEditor/Objects.vue
index 33d9c1c..152cd5b 100644
--- a/src/components/gameMaster/zoneEditor/Objects.vue
+++ b/src/components/gameMaster/zoneEditor/Objects.vue
@@ -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>
diff --git a/src/components/zone/Objects.vue b/src/components/zone/Objects.vue
index 0298637..cbb347f 100644
--- a/src/components/zone/Objects.vue
+++ b/src/components/zone/Objects.vue
@@ -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">