From a3dbff4720a14adcf4a33a36b5dbd2d81e32991d Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Sun, 28 Jul 2024 05:02:29 +0200
Subject: [PATCH] Worked on character rotation

---
 src/components/sprites/Character.vue | 56 +++++++++++++++++++++++-----
 1 file changed, 46 insertions(+), 10 deletions(-)

diff --git a/src/components/sprites/Character.vue b/src/components/sprites/Character.vue
index bd2c8d6..1b312e3 100644
--- a/src/components/sprites/Character.vue
+++ b/src/components/sprites/Character.vue
@@ -1,13 +1,13 @@
 <template>
-  <Container>
-    <Rectangle :x="tileToWorldX(layer, props.character?.position_x, props.character?.position_y)" :y="tileToWorldY(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(layer, props.character?.position_x, props.character?.position_y)" :y="tileToWorldY(layer, props.character?.position_x, props.character?.position_y)" :origin-x="0.5" :origin-y="31.5" :fillColor="0x09ad19" :width="70" :height="4" />
+  <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>
     <Text
       @create="createText"
-      :text="props.character?.name"
-      :x="tileToWorldX(layer, props.character?.position_x, props.character?.position_y)"
-      :y="tileToWorldY(layer, props.character?.position_x, props.character?.position_y)"
+      :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="{
@@ -16,15 +16,23 @@
         fontSize: '14px'
       }"
     />
-    <Image texture="character" :x="tileToWorldX(layer, props.character?.position_x, props.character?.position_y)" :y="tileToWorldY(layer, props.character?.position_x, props.character?.position_y)" :origin-y="1" />
-<!--    <Sprite ref="sprite" :x="tileToWorldX(layer, props.character?.position_x, props.character?.position_y)" :y="tileToWorldY(layer, props.character?.position_x, props.character?.position_y)" :origin-y="1" play="walk" />-->
+    <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" />
+
+    <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"
+    />
   </Container>
 </template>
 
 <script lang="ts" setup>
-import { Container, Image, Rectangle, Sprite, Text } from 'phavuer'
+import { Container, Image, Rectangle, Text } from 'phavuer'
 import { type Character as CharacterT } from '@/types'
 import { tileToWorldX, tileToWorldY } from '@/services/zone'
+import { ref, watch, computed } from 'vue'
 
 interface Props {
   layer: Phaser.Tilemaps.TilemapLayer
@@ -35,7 +43,35 @@ const props = withDefaults(defineProps<Props>(), {
   character: undefined
 })
 
+const charTexture = computed(() => {
+  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
+
+  if (rotation === 2 || rotation === 4) {
+    return `${spriteId}-idle_left_down`
+  } else if (rotation === 0 || rotation === 6) {
+    return `${spriteId}-idle_right_up`
+  }
+
+  return `${spriteId}-idle_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>
+</script>
\ No newline at end of file