Greasy Fork is available in English.
Añade efectos de nieve, música y decoraciones navideñas a Drawaria.online con un menú de mod.
// ==UserScript==
// @name 🎄 Drawaria.online Christmas Effects Mod Menu 🎅
// @namespace http://tampermonkey.net/
// @version 1.9
// @description Añade efectos de nieve, música y decoraciones navideñas a Drawaria.online con un menú de mod.
// @author YouTubeDrawaria
// @include https://drawaria.online/*
// @include https://*.drawaria.online/*
// @require https://update.greasyfork.icu/scripts/554529/1688219/Torn%20Radial%20UI%20Components%20Library.js
// @grant GM_addStyle
// @grant GM_registerMenuCommand
// @connect images.unsplash.com
// @connect ibb.co
// @connect myinstants.com
// @connect picsum.photos
// @run-at document-start
// @icon https://www.google.com/s2/favicons?sz=64&domain=drawaria.online
// @license MIT
// ==/UserScript==
/* global TornRadialUI */
(function() {
'use strict';
// ==================== CONFIGURACIÓN Y UTILIDADES ====================
const STORAGE_KEY = 'drawaria-christmas-mod-settings';
const DEFAULT_SETTINGS = {
snowfallEnabled: false,
christmasBgEnabled: false,
christmasColorsEnabled: false,
musicEnabled: false
};
let settings = loadSettings();
let audioElement = null;
/**
* Carga la configuración desde localStorage.
* @returns {object} La configuración actual o la predeterminada.
*/
function loadSettings() {
try {
const stored = localStorage.getItem(STORAGE_KEY);
return stored ? { ...DEFAULT_SETTINGS, ...JSON.parse(stored) } : DEFAULT_SETTINGS;
} catch (e) {
console.error('Drawaria Christmas Mod: Error al cargar la configuración.', e);
return DEFAULT_SETTINGS;
}
}
/**
* Guarda la configuración en localStorage.
*/
function saveSettings() {
try {
localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
} catch (e) {
console.error('Drawaria Christmas Mod: Error al guardar la configuración.', e);
}
}
// ==================== APLICACIÓN DE EFECTOS ====================
/**
* Aplica o remueve las clases y elementos de efectos navideños según la configuración.
*/
function applyChristmasEffects() {
const body = document.body;
// 1. Nieve
let snowContainer = document.getElementById('drawaria-christmas-snow');
if (settings.snowfallEnabled) {
if (!snowContainer) {
snowContainer = document.createElement('div');
snowContainer.id = 'drawaria-christmas-snow';
body.appendChild(snowContainer);
// Generar los copos de nieve (CSS-only solution for performance)
for (let i = 0; i < 50; i++) {
const flake = document.createElement('div');
flake.className = 'snow-flake';
flake.style.left = `${Math.random() * 100}%`;
flake.style.animationDuration = `${(Math.random() * 10) + 5}s`; // 5 to 15 seconds
flake.style.animationDelay = `-${Math.random() * 15}s`; // Start at random phase
flake.style.opacity = `${(Math.random() * 0.5) + 0.5}`; // 0.5 to 1.0
flake.style.fontSize = `${(Math.random() * 10) + 10}px`; // 10px to 20px
snowContainer.appendChild(flake);
}
}
snowContainer.style.display = 'block';
} else {
if (snowContainer) {
snowContainer.style.display = 'none';
}
}
// 2. Fondo (Background)
if (settings.christmasBgEnabled) {
body.classList.add('christmas-bg');
} else {
body.classList.remove('christmas-bg');
}
// 3. Colores de la Interfaz (Red/Green)
if (settings.christmasColorsEnabled) {
body.classList.add('christmas-ui-colors');
} else {
body.classList.remove('christmas-ui-colors');
}
// 4. Música
if (settings.musicEnabled) {
if (!audioElement) {
audioElement = new Audio('https://www.myinstants.com/media/sounds/jingle-bells-8bit.mp3'); // URL de ejemplo
audioElement.loop = true;
audioElement.volume = 0.3;
}
// Intentar reproducir (puede requerir interacción del usuario)
audioElement.play().catch(e => {
console.log('Drawaria Christmas Mod: Reproducción de audio bloqueada, requiere interacción del usuario.', e);
// Se podría añadir un botón de "Play" si el navegador lo bloquea.
});
} else {
if (audioElement) {
audioElement.pause();
audioElement.currentTime = 0;
}
}
}
// ==================== CREACIÓN DE LA INTERFAZ (UI) ====================
/**
* Genera el modal del Mod Menu usando TornRadialUI.UIComponents.
* @returns {HTMLElement} El elemento DOM del modal.
*/
function createModMenuModal() {
if (!window.TornRadialUI || !window.TornRadialUI.UIComponents) {
console.error('Torn Radial UI Components Library no está disponible.');
return null;
}
const UIComponents = window.TornRadialUI.UIComponents;
const modal = document.createElement('div');
modal.id = 'drawaria-christmas-mod-menu';
modal.className = 'torn-radial-overlay';
modal.style.display = 'none'; // Se oculta inicialmente
modal.innerHTML = `
<div class="torn-radial-container-base" style="max-width: 500px;">
<div class="torn-radial-header-base christmas-header">
<div style="display: flex; align-items: center; gap: 8px; flex: 1;">
<h2>🎄 Menú de Efectos de Navidad 🎅</h2>
</div>
<button class="modal-close" id="mod-menu-close-btn">✕</button>
</div>
<div class="torn-radial-body-base">
<div class="torn-radial-section">
<h3>Opciones de Decoración</h3>
<div class="setting-item">
<label>Efecto de Nieve</label>
<input type="checkbox" id="snowfall-toggle" ${settings.snowfallEnabled ? 'checked' : ''}>
</div>
<div class="setting-item">
<label>Fondo de Pantalla Navideño</label>
<input type="checkbox" id="bg-toggle" ${settings.christmasBgEnabled ? 'checked' : ''}>
</div>
<div class="setting-item">
<label>Colores Interfaz (Rojo/Verde)</label>
<input type="checkbox" id="colors-toggle" ${settings.christmasColorsEnabled ? 'checked' : ''}>
</div>
</div>
<div class="torn-radial-section">
<h3>Opciones de Sonido</h3>
<div class="setting-item">
<label>Música Navideña (8-bit Jingle Bells)</label>
<input type="checkbox" id="music-toggle" ${settings.musicEnabled ? 'checked' : ''}>
</div>
<p style="font-size: 11px; opacity: 0.7; margin-top: 5px;">*La reproducción de música puede requerir que hagas clic en la página primero.</p>
</div>
<div class="torn-radial-section" style="margin-top: 20px; font-size: 12px; opacity: 0.8;">
<p>Desarrollado por YouTubeDrawaria | Usando Torn Radial UI Library</p>
</div>
</div>
<div class="torn-radial-footer-base" style="justify-content: flex-end;">
<button class="torn-radial-btn-base btn-primary" id="mod-menu-save-btn">Guardar y Aplicar</button>
</div>
</div>
`;
return modal;
}
/**
* Abre el modal del Mod Menu y adjunta los manejadores de eventos.
*/
function openModMenu() {
const modal = document.getElementById('drawaria-christmas-mod-menu');
if (!modal) return;
// Mostrar el modal
modal.style.display = 'flex';
// 1. Cierre del modal
const closeBtn = document.getElementById('mod-menu-close-btn');
closeBtn.onclick = () => { modal.style.display = 'none'; };
// 2. Guardar y Aplicar
const saveBtn = document.getElementById('mod-menu-save-btn');
saveBtn.onclick = () => {
// Recoger los valores de los checkboxes
settings.snowfallEnabled = document.getElementById('snowfall-toggle').checked;
settings.christmasBgEnabled = document.getElementById('bg-toggle').checked;
settings.christmasColorsEnabled = document.getElementById('colors-toggle').checked;
settings.musicEnabled = document.getElementById('music-toggle').checked;
saveSettings();
applyChristmasEffects();
modal.style.display = 'none';
};
// 3. Manejadores de cambios instantáneos (opcional, para feedback)
// Aunque se usará el botón de guardar, los toggles deben reflejar el estado actual.
document.getElementById('snowfall-toggle').onchange = (e) => settings.snowfallEnabled = e.target.checked;
document.getElementById('bg-toggle').onchange = (e) => settings.christmasBgEnabled = e.target.checked;
document.getElementById('colors-toggle').onchange = (e) => settings.christmasColorsEnabled = e.target.checked;
document.getElementById('music-toggle').onchange = (e) => settings.musicEnabled = e.target.checked;
}
// ==================== ESTILOS CSS ====================
function addStyles() {
// Estilos base para la librería Torn Radial UI (oscuro y minimalista)
GM_addStyle(`
/* Estilos base del modal y overlay */
.torn-radial-overlay {
display: flex;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 1000000;
justify-content: center;
align-items: center;
padding: 20px;
overflow-y: auto;
}
.torn-radial-container-base {
background: #1e1e1e; /* Color de fondo oscuro */
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
width: 100%;
max-width: 600px;
color: #ffffff;
overflow: hidden;
border: 1px solid #333;
}
.torn-radial-header-base {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
background: #252525;
border-bottom: 1px solid #333;
}
.torn-radial-header-base h2 {
margin: 0;
font-size: 18px;
font-weight: 600;
}
.torn-radial-body-base {
padding: 20px;
max-height: 70vh;
overflow-y: auto;
}
.torn-radial-footer-base {
display: flex;
gap: 10px;
padding: 15px 20px;
background: #252525;
border-top: 1px solid #333;
flex-wrap: wrap;
}
/* Componentes */
.torn-radial-section {
margin-bottom: 15px;
padding: 15px;
background: #2a2a2a;
border-radius: 6px;
border: 1px solid #333;
}
.torn-radial-section h3 {
margin-top: 0;
font-size: 16px;
color: #4aa3df; /* Color de énfasis */
margin-bottom: 10px;
}
.setting-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px dashed #333;
}
.setting-item:last-child {
border-bottom: none;
}
/* Botones */
.torn-radial-btn-base {
padding: 8px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s;
font-size: 13px;
font-weight: 500;
}
.btn-primary {
background-color: #4aa3df;
color: white;
}
.btn-primary:hover {
background-color: #378ac0;
}
.btn-success {
background-color: #3ea34a;
color: white;
}
.btn-danger {
background-color: #a33a3a;
color: white;
}
.modal-close {
background: none;
border: none;
color: #fff;
font-size: 18px;
cursor: pointer;
opacity: 0.8;
}
.modal-close:hover {
opacity: 1;
}
/* Estilos del Toggle (Mejora visual) */
input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
position: relative;
width: 38px;
height: 20px;
border-radius: 20px;
background: #444;
transition: background 0.3s;
cursor: pointer;
}
input[type="checkbox"]:checked {
background: #3ea34a; /* Success color for ON state */
}
input[type="checkbox"]::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
background: #fff;
border-radius: 50%;
transition: left 0.3s;
}
input[type="checkbox"]:checked::after {
left: 20px;
}
/* ==================== ESTILOS NAVIDEÑOS ==================== */
/* 1. Fondo de Pantalla */
.christmas-bg {
background-image: url('https://ibb.co/6N9T1L8') !important; /* URL de una imagen de fondo festivo (ejemplo) */
background-size: cover !important;
background-position: center center !important;
background-attachment: fixed !important;
}
/* 2. Colores de Interfaz (Estiliza los headers para el look navideño) */
.christmas-header {
background: linear-gradient(135deg, #a33a3a 0%, #3ea34a 100%); /* Rojo y Verde */
color: white !important;
}
.christmas-ui-colors .torn-radial-section h3 {
color: #a33a3a !important; /* Rojo Navidad */
}
.christmas-ui-colors .btn-primary {
background-color: #3ea34a; /* Verde Navidad */
}
/* 3. Efecto de Nieve */
#drawaria-christmas-snow {
pointer-events: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999999;
overflow: hidden;
}
.snow-flake {
position: absolute;
color: white;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
top: -20px;
animation: snowfall linear infinite;
}
.snow-flake::before {
content: '❅'; /* Carácter de copo de nieve */
}
@keyframes snowfall {
0% { transform: translate(0, 0); opacity: 1; }
100% { transform: translate(0, 100vh); opacity: 0.5; }
}
`);
}
// ==================== INICIALIZACIÓN ====================
function initialize() {
// 1. Añadir estilos CSS
addStyles();
// 2. Crear y añadir el modal al DOM
const modMenuModal = createModMenuModal();
if (modMenuModal) {
document.body.appendChild(modMenuModal);
}
// 3. Registrar el comando del menú de Tampermonkey/Greasemonkey
GM_registerMenuCommand("🎄 Abrir Menú de Navidad", openModMenu);
// 4. Aplicar los efectos iniciales según la configuración cargada
// Se hace un pequeño retraso para asegurar que el DOM esté más listo.
setTimeout(applyChristmasEffects, 1000);
}
// Esperar a que el cuerpo del documento esté disponible
if (document.body) {
initialize();
} else {
document.addEventListener('DOMContentLoaded', initialize);
}
})();