Image Names

Load Image Pokemon Name By HyperBeam

目前為 2024-08-17 提交的版本,檢視 最新版本

// ==UserScript==
// @name         Image Names
// @namespace    http://tampermonkey.net/
// @version      1.8
// @description  Load Image Pokemon Name By HyperBeam
// @run-at       document-end
// @author       @HyperBeam & @Jann
// @match        *://sangtacviet.vip/truyen/*
// @license      GPL-3.0
// @icon64       https://sangtacviet.vip/favicon.png
// @grant        GM_setValue
// @grant        GM_getValue
// ==/UserScript==

(function () {
    'use strict';

    const TYPE_STYLE = {
        '.Normal': '#777c83',
        '.Fire': '#ffa61e',
        '.Water': '#5cb2de',
        '.Electric': '#ffce2f',
        '.Grass': '#49cb77',
        '.Ice': '#73d7ce',
        '.Fighting': '#e15462',
        '.Poison': '#d54ec2',
        '.Ground': '#cd854b',
        '.Flying': '#85a6f4',
        '.Psychic': '#ff8c7a',
        '.Bug': '#98d401',
        '.Rock': '#cdc168',
        '.Ghost': '#746dc4',
        '.Dragon': '#1e70b8',
        '.Dark': '#494355',
        '.Steel': '#2b8d97',
        '.Fairy': '#f8a1dc',
    };

    const BUTTON_STYLES = {
        fontSize: '14px',
        outline: 'none',
        borderRadius: '100%',
        height: '50px',
        width: '50px',
        marginBottom: '10px',
        cursor: 'pointer',
        border: '1px solid #ccc',
        backgroundColor: '#f0f0f0',
        transition: 'background-color 0.3s',
    };

    const IMAGE_STYLES = {
        '.pokemon-image': {
            display: 'inline-block',
            margin: '-25px -5px -20px 0',
            width: '60px',
            height: '60px',
        },
        '.pokemon-type': {
            display: 'inline-block',
            margin: '-5px -2px 0px 2px',
            width: '25px',
            height: '25px',
        },
        '.pokemon-ball': {
            display: 'inline-block',
            margin: '-5px 0 0 2px',
            width: '35px',
            height: '35px',
        },
    };

    let config = {
        showCopyButton: true,
        showNamesButton: true,
        showReloadButton: true,
    };

    function loadConfig() {
        const savedConfig = GM_getValue('imageNamesConfig');
        if (savedConfig) {
            config = JSON.parse(savedConfig);
        }
    }

    function saveConfig() {
        GM_setValue('imageNamesConfig', JSON.stringify(config));
    }

    function applyStyles() {
        document.querySelectorAll('i').forEach((tag) => {
            if (/<img|<span/.test(tag.textContent)) {
                tag.innerHTML = tag.textContent;
            }
        });

        Object.entries(IMAGE_STYLES).forEach(([selector, styles]) => {
            document.querySelectorAll(selector).forEach((element) => {
                Object.assign(element.style, styles);
            });
        });

        Object.entries(TYPE_STYLE).forEach(([selector, color]) => {
            document.querySelectorAll(selector).forEach((element) => {
                Object.assign(element.style, { color, fontWeight: 'bold', whiteSpace: 'nowrap' });
            });
        });
    }

    function createButton(text, onClickFunction) {
        const button = document.createElement('button');
        button.textContent = text;
        Object.assign(button.style, BUTTON_STYLES);

        button.addEventListener('mouseover', () => {
            button.style.backgroundColor = '#e0e0e0';
        });
        button.addEventListener('mouseout', () => {
            button.style.backgroundColor = '#f0f0f0';
        });
        button.addEventListener('click', onClickFunction);

        return button;
    }

    function setupButtons() {
        const boxMenu = document.createElement('div');
        Object.assign(boxMenu.style, {
            position: 'fixed',
            bottom: '100px',
            right: '10px',
            display: 'flex',
            flexDirection: 'column',
        });

        if (config.showCopyButton) {
            const copyButton = createButton('Copy', async () => {
                try {
                    const copyText = document.querySelector('#namewd').value || '';
                    await navigator.clipboard.writeText(copyText);
                    copyButton.textContent = 'Copied!';
                    setTimeout(() => {
                        copyButton.textContent = 'Copy';
                    }, 2000);
                } catch (err) {
                    copyButton.textContent = 'Error!';
                }
            });
            boxMenu.appendChild(copyButton);
        }

        if (config.showNamesButton) {
            boxMenu.appendChild(
                createButton('Names', () => {
                    document.querySelector("button[onclick='showNS()']")?.click();
                })
            );
        }

        if (config.showReloadButton) {
            boxMenu.appendChild(
                createButton('Reload', () => {
                    document.querySelector("button[onclick='excute()']")?.click();
                })
            );
        }

        boxMenu.appendChild(createButton('Config', createConfigMenu));
        document.body.appendChild(boxMenu);
    }

    function createConfigMenu() {
        const modal = document.createElement('div');
        Object.assign(modal.style, {
            position: 'fixed',
            top: '0',
            left: '0',
            width: '100%',
            height: '100%',
            backgroundColor: 'rgba(0, 0, 0, 0.5)',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            zIndex: '1000',
        });

        const menuContent = document.createElement('div');
        Object.assign(menuContent.style, {
            backgroundColor: 'white',
            padding: '20px',
            borderRadius: '10px',
            maxWidth: '300px',
            width: '90%',
        });

        const title = document.createElement('h2');
        title.textContent = 'Configuration';
        title.style.marginTop = '0';

        menuContent.appendChild(title);

        Object.keys(config).forEach((key) => {
            const label = document.createElement('label');
            label.style.display = 'block';
            label.style.marginBottom = '10px';

            const checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            checkbox.checked = config[key];
            checkbox.id = key;
            checkbox.style.webkitAppearance = 'auto';

            checkbox.addEventListener('change', (e) => {
                config[key] = e.target.checked;
            });

            label.appendChild(checkbox);
            label.appendChild(
                document.createTextNode(
                    ' ' +
                    key
                    .replace(/([A-Z])/g, ' $1')
                    .replace(/^./, (str) => str.toUpperCase())
                )
            );
            menuContent.appendChild(label);
        });

        const saveButton = createButton('Save', () => {
            saveConfig();
            modal.remove();
            location.reload();
        });
        saveButton.style.marginRight = '10px';
        saveButton.style.borderRadius = '0';

        const cancelButton = createButton('Cancel', () => modal.remove());
        cancelButton.style.borderRadius = '0';

        menuContent.appendChild(saveButton);
        menuContent.appendChild(cancelButton);

        modal.appendChild(menuContent);
        document.body.appendChild(modal);
    }

    function init() {
        loadConfig();
        applyStyles();
        setupButtons();

        const button = document.querySelector('[onclick="excute()"]');
        if (button) {
            button.addEventListener('click', applyStyles);
        }
    }

    setTimeout(init, 2000);
})();

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址