Revert logic, updated preview

src/components/game/character/Character.vue

@@ -2,7 +2,7 @@
   <Container ref="characterContainer" :x="currentPositionX" :y="currentPositionY" :depth="isometricDepth">
     <ChatBubble :mapCharacter="props.mapCharacter" />
     <HealthBar :mapCharacter="props.mapCharacter" />
-    <CharacterHair :mapCharacter="props.mapCharacter" v-if="currentSpriteHeight > 0" :spriteHeight="currentSpriteHeight" />
+    <CharacterHair :mapCharacter="props.mapCharacter" />
     <Sprite ref="characterSprite" :origin-y="1" :flipX="isFlippedX" />
   </Container>
 </template>
@@ -28,7 +28,7 @@ const gameStore = useGameStore()
 const mapStore = useMapStore()
 const scene = useScene()
 
-const { characterContainer, characterSprite, getSpriteHeightByAction, currentPositionX, currentPositionY, isometricDepth, isFlippedX, updatePosition, playAnimation, updateSprite, initializeSprite, cleanup } = useCharacterSpriteComposable(scene, props.tileMap, props.mapCharacter)
+const { characterContainer, characterSprite, currentPositionX, currentPositionY, isometricDepth, isFlippedX, updatePosition, playAnimation, updateSprite, initializeSprite, cleanup } = useCharacterSpriteComposable(scene, props.tileMap, props.mapCharacter)
 const { playSound, stopSound } = useSoundComposable()
 
 const handlePositionUpdate = (newValues: any, oldValues: any) => {
@@ -43,8 +43,6 @@ const handlePositionUpdate = (newValues: any, oldValues: any) => {
   }
 }
 
-const currentSpriteHeight = ref(0)
-
 /**
  * Plays walk sound when character is moving
  */
@@ -86,14 +84,13 @@ watch(
     rotation: props.mapCharacter.character.rotation,
     isAttacking: props.mapCharacter.isAttacking
   }),
-  (oldValues, newValues) => {
+  async (oldValues, newValues) => {
     handlePositionUpdate(oldValues, newValues)
   }
 )
 
 onMounted(async () => {
   await initializeSprite()
-  currentSpriteHeight.value = await getSpriteHeightByAction('idle_left_up')
 
   if (props.mapCharacter.character.id === gameStore.character!.id) {
     scene.cameras.main.startFollow(characterContainer.value as Phaser.GameObjects.Container)

src/components/game/character/partials/CharacterHair.vue

@@ -12,7 +12,6 @@ import { computed, onMounted, ref } from 'vue'
 
 const props = defineProps<{
   mapCharacter: MapCharacter
-  spriteHeight: number
 }>()
 
 const gameStore = useGameStore()
@@ -30,12 +29,15 @@ const texture = computed(() => {
 const isFlippedX = computed(() => [6, 4].includes(props.mapCharacter.character.rotation ?? 0))
 
 const imageProps = computed(() => {
+  const direction = [0, 6].includes(props.mapCharacter.character.rotation ?? 0) ? 'back' : 'front'
+  const spriteAction = sprite.value?.spriteActions?.find((spriteAction) => spriteAction.action === direction)
+
   return {
-    originX: 0.5,
+    depth: 9999,
-    originY: 0.32 / 1.8, // 32 height
+    originX: Number(spriteAction?.originX) ?? 0,
+    originY: Number(spriteAction?.originY) ?? 0,
     flipX: isFlippedX.value,
-    texture: texture.value,
+    texture: texture.value
-    y: -props.spriteHeight
   }
 })
 

src/components/gameMaster/assetManager/partials/characterHair/CharacterHairDetails.vue

@@ -20,27 +20,29 @@
           </select>
         </div>
         <div class="form-field-full">
+          <div class="space-x-6 flex items-center">
+            <label for="color">Color</label>
+            <input v-model="characterColor" class="input-field" type="text" name="color" placeholder="Character Hair Color" />
+            <div class="h-[38px] w-[38px] rounded" :style="{ backgroundColor: characterColor }"></div>
+          </div>
+        </div>
+        <div class="form-field-half">
           <label for="spriteId">Sprite</label>
           <select v-model="characterSpriteId" class="input-field" name="spriteId">
             <option disabled selected value="">Select sprite</option>
             <option v-for="sprite in assetManagerStore.spriteList" :key="sprite.id" :value="sprite.id">{{ sprite.name }}</option>
           </select>
-          <div v-if="characterSpriteId" class="mt-4 flex flex-col">
+        </div>
-            <div class="mt-4 p-2.5 block rounded-md default-border bg-gray-800">
+        <div class="form-field-half">
-              <h3 class="text-white mb-2">Preview</h3>
+          <label>Preview</label>
-              <div class="flex items-center justify-center p-4 bg-gray-700 rounded">
+          <div v-if="characterSpriteId" class="flex flex-col">
+            <div class="p-3 pb-5 min-h-32 block rounded-md default-border bg-gray-800">
+              <div class="flex items-center justify-center p-1 h-full bg-gray-700 rounded">
                 <img :src="config.server_endpoint + '/textures/sprites/' + characterSpriteId + '/front.png'" class="max-w-[200px] max-h-[200px] object-contain" />
               </div>
             </div>
           </div>
         </div>
-        <div class="form-field-full">
-          <div class="space-x-6 flex items-center">
-            <label for="color">Color</label>
-            <input v-model="characterColor" class="input-field" type="text" name="color" placeholder="Character Hair Color" />
-            <div class="h-[38px] w-[38px] rounded" :style="{ backgroundColor: characterColor }"></div>
-          </div>
-        </div>
         <button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
         <button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="removeCharacterHair">Remove</button>
       </form>