Improved hair animation

src/components/game/character/Character.vue

@@ -3,7 +3,7 @@
   <Healthbar :zoneCharacter="props.zoneCharacter" :currentX="currentX" :currentY="currentY" />
   <Container ref="charContainer" :depth="isometricDepth" :x="currentX" :y="currentY">
     <CharacterHair :zoneCharacter="props.zoneCharacter" :currentX="currentX" :currentY="currentY" />
-    <Sprite ref="charSprite" :origin-y="1" :flipX="isFlippedX" :flipY="false" />
+    <Sprite ref="charSprite" :origin-y="1" :flipX="isFlippedX" />
   </Container>
 </template>
 

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

@@ -27,11 +27,14 @@ const texture = computed(() => {
 })
 
 const isFlippedX = computed(() => [6, 4].includes(props.zoneCharacter.character.rotation ?? 0))
+
+const ANIMATION_MS = 500 // Animation duration in milliseconds
 const imageProps = computed(() => ({
   depth: 1,
-  originY: [0, 6].includes(props.zoneCharacter.character.rotation ?? 0) ? 4.30 : 5.25,
+  originY: [0, 6].includes(props.zoneCharacter.character.rotation ?? 0) ? 4.30 : 5.30,
   flipX: isFlippedX.value,
-  texture: texture.value
+  texture: texture.value,
+  y: props.zoneCharacter.isMoving ? (scene.time.now % ANIMATION_MS < (ANIMATION_MS / 2) ? 1 : 0) : 0,
 }))
 
 

src/components/gameMaster/GmPanel.vue

@@ -6,7 +6,7 @@
         <button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">Users</button>
         <button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">Chats</button>
         <button @mousedown.stop class="btn-cyan active py-1.5 px-4 min-w-24">Asset manager</button>
-        <button class="btn-cyan py-1.5 px-4 min-w-24" type="button" @click="() => zoneEditorStore.toggleActive()">Zone manager</button>
+        <button class="btn-cyan py-1.5 px-4 min-w-24" type="button" @click="() => zoneEditorStore.toggleActive()">Map editor</button>
       </div>
     </template>
     <template #modalBody>