Worked on commands, notifications

src/components/Game.vue

@@ -1,4 +1,5 @@
 <template>
+  <Notifications />
   <div class="game-container">
     <div class="top-ui">
       <Hud />

src/components/World.vue

@@ -1,7 +1,7 @@
 <template>
   <TilemapLayer v-if="zoneStore.isLoaded" :tilemap="tileMap" :tileset="zoneStore.getTiles" ref="tilemapLayer" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
   <Controls :layer="layer" />
-  <Player :layer="layer" />
+  <Character :layer="layer" />
   <Container v-if="zoneStore.isLoaded && zoneStore.getPlayers.length > 0">
     <Character :layer="layer" v-for="player in zoneStore.getPlayers" :key="player.id" :player="player" />
   </Container>

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) {}

src/components/sprites/Character.vue

@@ -1,12 +1,13 @@
 <template>
-
   <Container>
     <Text
-      :text="'Hello world'"
+      :text="props.player?.name"
+      :x="position.x - 50"
+      :y="position.y - 80"
       :style="{
         fontFamily: 'Helvetica, Arial',
         color: '#42B883',
-        fontSize: '26px',
+        fontSize: '20px',
         fontStyle: 'bold',
         strokeThickness: 8,
         stroke: '#213547'

src/components/sprites/MapEntity.vue

@@ -0,0 +1 @@
+<template></template>

src/components/sprites/NPC.vue

@@ -0,0 +1 @@
+<template></template>

src/components/utilities/Modal.vue

@@ -42,6 +42,12 @@ const x = ref(0);
 const y = ref(0);
 const isDragging = ref(false);
 
+// set modal position center of the screen
+onMounted(() => {
+  x.value = (window.innerWidth / 2) - 150;
+  y.value = (window.innerHeight / 2) - 100;
+});
+
 const startDrag = (event: MouseEvent) => {
   isDragging.value = true;
   startX = event.clientX;

src/components/utilities/Notifications.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="notifications">
+    <Modal v-for="notification in notifications.getNotifications" :key="notification.id" :isModalOpen="true" @modal:close="closeNotification(notification.id)">
+      <template #modal-body>
+          <p>{{ notification.message }}</p>
+      </template>
+    </Modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useNotificationStore } from '@/stores/notifications'
+import { useSocketStore } from '@/stores/socket'
+import Modal from '@/components/utilities/Modal.vue'
+
+const notifications = useNotificationStore();
+const socket = useSocketStore();
+
+if (socket.getConnection) {
+  socket.getConnection.on('notification', (data: any) => {
+    notifications.addNotification(data);
+  });
+}
+
+function closeNotification(id: string) {
+  notifications.removeNotification(id);
+}
+</script>