From cffab009747146710ce52aae69f11bb26ca25ad7 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Sat, 28 Sep 2024 19:19:00 +0200
Subject: [PATCH] #81 : Prevent walk after dragging zone

---
 src/components/zone/Zone.vue                          |  2 +-
 .../pointerHandlers/useGamePointerHandlers.ts         | 11 ++++++++++-
 src/screens/Game.vue                                  |  2 +-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/zone/Zone.vue b/src/components/zone/Zone.vue
index 6b38d48..8a2d6d4 100644
--- a/src/components/zone/Zone.vue
+++ b/src/components/zone/Zone.vue
@@ -61,7 +61,7 @@ gameStore.connection!.on('character:move', (data: ExtendedCharacterT) => {
   zoneStore.updateCharacter(data)
 })
 
-onMounted(() => {
+onBeforeMount(() => {
   gameStore.connection!.emit('zone:character:join', async (response: zoneLoadData) => {
     // Fetch assets for new zone
     await gameStore.fetchZoneAssets(response.zone.id)
diff --git a/src/composables/pointerHandlers/useGamePointerHandlers.ts b/src/composables/pointerHandlers/useGamePointerHandlers.ts
index 046a1bf..b6d1b2d 100644
--- a/src/composables/pointerHandlers/useGamePointerHandlers.ts
+++ b/src/composables/pointerHandlers/useGamePointerHandlers.ts
@@ -1,10 +1,12 @@
-import { type Ref } from 'vue'
+import { ref, type Ref } from 'vue'
 import { getTile, tileToWorldXY } from '@/composables/zoneComposable'
 import { useGameStore } from '@/stores/gameStore'
 import config from '@/config'
 
 export function useGamePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilemaps.TilemapLayer, waypoint: Ref<{ visible: boolean; x: number; y: number }>, camera: Phaser.Cameras.Scene2D.Camera) {
   const gameStore = useGameStore()
+  const lastDragTime = ref(0)
+  const dragTimeout = 500 // 500ms timeout for dragging, to prevent accidental clicks
 
   function updateWaypoint(pointer: Phaser.Input.Pointer) {
     const { x: px, y: py } = camera.getWorldPoint(pointer.x, pointer.y)
@@ -24,6 +26,8 @@ export function useGamePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilema
     const { x, y, prevPosition } = pointer
     const { scrollX, scrollY, zoom } = camera
     camera.setScroll(scrollX - (x - prevPosition.x) / zoom, scrollY - (y - prevPosition.y) / zoom)
+
+    lastDragTime.value = Date.now()
   }
 
   function handlePointerMove(pointer: Phaser.Input.Pointer) {
@@ -32,6 +36,11 @@ export function useGamePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilema
   }
 
   function clickTile(pointer: Phaser.Input.Pointer) {
+    const currentTime = Date.now()
+    if (currentTime - lastDragTime.value < dragTimeout) {
+      return
+    }
+
     const { x: px, y: py } = camera.getWorldPoint(pointer.x, pointer.y)
     const pointerTile = getTile(px, py, layer)
 
diff --git a/src/screens/Game.vue b/src/screens/Game.vue
index 0e7d575..50ea860 100644
--- a/src/screens/Game.vue
+++ b/src/screens/Game.vue
@@ -63,7 +63,7 @@ const gameConfig = {
   type: Phaser.AUTO, // AUTO, CANVAS, WEBGL, HEADLESS
   mode: Phaser.Scale.RESIZE,
   resolution: 3,
-  pixelArt: true
+  render: { pixelArt: true, antialias: false }
 }
 
 const createGame = (game: Phaser.Game) => {