noxious/client
6
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki 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)
}

41
src/composables/pointerHandlers/useZoneEditorPointerHandlers.ts
View File

@ -1,8 +1,8 @@
import { computed, type Ref } from 'vue'
import { getTile, tileToWorldXY } from '@/composables/zoneComposable'
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
import config from '@/config'
import { useGameStore } from '@/stores/gameStore'
import config from '@/config'
export function useZoneEditorPointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilemaps.TilemapLayer, waypoint: Ref<{ visible: boolean; x: number; y: number }>, camera: Phaser.Cameras.Scene2D.Camera) {
const gameStore = useGameStore()
@ -13,20 +13,24 @@ export function useZoneEditorPointerHandlers(scene: Phaser.Scene, layer: Phaser.
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
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
const { x, y, prevPosition } = pointer
const { scrollX, scrollY, zoom } = camera
camera.setScroll(scrollX - (x - prevPosition.x) / zoom, scrollY - (y - prevPosition.y) / zoom)
if (gameStore.isPlayerDraggingCamera) {
const { x, y, prevPosition } = pointer
const { scrollX, scrollY, zoom } = camera
camera.setScroll(scrollX - (x - prevPosition.x) / zoom, scrollY - (y - prevPosition.y) / zoom)
}
}
function handlePointerMove(pointer: Phaser.Input.Pointer) {
@ -37,12 +41,13 @@ export function useZoneEditorPointerHandlers(scene: Phaser.Scene, layer: Phaser.
}
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 <= 0 || 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
if (zoomLevel > 0 && zoomLevel < 3) {
camera.setZoom(zoomLevel)
}
}
}
const setupPointerHandlers = () => {

27
src/composables/useCameraControls.ts
View File

@ -1,34 +1,15 @@
import { useGameStore } from '@/stores/gameStore'
import { watch } from 'vue'
import { useZoneStore } from '@/stores/zoneStore'
export function useCameraControls(scene: Phaser.Scene): any {
export function useCameraControls(scene: Phaser.Scene) {
const gameStore = useGameStore()
const zoneStore = useZoneStore()
const camera = scene.cameras.main
function onPointerDown(pointer: Phaser.Input.Pointer) {
if (gameStore.isPlayerDraggingCamera) return
gameStore.setPlayerDraggingCamera(true)
}
function onPointerUp() {
if (!gameStore.isPlayerDraggingCamera) return
gameStore.setPlayerDraggingCamera(false)
}
watch(
() => zoneStore.characterLoaded,
(characterLoaded) => {
if (!characterLoaded) return
// scene.cameras.main.startFollow(scene.children.getByName(gameStore.character!.name) as Phaser.GameObjects.Container);
}
)
const onPointerDown = () => gameStore.setPlayerDraggingCamera(true)
const onPointerUp = () => gameStore.setPlayerDraggingCamera(false)
scene.input.on(Phaser.Input.Events.POINTER_DOWN, onPointerDown)
scene.input.on(Phaser.Input.Events.POINTER_UP, onPointerUp)
return {
camera
}
return { camera }
}

23
src/composables/usePointerHandlers.ts
View File

@ -1,32 +1,23 @@
import { computed, type Ref, watch } from 'vue'
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
import { useGamePointerHandlers } from '@/composables/pointerHandlers/useGamePointerHandlers'
import { useZoneEditorPointerHandlers } from '@/composables/pointerHandlers/useZoneEditorPointerHandlers'
import { useGameStore } from '@/stores/gameStore'
import { useGamePointerHandlers } from './pointerHandlers/useGamePointerHandlers'
import { useZoneEditorPointerHandlers } from './pointerHandlers/useZoneEditorPointerHandlers'
export function usePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilemaps.TilemapLayer, waypoint: Ref<{ visible: boolean; x: number; y: number }>, camera: Phaser.Cameras.Scene2D.Camera) {
const zoneEditorStore = useZoneEditorStore()
const gameHandlers = useGamePointerHandlers(scene, layer, waypoint, camera)
const zoneEditorHandlers = useZoneEditorPointerHandlers(scene, layer, waypoint, camera)
const currentHandlers = computed(() => (zoneEditorStore.active ? zoneEditorHandlers : gameHandlers))
const setupPointerHandlers = () => {
currentHandlers.value.setupPointerHandlers()
}
const cleanupPointerHandlers = () => {
currentHandlers.value.cleanupPointerHandlers()
}
const setupPointerHandlers = () => currentHandlers.value.setupPointerHandlers()
const cleanupPointerHandlers = () => currentHandlers.value.cleanupPointerHandlers()
watch(
() => zoneEditorStore.active,
(newValue, oldValue) => {
if (newValue !== oldValue) {
cleanupPointerHandlers()
setupPointerHandlers()
}
() => {
cleanupPointerHandlers()
setupPointerHandlers()
}
)