;
case 'v75': return
;
case 'v76': return
;
default: return
?
;
}
}
// ─── Callout apuntando al botón ─────────────────────────────────────────────
function ThemeCallout({ visible }) {
return (
👆
¡Mira las distintas opciones web que tenemos para ti!
);
}
// ─── ClipCutRedirect — registra la tarjeta ClipCut y la hace clickeable ─────
// Busca en el DOM la tarjeta que contiene "clipcut.xyz" y sólo ESA tarjeta
// redirige al hacer click. El resto de tarjetas de proyectos queda intacto.
function useClipCutRedirect() {
useEffect(() => {
const MARKER = 'clipcut.xyz';
const URL = 'https://clipcut.xyz';
const cards = new Set();
let scanTimer = null;
// a partir del elemento más estrecho que contiene "clipcut.xyz",
// sube hasta el límite de la tarjeta (cuando el padre crece mucho = hermanos).
const findCardBoundary = (leaf) => {
let cur = leaf;
while (cur && cur.parentElement && cur.parentElement !== document.body) {
const parent = cur.parentElement;
const curLen = (cur.innerText || '').length;
const parentLen = (parent.innerText || '').length;
// si el padre es >1.6x más grande, cur es la tarjeta
if (parentLen > curLen * 1.6 + 80) break;
// si el padre ya es demasiado grande (sección con varias tarjetas), paramos
if (parentLen > 800) break;
cur = parent;
}
return cur;
};
const clearPointers = () => {
cards.forEach(el => {
try {
el.style.cursor = '';
el.removeAttribute('title');
delete el.dataset._ccCard;
} catch (_) {}
});
cards.clear();
};
const scan = () => {
clearPointers();
const all = document.body.querySelectorAll('*:not(script):not(style)');
const leaves = [];
all.forEach(el => {
const txt = el.innerText || '';
if (!txt.includes(MARKER)) return;
// sólo el contenedor más estrecho (ningún hijo lo contiene)
const child = Array.from(el.children).find(c => (c.innerText || '').includes(MARKER));
if (child) return;
leaves.push(el);
});
leaves.forEach(leaf => {
const card = findCardBoundary(leaf);
if (!card || cards.has(card)) return;
cards.add(card);
card.dataset._ccCard = '1';
card.style.cursor = 'pointer';
card.title = 'Abrir clipcut.xyz — Editor de video online gratuito';
});
};
const handler = (e) => {
// buscamos si el click está dentro de alguna de las tarjetas registradas
let inCard = null;
for (const card of cards) {
if (card.contains(e.target)) { inCard = card; break; }
}
if (!inCard) return;
// respetar elementos interactivos reales dentro de la tarjeta
let n = e.target;
while (n && n !== inCard) {
if ((n.tagName === 'A' && n.href) || n.tagName === 'BUTTON' || n.tagName === 'INPUT' || n.tagName === 'SELECT' || n.tagName === 'TEXTAREA') return;
n = n.parentElement;
}
e.preventDefault();
e.stopPropagation();
window.open(URL, '_blank', 'noopener,noreferrer');
};
const scheduleScan = () => {
if (scanTimer) return;
scanTimer = setTimeout(() => { scanTimer = null; scan(); }, 120);
};
const mo = new MutationObserver(scheduleScan);
mo.observe(document.body, { childList: true, subtree: true, characterData: true });
scan();
document.addEventListener('click', handler, true);
return () => {
document.removeEventListener('click', handler, true);
mo.disconnect();
if (scanTimer) clearTimeout(scanTimer);
clearPointers();
};
}, []);
}
// ─── ThemeSwitcher con categorías ───────────────────────────────────────────
function ThemeSwitcher({ variants, current, setVariant, onOpenChange, categories, secretsUnlocked }) {
const [open, setOpen] = useState(false);
const wrapperRef = useRef(null);
const varMap = Object.fromEntries(variants.map(v => [v.id, v]));
const currentVar = varMap[current] || variants[0];
useEffect(() => {
if (!open) return;
const handleClick = (e) => {
if (!wrapperRef.current?.contains(e.target)) {
setOpen(false);
onOpenChange?.(false);
}
};
document.addEventListener('mousedown', handleClick);
return () => document.removeEventListener('mousedown', handleClick);
}, [open]);
const toggle = () => {
const next = !open;
setOpen(next);
onOpenChange?.(next);
};
return (
{/* Panel */}
Seleccionar temática — {categories.reduce((n,c) => n + c.ids.length, 0)} opciones
{categories.map(cat => {
const isSecret = cat.id === 'secrets';
const catVars = cat.ids.map(id => varMap[id]).filter(Boolean);
return (
{/* Category header */}
{/* Variant grid */}
{catVars.map(v => (
))}
);
})}
{/* Main button */}
);
}
// ─── App ────────────────────────────────────────────────────────────────────
function App() {
const [lang, setLang] = useState('es');
const [variant, setVariant] = useState('v19');
const [calloutActive, setCalloutActive] = useState(true);
const [dropdownOpen, setDropdownOpen] = useState(false);
const [secretsUnlocked, setSecretsUnlocked] = useState(false);
const [variantLoading, setVariantLoading] = useState(false);
useClipCutRedirect();
// Reinicia el timer de 20s cada vez que cambia la versión
useEffect(() => {
setCalloutActive(true);
const t = setTimeout(() => setCalloutActive(false), 7000);
return () => clearTimeout(t);
}, [variant]);
// Konami code: ↑ ↑ ↓ ↓ ← → ← →
useEffect(() => {
const KONAMI = ['ArrowUp','ArrowUp','ArrowDown','ArrowDown','ArrowLeft','ArrowRight','ArrowLeft','ArrowRight'];
let pos = 0;
const handler = (e) => {
if (e.key === KONAMI[pos]) {
pos++;
if (pos === KONAMI.length) {
pos = 0;
if (!secretsUnlocked) {
setSecretsUnlocked(true);
}
}
} else {
pos = e.key === KONAMI[0] ? 1 : 0;
}
};
document.addEventListener('keydown', handler);
return () => document.removeEventListener('keydown', handler);
}, [secretsUnlocked]);
const activeCategories = secretsUnlocked ? [...CATEGORIES, SECRET_CATEGORY] : CATEGORIES;
const showCallout = calloutActive && !dropdownOpen;
// Lazy-load variant on demand usando el loader definido en index.html
const handleSetVariant = (id) => {
const entry = VARIANT_FILES[id];
if (!entry) return;
const [src, globalName] = entry;
if (window[globalName]) { setVariant(id); return; }
setVariantLoading(true);
window.loadVariantFile(src).then(() => {
setVariantLoading(false);
setVariant(id);
});
};
const Current = window[VARIANT_FILES[variant]?.[1]] || window.V19Comic;
return (
);
}
ReactDOM.createRoot(document.getElementById('root')).render(
);