Carga, gestiona y mueve tus propias plantillas SVG personalizadas en Drawaria.online.
// ==UserScript==
// @name Drawaria Custom Stencils
// @namespace http://tampermonkey.net/
// @version 1.4
// @description Carga, gestiona y mueve tus propias plantillas SVG personalizadas en Drawaria.online.
// @author YouTubeDrawaria
// @match https://drawaria.online/*
// @grant unsafeWindow
// @run-at document-idle
// @icon https://www.google.com/s2/favicons?sz=64&domain=drawaria.online
// @license MIT
// ==/UserScript==
(function() {
'use strict';
const $ = unsafeWindow.jQuery;
if (typeof $ === 'undefined') {
console.error("Drawaria Custom Stencils: jQuery no está disponible en la página.");
return;
}
const STORAGE_KEY = 'drawaria_custom_stencils';
// --- 1. FUNCIONES DE ALMACENAMIENTO ---
function getCustomStencils() {
try {
return JSON.parse(localStorage.getItem(STORAGE_KEY)) || [];
} catch (e) {
console.error("Error al cargar las plantillas personalizadas:", e);
return [];
}
}
function saveCustomStencils(stencils) {
localStorage.setItem(STORAGE_KEY, JSON.stringify(stencils));
}
// --- 2. LÓGICA DE DRAG & DROP (de Cubic Engine) ---
// Función para hacer un elemento arrastrable.
function makeDragable(draggableElement, update) {
let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
draggableElement.onmousedown = dragMouseDown;
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
draggableElement.style.top = (draggableElement.offsetTop - pos2) + "px";
draggableElement.style.left = (draggableElement.offsetLeft - pos1) + "px";
if (update) {
update();
}
}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
}
}
// --- 3. LÓGICA PRINCIPAL DEL SCRIPT ---
function handleFileSelect(event) {
const file = event.target.files[0];
if (file && file.type === 'image/svg+xml') {
const reader = new FileReader();
reader.onload = function(e) {
const stencilName = prompt('Ingresa un nombre para tu plantilla:', file.name.replace('.svg', ''));
if (stencilName && stencilName.trim() !== "") {
const stencils = getCustomStencils();
const svgData = e.target.result;
const dataUrl = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgData)));
stencils.push({ name: stencilName, data: dataUrl });
saveCustomStencils(stencils);
renderCustomStencils();
}
};
reader.readAsText(file);
} else {
alert('Por favor, selecciona un archivo SVG válido.');
}
event.target.value = '';
}
function renderCustomStencils() {
const container = $('.inventorydlg-itemscontainer');
if (!container.length) return;
$('.custom-stencil-item').remove();
const stencils = getCustomStencils();
stencils.forEach((stencil, index) => {
const stencilEl = $(`
<span class="accountbox-itemscontainer-slot custom-stencil-item" title="${stencil.name}" style="position: relative;">
<div><img src="${stencil.data}" style="padding: 3px;"></div>
</span>
`);
stencilEl.on('click', (e) => {
e.stopPropagation();
activateStencil(stencil.data);
$('#inventorydlg').modal('hide');
});
const deleteBtn = $('<button>✖</button>').css({
position: 'absolute', top: '0', right: '0', zIndex: '10', background: 'rgba(200, 0, 0, 0.7)',
color: 'white', border: 'none', cursor: 'pointer', borderRadius: '0 0 0 5px', lineHeight: '1',
});
deleteBtn.on('click', (e) => {
e.stopPropagation();
if (confirm(`¿Seguro que quieres borrar la plantilla "${stencil.name}"?`)) {
let currentStencils = getCustomStencils();
currentStencils.splice(index, 1);
saveCustomStencils(currentStencils);
renderCustomStencils();
}
});
stencilEl.append(deleteBtn);
container.append(stencilEl);
});
}
// --- FUNCIÓN CLAVE MEJORADA ---
function activateStencil(dataUrl) {
$('#stencilinstance').remove();
// 1. Crear el elemento de imagen y darle un estilo inicial
const imgElement = $('<img id="stencilinstance">').attr('src', dataUrl).css({
position: 'fixed',
left: '50%',
top: '50%',
transform: 'translate(-50%, -50%)',
cursor: 'move',
'max-width': '150px',
'max-height': '150px',
'box-shadow': '0 0 1px 1px cornflowerblue inset' // Estilo del GhostCanvas
});
// 2. Añadirlo a la página
$('body').append(imgElement);
// 3. Hacerlo arrastrable usando la lógica que proporcionaste
makeDragable(imgElement[0], null); // Pasamos el elemento DOM, no el objeto jQuery
}
// --- 4. INYECCIÓN EN LA INTERFAZ DEL JUEGO ---
function injectUI() {
const modalHeader = $('#inventory-title');
if (modalHeader.length && !$('#custom-stencil-loader').length) {
const fileInput = $('<input type="file" accept=".svg" style="display: none;" id="custom-stencil-file-input">');
fileInput.on('change', handleFileSelect);
const loadButton = $('<button id="custom-stencil-loader" class="btn btn-sm btn-success" style="margin-left: 15px;">Cargar Plantilla</button>');
loadButton.on('click', () => fileInput.click());
modalHeader.parent().append(loadButton, fileInput);
renderCustomStencils();
}
}
const observer = new MutationObserver(() => {
if ($('#inventorydlg').is(':visible')) {
injectUI();
}
});
observer.observe(document.body, { childList: true, subtree: true });
})();