Widget:BossSkills

De Wiki Gla
Revisão de 22h13min de 17 de março de 2026 por Gurren1 (discussão | contribs) (Criou página com '<!-- Widget:BossSkills — CSS + JS para habilidades de bosses --> <style> →‎===========================BOSS CONTAINER===========================: .boss-box { color...')
(dif) ← Edição anterior | Revisão atual (dif) | Versão posterior → (dif)
Ir para navegação Ir para pesquisar

<style> 

 /* ===========================BOSS CONTAINER=========================== */
 .boss-box {
   color: #fff;
   font-family: "Noto Sans", sans-serif;
   width: 100%;
   margin: auto;
   position: relative;
   -webkit-user-select: none;
   user-select: none;
   background-position: center top;
   background-repeat: no-repeat;
   background-size: cover;
   z-index: 1;
 }

 .boss-box::before {
   content: "";
   position: absolute;
   inset: 0;
   pointer-events: none;
   background: linear-gradient(to bottom,
       rgba(0, 0, 0, 0.50),
       rgba(0, 0, 0, 0.65));
   z-index: 0;
 }

 .boss-box img {
   pointer-events: none;
   -webkit-user-select: none;
   user-select: none;
 }

 .boss-box video {
   max-height: none;
 }

 .boss-box p {
   display: unset;
 }

 /* ===========================BOSS HEADER=========================== */
 .boss-header {
   position: relative;
   z-index: 1;
   padding: 18px 20px 6px;
 }

 .boss-name {
   color: #fff;
   font-size: clamp(22px, 3.2vw + 0.5rem, 44px);
   font-family: "Orbitron", sans-serif;
   font-weight: 900;
   text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.4);
   line-height: 1.15;
   word-break: break-word;
 }

 /* ===========================SKILLS SECTION=========================== */
 .boss-skills-section {
   position: relative;
   z-index: 2;
   padding: 0 8px 12px;
 }

 /* ===========================ICON RAIL=========================== */
 .boss-rail {
   display: flex;
   align-items: center;
   justify-content: center;
   width: max-content;
   max-width: 96vw;
   margin: 8px auto;
   padding: 5px;
   background: rgba(28, 28, 34, 0.95);
   border: 2px solid rgba(255, 255, 255, 0.08);
   border-radius: 12px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
   -webkit-backdrop-filter: blur(2px);
   backdrop-filter: blur(2px);
 }

 .boss-icon-scroll {
   display: block;
   overflow-x: auto;
   overflow-y: hidden;
   padding: 10px 0;
   margin: -10px 0;
   scroll-behavior: smooth;
   scrollbar-width: thin;
   scrollbar-color: #ababab transparent;
 }

 .boss-icon-scroll::-webkit-scrollbar {
   height: 6px;
 }

 .boss-icon-scroll::-webkit-scrollbar-track {
   background: transparent;
 }

 .boss-icon-scroll::-webkit-scrollbar-thumb {
   background: #151515;
   border-radius: 3px;
 }

 .boss-icon-bar {
   display: flex;
   flex-wrap: nowrap;
   gap: 10px;
   padding: 6px;
   justify-content: center;
   align-items: center;
 }

 /* ===========================SKILL ICONS=========================== */
 :root {
   --boss-icon-size: 50px;
   --boss-icon-radius: 10px;
   --boss-icon-idle: #d0d0d0;
   --boss-icon-active: #ffd95a;
   --boss-icon-active-ring: rgba(255, 217, 90, 0.45);
   --boss-icon-active-glow: rgba(255, 217, 90, 0.3);
   --boss-icon-ring-w: 2px;
 }

 .boss-skill-icon {
   width: var(--boss-icon-size);
   height: var(--boss-icon-size);
   position: relative;
   flex: 0 0 auto;
   border-radius: var(--boss-icon-radius);
   overflow: hidden;
   contain: paint;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
   background-color: rgba(15, 15, 23, 0.95);
   filter: brightness(0.92);
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   transform: translateZ(0);
   border: none;
   outline: none;
   isolation: isolate;
   will-change: transform;
   transition: transform 0.12s ease;
 }

 .boss-skill-icon img,
 .boss-skill-icon .boss-skill-icon-img {
   display: block;
   width: 100%;
   height: 100%;
   aspect-ratio: 1 / 1;
   border-radius: inherit;
   -webkit-clip-path: inset(0 round var(--boss-icon-radius));
   clip-path: inset(0 round var(--boss-icon-radius));
   object-fit: cover;
   transition: transform 0.12s ease;
   backface-visibility: hidden;
   transform: translateZ(0);
 }

 .boss-skill-icon::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
   pointer-events: none;
   z-index: 2;
   box-shadow: inset 0 0 0 var(--boss-icon-ring-w) var(--boss-icon-idle);
   transition: box-shadow 0.12s ease;
 }

 .boss-skill-icon::before {
   content: "";
   position: absolute;
   inset: -2px;
   border-radius: calc(var(--boss-icon-radius) + 2px);
   pointer-events: none;
   z-index: 1;
   box-shadow: none;
   opacity: 0;
   transition: opacity 0.12s ease, box-shadow 0.12s ease;
 }

 .boss-skill-icon:hover {
   filter: brightness(1);
 }

 .boss-skill-icon:hover::after {
   box-shadow: inset 0 0 0 var(--boss-icon-ring-w) #e6e6e6;
 }

 .boss-skill-icon.active {
   filter: brightness(1);
   transform: scale(1.1) translateZ(0);
   z-index: 5;
 }

 .boss-skill-icon.active::after {
   box-shadow: inset 0 0 0 var(--boss-icon-ring-w) var(--boss-icon-active);
 }

 .boss-skill-icon.active::before {
   opacity: 1;
   box-shadow: 0 0 14px 4px var(--boss-icon-active-glow),
     0 0 0 calc(var(--boss-icon-ring-w) * 2) var(--boss-icon-active-ring);
 }

 /* ===========================CONTENT CARD (desc + vídeo)=========================== */
 .boss-content-card {
   width: min(1600px, 96vw);
   max-width: 96vw;
   margin: 10px auto;
   background: rgba(28, 28, 34, 0.95);
   border-radius: 12px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
   padding: 18px;
   z-index: 2;
 }

 .boss-skills-grid {
   display: grid;
   grid-template-columns: minmax(320px, 60%) minmax(320px, 45%);
   gap: 16px;
   align-items: start;
 }

 /* ===========================DESC BOX=========================== */
 .boss-desc-box {
   padding: 12px 18px;
   color: #fff;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   font-size: 16px;
   -webkit-text-size-adjust: 100%;
   text-size-adjust: 100%;
 }

 .boss-skill-title {
   margin: 0 0 12px;
   display: flex;
   justify-content: center;
 }

 .boss-skill-title h3 {
   margin: 0;
   width: 100%;
   text-align: center;
   font-size: 1.6em;
   color: #fff;
 }

 .boss-attr-list {
   display: block;
   margin-bottom: 6px;
 }

 .boss-attr-row {
   display: flex;
   align-items: center;
   gap: 5px;
   min-height: 22px;
   line-height: 1.2;
 }

 .boss-attr-label {
   font-weight: 700;
   color: #f0c87b;
   font-size: 0.98rem;
   white-space: nowrap;
 }

 .boss-attr-value {
   color: #fff;
   font-weight: 800;
   font-size: 0.98rem;
   letter-spacing: 0.01em;
 }

 .boss-desc {
   font-size: 17px;
   line-height: 1.75;
   letter-spacing: 0.01em;
   margin-top: 5px;
   color: #f5f5f5;
   overflow-wrap: anywhere;
   word-break: break-word;
   white-space: normal;
   -webkit-text-size-adjust: 100%;
   text-size-adjust: 100%;
 }

 .boss-desc b,
 .boss-desc strong {
   font-weight: 700;
   color: #fff;
 }

 /* ===========================VIDEO CONTAINER=========================== */
 .boss-video-container {
   position: relative;
   width: 100%;
   max-width: 100%;
   background: transparent;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 10px;
   overflow: hidden;
   z-index: 2;
 }

 .boss-video-container>video {
   width: 100%;
   max-width: 100%;
   height: auto;
   aspect-ratio: 16 / 9;
   object-fit: contain;
   object-position: center;
   display: block;
   border-radius: 6px;
   background: #000;
 }

 /* ===========================TOOLTIP=========================== */
 .boss-skill-tooltip {
   position: fixed;
   z-index: 10000;
   pointer-events: none;
   padding: 8px 10px;
   border-radius: 8px;
   background: rgba(28, 28, 34, 0.95);
   color: #eaeaea;
   font-size: 13px;
   line-height: 1.25;
   text-align: center;
   max-width: 360px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5),
     inset 0 0 0 1px rgba(255, 255, 255, 0.06);
   left: -9999px;
   top: -9999px;
   opacity: 0;
   transition: opacity 0.12s ease;
   white-space: normal;
 }

 /* ===========================RESPONSIVE=========================== */
 @media (max-width: 1100px) {
   .boss-skills-grid {
     grid-template-columns: 1fr;
     gap: 12px;
   }

   .boss-video-container {
     width: 100%;
     max-width: 100%;
     margin: 0 auto;
   }
 }

 @media (max-width: 600px) {
   .boss-name {
     font-size: clamp(18px, 4.5vw + 0.3rem, 30px);
   }

   :root {
     --boss-icon-size: 72px;
   }

   .boss-rail {
     width: 100%;
     max-width: 100%;
     border-radius: 0;
     padding: 6px 8px;
   }

   .boss-icon-bar {
     justify-content: flex-start;
   }

   .boss-content-card {
     box-sizing: border-box;
     width: 100%;
     max-width: calc(100vw - 16px);
     padding: 12px;
     border-radius: 10px;
   }

   .boss-desc-box {
     font-size: 16px !important;
   }

   .boss-desc {
     font-size: 22px !important;
     line-height: 1.9 !important;
   }

   .boss-desc-box h3 {
     font-size: 28px !important;
   }

   .boss-attr-label,
   .boss-attr-value {
     font-size: 18px !important;
   }

   .boss-video-container {
     width: 100%;
     max-width: calc(100vw - 16px);
   }
 }

 /* ===========================OVERFLOW PROTECTION=========================== */
 .boss-box,
 .boss-content-card,
 .boss-rail,
 .boss-video-container {
   box-sizing: border-box;
   max-width: 100%;
 }

 .boss-content-card *,
 .boss-rail *,
 .boss-video-container * {
   max-width: 100%;
   box-sizing: border-box;
 }

</style>

<script> 

 (function () {
   "use strict";

   var videosCache = new Map();
   var autoplay = false;
   var loadedCount = 0;

   function initBossSkills() {
     var box = document.querySelector(".boss-box");
     if (!box) return;

     var iconBar = box.querySelector(".boss-icon-bar");
     var descBox = box.querySelector(".boss-desc-box");
     var videoBox = box.querySelector(".boss-video-container");
     if (!iconBar || !descBox || !videoBox) return;

     var icons = Array.from(iconBar.querySelectorAll(".boss-skill-icon"));
     if (icons.length === 0) return;

     var tooltip = null;

     var lang = (box.dataset.lang || "pt").substring(0, 2).toLowerCase();

     var I18N = {
       pt: { cooldown: "Recarga" },
       en: { cooldown: "Cooldown" },
       es: { cooldown: "Recarga" },
       pl: { cooldown: "Czas odnowienia" }
     };
     var L = I18N[lang] || I18N.pt;

     function getDesc(el) {
       var pack = {
         pt: el.dataset.descPt || "",
         en: el.dataset.descEn || "",
         es: el.dataset.descEs || "",
         pl: el.dataset.descPl || ""
       };
       return pack[lang] || pack.pt || pack.en || pack.es || pack.pl || "";
     }

     function filePathURL(name) {
       if (!name || name.trim() === "") return "";
       if (name.match(/^https?:\/\//)) return name;
       return "/index.php/Special:FilePath/" + encodeURIComponent(name);
     }

     function renderDesc(el) {
       var name = el.dataset.nome || "";
       var cd = (el.dataset.cd || "").trim();
       var rawDesc = getDesc(el);
       var descHtml = rawDesc.replace(/(.*?)/g, "$1");

       var attrsHTML = "";
       if (cd && cd !== "" && cd !== "-") {
         attrsHTML =

'

' + '
' + 
           '' + L.cooldown + '' +
           '' + cd + '' +
'
' + '

'; 

       }

       descBox.innerHTML =

'

' + name + '

' + 

         attrsHTML +

'

' + descHtml + '

'; 

     }

     function showVideo(el) {
       var videoURL = (el.dataset.video || "").trim();
       var videoFile = (el.dataset.videoFile || "").trim();
       var src = videoURL || (videoFile ? filePathURL(videoFile) : "");

       if (!src) {
         videoBox.style.display = "none";
         return;
       }

       var cacheKey = src;
       var v = videosCache.get(cacheKey);

       if (!v) {
         v = document.createElement("video");
         v.className = "boss-skill-video";
         v.src = src;
         v.preload = "auto";
         v.controls = false;
         v.muted = false;
         v.loop = true;
         v.playsInline = true;
         v.setAttribute("playsinline", "");
         videoBox.appendChild(v);
         videosCache.set(cacheKey, v);
         loadedCount++;
       }

       Array.from(videoBox.querySelectorAll("video")).forEach(function (vid) {
         try { vid.pause(); } catch (e) { /* */ }
         vid.style.display = "none";
       });

       videoBox.style.display = "flex";
       v.style.display = "block";

       try {
         v.currentTime = 0;
         if (autoplay || loadedCount <= 1) {
           v.play().catch(function () { /* */ });
         }
       } catch (e) { /* */ }
     }

     function activateIcon(el) {
       icons.forEach(function (i) { i.classList.remove("active"); });
       el.classList.add("active");

       renderDesc(el);
       showVideo(el);

       if (!autoplay && loadedCount > 0) autoplay = true;
     }

     icons.forEach(function (icon) {
       icon.addEventListener("click", function () {
         activateIcon(icon);
       });
     });

     // Tooltip
     function ensureTooltip() {
       if (!tooltip) {
         tooltip = document.createElement("div");
         tooltip.className = "boss-skill-tooltip";
         tooltip.setAttribute("aria-hidden", "true");
         document.body.appendChild(tooltip);
       }
       return tooltip;
     }

     function showTooltip(icon, text) {
       var tip = ensureTooltip();
       tip.textContent = text;
       tip.style.opacity = "1";
       tip.setAttribute("aria-hidden", "false");
       var rect = icon.getBoundingClientRect();
       var tipW = tip.offsetWidth;
       var left = rect.left + rect.width / 2 - tipW / 2;
       if (left < 4) left = 4;
       if (left + tipW > window.innerWidth - 4) left = window.innerWidth - tipW - 4;
       tip.style.left = left + "px";
       tip.style.top = (rect.top - tip.offsetHeight - 8) + "px";
     }

     function hideTooltip() {
       if (!tooltip) return;
       tooltip.style.opacity = "0";
       tooltip.setAttribute("aria-hidden", "true");
       tooltip.style.left = "-9999px";
       tooltip.style.top = "-9999px";
     }

     icons.forEach(function (icon) {
       icon.addEventListener("mouseenter", function () {
         var name = icon.dataset.nome || "";
         if (name) showTooltip(icon, name);
       });
       icon.addEventListener("mouseleave", hideTooltip);
       icon.addEventListener("click", hideTooltip);
     });

     // Preload de vídeos
     icons.forEach(function (icon) {
       var videoURL = (icon.dataset.video || "").trim();
       var videoFile = (icon.dataset.videoFile || "").trim();
       var src = videoURL || (videoFile ? filePathURL(videoFile) : "");
       if (src && !videosCache.has(src)) {
         var v = document.createElement("video");
         v.className = "boss-skill-video";
         v.src = src;
         v.preload = "metadata";
         v.controls = false;
         v.muted = true;
         v.loop = true;
         v.playsInline = true;
         v.setAttribute("playsinline", "");
         v.style.display = "none";
         videoBox.appendChild(v);
         videosCache.set(src, v);
       }
     });

     // Ativa a primeira skill
     var first = iconBar.querySelector(".boss-skill-icon.active") || icons[0];
     if (first) activateIcon(first);
   }

   if (document.readyState === "loading") {
     document.addEventListener("DOMContentLoaded", initBossSkills);
   } else {
     initBossSkills();
   }
 })();

</script>

Disponível em “https://wiki.gla.com.br/index.php?title=Widget:BossSkills&oldid=45104”