From 348b84e08b7f0739c525b53f6d80589765379e22 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Sun, 2 Jun 2024 01:54:35 +0200
Subject: [PATCH] Removed duplicate component, worked on receiving
 notifications from server

---
 src/components/Game.vue                    |  1 -
 src/components/utilities/Notifications.vue | 38 +++++++++++++++-------
 2 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/src/components/Game.vue b/src/components/Game.vue
index 0dcf769..3b7fd84 100644
--- a/src/components/Game.vue
+++ b/src/components/Game.vue
@@ -1,5 +1,4 @@
 <template>
-  <Notifications />
   <div class="game-container">
     <div class="top-ui">
       <Hud />
diff --git a/src/components/utilities/Notifications.vue b/src/components/utilities/Notifications.vue
index d620292..6e7eed0 100644
--- a/src/components/utilities/Notifications.vue
+++ b/src/components/utilities/Notifications.vue
@@ -1,8 +1,9 @@
 <template>
   <div class="notifications">
-    <Modal v-for="notification in notifications.getNotifications" :key="notification.id" :isModalOpen="true" @modal:close="closeNotification(notification.id)">
+    <Modal v-for="notification in notifications.getNotifications" :key="notification.id" :isModalOpen="true"
+           @modal:close="closeNotification(notification.id)">
       <template #modal-body>
-          <p>{{ notification.message }}</p>
+        <p>{{ notification.message }}</p>
       </template>
     </Modal>
   </div>
@@ -12,17 +13,32 @@
 import { useNotificationStore } from '@/stores/notifications'
 import { useSocketStore } from '@/stores/socket'
 import Modal from '@/components/utilities/Modal.vue'
+import { onMounted, watch } from 'vue'
 
-const notifications = useNotificationStore();
-const socket = useSocketStore();
-
-if (socket.getConnection) {
-  socket.getConnection.on('notification', (data: any) => {
-    notifications.addNotification(data);
-  });
-}
+const notifications = useNotificationStore()
+const socket = useSocketStore()
 
 function closeNotification(id: string) {
-  notifications.removeNotification(id);
+  notifications.removeNotification(id)
 }
+
+function setupNotificationListener(connection: any) {
+  connection.on('notification', (data: { message: string }) => {
+    console.log(data)
+    notifications.addNotification(data)
+  })
+}
+
+onMounted(() => {
+  const connection = socket.getConnection
+  if (connection) {
+    setupNotificationListener(connection)
+  } else {
+    // Watch for changes in the socket connection
+    watch(() => socket.getConnection, (newConnection) => {
+        if (newConnection) setupNotificationListener(newConnection)
+      }
+    )
+  }
+})
 </script>
\ No newline at end of file