Glow por rareza, glow RGB en bordes, buffs visibles, hover iconos, skillbar, inventory y character
// ==UserScript==
// @name Goon UI
// @namespace https://hordes.io/
// @version 2.2.8
// @description Glow por rareza, glow RGB en bordes, buffs visibles, hover iconos, skillbar, inventory y character
// @match https://hordes.io/*
// @grant none
// @license MIT
// @author ujuju
// ==/UserScript==
(function() {
'use strict';
/* =======================
COLORES POR RAREZA
======================= */
const rarityColors = {
grey: "rgba(160,160,160,.8)",
white: "rgba(255,255,255,.8)",
blue: "rgba(90,160,255,.9)",
purp: "rgba(190,120,255,.95)",
green: "rgba(60,255,60,.9)"
};
/* =======================
CSS
======================= */
const css = `
.slot {
position: relative !important;
overflow: visible !important;
}
.tm-glow {
position: absolute;
top: -6px;
left: -6px;
right: -6px;
bottom: -6px;
border-radius: 10px;
filter: blur(8px);
opacity: 0.6;
z-index: 0 !important;
pointer-events: none;
animation: tmGlowPulse 3s ease-in-out infinite;
}
@keyframes tmGlowPulse {
0%,100% { opacity: .35 }
50% { opacity: .7 }
}
.slot img.icon {
position: relative !important;
z-index: 2 !important;
transition: transform 0.2s ease;
}
.slot:hover img.icon {
transform: scale(1.2);
}
.slot .slottext,
.slot .stacks {
position: absolute !important;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 5 !important;
font-weight: 800;
text-shadow: 0 0 4px #000;
}
/* Buffs */
.buffarray .slot .stacks {
bottom: 4px !important;
right: 4px !important;
}
.buffarray .slot .time {
top: 4px !important;
left: 4px !important;
}
.character .slot .stacks,
.equipment .slot .stacks {
position: relative !important;
z-index: 20 !important;
top: auto !important;
left: auto !important;
transform: none !important;
}
.character .slot .overlay,
.equipment .slot .overlay {
z-index: 10 !important;
}
.progressBar.bghealth {
height: 20px !important;
border-radius: 10px;
background: linear-gradient(90deg,#3cff8f,#16a34a);
box-shadow: inset 0 0 6px rgba(0,0,0,.6),0 0 10px rgba(60,255,143,.4);
}
.progressBar.bgenemy {
height: 20px !important;
border-radius: 10px;
background: linear-gradient(90deg,#ff9b3a,#ff6a00);
box-shadow: inset 0 0 6px rgba(0,0,0,.6),0 0 12px rgba(255,120,40,.5);
}
.progressBar.bgmana {
height: 12px !important;
border-radius: 8px;
background: linear-gradient(90deg,#5db8ff,#2563eb);
}
.progressBar span.left {
max-width: none !important;
overflow: visible !important;
text-overflow: unset !important;
white-space: nowrap !important;
}
.buff,
.progressBar .buff,
.buffarray .slot {
z-index: 10 !important;
position: relative !important;
}
/* GLOW RGB en bordes de ventanas */
.window.panel-black {
position: relative;
}
.window.panel-black::before {
content: '';
position: absolute;
top: -4px; left: -4px; right: -4px; bottom: -4px;
border-radius: 6px;
z-index: -1;
pointer-events: none;
background: linear-gradient(45deg, red, orange, yellow, green, cyan, blue, violet);
background-size: 400% 400%;
animation: rgbGlow 8s linear infinite;
filter: blur(8px);
}
@keyframes rgbGlow {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
/* =======================
LOW HP WARNING (≤45%)
======================= */
@keyframes lowHpBlink {
0% { box-shadow: 0 0 6px rgba(255,0,0,.4); }
50% { box-shadow: 0 0 18px rgba(255,0,0,.95); }
100% { box-shadow: 0 0 6px rgba(255,0,0,.4); }
}
.progressBar.lowhp {
animation: lowHpBlink 0.8s infinite;
}
/* =======================
LOW HP BLINK REAL
======================= */
@keyframes lowHpBlink {
0% { box-shadow: inset 0 0 0 rgba(0,0,0,0), 0 0 6px rgba(255,0,0,.4); }
50% { box-shadow: inset 0 0 0 rgba(0,0,0,0), 0 0 18px rgba(255,0,0,.95); }
100% { box-shadow: inset 0 0 0 rgba(0,0,0,0), 0 0 6px rgba(255,0,0,.4); }
}
/* contenedor de la vida */
.bar.lowhp {
animation: lowHpBlink 0.8s infinite;
border-radius: 12px;
}
`;
const style = document.createElement('style');
style.textContent = css;
document.head.appendChild(style);
/* =======================
FUNCION PARA GLOW POR RAREZA
======================= */
function applyItemGlow(slot) {
if (!slot) return;
const icon = slot.querySelector('img.icon');
if (!icon) return;
// Ignorar slots vacíos (grey o sin src)
if (slot.classList.contains('grey') || !icon.src || icon.src.includes('slotbg/bg')) return;
if (slot.querySelector('.tm-glow')) return;
// Obtener rareza segura
let rarity = 'white'; // valor por defecto
for (const r of Object.keys(rarityColors)) {
if (slot.classList.contains(r)) {
rarity = r;
break;
}
}
const glow = document.createElement('div');
glow.className = 'tm-glow';
glow.style.background = rarityColors[rarity];
slot.prepend(glow);
}
/* =======================
ESCANEAR SLOTS
======================= */
function scanSlots() {
const slots = document.querySelectorAll(
'#skillbar .slot, .bag .slot, #equipslots .slot, .character .slot, .slotcontainer .slot'
);
slots.forEach(applyItemGlow);
}
/* =======================
OBSERVADOR DE CAMBIOS
======================= */
const observer = new MutationObserver(scanSlots);
observer.observe(document.body, { childList: true, subtree: true });
setInterval(scanSlots, 1000);
/* =======================
DETECTAR LOW HP (45%)
======================= */
function checkLowHp() {
document.querySelectorAll(
'.progressBar.bghealth:not(.hpdelta), .progressBar.bgenemy:not(.hpdelta)'
).forEach(bar => {
const width = parseFloat(bar.style.width);
if (isNaN(width)) return;
const container = bar.closest('.bar');
if (!container) return;
if (width <= 45) {
container.classList.add('lowhp');
} else {
container.classList.remove('lowhp');
}
});
}
setInterval(checkLowHp, 120);
})();