noxious_client/src/components/sprites/Character.vue

<template>
  <Container :depth="999" v-if="props.character" :x="currentX" :y="currentY">
    <!--    Start chat bubble -->
    <!--    <RoundRectangle :origin-x="0.5" :origin-y="7.5" :fillColor="0xffffff" :width="194" :height="21" :radius="5" />-->
    <!--    <Text @create="createText" :text="`This is a chat message 🤯👋`" :origin-x="0.5" :origin-y="10.9" :style="{ fontSize: 13, fontFamily: 'Arial', color: '#000' }" />-->
    <!--    End chat bubble -->
    <Text @create="createText" :text="props.character.name" :origin-x="0.5" :origin-y="9" />
    <RoundRectangle :origin-x="0.5" :origin-y="18.5" :fillColor="0xffffff" :width="74" :height="6" :radius="5" />
    <RoundRectangle :origin-x="0.5" :origin-y="36.4" :fillColor="0x00b3b3" :width="70" :height="3" :radius="5" />
  </Container>
  <!--  <Text :text="isometricDepth" :depth="isometricDepth" :x="currentX" :y="currentY" />-->
  <Container :depth="isometricDepth" v-if="props.character" :x="currentX" :y="currentY">
    <Image v-if="!props.character.characterType" texture="character" :origin-y="1" />
    <Sprite v-else :texture="charTexture" :play="props.character.isMoving ? charTexture : undefined" :origin-y="1" :flipX="props.character.rotation === 6 || props.character.rotation === 4" :flipY="false" />
  </Container>
</template>

<script lang="ts" setup>
import { Container, Image, RoundRectangle, Sprite, Text, useScene } from 'phavuer'
import { type ExtendedCharacter as CharacterT } from '@/types'
import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
import { watch, computed, ref, onMounted, onUnmounted } from 'vue'
import config from '@/config'
import { useGameStore } from '@/stores/game'

enum Direction {
  POSITIVE,
  NEGATIVE,
  NOCHANGE
}

interface Props {
  layer: Phaser.Tilemaps.TilemapLayer
  character?: CharacterT
}

const props = withDefaults(defineProps<Props>(), {
  character: undefined
})

const isometricDepth = ref(calculateIsometricDepth(props.character.positionX, props.character.positionY, 28, 94, true))
const currentX = ref(0)
const currentY = ref(0)
const gameStore = useGameStore();
const tween = ref<Phaser.Tweens.Tween | null>(null)
const isInitialPosition = ref(true)


const calculateLocalDepth = (x: number, y: number, width: number, height: number, isCharacter: boolean) => {
  isometricDepth.value = calculateIsometricDepth(x, y, width, height, isCharacter)
}

const updatePosition = (x: number, y: number, direction: Direction) => {
  const targetX = tileToWorldX(props.layer, x, y)
  const targetY = tileToWorldY(props.layer, x, y)

  // Used for camera resize calculation to center on Character.
  if(gameStore.character) {
    gameStore.character.relativePosition = { x: targetX, y: targetY };
  }

  if (isInitialPosition.value) {
    currentX.value = targetX
    currentY.value = targetY
    isInitialPosition.value = false
    return
  }

  if (tween.value && tween.value.isPlaying()) {
    tween.value.stop()
  }

  /**
   * Calculate the distance between the current and target positions
   */
  const distance = Math.sqrt(Math.pow(targetX - currentX.value, 2) + Math.pow(targetY - currentY.value, 2))

  /**
   * Teleport: No animation, only if the distance is greater than the tile size / 1.5
   */
  if (distance >= config.tile_size.x / 1.2) {
    // Teleport: No animation
    currentX.value = targetX
    currentY.value = targetY
  }

  /**
   * Normal movement: Animate
   */
  if (distance <= config.tile_size.x / 1.2) {
    // Normal movement: Animate
    const duration = distance * 6 // Adjust this multiplier to control overall speed

    tween.value = props.layer.scene.tweens.add({
      targets: { x: currentX.value, y: currentY.value },
      x: targetX,
      y: targetY,
      duration: duration,
      ease: 'Linear',
      onStart: () => {
        if (direction === Direction.POSITIVE) {
          calculateLocalDepth(x, y, 28, 94, true)
        }
      },
      onUpdate: (tween) => {
        currentX.value = tween.targets[0].x ?? 0
        currentY.value = tween.targets[0].y ?? 0
      },
      onComplete: () => {
        if (direction === Direction.NEGATIVE) {
          calculateLocalDepth(x, y, 28, 94, true)
        }
      }
    })
  }
}

watch(
  () => props.character,
  (newChar, oldChar) => {
    if (!newChar) return
    if (!oldChar || newChar.positionX !== oldChar.positionX || newChar.positionY !== oldChar.positionY) {
      if (!oldChar) {
        updatePosition(newChar.positionX, newChar.positionY, Direction.POSITIVE)
      } else {
        const direction = calcDirection(oldChar.positionX, oldChar.positionY, newChar.positionX, newChar.positionY)
        updatePosition(newChar.positionX, newChar.positionY, direction)
      }
    }
  },
  { immediate: true, deep: true }
)

const calcDirection = (oldX: number, oldY: number, newX: number, newY: number) => {
  if (newY < oldY || newX < oldX) {
    return Direction.NEGATIVE
  }
  if (newX > oldX || newY > oldY) {
    return Direction.POSITIVE
  }
  return Direction.NOCHANGE
}

const charTexture = computed(() => {
  if (!props.character?.characterType?.sprite) {
    return 'idle_right_down'
  }

  const rotation = props.character.rotation
  const spriteId = props.character.characterType.sprite.id
  const action = props.character.isMoving ? 'walk' : 'idle'

  if (rotation === 0 || rotation === 6) {
    return `${spriteId}-${action}_left_up`
  } else if (rotation === 2 || rotation === 4) {
    return `${spriteId}-${action}_right_down`
  }

  return `${spriteId}-${action}_left_up`
})

const createText = (text: Phaser.GameObjects.Text) => {
  text.setFontSize(13)
  text.setFontFamily('Arial')
}

onMounted(() => {
  if (props.character) {
    updatePosition(props.character.positionX, props.character.positionY, Direction.POSITIVE)
  }
})

onUnmounted(() => {
  if (tween.value) {
    tween.value.stop()
  }
})
</script>