Worked on commands, notifications

src/components/screens/Characters.vue

@@ -13,8 +13,9 @@
 
     <div class="buttons-wrapper">
       <button @click="select_character()">Play</button>
-      <button @click="isModalOpen = true">Create New</button>
-      <button @click="delete_character()">Delete</button>
+      <button @click="isModalOpen = true">Create  New</button>
+      <!-- @TODO : Add a confirmation dialog -->
+      <button v-if="selected_character" @click="delete_character()">Delete</button>
     </div>
   </div>
 </div>
@@ -58,17 +59,15 @@ const characters = ref([]);
 const selected_character = ref(null);
 function select_character() {
   console.log(selected_character.value);
-  if (selected_character.value) {
-    socket.getConnection.emit('character:connect', {character_id: selected_character.value});
-    socket.getConnection.on('character:connect', (data: Character) => socket.setCharacter(data));
-  }
+  if (!selected_character.value) return;
+  socket.getConnection.emit('character:connect', {character_id: selected_character.value});
+  socket.getConnection.on('character:connect', (data: Character) => socket.setCharacter(data));
 }
 
 // Delete character logics
 function delete_character() {
-  if (selected_character.value) {
-    socket.getConnection.emit('character:delete', {character_id: selected_character.value});
-  }
+  if (!selected_character.value) return;
+  socket.getConnection.emit('character:delete', {character_id: selected_character.value});
 }
 
 // Create character logics

src/components/screens/Login.vue

@@ -25,11 +25,11 @@
   <img src="/assets/bglogin.png" id="bg-img" alt="New Quest login background" />
 </template>
 
-<script setup>
-import { onMounted, ref } from 'vue'
+<script setup lang="ts">
+import { ref } from 'vue'
 import { useSocketStore } from '@/stores/socket.ts'
 import {login, register} from '@/services/authentication.ts'
-import { useCookies } from '@vueuse/integrations/useCookies'
+import { useNotificationStore } from '@/stores/notifications'
 
 const bgm = ref('bgm');
 if (bgm.value.paused) {
@@ -38,6 +38,7 @@ if (bgm.value.paused) {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
+const notifications = useNotificationStore()
 const socket = useSocketStore();
 const username = ref('');
 const password = ref('');
@@ -45,7 +46,7 @@ const password = ref('');
 async function loginFunc() {
   // check if username and password are valid
   if (username.value === '' || password.value === '') {
-    alert('Please enter a valid username and password');
+    notifications.addNotification({ message: 'Please enter a valid username and password' });
     return;
   }
 
@@ -53,7 +54,7 @@ async function loginFunc() {
   const success = await login(username.value, password.value);
 
   if (!success) {
-    alert('Invalid username or password');
+    notifications.addNotification({ message: 'Invalid username or password' });
   }
 
   // if (success) {}
@@ -62,7 +63,7 @@ async function loginFunc() {
 async function registerFunc() {
   // check if username and password are valid
   if (username.value === '' || password.value === '') {
-    alert('Please enter a valid username and password');
+    notifications.addNotification({ message: 'Please enter a valid username and password' });
     return;
   }
 
@@ -70,7 +71,7 @@ async function registerFunc() {
   const success = await register(username.value, password.value);
 
   if (!success) {
-    alert('Username already exists');
+    notifications.addNotification({ message: 'Username already exists' });
   }
 
   // if (success) {}