Fixed characters not showing after logging in, added loading screen before showing characters, worked on GM tools

src/components/utilities/Modal.vue

@@ -45,9 +45,7 @@ const properties = defineProps({
   }
 })
 
-watch(
-  () => properties.isModalOpen,
-  (value) => {
+watch(() => properties.isModalOpen, (value) => {
     isModalOpenRef.value = value
   }
 )
@@ -124,6 +122,16 @@ const stopDrag = () => {
   isDragging.value = false
 }
 
+watch(() => properties.modalWidth, (value) => {
+    width.value = value
+  }
+)
+
+watch(() => properties.modalHeight, (value) => {
+    height.value = value
+  }
+)
+
 onMounted(() => {
   addEventListener('mousemove', drag)
   addEventListener('mouseup', stopDrag)
@@ -142,13 +150,11 @@ onUnmounted(() => {
 
 
 // Make sure modal doesn't go off screen
-watch(
-  () => x.value, (value) => {
+watch(() => x.value, (value) => {
     if (value < 0) { x.value = 0 } else if (value + width.value > window.innerWidth) { x.value = window.innerWidth - width.value }
   }
 )
-watch(
-  () => y.value, (value) => {
+watch(() => y.value, (value) => {
     if (value < 0) { y.value = 0 } else if (value + height.value > window.innerHeight) { y.value = window.innerHeight - height.value }
   }
 )

src/components/utilities/gmTools/GmUtilityWindow.vue

@@ -1,14 +1,27 @@
 <template>
-  <Modal :isModalOpen="true">
+  <Modal :isModalOpen="true" :closable="false" :modal-width="200" :modal-height="260">
     <template #modalHeader>
       <h3 class="modal-title">GM tools</h3>
     </template>
     <template #modalBody>
-      <p></p>
+      <div class="content">
+        <button class="btn-cyan w-full" type="button">Zone manager</button>
+        <button class="btn-cyan w-full" type="button">Player manager</button>
+        <button class="btn-cyan w-full" type="button">Item manager</button>
+        <button class="btn-cyan w-full" type="button">NPC manager</button>
+      </div>
     </template>
   </Modal>
 </template>
 <script setup lang="ts">
 import ZoneEditor from '@/components/utilities/zoneEditor/ZoneEditor.vue'
 import Modal from '@/components/utilities/Modal.vue'
-</script>
+</script>
+
+<style lang="scss">
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+}
+</style>