Got a working version of character animations, finished HUD styling, cleaned SCSS, npm update

src/components/sprites/Character.vue

@@ -14,13 +14,13 @@
         stroke: '#213547'
       }"
     />
-    <Sprite ref="sprite" texture="character" :x="props.character.position_x" :y="props.character.position_y" />
+    <Sprite ref="sprite" :x="props.character.position_x" :y="props.character.position_y" play="walk"  />
   </Container>
 </template>
 
 <script lang="ts" setup>
 import { Container, Sprite, Text, useScene } from 'phavuer'
-import { onMounted, reactive, type Ref, ref, watch } from 'vue'
+import { onBeforeMount, onMounted, reactive, type Ref, ref, watch } from 'vue'
 import config from '@/config'
 import { useSocketStore } from '@/stores/socket'
 import { type Character as CharacterT } from '@/types'
@@ -79,14 +79,6 @@ function getTile(x: number, y: number, layer: Phaser.Tilemaps.TilemapLayer): Pha
   return tile
 }
 
-scene.anims.create({
-  key: 'walk',
-  frames: scene.anims.generateFrameNumbers('walk', {
-    start: 0,
-    end: 4
-  }),
-});
-
 /**
  * Resources:
  * https://www.youtube.com/watch?v=9sWrGohw9qo