diff --git a/src/components/sprites/Character.vue b/src/components/sprites/Character.vue
index 1691757..5f85272 100644
--- a/src/components/sprites/Character.vue
+++ b/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) {
diff --git a/src/components/utilities/Modal.vue b/src/components/utilities/Modal.vue
index 5adb431..2246e4a 100644
--- a/src/components/utilities/Modal.vue
+++ b/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">
diff --git a/src/config.ts b/src/config.ts
index 763f5d6..4a929c1 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,4 +1,4 @@
-const dev: boolean = true
+const dev: boolean = false
export default {
name: 'New Quest',
diff --git a/src/screens/Game.vue b/src/screens/Game.vue
index 0282061..bd5bdd2 100644
--- a/src/screens/Game.vue
+++ b/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
})
})