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
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');

22
static/js/game.js
View File

@ -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);
}
});

13
static/styles.css
View File

@ -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 */
}