#81 : Prevent walk after dragging zone

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)

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)
 

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) => {