Jamon/resonancerumble
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Jamon 2024-08-12 19:43:24 +12:00
parent a0d6aea811
commit 1125ad4f74
3 changed files with 21 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
static/js/draggable.js
View File

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

22
static/js/game.js
View File

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

13
static/styles.css
View File

@ -1648,13 +1648,13 @@ body {
} }
.custom-notification { .custom-notification {
background-color: rgba(18, 4, 88, 0.9); background-color: #2E004F; /* Deep Purple */
color: #00ffff; color: #00ffff;
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 10px;
text-align: center; text-align: center;
box-shadow: 0 0 20px #ff00ff, 0 0 40px #ff00ff; box-shadow: 0 0 20px #007BFF, 0 0 40px #007BFF; /* Electric Blue */
border: 2px solid #ff00ff; border: 2px solid #9D00FF; /* Vibrant Purple */
font-family: 'Orbitron', sans-serif; font-family: 'Orbitron', sans-serif;
max-width: 300px; max-width: 300px;
margin-bottom: 10px; margin-bottom: 10px;
@ -1688,9 +1688,9 @@ body {
background-color: #ff00ff; background-color: #ff00ff;
color: white; color: white;
border: none; border: none;
padding: 8px 16px; padding: 6px 14px;
font-family: 'Orbitron', sans-serif; font-family: 'Orbitron', sans-serif;
font-size: 14px; font-size: 12px;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; letter-spacing: 1px;
transition: all 0.3s ease; transition: all 0.3s ease;
@ -1706,9 +1706,10 @@ body {
} }
.notification-image { .notification-image {
max-width: 100%; max-width: 80px; /* Adjust this value to make the image smaller */
height: auto; height: auto;
margin-bottom: 10px; margin-bottom: 10px;
border-radius: 5px; /* Optional: add rounded corners to the image */
} }