From 1125ad4f74a2d348456112f266f5872f8191b1cb Mon Sep 17 00:00:00 2001
From: Jamon <jamon@operative.kiwi>
Date: Mon, 12 Aug 2024 19:43:24 +1200
Subject: [PATCH] Fixed notificationSystem not showing images, issue was with
 draggable.js overriding it

---
 static/js/draggable.js |  4 ++--
 static/js/game.js      | 22 ++++++++++++----------
 static/styles.css      | 13 +++++++------
 3 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/static/js/draggable.js b/static/js/draggable.js
index 66600ad..54414a5 100644
--- a/static/js/draggable.js
+++ b/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');
diff --git a/static/js/game.js b/static/js/game.js
index 41147af..01e4261 100644
--- a/static/js/game.js
+++ b/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);
         }
     });    
 
diff --git a/static/styles.css b/static/styles.css
index 04bdd5f..93ae839 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -1648,13 +1648,13 @@ body {
 }
 
 .custom-notification {
-    background-color: rgba(18, 4, 88, 0.9);
+    background-color: #2E004F; /* Deep Purple */
     color: #00ffff;
     padding: 20px;
     border-radius: 10px;
     text-align: center;
-    box-shadow: 0 0 20px #ff00ff, 0 0 40px #ff00ff;
-    border: 2px solid #ff00ff;
+    box-shadow: 0 0 20px #007BFF, 0 0 40px #007BFF; /* Electric Blue */
+    border: 2px solid #9D00FF; /* Vibrant Purple */
     font-family: 'Orbitron', sans-serif;
     max-width: 300px;
     margin-bottom: 10px;
@@ -1688,9 +1688,9 @@ body {
     background-color: #ff00ff;
     color: white;
     border: none;
-    padding: 8px 16px;
+    padding: 6px 14px;
     font-family: 'Orbitron', sans-serif;
-    font-size: 14px;
+    font-size: 12px;
     text-transform: uppercase;
     letter-spacing: 1px;
     transition: all 0.3s ease;
@@ -1706,9 +1706,10 @@ body {
 }
 
 .notification-image {
-    max-width: 100%;
+    max-width: 80px;  /* Adjust this value to make the image smaller */
     height: auto;
     margin-bottom: 10px;
+    border-radius: 5px;  /* Optional: add rounded corners to the image */
 }