Widget:GuildAssets
Ir para navegação
Ir para pesquisar
<style>
/* TabberNeue: mata o vazamento entre abas */
.tabber__panel:not(.tabber__panel--active) {
display: none !important;
}
.tabber__panel.tabber__panel--active {
animation: utabTabIn 0.15s ease-out;
}
@keyframes utabTabIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.utab {
font-family: "Segoe UI", Arial, sans-serif;
color: #e2ecff;
padding: 12px 0 0;
width: 100%;
min-width: 0;
overflow: hidden;
box-sizing: border-box;
position: relative;
}
.utab__section {
display: none;
}
.utab__levels {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.utab__levelBtn {
border: 1px solid #274a74;
background: #13243a;
padding: 6px 12px;
border-radius: 10px;
font-weight: 600;
color: #cfe1ff;
cursor: pointer;
transition: all 0.2s ease;
}
.utab__levelBtn:hover {
border-color: #4a86d8;
color: #ffffff;
}
.utab__levelBtn.is-active {
background: #2e7dd7;
border-color: #2e7dd7;
color: #ffffff;
}
.utab__levelBtn:focus-visible {
outline: 2px solid rgba(46, 125, 215, 0.4);
outline-offset: 2px;
}
.utab__display {
display: flex;
gap: 18px;
align-items: start;
transition: opacity 0.35s ease, transform 0.35s ease;
will-change: opacity, transform;
}
.utab__display.is-image-empty .utab__image {
display: none;
}
.utab__display.is-fading {
animation: utabFade 0.6s ease-in-out;
}
.utab__image {
border-radius: 12px;
border: 1px solid #203c5f;
background: #0b1422;
padding: 10px;
flex-shrink: 0;
max-width: 50%;
}
.utab__image img {
display: block;
height: auto;
max-width: 100%;
border-radius: 8px;
}
.utab__image.is-empty {
display: none;
}
.utab__stats {
display: flex;
flex-direction: column;
gap: 10px;
color: #dbe7ff;
font-size: 14px;
flex: 1;
min-width: 0;
}
.utab__stat {
background: #13243a;
border: 1px solid #274a74;
border-radius: 10px;
padding: 10px 12px;
}
.utab__statTitle {
font-weight: 700;
color: #8bb8ff;
}
.utab__statList {
margin: 6px 0 0;
padding-left: 18px;
display: grid;
gap: 2px;
list-style: disc;
list-style-position: outside;
}
.utab__statList li {
display: list-item;
text-align: left;
}
.utab__descContent {
margin-top: 6px;
line-height: 1.5;
}
.utab__descContent ul,
.utab__descContent ol {
margin: 4px 0;
padding-left: 18px;
}
.utab__descContent li {
display: list-item;
}
.utab__descContent p {
margin: 4px 0;
}
.utab__descContent h1,
.utab__descContent h2,
.utab__descContent h3,
.utab__descContent h4,
.utab__descContent h5,
.utab__descContent h6 {
color: #a0c4ff;
border-bottom: none;
margin: 8px 0 4px;
}
.utab__costRow {
position: relative;
}
.utab__costBerry,
.utab__costGems,
.utab__costPoints {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 700;
line-height: 1.1;
font-size: 15px;
}
.utab__costBerry {
color: #ffd166;
}
.utab__costGems {
color: #57d889;
}
.utab__costPoints {
color: #a6b0bf;
}
@keyframes utabFade {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 600px) {
.utab__display {
flex-direction: column-reverse;
}
.utab__image {
max-width: 100%;
order: -1;
}
}
</style>
<script>
(function () {
/* Garante que o script só roda UMA VEZ mesmo carregado N vezes */
if (window.__utabLoaded) return;
window.__utabLoaded = true;
function handleArrowNavigation(event, buttons, activate) {
var keys = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"];
if (keys.indexOf(event.key) === -1) return;
event.preventDefault();
var currentIndex = buttons.indexOf(document.activeElement);
if (currentIndex === -1) return;
var nextIndex = currentIndex;
if (event.key === "Home") nextIndex = 0;
else if (event.key === "End") nextIndex = buttons.length - 1;
else if (event.key === "ArrowLeft" || event.key === "ArrowUp") nextIndex = (currentIndex - 1 + buttons.length) % buttons.length;
else if (event.key === "ArrowRight" || event.key === "ArrowDown") nextIndex = (currentIndex + 1) % buttons.length;
activate(nextIndex, true);
}
function triggerFade(element) {
element.classList.remove("is-fading");
element.offsetWidth;
element.classList.add("is-fading");
}
var upgradeCosts = [
{ level: 1, berries: "50.000", gems: null, points: "400" },
{ level: 2, berries: "250.000", gems: "10", points: "1.500" },
{ level: 3, berries: "400.000", gems: "20", points: "3.000" },
{ level: 4, berries: "1.000.000", gems: "50", points: "12.500" },
{ level: 5, berries: "1.800.000", gems: "90", points: "28.000" }
];
function buildLevelUI(utab) {
if (utab.getAttribute("data-utab-init")) return;
utab.setAttribute("data-utab-init", "1");
var section = utab.querySelector(".utab__section");
if (!section) return;
var levelElements = [].slice.call(section.querySelectorAll(".utab__level"));
if (!levelElements.length) return;
var label = section.getAttribute("data-tab") || "Níveis";
var levels = levelElements.map(function (el, i) {
var num = el.getAttribute("data-level") || String(i + 1);
var img = el.querySelector(".utab__mediaImage");
var desc = el.querySelector(".utab__desc");
return {
level: num,
imageHtml: img ? img.innerHTML.trim() : "",
descHtml: desc ? desc.innerHTML.trim() : ""
};
});
var nav = document.createElement("div");
nav.className = "utab__levels";
nav.setAttribute("role", "tablist");
nav.setAttribute("aria-label", "Níveis de " + label);
var display = document.createElement("div");
display.className = "utab__display";
var imageWrap = document.createElement("div");
imageWrap.className = "utab__image";
var stats = document.createElement("div");
stats.className = "utab__stats";
display.appendChild(imageWrap);
display.appendChild(stats);
utab.appendChild(nav);
utab.appendChild(display);
var buttons = levels.map(function (level) {
var btn = document.createElement("button");
btn.type = "button";
btn.className = "utab__levelBtn";
btn.textContent = "Nv " + level.level;
btn.setAttribute("role", "tab");
btn.setAttribute("aria-selected", "false");
btn.setAttribute("tabindex", "-1");
nav.appendChild(btn);
return btn;
});
var activeIndex = -1;
buttons.forEach(function (btn, index) {
btn.addEventListener("click", function () { activateLevel(index, true); });
btn.addEventListener("keydown", function (e) { handleArrowNavigation(e, buttons, activateLevel); });
});
function activateLevel(index, shouldFocus) {
if (!levels.length) return;
var safe = Math.max(0, Math.min(index, levels.length - 1));
if (safe === activeIndex) {
if (shouldFocus) buttons[safe].focus();
return;
}
var current = levels[safe];
buttons.forEach(function (btn, i) {
var active = i === safe;
btn.classList.toggle("is-active", active);
btn.setAttribute("aria-selected", active ? "true" : "false");
btn.setAttribute("tabindex", active ? "0" : "-1");
});
if (current.imageHtml) {
imageWrap.innerHTML = current.imageHtml;
imageWrap.classList.remove("is-empty");
display.classList.remove("is-image-empty");
} else {
imageWrap.innerHTML = "";
imageWrap.classList.add("is-empty");
display.classList.add("is-image-empty");
}
var levelNum = parseInt(current.level, 10);
var cost = upgradeCosts.filter(function (c) { return c.level === levelNum; })[0];
var costHtml = cost
? '
Custos de Melhoria
- '
+ '
- ' + cost.berries + ' berries ' + (cost.gems ? '
- ' + cost.gems + ' gemas ' : ) + '
- ' + cost.points + ' pontos ' + '
'
: "";
var infoHtml = current.descHtml
? '
Informações
' + current.descHtml + '
'
: "";
stats.innerHTML = infoHtml + costHtml;
triggerFade(display);
activeIndex = safe;
if (shouldFocus) buttons[safe].focus();
}
activateLevel(0, false);
}
function initWidgets() {
[].slice.call(document.querySelectorAll(".utab:not([data-utab-init])")).forEach(buildLevelUI);
}
/* Roda quando DOM estiver pronto */
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", initWidgets);
} else {
initWidgets();
}
/* Observa novos .utab que apareçam depois (ex: tabber lazy-load) */
if (window.MutationObserver) {
new MutationObserver(function () { initWidgets(); })
.observe(document.documentElement, { childList: true, subtree: true });
}
})();
</script>