From 99bb1555a07e1493be351edba3ad6d15576f9bef Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Sat, 1 Feb 2025 04:30:07 +0100
Subject: [PATCH] Listen for attack events. TODO: finish anim. handling

---
 src/application/types.ts                              |  1 +
 src/components/game/character/Character.vue           |  8 ++++++--
 src/components/game/map/Map.vue                       |  4 ++++
 src/composables/controls/useGameControlsComposable.ts |  7 +++++++
 src/stores/mapStore.ts                                | 11 +++++++++++
 5 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/application/types.ts b/src/application/types.ts
index d61527a..09154b9 100644
--- a/src/application/types.ts
+++ b/src/application/types.ts
@@ -183,6 +183,7 @@ export type Character = {
 export type MapCharacter = {
   character: Character
   isMoving: boolean
+  isAttacking?: boolean
 }
 
 export type CharacterItem = {
diff --git a/src/components/game/character/Character.vue b/src/components/game/character/Character.vue
index a1ecb00..a6e46a5 100644
--- a/src/components/game/character/Character.vue
+++ b/src/components/game/character/Character.vue
@@ -110,6 +110,7 @@ const currentDirection = computed(() => {
 })
 
 const currentAction = computed(() => {
+  if (props.mapCharacter.isAttacking) return 'attack'
   return props.mapCharacter.isMoving ? 'walk' : 'idle'
 })
 
@@ -138,7 +139,9 @@ const handlePositionUpdate = (newValues: any, oldValues: any) => {
     updatePosition(newValues.positionX, newValues.positionY, direction)
   }
 
-  if (newValues.isMoving !== oldValues?.isMoving || newValues.rotation !== oldValues?.rotation) {
+  if (newValues.isMoving !== oldValues?.isMoving ||
+    newValues.rotation !== oldValues?.rotation ||
+    newValues.attack !== oldValues?.attack) {
     updateSprite()
   }
 }
@@ -148,7 +151,8 @@ watch(
     positionX: props.mapCharacter.character.positionX,
     positionY: props.mapCharacter.character.positionY,
     isMoving: props.mapCharacter.isMoving,
-    rotation: props.mapCharacter.character.rotation
+    rotation: props.mapCharacter.character.rotation,
+    isAttacking: props.mapCharacter.isAttacking
   }),
   handlePositionUpdate
 )
diff --git a/src/components/game/map/Map.vue b/src/components/game/map/Map.vue
index fb95343..da80c68 100644
--- a/src/components/game/map/Map.vue
+++ b/src/components/game/map/Map.vue
@@ -32,6 +32,10 @@ gameStore.connection?.on('map:character:leave', (characterId: UUID) => {
   mapStore.removeCharacter(characterId)
 })
 
+gameStore.connection?.on('map:character:attack', (characterId: UUID) => {
+  mapStore.updateCharacterProperty(characterId, 'isAttacking', true)
+})
+
 gameStore.connection?.on('map:character:move', (data: { characterId: UUID; positionX: number; positionY: number; rotation: number; isMoving: boolean }) => {
   mapStore.updateCharacterPosition(data)
   // @TODO: Replace with universal class, composable or store
diff --git a/src/composables/controls/useGameControlsComposable.ts b/src/composables/controls/useGameControlsComposable.ts
index 6fff96f..d2df587 100644
--- a/src/composables/controls/useGameControlsComposable.ts
+++ b/src/composables/controls/useGameControlsComposable.ts
@@ -34,6 +34,8 @@ export function useGameControlsComposable(scene: Phaser.Scene, layer: Phaser.Til
   function handleKeyDown(event: KeyboardEvent) {
     if (!gameStore.character) return
 
+    // console.log(event.key)
+
     if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key)) {
       pressedKeys.add(event.key)
 
@@ -43,6 +45,11 @@ export function useGameControlsComposable(scene: Phaser.Scene, layer: Phaser.Til
         moveCharacter() // Move immediately on first press
       }
     }
+
+    // Attack on CTRL
+    if (event.key === 'Control') {
+      gameStore.connection?.emit('map:character:attack')
+    }
   }
 
   function handleKeyUp(event: KeyboardEvent) {
diff --git a/src/stores/mapStore.ts b/src/stores/mapStore.ts
index 313924e..522d9ed 100644
--- a/src/stores/mapStore.ts
+++ b/src/stores/mapStore.ts
@@ -31,6 +31,17 @@ export const useMapStore = defineStore('map', {
       const index = this.characters.findIndex((char) => char.character.id === updatedCharacter.character.id)
       if (index !== -1) this.characters[index] = updatedCharacter
     },
+    // Property is mapCharacter key
+    updateCharacterProperty<K extends keyof MapCharacter>(
+      characterId: UUID,
+      property: K,
+      value: MapCharacter[K]
+    ) {
+      const character = this.characters.find((char) => char.character.id === characterId)
+      if (character) {
+        character[property] = value
+      }
+    },
     removeCharacter(characterId: UUID) {
       this.characters = this.characters.filter((char) => char.character.id !== characterId)
     },