Badge Popup Patch

Alter table in database like this 

ALTER TABLE users_badges ADD COLUMN notified TINYINT(1) NOT NULL DEFAULT 0;

Open cron_badges_user.php

Replace its code with 

<?php
require('../../bootloader.php');

header('Content-Type: application/json');

$user_id = $user->_data['user_id']; // Get logged-in user ID
$awarded_badges = [];
$all_badges = [];

// Fetch user points
$user_points_result = $db->query("SELECT user_points FROM users WHERE user_id = $user_id");
if (!$user_points_result) {
    die(json_encode(["error" => "Database error: " . $db->error]));
}
$user_points = $user_points_result->fetch_assoc()['user_points'];

// Fetch all badges
$get_badges = $db->query("SELECT * FROM badges");

while ($badge = $get_badges->fetch_assoc()) {
    $badge_id = $badge['badge_id'];

    // Check if user already has the badge
    $check = $db->query("SELECT COUNT(*) as count FROM users_badges WHERE user_id = $user_id AND badge_id = $badge_id");
    $check_result = $check->fetch_assoc();
    
    $has_badge = ($check_result['count'] > 0); // True if badge is already earned

    if (!$has_badge && $badge['points_required'] <= $user_points) {
        // Assign the badge
        $db->query("INSERT IGNORE INTO users_badges (user_id, badge_id, awarded_at) VALUES ($user_id, $badge_id, NOW())");

        // Add to awarded badges list (for pop-up notification)
        $awarded_badges[] = [
            "badge_id" => $badge["badge_id"],
            "badge_name" => $badge["name"],
            "badge_description" => $badge["description"],
            "badge_image" => $badge["image"]
        ];
        
        $has_badge = true; // Since the badge is now awarded
    }

    // Add all badges for the frontend (including `has_badge`)
    $all_badges[] = [
        "badge_id" => $badge["badge_id"],
        "badge_name" => $badge["name"],
        "badge_description" => $badge["description"],
        "badge_image" => $badge["image"],
        "has_badge" => $has_badge // Important for UI
    ];
}

// **Ensure JSON Output is Fixed**
$response = [
    "awarded_badges" => $awarded_badges, // For pop-up
    "all_badges" => $all_badges // For UI (to fix the grayscale issue)
];

// DEBUG: Log the JSON output
error_log("JSON Output: " . json_encode($response));

ob_clean();
echo json_encode($response, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE);
exit;
?>

Open badge.js and replac this code 

$(document).ready(function () {
    console.log("Checking for new badges...");

    $.ajax({
        url: "/modules/badges/cron_badges_user.php",
        method: "POST",
        dataType: "json", // Ensure jQuery automatically parses JSON
        success: function (response) {
            console.log("Badge response:", response);

            if (response.awarded_badges && response.awarded_badges.length > 0) {
                response.awarded_badges.forEach(function (badge) {
                    console.log("Showing badge:", badge.badge_name);
                    showBadgePopup(badge.badge_name, badge.badge_image, badge.badge_description);
                });
            } else {
                console.log("No new badges earned.");
            }
        },
        error: function (xhr, status, error) {
            console.error("Error loading badges:", error);
        }
    });
});

with this code 

$(document).ready(function () {
    console.log("Checking for new badges...");

    $.ajax({
        url: "/modules/badges/cron_badges_user.php",
        method: "POST",
        dataType: "json",
        success: function (response) {
            console.log("Badge response:", response);

            if (response.awarded_badges && response.awarded_badges.length > 0) {
                response.awarded_badges.forEach(function (badge) {
                    let badgeKey = `badge_seen_${badge.badge_id}`;

                    // Show popup only if this badge hasn’t been shown in this session
                    if (!localStorage.getItem(badgeKey)) {
                        console.log("Showing badge:", badge.badge_name);
                        showBadgePopup(badge.badge_name, badge.badge_image, badge.badge_description);
                        localStorage.setItem(badgeKey, "true"); // Mark badge as seen
                    }
                });
            } else {
                console.log("No new badges earned.");
            }
        },
        error: function (xhr, status, error) {
            console.error("Error loading badges:", error);
        }
    });
});