npm run format, started working on follow player logic, refactor some camera logic

src/components/gameMaster/GmTools.vue

@@ -19,29 +19,26 @@ import { onMounted, ref } from 'vue'
 
 const zoneEditorStore = useZoneEditorStore()
 const gameStore = useGameStore()
-const modalWidth = ref(200);
+const modalWidth = ref(200)
-const modalHeight = ref(160);
+const modalHeight = ref(160)
 
-let posXY = ref({x: 0, y: 0});
+let posXY = ref({ x: 0, y: 0 })
 
 onMounted(() => {
-
   window.addEventListener('resize', () => {
-    posXY.value = customPositionGmPanel(modalWidth.value);
+    posXY.value = customPositionGmPanel(modalWidth.value)
   })
-
 })
 
 const customPositionGmPanel = (modalWidth: number) => {
   const padding = 25
   const width = window.innerWidth
 
-  const x = width - (modalWidth+4) - 25
+  const x = width - (modalWidth + 4) - 25
   const y = padding
 
   return { x, y }
 }
 
 posXY.value = customPositionGmPanel(modalWidth.value)
-
 </script>

src/components/gameMaster/zoneEditor/ZoneEditor.vue

@@ -29,15 +29,7 @@ import { Container, Image, useScene } from 'phavuer'
 import { storeToRefs } from 'pinia'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import {
+import { calculateIsometricDepth, loadAssets, placeTile, setAllTiles, sortByIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
-  calculateIsometricDepth,
-  loadAssets,
-  placeTile,
-  setAllTiles,
-  sortByIsometricDepth,
-  tileToWorldX,
-  tileToWorldY
-} from '@/composables/zoneComposable'
 import { ZoneEventTileType, type ZoneObject, type ZoneEventTile, type Zone } from '@/types'
 import { uuidv4 } from '@/utilities'
 import config from '@/config'
@@ -323,5 +315,5 @@ const setSelectedZoneObject = (zoneObject: ZoneObject | null) => {
 onBeforeMount(async () => {
   await gameStore.fetchAllZoneAssets()
   await loadAssets(scene)
-});
+})
 </script>

src/components/gameMaster/zoneEditor/partials/Toolbar.vue

@@ -68,9 +68,7 @@
 
         <div class="w-px bg-cyan"></div>
 
-        <button class="flex justify-center items-center min-w-10 p-0 relative" @click="handleClick('settings')" v-if="zoneEditorStore.zone">
+        <button class="flex justify-center items-center min-w-10 p-0 relative" @click="handleClick('settings')" v-if="zoneEditorStore.zone"><img class="invert w-5 h-5" src="/assets/icons/zoneEditor/gear.svg" alt="Zone settings" /> <span class="ml-2.5">(Z)</span></button>
-          <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/gear.svg" alt="Zone settings" /> <span class="ml-2.5">(Z)</span>
-        </button>
       </div>
 
       <div class="flex gap-2.5 ml-auto">
@@ -163,14 +161,14 @@ onBeforeUnmount(() => {
 })
 
 function handleClick(tool: string) {
-  if(tool === 'settings') {
+  if (tool === 'settings') {
     zoneEditorStore.toggleSettingsModal()
   } else {
     zoneEditorStore.setTool(tool)
   }
 
-  selectPencilOpen.value = tool === 'pencil' ? !selectPencilOpen.value : false;
+  selectPencilOpen.value = tool === 'pencil' ? !selectPencilOpen.value : false
-  selectEraserOpen.value = tool === 'eraser' ? !selectEraserOpen.value : false;
+  selectEraserOpen.value = tool === 'eraser' ? !selectEraserOpen.value : false
 }
 
 // Key bindings
@@ -180,15 +178,15 @@ function initKeyShortcuts(event: KeyboardEvent) {
   if (document.activeElement?.tagName === 'INPUT') return
 
   const keyActions: any = {
-    'm': 'move',
+    m: 'move',
-    'p': 'pencil',
+    p: 'pencil',
-    'e': 'eraser',
+    e: 'eraser',
-    'b': 'paint',
+    b: 'paint',
-    'z': 'settings'
+    z: 'settings'
-  };
+  }
 
   if (keyActions.hasOwnProperty(event.key)) {
-    handleClick(keyActions[event.key]);
+    handleClick(keyActions[event.key])
   }
 }
 

src/components/sprites/Character.vue

@@ -8,8 +8,7 @@
     <RoundRectangle :origin-x="0.5" :origin-y="18.5" :fillColor="0xffffff" :width="74" :height="6" :radius="5" />
     <RoundRectangle :origin-x="0.5" :origin-y="36.4" :fillColor="0x00b3b3" :width="70" :height="3" :radius="5" />
   </Container>
-  <!--  <Text :text="isometricDepth" :depth="isometricDepth" :x="currentX" :y="currentY" />-->
+  <Container :depth="isometricDepth" v-if="props.character" :x="currentX" :y="currentY" ref="charContainer">
-  <Container :depth="isometricDepth" v-if="props.character" :x="currentX" :y="currentY">
     <Image v-if="!props.character.characterType" texture="character" :origin-y="1" />
     <Sprite v-else :texture="charTexture" :play="props.character.isMoving ? charTexture : undefined" :origin-y="1" :flipX="props.character.rotation === 6 || props.character.rotation === 4" :flipY="false" />
   </Container>
@@ -29,6 +28,8 @@ enum Direction {
   NOCHANGE
 }
 
+const charContainer = ref<Phaser.GameObjects.Container | null>(null)
+
 interface Props {
   layer: Phaser.Tilemaps.TilemapLayer
   character?: CharacterT
@@ -38,14 +39,15 @@ const props = withDefaults(defineProps<Props>(), {
   character: undefined
 })
 
-const isometricDepth = ref(calculateIsometricDepth(props.character.positionX, props.character.positionY, 28, 94, true))
+const gameStore = useGameStore()
+const scene = useScene()
+
+const isometricDepth = ref(calculateIsometricDepth(props.character!.positionX, props.character!.positionY, 28, 94, true))
 const currentX = ref(0)
 const currentY = ref(0)
-const gameStore = useGameStore();
 const tween = ref<Phaser.Tweens.Tween | null>(null)
 const isInitialPosition = ref(true)
 
-
 const calculateLocalDepth = (x: number, y: number, width: number, height: number, isCharacter: boolean) => {
   isometricDepth.value = calculateIsometricDepth(x, y, width, height, isCharacter)
 }
@@ -54,11 +56,6 @@ const updatePosition = (x: number, y: number, direction: Direction) => {
   const targetX = tileToWorldX(props.layer, x, y)
   const targetY = tileToWorldY(props.layer, x, y)
 
-  // Used for camera resize calculation to center on Character.
-  if(gameStore.character) {
-    gameStore.character.relativePosition = { x: targetX, y: targetY };
-  }
-
   if (isInitialPosition.value) {
     currentX.value = targetX
     currentY.value = targetY
@@ -165,6 +162,13 @@ const createText = (text: Phaser.GameObjects.Text) => {
 }
 
 onMounted(() => {
+  /**
+   * @TODO: Put this at an appropriate place not in this component
+   */
+  // Check if player is this character, then lock with camera
+  if (props.character && props.character.id === gameStore.character?.id) {
+    scene.cameras.main.startFollow(charContainer.value as Phaser.GameObjects.Container)
+  }
   if (props.character) {
     updatePosition(props.character.positionX, props.character.positionY, Direction.POSITIVE)
   }

src/components/utilities/Modal.vue

@@ -157,7 +157,7 @@ function handleResize() {
 function initializePosition() {
   width.value = Math.min(props.modalWidth, window.innerWidth)
   height.value = Math.min(props.modalHeight, window.innerHeight)
-  if(props.modalPositionX !== 0 && props.modalPositionY !== 0) {
+  if (props.modalPositionX !== 0 && props.modalPositionY !== 0) {
     console.log(props.modalPositionX)
     console.log(props.modalPositionY)
     x.value = props.modalPositionX
@@ -226,7 +226,7 @@ onMounted(() => {
   window.addEventListener('mouseup', stopDrag)
   window.addEventListener('mousemove', resizeModal)
   window.addEventListener('mouseup', stopResize)
-  if(props.modalPositionX !== 0 && props.modalPositionY !== 0) {
+  if (props.modalPositionX !== 0 && props.modalPositionY !== 0) {
     window.addEventListener('resize', handleResize)
   }
   initializePosition()
@@ -237,7 +237,7 @@ onUnmounted(() => {
   window.removeEventListener('mouseup', stopDrag)
   window.removeEventListener('mousemove', resizeModal)
   window.removeEventListener('mouseup', stopResize)
-  if(props.modalPositionX !== 0 && props.modalPositionY !== 0) {
+  if (props.modalPositionX !== 0 && props.modalPositionY !== 0) {
     window.removeEventListener('resize', handleResize)
   }
 })

src/components/zone/Zone.vue

@@ -26,7 +26,6 @@ type zoneLoadData = {
   characters: CharacterT[]
 }
 
-
 gameStore.connection!.emit('zone:character:join', async (response: zoneLoadData) => {
   // Fetch assets for new zone
   await gameStore.fetchZoneAssets(response.zone.id)
@@ -35,7 +34,6 @@ gameStore.connection!.emit('zone:character:join', async (response: zoneLoadData)
   // Set zone and characters
   zoneStore.setZone(response.zone)
   zoneStore.setCharacters(response.characters)
-  scene.cameras.main.setScroll(-(scene.cameras.main.worldView.width/2) - gameStore.character.relativePosition.x, -(scene.cameras.main.worldView.height/2) + gameStore.character.relativePosition.y)
 })
 
 // Event listeners
@@ -57,12 +55,6 @@ gameStore.connection!.on('zone:character:teleport', async (data: zoneLoadData) =
 
   zoneStore.setZone(data.zone)
   zoneStore.setCharacters(data.characters)
-
-  const character = gameStore.character;
-  // Position character centered on zone change or teleport
-  const posX = tileToWorldX(tileMap.value, character.positionX, character.positionY)
-  const posY = tileToWorldY(tileMap.value, character.positionX, character.positionY)
-  scene.cameras.main.setScroll(-(scene.cameras.main.worldView.width/2) + posX, -(scene.cameras.main.worldView.height/2) + posY)
 })
 
 gameStore.connection!.on('zone:character:join', async (data: ExtendedCharacterT) => {

src/composables/pointerHandlers/useGamePointerHandlers.ts

@@ -3,27 +3,31 @@ 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: Ref<Phaser.Cameras.Scene2D.Camera>, isDragging: Ref<boolean>) {
+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()
 
   function updateWaypoint(pointer: Phaser.Input.Pointer) {
-    const { x: px, y: py } = camera.value.getWorldPoint(pointer.x, pointer.y)
+    const { x: px, y: py } = camera.getWorldPoint(pointer.x, pointer.y)
     const pointerTile = getTile(px, py, layer)
 
     waypoint.value.visible = !!pointerTile
-    if (pointerTile) {
+    if (!pointerTile) {
-      const worldPoint = tileToWorldXY(layer, pointerTile.x, pointerTile.y)
+      return
-      waypoint.value.x = worldPoint.positionX
-      waypoint.value.y = worldPoint.positionY + config.tile_size.y + 15
     }
+
+    const worldPoint = tileToWorldXY(layer, pointerTile.x, pointerTile.y)
+    waypoint.value.x = worldPoint.positionX
+    waypoint.value.y = worldPoint.positionY + config.tile_size.y + 15
   }
 
   function dragZone(pointer: Phaser.Input.Pointer) {
-    if (isDragging.value) {
+    if (!gameStore.isPlayerDraggingCamera) {
-      const { x, y, prevPosition } = pointer
+      return
-      const { scrollX, scrollY, zoom } = camera.value
-      camera.value.setScroll(scrollX - (x - prevPosition.x) / zoom, scrollY - (y - prevPosition.y) / zoom)
     }
+
+    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) {
@@ -32,22 +36,26 @@ export function useGamePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilema
   }
 
   function clickTile(pointer: Phaser.Input.Pointer) {
-    const { x: px, y: py } = camera.value.getWorldPoint(pointer.x, pointer.y)
+    const { x: px, y: py } = camera.getWorldPoint(pointer.x, pointer.y)
     const pointerTile = getTile(px, py, layer)
 
-    if (pointerTile) {
+    if (!pointerTile) {
-      gameStore.connection?.emit('character:initMove', {
+      return
-        positionX: pointerTile.x,
-        positionY: pointerTile.y
-      })
     }
+
+    gameStore.connection?.emit('character:initMove', {
+      positionX: pointerTile.x,
+      positionY: pointerTile.y
+    })
   }
 
   function handleZoom({ event, deltaY }: Phaser.Input.Pointer) {
     if (event instanceof WheelEvent && event.shiftKey) {
-      scene.scale.setZoom(scene.scale.zoom - deltaY * 0.01)
+      return
-      camera.value = scene.cameras.main
     }
+
+    scene.scale.setZoom(scene.scale.zoom - deltaY * 0.01)
+    camera = scene.cameras.main
   }
 
   const setupPointerHandlers = () => {

src/composables/pointerHandlers/useZoneEditorPointerHandlers.ts

@@ -2,28 +2,32 @@ import { computed, type Ref, ref } from 'vue'
 import { getTile, tileToWorldXY } from '@/composables/zoneComposable'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import config from '@/config'
+import { useGameStore } from '@/stores/gameStore'
 
-export function useZoneEditorPointerHandlers(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 useZoneEditorPointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilemaps.TilemapLayer, waypoint: Ref<{ visible: boolean; x: number; y: number }>, camera: Phaser.Cameras.Scene2D.Camera) {
+  const gameStore = useGameStore()
   const zoneEditorStore = useZoneEditorStore()
   const isMoveTool = computed(() => zoneEditorStore.tool === 'move')
 
   function updateWaypoint(pointer: Phaser.Input.Pointer) {
-    const { x: px, y: py } = camera.value.getWorldPoint(pointer.x, pointer.y)
+    const { x: px, y: py } = camera.getWorldPoint(pointer.x, pointer.y)
     const pointerTile = getTile(px, py, layer)
 
     waypoint.value.visible = !!pointerTile
     if (pointerTile) {
-      const worldPoint = tileToWorldXY(layer, pointerTile.x, pointerTile.y)
+      return
-      waypoint.value.x = worldPoint.positionX
-      waypoint.value.y = worldPoint.positionY + config.tile_size.y + 15
     }
+
+    const worldPoint = tileToWorldXY(layer, pointerTile.x, pointerTile.y)
+    waypoint.value.x = worldPoint.positionX
+    waypoint.value.y = worldPoint.positionY + config.tile_size.y + 15
   }
 
   function dragZone(pointer: Phaser.Input.Pointer) {
-    if (isDragging.value) {
+    if (gameStore.isPlayerDraggingCamera) {
       const { x, y, prevPosition } = pointer
-      const { scrollX, scrollY, zoom } = camera.value
+      const { scrollX, scrollY, zoom } = camera
-      camera.value.setScroll(scrollX - (x - prevPosition.x) / zoom, scrollY - (y - prevPosition.y) / zoom)
+      camera.setScroll(scrollX - (x - prevPosition.x) / zoom, scrollY - (y - prevPosition.y) / zoom)
     }
   }
 
@@ -35,10 +39,12 @@ export function useZoneEditorPointerHandlers(scene: Phaser.Scene, layer: Phaser.
   }
 
   function handleZoom({ event, deltaY }: Phaser.Input.Pointer) {
-    if (event instanceof WheelEvent && event.shiftKey) {
+    if (event! instanceof WheelEvent && !event.shiftKey) {
-      scene.scale.setZoom(scene.scale.zoom - deltaY * 0.01)
+      return
-      camera.value = scene.cameras.main
     }
+
+    scene.scale.setZoom(scene.scale.zoom - deltaY * 0.01)
+    camera = scene.cameras.main
   }
 
   const setupPointerHandlers = () => {

src/composables/useCameraControls.ts

@@ -3,35 +3,22 @@ import { useGameStore } from '@/stores/gameStore'
 
 export function useCameraControls(scene: Phaser.Scene): any {
   const gameStore = useGameStore()
-  const camera = ref(scene.cameras.main)
+  const camera = scene.cameras.main
-  const isDragging = ref(false)
-
-  // Resize center camera on character.
-  window.addEventListener('resize', () => {
-    console.log('woep')
-    // Need to change camera position next frame
-    setTimeout(() => {
-      scene.cameras.main.setScroll(-(scene.cameras.main.worldView.width/2) + gameStore.character.relativePosition.x, -(scene.cameras.main.worldView.height/2) + gameStore.character.relativePosition.y)
-    }, 0)
-  })
 
   function onPointerDown(pointer: Phaser.Input.Pointer) {
     if (pointer.event instanceof MouseEvent || pointer.event.shiftKey) {
-      isDragging.value = true
+      gameStore.setPlayerDraggingCamera(true)
-      gameStore.setMovingCamera(true)
     }
   }
 
   function onPointerUp() {
-    isDragging.value = false
+    gameStore.setPlayerDraggingCamera(false)
-    gameStore.setMovingCamera(false)
   }
 
   scene.input.on(Phaser.Input.Events.POINTER_DOWN, onPointerDown)
   scene.input.on(Phaser.Input.Events.POINTER_UP, onPointerUp)
 
   return {
-    camera,
+    camera
-    isDragging
   }
 }

src/composables/zoneComposable.ts

@@ -61,11 +61,11 @@ export const sortByIsometricDepth = <T extends { positionX: number; positionY: n
 export const loadAssets = (scene: Phaser.Scene): Promise<void> => {
   return new Promise((resolve) => {
     const gameStore = useGameStore()
-    let addedLoad = false;
+    let addedLoad = false
 
     gameStore.assets.forEach((asset) => {
       if (scene.load.textureManager.exists(asset.key)) return
-      addedLoad = true;
+      addedLoad = true
       if (asset.group === 'sprite_animations') {
         scene.load.spritesheet(asset.key, config.server_endpoint + asset.url, { frameWidth: asset.frameWidth ?? 0, frameHeight: asset.frameHeight ?? 0 })
       } else {
@@ -73,7 +73,7 @@ export const loadAssets = (scene: Phaser.Scene): Promise<void> => {
       }
     })
 
-    if(addedLoad) {
+    if (addedLoad) {
       scene.load.start()
       scene.load.on(Phaser.Loader.Events.COMPLETE, () => {
         resolve()

src/config.ts

@@ -1,4 +1,4 @@
-const dev: boolean = false
+const dev: boolean = true
 
 export default {
   name: 'New Quest',

src/screens/Game.vue

@@ -106,7 +106,7 @@ const preloadScene = async (scene: Phaser.Scene) => {
     progressBar.fillRect(width / 2 - 180 + 10, height / 2 + 10, 300 * value, 30)
   })
 
-  scene.load.on(Phaser.Loader.Events.COMPLETE, function() {
+  scene.load.on(Phaser.Loader.Events.COMPLETE, function () {
     progressBar.destroy()
     progressBox.destroy()
     loadingText.destroy()
@@ -145,7 +145,7 @@ const createScene = async (scene: Phaser.Scene) => {
       frames: scene.anims.generateFrameNumbers(asset.key, { start: 0, end: 4 }),
       repeat: -1
     })
-  });
+  })
 }
 
 onBeforeUnmount(() => {

src/stores/gameStore.ts

@@ -13,7 +13,8 @@ export const useGameStore = defineStore('game', {
     user: null as User | null,
     character: null as Character | null,
     isGmPanelOpen: false,
-    isMovingCamera: false,
+    isPlayerDraggingCamera: false,
+    isCameraFollowingCharacter: false,
     isChatOpen: false,
     isUserPanelOpen: false
   }),
@@ -93,11 +94,17 @@ export const useGameStore = defineStore('game', {
     toggleGmPanel() {
       this.isGmPanelOpen = !this.isGmPanelOpen
     },
-    toggleMovingCamera() {
+    togglePlayerDraggingCamera() {
-      this.isMovingCamera = !this.isMovingCamera
+      this.isPlayerDraggingCamera = !this.isPlayerDraggingCamera
     },
-    setMovingCamera(moving: boolean) {
+    setPlayerDraggingCamera(moving: boolean) {
-      this.isMovingCamera = moving
+      this.isPlayerDraggingCamera = moving
+    },
+    toggleCameraFollowingCharacter() {
+      this.isCameraFollowingCharacter = !this.isCameraFollowingCharacter
+    },
+    setCameraFollowingCharacter(following: boolean) {
+      this.isCameraFollowingCharacter = following
     },
     toggleChat() {
       this.isChatOpen = !this.isChatOpen
@@ -145,7 +152,7 @@ export const useGameStore = defineStore('game', {
       this.user = null
       this.character = null
       this.isGmPanelOpen = false
-      this.isMovingCamera = false
+      this.isPlayerDraggingCamera = false
       this.isChatOpen = false
       this.isUserPanelOpen = false
     }

src/types.ts

@@ -142,7 +142,6 @@ export type Character = {
   role: string
   positionX: number
   positionY: number
-  relativePosition: {x: number, y: number}
   rotation: number
   zoneId: number
   zone: Zone