forked from noxious/client
125 lines
4.2 KiB
Vue
125 lines
4.2 KiB
Vue
<template>
|
|
<Container v-if="props.character">
|
|
<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)"
|
|
:y="tileToWorldY(props.layer, props.character.position_x, props.character.position_y)"
|
|
:origin-x="0.5"
|
|
:origin-y="7.5"
|
|
:style="{
|
|
fontFamily: 'Helvetica, Arial',
|
|
color: '#FFF',
|
|
fontSize: '14px'
|
|
}"
|
|
/>
|
|
<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>
|
|
<Sprite
|
|
:tween="tween"
|
|
:texture="charTexture"
|
|
: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"
|
|
:flipX="props.character.rotation === 6 || props.character.rotation === 4"
|
|
:flipY="false"
|
|
/>
|
|
</Container>
|
|
|
|
</Container>
|
|
</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, ref } from 'vue'
|
|
|
|
interface Props {
|
|
layer: Phaser.Tilemaps.TilemapLayer
|
|
character?: CharacterT
|
|
}
|
|
|
|
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) {
|
|
console.log('No character type or sprite found')
|
|
return 'idle_left_down'
|
|
}
|
|
|
|
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}-${action}_left_down`
|
|
} else if (rotation === 0 || rotation === 6) {
|
|
return `${spriteId}-${action}_right_up`
|
|
}
|
|
|
|
return `${spriteId}-${action}_left_down` // Default fallback
|
|
})
|
|
|
|
watch(
|
|
() => props.character,
|
|
(newCharacter) => {
|
|
if (newCharacter) {
|
|
console.log('Character updated:', newCharacter)
|
|
console.log('Rotation:', newCharacter.rotation)
|
|
console.log('Current texture:', charTexture.value)
|
|
} else {
|
|
console.log('Character is null or undefined')
|
|
}
|
|
},
|
|
{ deep: true }
|
|
)
|
|
|
|
const createText = (text: Phaser.GameObjects.Text) => {
|
|
text.setLetterSpacing(1.5)
|
|
}
|
|
</script>
|