From ea29b6f3a2da51d8ba85c53cc03b6ad7786a6a8e Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Mon, 29 Jul 2024 09:01:35 +0200
Subject: [PATCH] Worked on pathfinding, character animation & rotation, few
 enhancements

---
 package-lock.json                             |  6 ++--
 src/components/World.vue                      |  6 ++--
 src/components/sprites/Character.vue          | 31 ++++++++++-------
 src/components/utilities/Controls.vue         |  3 +-
 .../partials/sprite/SpriteDetails.vue         | 33 ++++++++++---------
 .../sprite/partials/SpriteImagesInput.vue     |  2 +-
 src/composables/useCameraControls.ts          |  2 +-
 src/composables/usePointerHandlers.ts         | 12 +++----
 src/config.ts                                 |  2 +-
 9 files changed, 49 insertions(+), 48 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 511beee..2f092c3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -657,9 +657,9 @@
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.25.0",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.0.tgz",
-      "integrity": "sha512-ubALThHQy4GCf6mbb+5ZRNmLLCI7bJ3f8Q6LHBSRlSKSWj5a7dSUzJBLv3VuIhFrFPgjF4IzPF567YG/HSCdZA==",
+      "version": "7.25.1",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.1.tgz",
+      "integrity": "sha512-LrHHoWq08ZpmmFqBAzN+hUdWwy5zt7FGa/hVwMcOqW6OVtwqaoD5utfuGYU87JYxdZgLUvktAsn37j/sYR9siA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
diff --git a/src/components/World.vue b/src/components/World.vue
index ec32aca..c7cf1fd 100644
--- a/src/components/World.vue
+++ b/src/components/World.vue
@@ -65,7 +65,6 @@ const sortedItems = computed(() => {
 
 // Event listeners
 gameStore.connection?.on('zone:character:join', (data: CharacterT) => {
-  console.log('character:zone:join', data)
   zoneStore.addCharacter(data)
 })
 
@@ -74,7 +73,6 @@ gameStore.connection?.on('zone:character:leave', (character_id: number) => {
 })
 
 gameStore.connection?.on('character:moved', (data: CharacterT) => {
-  console.log('character:moved', data)
   zoneStore.updateCharacter(data)
 })
 
@@ -91,9 +89,9 @@ onBeforeMount(() => {
   }
 
   gameStore.connection?.emit('character:zone:request', { zoneId: gameStore.character?.zoneId }, (response: TResponse) => {
-    console.log(response)
     zoneStore.setZone(response.zone)
-    zoneStore.setCharacters(response.characters)
+    const uniqueCharacters = [...new Set(response.characters)]
+    zoneStore.setCharacters(uniqueCharacters)
     updateZoneTiles(zoneTilemap, tiles, response.zone)
     zoneObjects.value = response.zone.zoneObjects
   })
diff --git a/src/components/sprites/Character.vue b/src/components/sprites/Character.vue
index 1b312e3..d7820ef 100644
--- a/src/components/sprites/Character.vue
+++ b/src/components/sprites/Character.vue
@@ -24,15 +24,17 @@
       :x="tileToWorldX(props.layer, props.character.position_x, props.character.position_y)"
       :y="tileToWorldY(props.layer, props.character.position_x, props.character.position_y)"
       :origin-y="1"
+      :flipX="props.character.rotation === 6 || props.character.rotation === 4"
+      :flipY="false"
     />
   </Container>
 </template>
 
 <script lang="ts" setup>
-import { Container, Image, Rectangle, Text } from 'phavuer'
+import { Container, Image, Rectangle, RoundRectangle, Text } from 'phavuer'
 import { type Character as CharacterT } from '@/types'
 import { tileToWorldX, tileToWorldY } from '@/services/zone'
-import { ref, watch, computed } from 'vue'
+import { watch, computed } from 'vue'
 
 interface Props {
   layer: Phaser.Tilemaps.TilemapLayer
@@ -44,6 +46,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const charTexture = computed(() => {
+  console.log('Character texture:', props.character)
   if (!props.character?.characterType?.sprite) {
     console.log('No character type or sprite found')
     return 'idle_left_down'
@@ -61,17 +64,21 @@ const charTexture = computed(() => {
   return `${spriteId}-idle_left_down` // Default fallback
 })
 
-watch(() => props.character, (newCharacter) => {
-  if (newCharacter) {
-    console.log('Character updated:', newCharacter)
-    console.log('Rotation:', newCharacter.rotation)
-    console.log('Current texture:', charTexture.value)
-  } else {
-    console.log('Character is null or undefined')
-  }
-}, { deep: true })
+watch(
+  () => props.character,
+  (newCharacter) => {
+    if (newCharacter) {
+      console.log('Character updated:', newCharacter)
+      console.log('Rotation:', newCharacter.rotation)
+      console.log('Current texture:', charTexture.value)
+    } else {
+      console.log('Character is null or undefined')
+    }
+  },
+  { deep: true }
+)
 
 const createText = (text: Phaser.GameObjects.Text) => {
   text.setLetterSpacing(1.5)
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/utilities/Controls.vue b/src/components/utilities/Controls.vue
index 2433c73..4a6d759 100644
--- a/src/components/utilities/Controls.vue
+++ b/src/components/utilities/Controls.vue
@@ -5,7 +5,6 @@
 <script setup lang="ts">
 import { Image, useScene } from 'phavuer'
 import { onBeforeUnmount, ref } from 'vue'
-import { useZoneEditorStore } from '@/stores/zoneEditor'
 import { usePointerHandlers } from '@/composables/usePointerHandlers'
 import { useCameraControls } from '@/composables/useCameraControls'
 
@@ -27,4 +26,4 @@ const { setupPointerHandlers, cleanupPointerHandlers } = usePointerHandlers(scen
 
 setupPointerHandlers()
 onBeforeUnmount(cleanupPointerHandlers)
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/utilities/assetManager/partials/sprite/SpriteDetails.vue b/src/components/utilities/assetManager/partials/sprite/SpriteDetails.vue
index 371d9d9..02a9eb3 100644
--- a/src/components/utilities/assetManager/partials/sprite/SpriteDetails.vue
+++ b/src/components/utilities/assetManager/partials/sprite/SpriteDetails.vue
@@ -6,14 +6,14 @@
           <label class="mb-1.5 font-titles" for="name">Name</label>
           <input v-model="spriteName" class="input-cyan" type="text" name="name" placeholder="New sprite" />
         </div>
-      
+
         <div class="w-full flex gap-2 mt-2 pb-4 relative">
           <button class="btn-cyan px-4 py-2 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="saveSprite">Save</button>
           <button class="btn-bordeaux px-4 py-2 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="removeSprite">Remove</button>
           <div class="w-[calc(100%_+_32px)] absolute left-[-15px] bottom-0 h-px bg-cyan-200"></div>
         </div>
       </div>
-      
+
       <button class="btn-cyan py-2 my-4" type="button" @click.prevent="addNewImage">New action</button>
       <Accordion v-for="action in spriteActions" :key="action.id">
         <template #header>
@@ -118,19 +118,20 @@ function saveSprite() {
   const updatedSprite = {
     id: selectedSprite.value.id,
     name: spriteName.value,
-    spriteActions: spriteActions.value?.map((action) => {
-      return {
-        action: action.action,
-        sprites: action.sprites,
-        origin_x: action.origin_x,
-        origin_y: action.origin_y,
-        isAnimated: action.isAnimated,
-        isLooping: action.isLooping,
-        frameSpeed: action.frameSpeed,
-        frameWidth: action.frameWidth,
-        frameHeight: action.frameHeight,
-      }
-    }) ?? []
+    spriteActions:
+      spriteActions.value?.map((action) => {
+        return {
+          action: action.action,
+          sprites: action.sprites,
+          origin_x: action.origin_x,
+          origin_y: action.origin_y,
+          isAnimated: action.isAnimated,
+          isLooping: action.isLooping,
+          frameSpeed: action.frameSpeed,
+          frameWidth: action.frameWidth,
+          frameHeight: action.frameHeight
+        }
+      }) ?? []
   }
 
   gameStore.connection?.emit('gm:sprite:update', updatedSprite, (response: boolean) => {
@@ -161,7 +162,7 @@ function addNewImage() {
     isLooping: false,
     frameSpeed: 0,
     frameWidth: 0,
-    frameHeight: 0,
+    frameHeight: 0
   }
 
   if (!spriteActions.value) {
diff --git a/src/components/utilities/assetManager/partials/sprite/partials/SpriteImagesInput.vue b/src/components/utilities/assetManager/partials/sprite/partials/SpriteImagesInput.vue
index fe4a38b..f36f98e 100644
--- a/src/components/utilities/assetManager/partials/sprite/partials/SpriteImagesInput.vue
+++ b/src/components/utilities/assetManager/partials/sprite/partials/SpriteImagesInput.vue
@@ -94,4 +94,4 @@ const drop = (event: DragEvent, dropIndex: number) => {
   }
   draggedIndex.value = null
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/composables/useCameraControls.ts b/src/composables/useCameraControls.ts
index 5cad3c2..1c04ec5 100644
--- a/src/composables/useCameraControls.ts
+++ b/src/composables/useCameraControls.ts
@@ -43,4 +43,4 @@ export function useCameraControls(scene: Phaser.Scene): any {
     camera,
     isDragging
   }
-}
\ No newline at end of file
+}
diff --git a/src/composables/usePointerHandlers.ts b/src/composables/usePointerHandlers.ts
index ae63b46..2bd08a6 100644
--- a/src/composables/usePointerHandlers.ts
+++ b/src/composables/usePointerHandlers.ts
@@ -4,13 +4,7 @@ import { getTile, tileToWorldXY } from '@/services/zone'
 import { useGameStore } from '@/stores/game'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
 
-export function usePointerHandlers(
-  scene: Phaser.Scene,
-  layer: Phaser.Tilemaps.TilemapLayer,
-  waypoint: Ref<{ visible: boolean; x: number; y: number }>,
-  camera: Ref<Phaser.Cameras.Scene2D.Camera>,
-  isDragging: Ref<boolean>
-) {
+export function usePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilemaps.TilemapLayer, waypoint: Ref<{ visible: boolean; x: number; y: number }>, camera: Ref<Phaser.Cameras.Scene2D.Camera>, isDragging: Ref<boolean>) {
   const gameStore = useGameStore()
   const zoneEditorStore = useZoneEditorStore()
 
@@ -68,6 +62,7 @@ export function usePointerHandlers(
   function setupPointerHandlers() {
     scene.input.on(Phaser.Input.Events.POINTER_MOVE, updateWaypoint)
     scene.input.on(Phaser.Input.Events.POINTER_WHEEL, handleZoom)
+    scene.input.on(Phaser.Input.Events.POINTER_MOVE, dragZone)
 
     // These are for in-game only, not for in the zone editor
     if (!zoneEditorStore.active) {
@@ -78,6 +73,7 @@ export function usePointerHandlers(
   function cleanupPointerHandlers() {
     scene.input.off(Phaser.Input.Events.POINTER_MOVE, updateWaypoint)
     scene.input.off(Phaser.Input.Events.POINTER_WHEEL, handleZoom)
+    scene.input.off(Phaser.Input.Events.POINTER_MOVE, dragZone)
 
     // These are for in-game only, not for in the zone editor
     if (!zoneEditorStore.active) {
@@ -89,4 +85,4 @@ export function usePointerHandlers(
     setupPointerHandlers,
     cleanupPointerHandlers
   }
-}
\ No newline at end of file
+}
diff --git a/src/config.ts b/src/config.ts
index 4a929c1..763f5d6 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,4 +1,4 @@
-const dev: boolean = false
+const dev: boolean = true
 
 export default {
   name: 'New Quest',