imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

Refactor cameraControls and pointerHandlers, npm update, npm run format

Browse Source
This commit is contained in:
Dennis Postma
2024-10-02 16:17:34 +02:00
parent f6b6b4b8ea
commit 334ceaa8f3
11 changed files with 171 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
src/composables/pointerHandlers/useGamePointerHandlers.ts
View File

@ -1,81 +1,83 @@
import { ref, type Ref } from 'vue'
import { type Ref, 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(Date.now())
const dragTimeout = 250 // 250ms timeout for dragging, to prevent accidental clicks
const pointerStartPosition = ref({ x: 0, y: 0 })
const dragThreshold = 5 // pixels
function updateWaypoint(pointer: Phaser.Input.Pointer) {
const { x: px, y: py } = camera.getWorldPoint(pointer.x, pointer.y)
const pointerTile = getTile(px, py, layer)
waypoint.value.visible = !!pointerTile
if (!pointerTile) return
const worldPoint = tileToWorldXY(layer, pointerTile.x, pointerTile.y)
waypoint.value.x = worldPoint.positionX
waypoint.value.y = worldPoint.positionY + config.tile_size.y + 15
function updateWaypoint(worldX: number, worldY: number) {
const pointerTile = getTile(worldX, worldY, layer)
if (pointerTile) {
const worldPoint = tileToWorldXY(layer, pointerTile.x, pointerTile.y)
waypoint.value = {
visible: true,
x: worldPoint.positionX,
y: worldPoint.positionY + config.tile_size.y + 15
}
} else {
waypoint.value.visible = false
}
}
function dragZone(pointer: Phaser.Input.Pointer) {
if (!gameStore.isPlayerDraggingCamera) return
// Check if action is actually a drag by checking if the pointer has moved
if (pointer.prevPosition.x === pointer.x && pointer.prevPosition.y === pointer.y) return
const { x, y, prevPosition } = pointer
const { scrollX, scrollY, zoom } = camera
camera.setScroll(scrollX - (x - prevPosition.x) / zoom, scrollY - (y - prevPosition.y) / zoom)
// Check if camera has moved if not return
if (camera.scrollX === scrollX && camera.scrollY === scrollY) return
lastDragTime.value = Date.now()
function handlePointerDown(pointer: Phaser.Input.Pointer) {
pointerStartPosition.value = { x: pointer.x, y: pointer.y }
gameStore.setPlayerDraggingCamera(true)
}
function handlePointerMove(pointer: Phaser.Input.Pointer) {
dragZone(pointer)
updateWaypoint(pointer)
const { worldX, worldY } = pointer
updateWaypoint(worldX, worldY)
if (gameStore.isPlayerDraggingCamera) {
const distance = Phaser.Math.Distance.Between(pointerStartPosition.value.x, pointerStartPosition.value.y, pointer.x, pointer.y)
if (distance > dragThreshold) {
const { x, y, prevPosition } = pointer
const { scrollX, scrollY, zoom } = camera
camera.setScroll(scrollX - (x - prevPosition.x) / zoom, scrollY - (y - prevPosition.y) / zoom)
}
}
}
function clickTile(pointer: Phaser.Input.Pointer) {
const currentTime = Date.now()
if (currentTime - lastDragTime.value < dragTimeout) {
return
function handlePointerUp(pointer: Phaser.Input.Pointer) {
const distance = Phaser.Math.Distance.Between(pointerStartPosition.value.x, pointerStartPosition.value.y, pointer.x, pointer.y)
if (distance <= dragThreshold) {
const pointerTile = getTile(pointer.worldX, pointer.worldY, layer)
if (pointerTile) {
gameStore.connection?.emit('character:initMove', {
positionX: pointerTile.x,
positionY: pointerTile.y
})
}
}
const { x: px, y: py } = camera.getWorldPoint(pointer.x, pointer.y)
const pointerTile = getTile(px, py, layer)
if (!pointerTile) return
gameStore.connection?.emit('character:initMove', {
positionX: pointerTile.x,
positionY: pointerTile.y
})
gameStore.setPlayerDraggingCamera(false)
}
function handleZoom(pointer: Phaser.Input.Pointer) {
if (!(pointer.event instanceof WheelEvent) || !pointer.event.shiftKey) return
const deltaY = pointer.event.deltaY
let zoomLevel = camera.zoom - deltaY * 0.005
if(zoomLevel <= 1 || zoomLevel >= 3) return
camera.setZoom(zoomLevel)
if (pointer.event instanceof WheelEvent && pointer.event.shiftKey) {
const deltaY = pointer.event.deltaY
let zoomLevel = camera.zoom - deltaY * 0.005
zoomLevel = Phaser.Math.Clamp(zoomLevel, 1, 3)
camera.setZoom(zoomLevel)
}
}
const setupPointerHandlers = () => {
scene.input.on(Phaser.Input.Events.POINTER_UP, clickTile)
scene.input.on(Phaser.Input.Events.POINTER_DOWN, handlePointerDown)
scene.input.on(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
scene.input.on(Phaser.Input.Events.POINTER_UP, handlePointerUp)
scene.input.on(Phaser.Input.Events.POINTER_WHEEL, handleZoom)
}
const cleanupPointerHandlers = () => {
scene.input.off(Phaser.Input.Events.POINTER_UP, clickTile)
scene.input.off(Phaser.Input.Events.POINTER_DOWN, handlePointerDown)
scene.input.off(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
scene.input.off(Phaser.Input.Events.POINTER_UP, handlePointerUp)
scene.input.off(Phaser.Input.Events.POINTER_WHEEL, handleZoom)
}