Widget:GuildAssets
Ir para navegação
Ir para pesquisar
<style>
.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;
}
.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;
}
.utab__display.is-image-empty .utab__image {
display: none;
}
.utab__display.is-fading {
animation: utabFade 0.25s ease;
}
.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__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;
}
.utab__costIcon {
display: none;
}
.utab__level--source {
display: none;
}
@keyframes utabFade {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 600px) {
.utab__display {
flex-direction: column;
}
.utab__image {
max-width: 100%;
}
}
</style>
<script>
(function () {
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");
}
function hasWikitext(value) {
return typeof value === "string" && (value.indexOf("[[") !== -1 || value.indexOf("{{") !== -1);
}
function hasStatWrapper(html) {
if (typeof html !== "string") return false;
return /class=["'][^"']*\butab__stat\b/.test(html);
}
function parseWikitextCached(raw, cacheKey, target) {
if (!raw || !hasWikitext(raw)) return Promise.resolve(raw);
if (target[cacheKey]) return Promise.resolve(target[cacheKey]);
if (!window.mw || !mw.Api) return Promise.resolve(raw);
var api = new mw.Api();
return api.post({ action: "parse", text: raw, contentmodel: "wikitext", prop: "text", formatversion: 2 })
.then(function (r) {
var html = (r && r.parse && r.parse.text) ? (r.parse.text["*"] || r.parse.text) : raw;
target[cacheKey] = html;
return html;
})
.catch(function () { return raw; });
}
var upgradeCosts = [
{ level: 1, berries: "50.000", gems: "10", 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) {
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 (levelElement, index) {
var levelNumber = levelElement.getAttribute("data-level") || String(index + 1);
var contentElement = levelElement.querySelector(".utab__content") || levelElement;
var rawHtml = contentElement.innerHTML.trim();
var contentWrapper = document.createElement("div");
contentWrapper.innerHTML = rawHtml;
var mediaImage = contentWrapper.querySelector(".utab__mediaImage");
var imageHtml = mediaImage ? mediaImage.innerHTML.trim() : "";
if (mediaImage) mediaImage.remove();
var statsHtml = contentWrapper.innerHTML.trim();
return { level: levelNumber, imageHtml: imageHtml, statsHtml: statsHtml };
});
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, index) {
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;
});
buttons.forEach(function (btn, index) {
btn.addEventListener("click", function () { activateLevel(index, true); });
btn.addEventListener("keydown", function (e) { handleArrowNavigation(e, buttons, activateLevel); });
});
var renderToken = 0;
function activateLevel(index, shouldFocus) {
if (!levels.length) return;
var safeIndex = Math.max(0, Math.min(index, levels.length - 1));
var current = levels[safeIndex];
var token = ++renderToken;
buttons.forEach(function (btn, i) {
var isActive = i === safeIndex;
btn.classList.toggle("is-active", isActive);
btn.setAttribute("aria-selected", isActive ? "true" : "false");
btn.setAttribute("tabindex", isActive ? "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 ? '
Custo do upgrade
- ' +
'
- ' + cost.berries + ' berries ' + (cost.gems ? '
- ' + cost.gems + ' gemas ' : ) + '
- ' + cost.points + ' pontos
' : "";
var statsBodyHtml = current.statsHtml ? (hasStatWrapper(current.statsHtml) ? current.statsHtml :
'
Informações
' + current.statsHtml + '') : "";
stats.innerHTML = statsBodyHtml + costHtml;
triggerFade(display);
if ((current.imageHtml && hasWikitext(current.imageHtml)) || (current.statsHtml && hasWikitext(current.statsHtml))) {
Promise.all([
parseWikitextCached(current.imageHtml, "parsedImageHtml", current),
parseWikitextCached(current.statsHtml, "parsedStatsHtml", current)
]).then(function (results) {
if (renderToken !== token) return;
var parsedImage = results[0], parsedStats = results[1];
if (parsedImage && parsedImage !== current.imageHtml) {
imageWrap.innerHTML = parsedImage;
imageWrap.classList.remove("is-empty");
display.classList.remove("is-image-empty");
}
if (parsedStats && parsedStats !== current.statsHtml) {
var parsedBodyHtml = hasStatWrapper(parsedStats) ? parsedStats :
'
Informações
' + parsedStats + '';
stats.innerHTML = parsedBodyHtml + costHtml;
}
});
}
if (shouldFocus) buttons[safeIndex].focus();
}
activateLevel(0, false);
}
function initWidgets() {
[].slice.call(document.querySelectorAll(".utab")).forEach(buildLevelUI);
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", initWidgets);
} else {
initWidgets();
}
})();
</script>