☰

KoGaMa Avatar Change with Custom Image (Persistent)

Change KoGaMa avatar with a custom image from file input (supports SVG structure and persists across refreshes)

// ==UserScript== K O K U S H I B O
// @name         KoGaMa Avatar Change with Custom Image (Persistent)
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Change KoGaMa avatar with a custom image from file input (supports SVG structure and persists across refreshes)
// @author       K O K U S H I B O
// @match        https://www.kogama.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Function to create the avatar change panel
    function createAvatarChangePanel() {
        // Check if the panel already exists
        if (document.getElementById('avatarChangePanel')) return;

        // Create the panel element
        const panel = document.createElement('div');
        panel.id = 'avatarChangePanel';
        panel.style.position = 'fixed';
        panel.style.top = '20px';
        panel.style.right = '20px';
        panel.style.backgroundColor = '#ffffff';
        panel.style.border = '1px solid #ccc';
        panel.style.padding = '20px';
        panel.style.boxShadow = '0 4px 6px rgba(0,0,0,0.2)';
        panel.style.zIndex = '9999';
        panel.style.fontFamily = 'Arial, sans-serif';
        panel.style.width = '250px';
        panel.style.borderRadius = '5px';

        // Title of the panel
        const title = document.createElement('h3');
        title.innerText = 'Change Avatar';
        title.style.marginBottom = '10px';
        panel.appendChild(title);

        // Add the file input element inside the panel
        const input = document.createElement('input');
        input.type = 'file';
        input.accept = 'image/*'; // Only accept images
        input.id = 'avatarUploadInput';
        input.style.marginBottom = '10px';
        input.style.display = 'block';

        // Add a label for the input
        const label = document.createElement('label');
        label.innerText = 'Upload Custom Avatar';
        label.style.color = '#007bff';
        label.style.textDecoration = 'underline';
        label.style.cursor = 'pointer';
        label.setAttribute('for', 'avatarUploadInput');

        // Append input and label to the panel
        panel.appendChild(label);
        panel.appendChild(input);
        document.body.appendChild(panel);

        // Add an event listener for file input change
        input.addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();

                reader.onload = function(e) {
                    // Find the SVG element and locate the <image> element within it
                    const avatarSvg = document.querySelector('div._2bUqU svg');
                    const avatarImage = avatarSvg ? avatarSvg.querySelector('image._3tYRU') : null;

                    console.log("Avatar element found:", avatarImage);

                    if (avatarImage) {
                        // Change the avatar image source to the selected file
                        avatarImage.setAttribute('xlink:href', e.target.result);
                        console.log("Avatar updated with new image source:", e.target.result);

                        // Save the new avatar image in localStorage
                        localStorage.setItem('kogama_avatar', e.target.result);

                        alert("Avatar updated successfully!");
                    } else {
                        console.log("Avatar image not found! Please check the page structure.");
                        alert("Avatar element not found! Please check the page structure.");
                    }
                };

                reader.onerror = function() {
                    alert("Failed to read the file. Please try again.");
                };

                reader.readAsDataURL(file); // Read the file as a data URL
            }
        });
    }

    // Function to restore the avatar image from localStorage
    function restoreAvatar() {
        const storedAvatar = localStorage.getItem('kogama_avatar');
        if (storedAvatar) {
            const avatarSvg = document.querySelector('div._2bUqU svg');
            const avatarImage = avatarSvg ? avatarSvg.querySelector('image._3tYRU') : null;

            if (avatarImage) {
                avatarImage.setAttribute('xlink:href', storedAvatar);
                console.log("Restored avatar from localStorage:", storedAvatar);
            }
        }
    }

    // Wait for the page to fully load and display the panel
    window.addEventListener('load', function() {
        createAvatarChangePanel();
        restoreAvatar(); // Restore the avatar from localStorage if it exists
    });
})();