Widget:GuildAssets

<style>

   .utab {
       font-family: "Segoe UI", Arial, sans-serif;
       color: #e2ecff;
       padding: 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>