Worked on character animations

src/components/World.vue

@@ -25,7 +25,7 @@ import { onBeforeMount, onBeforeUnmount, ref, toRaw, computed } from 'vue'
 import Controls from '@/components/utilities/Controls.vue'
 import { useGameStore } from '@/stores/game'
 import { useAssetStore } from '@/stores/assets'
-import type { Zone, ZoneObject, Character as CharacterT } from '@/types'
+import type { Zone, ZoneObject, ExtendedCharacter } from '@/types'
 import TilemapLayer = Phaser.Tilemaps.TilemapLayer
 import { useZoneStore } from '@/stores/zone'
 import Character from '@/components/sprites/Character.vue'
@@ -64,7 +64,7 @@ const sortedItems = computed(() => {
 })
 
 // Event listeners
-gameStore.connection?.on('zone:character:join', (data: CharacterT) => {
+gameStore.connection?.on('zone:character:join', (data: ExtendedCharacter) => {
   zoneStore.addCharacter(data)
 })
 
@@ -72,7 +72,7 @@ gameStore.connection?.on('zone:character:leave', (character_id: number) => {
   zoneStore.removeCharacter(character_id)
 })
 
-gameStore.connection?.on('character:moved', (data: CharacterT) => {
+gameStore.connection?.on('character:moved', (data: ExtendedCharacter) => {
   zoneStore.updateCharacter(data)
 })
 
@@ -85,7 +85,7 @@ onBeforeMount(() => {
 
   type TResponse = {
     zone: Zone
-    characters: CharacterT[]
+    characters: ExtendedCharacter[]
   }
 
   gameStore.connection?.emit('character:zone:request', { zoneId: gameStore.character?.zoneId }, (response: TResponse) => {

src/components/sprites/Character.vue

@@ -1,8 +1,7 @@
 <template>
   <Container v-if="props.character">
-    <Rectangle :x="tileToWorldX(props.layer, props.character.position_x, props.character.position_y)" :y="tileToWorldY(props.layer, props.character.position_x, props.character.position_y)" :origin-x="0.5" :origin-y="16" :fillColor="0xffffff" :width="74" :height="8">
-      <Rectangle :x="tileToWorldX(props.layer, props.character.position_x, props.character.position_y)" :y="tileToWorldY(props.layer, props.character.position_x, props.character.position_y)" :origin-x="0.5" :origin-y="31.5" :fillColor="0x09ad19" :width="70" :height="4" />
-    </Rectangle>
+    <RoundRectangle :x="tileToWorldX(props.layer, props.character.position_x, props.character.position_y)" :y="tileToWorldY(props.layer, props.character.position_x, props.character.position_y)" :origin-x="0.5" :origin-y="16" :fillColor="0xffffff" :width="74" :height="8" :radius="4" />
+    <RoundRectangle :x="tileToWorldX(props.layer, props.character.position_x, props.character.position_y)" :y="tileToWorldY(props.layer, props.character.position_x, props.character.position_y)" :origin-x="0.5" :origin-y="31.5" :fillColor="0x09ad19" :width="70" :height="4" :radius="4" />
     <Text
       @create="createText"
       :text="props.character.name"
@@ -16,23 +15,34 @@
         fontSize: '14px'
       }"
     />
-    <Image v-if="!props.character.characterType" texture="character" :x="tileToWorldX(props.layer, props.character.position_x, props.character.position_y)" :y="tileToWorldY(props.layer, props.character.position_x, props.character.position_y)" :origin-y="1" />
+    <Container v-if="!props.character.characterType">
+      <Image texture="character" :x="tileToWorldX(props.layer, props.character.position_x, props.character.position_y)" :y="tileToWorldY(props.layer, props.character.position_x, props.character.position_y)" :origin-y="1" />
+    </Container>
+    <Container v-else>
+      <Image v-if="!props.character.isMoving"
+        :texture="charTexture"
+        :x="tileToWorldX(props.layer, props.character.position_x, props.character.position_y)"
+        :y="tileToWorldY(props.layer, props.character.position_x, props.character.position_y)"
+        :origin-y="1"
+        :flipX="props.character.rotation === 6 || props.character.rotation === 4"
+        :flipY="false"
+      />
+      <Sprite v-else
+        :play="charTexture + '-anim'"
+        :x="tileToWorldX(props.layer, props.character.position_x, props.character.position_y)"
+        :y="tileToWorldY(props.layer, props.character.position_x, props.character.position_y)"
+        :origin-y="1"
+        :flipX="props.character.rotation === 6 || props.character.rotation === 4"
+        :flipY="false"
+      />
+    </Container>
 
-    <Image
-      v-else
-      :texture="charTexture"
-      :x="tileToWorldX(props.layer, props.character.position_x, props.character.position_y)"
-      :y="tileToWorldY(props.layer, props.character.position_x, props.character.position_y)"
-      :origin-y="1"
-      :flipX="props.character.rotation === 6 || props.character.rotation === 4"
-      :flipY="false"
-    />
   </Container>
 </template>
 
 <script lang="ts" setup>
-import { Container, Image, Rectangle, RoundRectangle, Text } from 'phavuer'
-import { type Character as CharacterT } from '@/types'
+import { Container, Image, RoundRectangle, Sprite, Text } from 'phavuer'
+import { type ExtendedCharacter as CharacterT } from '@/types'
 import { tileToWorldX, tileToWorldY } from '@/services/zone'
 import { watch, computed } from 'vue'
 
@@ -54,14 +64,15 @@ const charTexture = computed(() => {
 
   const rotation = props.character.rotation
   const spriteId = props.character.characterType.sprite.id
+  const action = props.character.isMoving ? 'walk' : 'idle'
 
   if (rotation === 2 || rotation === 4) {
-    return `${spriteId}-idle_left_down`
+    return `${spriteId}-${action}_left_down`
   } else if (rotation === 0 || rotation === 6) {
-    return `${spriteId}-idle_right_up`
+    return `${spriteId}-${action}_right_up`
   }
 
-  return `${spriteId}-idle_left_down` // Default fallback
+  return `${spriteId}-${action}_left_down` // Default fallback
 })
 
 watch(

src/components/utilities/Modal.vue

@@ -1,7 +1,7 @@
 <template>
   <Teleport to="body">
     <div v-if="isModalOpenRef" class="fixed bg-gray-300/80 border-solid border-2 border-cyan-200 z-50 flex flex-col backdrop-blur-sm shadow-lg" :style="modalStyle">
-      <div @mousedown="startDrag" class="cursor-move p-2.5 flex justify-between items-center border-solid border-0 border-b border-cyan-200">
+      <div @mousedown="startDrag" class="cursor-move p-2.5 flex justify-between items-center">
         <slot name="modalHeader" />
         <div class="flex gap-2.5">
           <button @click="toggleFullScreen" class="w-5 h-5 m-0 p-0 relative hover:scale-110 transition-transform duration-300 ease-in-out" v-if="canFullScreen">

src/components/utilities/assetManager/partials/sprite/SpriteDetails.vue

@@ -71,6 +71,7 @@ import { useAssetManagerStore } from '@/stores/assetManager'
 import { useGameStore } from '@/stores/game'
 import Accordion from '@/components/utilities/Accordion.vue'
 import SpriteActionsInput from '@/components/utilities/assetManager/partials/sprite/partials/SpriteImagesInput.vue'
+import { uuidv4 } from '@/utilities'
 
 const gameStore = useGameStore()
 const assetManagerStore = useAssetManagerStore()
@@ -143,10 +144,6 @@ function saveSprite() {
   })
 }
 
-function uuidv4() {
-  return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c) => (+c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))).toString(16))
-}
-
 function addNewImage() {
   if (!selectedSprite.value) return
 

src/components/utilities/zoneEditor/ZoneEditor.vue

@@ -43,15 +43,12 @@ import ZoneSettings from '@/components/utilities/zoneEditor/partials/ZoneSetting
 import { calculateDepth, placeTile, setAllTiles, tileToWorldX, tileToWorldY, sortByDepth } from '@/services/zone'
 import { useAssetStore } from '@/stores/assets'
 import Objects from '@/components/utilities/zoneEditor/partials/Objects.vue'
-import type { Zone, ZoneEventTile, ZoneObject } from '@/types'
+import type { ZoneEventTile, ZoneObject } from '@/types'
 import { storeToRefs } from 'pinia'
 import ZoneList from '@/components/utilities/zoneEditor/partials/ZoneList.vue'
 import Tileset = Phaser.Tilemaps.Tileset
 import TilemapLayer = Phaser.Tilemaps.TilemapLayer
-
-function uuidv4() {
-  return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c) => (+c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))).toString(16))
-}
+import { uuidv4 } from '@/utilities'
 
 const scene = useScene()
 const gameStore = useGameStore()