walk anims

src/components/sprites/Character.vue

@@ -1,8 +1,9 @@
 <template>
   <Container v-if="props.character">
-    <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" />
+    <RoundRectangle :tween="tween" :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 :tween="tween" :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
+      :tween="tween"
       @create="createText"
       :text="props.character.name"
       :x="tileToWorldX(props.layer, props.character.position_x, props.character.position_y)"
@@ -19,16 +20,10 @@
       <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"
+      <Sprite
+        :tween="tween"
         :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'"
+        :play="props.character.isMoving ? charTexture : undefined"
         :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"
@@ -41,10 +36,11 @@
 </template>
 
 <script lang="ts" setup>
+import config from '@/config'
 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'
+import { watch, computed, ref } from 'vue'
 
 interface Props {
   layer: Phaser.Tilemaps.TilemapLayer
@@ -55,6 +51,39 @@ const props = withDefaults(defineProps<Props>(), {
   character: undefined
 })
 
+const currentVisualPosition = ref({ x: 0, y: 0 })
+
+const tween = computed(() => {
+  if (!props.character || !props.layer) return null
+
+  const { position_x, position_y, isMoving } = props.character
+
+  if (!isMoving) return null
+
+  const targetX = tileToWorldX(props.layer, position_x, position_y)
+  const targetY = tileToWorldY(props.layer, position_x, position_y)
+
+  // Use the current visual position for the starting point
+  const { x: currentX, y: currentY } = currentVisualPosition.value
+
+  const tweenConfig = {
+    x: targetX,
+    y: targetY,
+    duration: 750,
+    ease: 'Power2',
+    repeat: 0,
+    yoyo: false,
+    from: { x: currentX, y: currentY },
+    to: { x: targetX, y: targetY },
+    onComplete: () => {
+      // Update the current visual position when the tween completes
+      currentVisualPosition.value = { x: targetX, y: targetY }
+    }
+  }
+
+  return tweenConfig
+})
+
 const charTexture = computed(() => {
   console.log('Character texture:', props.character)
   if (!props.character?.characterType?.sprite) {

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">
+      <div @mousedown="startDrag" class="cursor-move p-2.5 flex justify-between items-center border-solid border-0 border-b border-cyan-200">
         <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/config.ts

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

src/screens/Game.vue

@@ -112,7 +112,7 @@ const preloadScene = (scene: Phaser.Scene) => {
    * Load the assets into the Phaser scene
    */
   assets.value.forEach((asset) => {
-    if (asset.group === 'sprites') {
+    if (asset.group === 'sprite_animations') {
       if (!asset.frameWidth || !asset.frameHeight) {
         console.error('Frame width and height must be defined for spritesheets', asset)
       }
@@ -139,7 +139,7 @@ const createScene = (scene: Phaser.Scene) => {
     scene.anims.create({
       key: asset.key,
       frameRate: 7,
-      frames: scene.anims.generateFrameNumbers(asset.key, { start: 0, end: 3 }),
+      frames: scene.anims.generateFrameNumbers(asset.key, { start: 0, end: 4 }),
       repeat: -1
     })
   })