npm update, modal bug fix

src/components/World.vue

@@ -3,13 +3,13 @@
   <Controls :layer="layer" />
   <Player :layer="layer" />
   <Container v-if="zoneStore.isLoaded && zoneStore.getPlayers.length > 0">
-    <Player :layer="layer" v-for="player in zoneStore.getPlayers" :key="player.id" :player="player" />
+    <Character :layer="layer" v-for="player in zoneStore.getPlayers" :key="player.id" :player="player" />
   </Container>
 </template>
 
 <script setup lang="ts">
 import { Container, refObj, TilemapLayer, useScene } from 'phavuer'
-import Player from '@/components/sprites/player/Player.vue'
+import Character from '@/components/sprites/Character.vue'
 import config from '@/config'
 import { onBeforeMount, onMounted, reactive, ref, type Ref, toRaw, watch } from 'vue'
 import Tileset = Phaser.Tilemaps.Tileset

src/components/sprites/Character.vue

@@ -1,9 +1,22 @@
 <template>
-  <Sprite ref="sprite" texture="player" :x="position.x" :y="position.y" />
+
+  <Container>
+    <Text
+      :text="'Hello world'"
+      :style="{
+        fontFamily: 'Helvetica, Arial',
+        color: '#42B883',
+        fontSize: '26px',
+        fontStyle: 'bold',
+        strokeThickness: 8,
+        stroke: '#213547'
+      }" />
+    <Sprite ref="sprite" texture="player" :x="position.x" :y="position.y" />
+  </Container>
 </template>
 
 <script lang="ts" setup>
-import { onPostUpdate, onPreUpdate, Sprite, useScene } from 'phavuer'
+import { Container, onPostUpdate, onPreUpdate, Sprite, Text, useScene } from 'phavuer'
 import { reactive, type Ref, ref } from 'vue'
 import config from '@/config'
 import { useSocketStore } from '@/stores/socket'

src/components/utilities/Modal.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineEmits, onMounted, onUnmounted, ref } from 'vue'
+import { defineEmits, onMounted, onUnmounted, ref, watch } from 'vue'
 
 const properties = defineProps({
   isModalOpen: {
@@ -22,6 +22,10 @@ const properties = defineProps({
   }
 });
 
+watch(() => properties.isModalOpen, (value) => {
+  isModalOpen.value = value;
+});
+
 const isModalOpen = ref(properties.isModalOpen);
 const emit = defineEmits(["modal:close", "character:create"]);