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>