// ==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);
})();