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

src/components/screens/Characters.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="character-select-screen">
     <div class="ui-wrapper">
-      <div class="characters-wrapper">
+      <div class="characters-wrapper" v-if="!isLoading">
         <div v-for="character in characters" :key="character.id" class="character" :class="{ active: selected_character == character.id }">
           <input type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
           <label :for="character.id">{{ character.name }}</label>
@@ -23,8 +23,13 @@
           </button>
         </div>
       </div>
+      <div v-else>
+        <div class="loading-spinner">
+          <img src="/assets/icons/loading-icon1.svg" />
+        </div>
+      </div>
 
-      <div class="button-wrapper">
+      <div class="button-wrapper" v-if="!isLoading">
         <button class="btn-cyan" :disabled="!selected_character" @click="select_character()">
           PLAY
           <img draggable="false" src="/assets/icons/arrow.svg">
@@ -55,18 +60,26 @@
 
 <script setup lang="ts">
 import { useSocketStore } from '@/stores/socket'
-import { ref } from 'vue'
+import { onBeforeMount, onMounted, ref } from 'vue'
 import Modal from '@/components/utilities/Modal.vue'
 import {type Character as CharacterT} from '@/types'
 
+const isLoading = ref(true)
 const characters = ref([])
-const socket = useSocketStore()
+const socket = useSocketStore();
 
 // Fetch characters
 socket.getConnection.on('character:list', (data: any) => {
   characters.value = data
 })
-socket.getConnection.emit('character:list')
+
+onMounted(() => {
+  // wait 1.5 sec
+  setTimeout(() => {
+    socket.getConnection.emit('character:list')
+    isLoading.value = false
+  }, 1000)
+});
 
 // Select character logics
 const selected_character = ref(null)
@@ -123,6 +136,14 @@ function create() {
       content: '';
     }
 
+    .loading-spinner img {
+      width: 5rem;
+      // css color
+      filter: invert(1);
+      // white
+      filter: invert(80%);
+    }
+
     .characters-wrapper {
       display: flex;
       justify-content: center;

src/components/screens/Login.vue

@@ -32,6 +32,7 @@ import { login, register } from '@/services/authentication'
 import { useNotificationStore } from '@/stores/notifications'
 import ZoneEditor from '@/components/utilities/zoneEditor/ZoneEditor.vue'
 import Modal from '@/components/utilities/Modal.vue'
+import { useSocketStore } from '@/stores/socket'
 
 const bgm = ref('bgm')
 if (bgm.value.paused) {
@@ -39,6 +40,7 @@ if (bgm.value.paused) {
   window.addEventListener('keydown', () => bgm.value.play())
 }
 
+const socket = useSocketStore()
 const notifications = useNotificationStore()
 const username = ref('')
 const password = ref('')
@@ -55,7 +57,11 @@ async function loginFunc() {
 
   if (response.success === undefined) {
     notifications.addNotification({ message: response.error })
+    return
   }
+
+  socket.setToken(response.token)
+  socket.initConnection();
 }
 
 async function registerFunc() {
@@ -70,7 +76,11 @@ async function registerFunc() {
 
   if (response.success === undefined) {
     notifications.addNotification({ message: response.error })
+    return
   }
+
+  socket.setToken(response.token)
+  socket.initConnection();
 }
 </script>
 

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>