From 0f01a4ec7ce7c38fb83101991fd16c9a8d8ee62b Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Mon, 23 Sep 2024 14:02:00 +0200
Subject: [PATCH] Added option to set rotation on teleport tiles

---
 .../gameMaster/zoneEditor/ZoneEditor.vue      |  4 +-
 .../zoneEditor/partials/TeleportModal.vue     | 54 ++++++++++---------
 src/stores/zoneEditorStore.ts                 |  4 +-
 src/types.ts                                  |  1 +
 4 files changed, 35 insertions(+), 28 deletions(-)

diff --git a/src/components/gameMaster/zoneEditor/ZoneEditor.vue b/src/components/gameMaster/zoneEditor/ZoneEditor.vue
index ce2d45f..2cffa06 100644
--- a/src/components/gameMaster/zoneEditor/ZoneEditor.vue
+++ b/src/components/gameMaster/zoneEditor/ZoneEditor.vue
@@ -170,7 +170,8 @@ function addZoneEventTile(tile: Phaser.Tilemaps.Tile) {
         ? {
             toZoneId: zoneEditorStore.teleportSettings.toZoneId,
             toPositionX: zoneEditorStore.teleportSettings.toPositionX,
-            toPositionY: zoneEditorStore.teleportSettings.toPositionY
+            toPositionY: zoneEditorStore.teleportSettings.toPositionY,
+            toRotation: zoneEditorStore.teleportSettings.toRotation
           }
         : undefined
   }
@@ -215,6 +216,7 @@ function save() {
   }
 
   gameStore.connection?.emit('gm:zone_editor:zone:update', data, (response: Zone) => {
+    console.log('zone updated')
     zoneEditorStore.setZone(response)
   })
 }
diff --git a/src/components/gameMaster/zoneEditor/partials/TeleportModal.vue b/src/components/gameMaster/zoneEditor/partials/TeleportModal.vue
index ed4ae65..1433a02 100644
--- a/src/components/gameMaster/zoneEditor/partials/TeleportModal.vue
+++ b/src/components/gameMaster/zoneEditor/partials/TeleportModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <Modal :is-modal-open="true" @modal:close="() => zoneEditorStore.setTool('move')" :modal-width="300" :modal-height="250" :is-resizable="false">
+  <Modal :is-modal-open="true" @modal:close="() => zoneEditorStore.setTool('move')" :modal-width="300" :modal-height="350" :is-resizable="false">
     <template #modalHeader>
       <h3 class="m-0 font-medium shrink-0">Teleport settings</h3>
     </template>
@@ -16,6 +16,15 @@
               <label for="positionY">Position Y</label>
               <input class="input-cyan" v-model="toPositionY" name="positionY" id="positionY" type="number" />
             </div>
+            <div class="form-field-full">
+              <label for="rotation">Rotation</label>
+              <select v-model="toRotation" class="input-cyan" name="rotation" id="rotation">
+                <option :value="0">North</option>
+                <option :value="2">East</option>
+                <option :value="4">South</option>
+                <option :value="6">West</option>
+              </select>
+            </div>
             <div class="form-field-full">
               <label for="toZoneId">Zone to teleport to</label>
               <select v-model="toZoneId" class="input-cyan" name="toZoneId" id="toZoneId">
@@ -40,9 +49,7 @@ import type { Zone } from '@/types'
 const zoneEditorStore = useZoneEditorStore()
 const gameStore = useGameStore()
 
-onMounted(async () => {
-  fetchZones()
-})
+onMounted(fetchZones)
 
 function fetchZones() {
   gameStore.connection?.emit('gm:zone_editor:zone:list', {}, (response: Zone[]) => {
@@ -50,31 +57,26 @@ function fetchZones() {
   })
 }
 
-const toPositionX = ref(zoneEditorStore.teleportSettings.toPositionX)
-const toPositionY = ref(zoneEditorStore.teleportSettings.toPositionY)
-const toZoneId = ref(zoneEditorStore.teleportSettings.toZoneId)
+const { toPositionX, toPositionY, toRotation, toZoneId } = useRefTeleportSettings()
 
-watch(toZoneId, (value) => {
+function useRefTeleportSettings() {
+  const settings = zoneEditorStore.teleportSettings
+  return {
+    toPositionX: ref(settings.toPositionX),
+    toPositionY: ref(settings.toPositionY),
+    toRotation: ref(settings.toRotation),
+    toZoneId: ref(settings.toZoneId)
+  }
+}
+
+watch([toPositionX, toPositionY, toRotation, toZoneId], updateTeleportSettings)
+
+function updateTeleportSettings() {
   zoneEditorStore.setTeleportSettings({
     toPositionX: toPositionX.value,
     toPositionY: toPositionY.value,
-    toZoneId: value
-  })
-})
-
-watch(toPositionX, (value) => {
-  zoneEditorStore.setTeleportSettings({
-    toPositionX: value,
-    toPositionY: toPositionY.value,
+    toRotation: toRotation.value,
     toZoneId: toZoneId.value
   })
-})
-
-watch(toPositionY, (value) => {
-  zoneEditorStore.setTeleportSettings({
-    toPositionX: toPositionX.value,
-    toPositionY: value,
-    toZoneId: toZoneId.value
-  })
-})
-</script>
+}
+</script>
\ No newline at end of file
diff --git a/src/stores/zoneEditorStore.ts b/src/stores/zoneEditorStore.ts
index 5396b5b..bd4bd63 100644
--- a/src/stores/zoneEditorStore.ts
+++ b/src/stores/zoneEditorStore.ts
@@ -6,6 +6,7 @@ type TeleportSettings = {
   toZoneId: number
   toPositionX: number
   toPositionY: number
+  toRotation: number
 }
 
 export const useZoneEditorStore = defineStore('zoneEditor', {
@@ -36,7 +37,8 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
     teleportSettings: {
       toZoneId: 0,
       toPositionX: 0,
-      toPositionY: 0
+      toPositionY: 0,
+      toRotation: 0
     }
   }),
   actions: {
diff --git a/src/types.ts b/src/types.ts
index 55fafe7..510d20b 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -95,6 +95,7 @@ export type ZoneEventTileTeleport = {
   toZone: Zone
   toPositionX: number
   toPositionY: number
+  toRotation: number
 }
 
 export type User = {