Fixed notificationSystem not showing images, issue was with draggable.js overriding it

static/js/draggable.js

@@ -92,8 +92,8 @@ function makeDraggable(element) {
     
     // For notifications, we need to apply it dynamically when they're created
     const originalShowNotification = notificationSystem.showNotification;
-    notificationSystem.showNotification = function(message) {
-      originalShowNotification.call(this, message);
+    notificationSystem.showNotification = function(message, notificationImage) {
+      originalShowNotification.call(this, message, notificationImage);
       const notifications = document.querySelectorAll('.custom-notification');
       notifications.forEach(notification => {
         notification.classList.add('draggable');

static/js/game.js

@@ -87,15 +87,16 @@ class NotificationSystem {
         document.body.appendChild(this.notificationContainer);
     }
 
-    showNotification(message, image) {
-        console.log('showNotification called with message:', message, 'and image:', image);
+    showNotification(message, notificationImage) {
+        console.log('showNotification called with message:', message, 'and image:', notificationImage);
+        console.log('Type of image:', typeof notificationImage);
         const notificationElement = document.createElement('div');
         notificationElement.className = 'custom-notification draggable';
         
         let content = `<div class="notification-content">`;
-        if (image && typeof image === 'string') {
-            console.log('Adding image to notification:', image);
-            content += `<img src="${image}" alt="Achievement" class="notification-image" onerror="console.error('Failed to load image:', this.src);">`;
+        if (notificationImage && typeof notificationImage === 'string') {
+            console.log('Adding image to notification:', notificationImage);
+            content += `<img src="${notificationImage}" alt="Achievement" class="notification-image" onerror="console.error('Failed to load image:', this.src);">`;
         } else {
             console.log('No valid image provided for notification');
         }
@@ -126,9 +127,9 @@ class NotificationSystem {
     }
 }
 
-
 const notificationSystem = new NotificationSystem();
 
+
 function preloadImage(src) {
     return new Promise((resolve, reject) => {
         const img = new Image();
@@ -146,10 +147,11 @@ function handleAchievementUnlock(data) {
         return;
     }
     const message = `Achievement Unlocked: ${data.name}\n${data.description}`;
+    const notificationImage = data.image;
     console.log('Showing notification:', message);
-    console.log('Achievement image path:', data.image);
-    console.log('Calling showNotification with message:', message, 'and image:', data.image);
-    notificationSystem.showNotification(message, data.image);
+    console.log('Achievement image path:', notificationImage);
+    console.log('Calling showNotification with message:', message, 'and image:', notificationImage);
+    notificationSystem.showNotification(message, notificationImage);
 }
 
 
@@ -2287,7 +2289,7 @@ function startGame() {
 
     socket.on('game_alert', (data) => {
         if (gameStarted) {
-            alertSystem.addnotificationSystem.showNotification(data.message);
+            notificationSystem.showNotification(data.message);
         }
     });