Widget:Droflax

Mohji

Tier: Bronze

Clase: Bruiser/Especialista

       <img src="/images/3/36/Mohji-splash.png" alt="Arte del personaje">

           <button class="tab-btn active" data-tab="habilidades">Habilidades</button>
           <button class="tab-btn" data-tab="skins">Skins</button>

<script>

   (function () {
       const buttons = document.querySelectorAll(".tab-btn");
       const contents = document.querySelectorAll(".tab-content");

       buttons.forEach(btn => {
           btn.addEventListener("click", () => {
               buttons.forEach(b => b.classList.remove("active"));
               contents.forEach(c => c.classList.remove("active"));

               btn.classList.add("active");
               const tab = btn.getAttribute("data-tab");
               document.getElementById(tab).classList.add("active");
           });
       });
   })();

   const skins = [
       {
           imagen: "/images/7/7a/Mohji-original.gif",
           tooltip: "Recompensa de Missão Especial"
       },
       {
           imagen: "/images/a/ac/Mohji-five-star.gif",
           tooltip: "Desbloqueia ao fazer Upgrade para Prata 5 Estrela"
       }
   ];

   const contenedorSkins = document.querySelector("#skins");
   contenedorSkins.innerHTML = generarHTMLSkins(skins);

   const habilidades = [
       {
           nombre: "Bite",
           icon: "/images/0/0e/Bitemohji.png",
           level: 1,
           descripcion: "Richie usa suas presas de leão para morder o inimigo causando dano e gerando energia.",
           atributos: "2, 10, 15, 9",
           video: "/images/8/88/Mohji_sk1.webm"
       },
       {
           nombre: "Beast Claw",
           icon: "/images/5/57/Beast-claw.png",
           level: 5,
           descripcion: "Richie usa suas garras para arranhar todos os inimigos à sua frente, gerando energia.",
           atributos: "5, 20, 18, 18",
           video: "/images/3/33/Mohji_sk2.webm"
       },
       {
           nombre: "Enraged Bite",
           icon: "/images/6/65/Enraged-bite.png",
           level: 12,
           descripcion: "Richie gasta energia para desferir uma mordida feroz no inimigo alvo, causando dano aos inimigos ao redor do alvo.",
           atributos: "10, -40, 30, 30",
           video: "/images/5/5e/Mohji_sk3.webm"
       },
       {
           nombre: "Richie Roar",
           icon: "/images/8/82/Richie-roar.png",
           level: 20,
           descripcion: "Com um alto rugido, Richie provoca os inimigos próximos a ele. Tomados pelo medo, seus inimigos ficam silenciados e sofrem redução de 60 na velocidade de movimento durante 3 segundos.",
           atributos: "30, -, -, -",
           video: "/images/3/37/Mohji_sk4.webm"
       },
       {
           nombre: "Enraged Claw",
           icon: "/images/e/e3/Enraged-claw.png",
           level: 30,
           descripcion: "Richie gasta energia para executar um poderoso ataque de garra que corta o ar, cortando todos à sua frente em uma longa distância.",
           atributos: "10, -40, 40, 40",
           video: "/images/9/94/Mohji_sk5.webm"
       },
       {
           nombre: "Tammer Whip",
           icon: "/images/6/69/Tammer-whip.png",
           level: 50,
           descripcion: "Mohji usa seu chicote para golpear todos os inimigos em um longo alcance à sua frente, causando dano e puxando-os para mais perto dele e de Richie.",
           atributos: "20, -, 30, 30",
           video: "/images/6/64/Mohji_sk6.webm"
       },

       {
           nombre: "Cat Leap",
           icon: "/images/d/da/Cat-leap.png",
           level: 70,
           descripcion: "Mohji ordena que Richie dê um salto para frente, causando dano a todos os inimigos próximos no momento em que ele atinge o chão, reduzindo a velocidade de movimento dos inimigos em 120 por 6 segundos.",
           atributos: "35, -, 40, 40",
           video: "/images/1/16/Mohji_sk7.webm"
       },
       {
           nombre: "Emote",
           icon: "/images/4/4b/Icon-emote.png",
           level: 25,
           descripcion: "",
           atributos: "10, -, -, -",
           video: "/images/7/7c/Mohji_emote.webm"
       }
   ];

   const cuadrosContainer = document.querySelector('.cuadros-container');
   const descripcionContainer = document.querySelector('.descripcion-container');
   const atributosContainer = document.querySelector('.atributos-container');
   const videoContainer = document.querySelector('.video-container');

   const cuadros = [];

   habilidades.forEach((hab, index) => {
       const div = document.createElement('div');
       div.classList.add('cuadro');
       div.innerHTML = `<img src="${hab.icon}" alt="${hab.nombre}" style="width: 100%; height: 100%; object-fit: cover;">`;
       div.title = hab.nombre;
       div.addEventListener('click', () => {
           descripcionContainer.innerHTML = `

${hab.nombre}

Level: ${hab.level}

${hab.descripcion}

`;

           atributosContainer.innerHTML = generarHTMLAtributos(hab.atributos);
           videoContainer.innerHTML = 
               `<video id="video-habilidad" width="100%" height="250" controls loop playsinline>
                   <source src="${hab.video}" type="video/webm">
                   Tu navegador no soporta este video.
               </video>`;
           cuadros.forEach(c => c.classList.remove('activo'));
           div.classList.add('activo');
       });
       cuadros.push(div);
       cuadrosContainer.appendChild(div);
   });

   function generarHTMLAtributos(valoresStr) {
       const valores = valoresStr.split(',').map(v => v.trim());
       const labels = ["Recarga", "Energía", "Poder PVE", "Poder PVP"];
       const icons = [
           "/images/b/b1/Icon-cooldown.png",
           "/images/3/38/Icon-energy.png",
           "/images/7/7a/Icon-pve.png",
           "/images/5/5f/Icon-pvp.png"
       ];

       return `

Atributos

     ${valores.map((valor, i) => {
           let formatted;

           if (valor === "-") {
               formatted = "-";
           } else {
               let num = parseInt(valor);
               formatted = (i === 1 && !isNaN(num)) ? `${num > 0 ? '+' : }${num}` : valor;
           }

           return `

<span class="simple-tooltip simple-tooltip-inline tooltipstered" data-simple-tooltip="

${labels[i]}

">

             <img src="${icons[i]}" class="cardAttribute--icon">

${formatted}${i === 0 && formatted !== '-' ? ' seg' : }

         
       `;
       }).join()}

 `;
   }

   function generarHTMLSkins(listaSkins) {
       return `

     Skins

       ${listaSkins.map(skin => `

<span class="simple-tooltip simple-tooltip-inline tooltipstered" data-simple-tooltip="${skin.tooltip}">

           <img class="skins--imageSkin" src="${skin.imagen}" alt="">
         
       `).join()}

 `;
   }

   if (cuadros.length > 0) {
       cuadros[0].click();
   }

</script>

<style>

   .personaje-box {
       background: #1e1e1e;
       border-radius: 12px;
       padding: 16px;
       color: #fff;
       font-family: 'Segoe UI', sans-serif;
       max-width: 1100px;
       margin: auto;
       border: 2px solid #444;
   }

   .personaje-header {
       display: flex;
       gap: 20px;
       border-bottom: 2px solid #555;
       padding-bottom: 10px;
       flex-direction: column;
   }

   .personaje-header img {
       width: 230px;
       position: absolute;
       right: 16%;
   }

   .personaje-info .nombre {
       font-size: 32px;
       font-weight: bold;
   }

   .personaje-info .tier,
   .personaje-info .clase {
       font-size: 16px;
       color: #bbb;
   }

   .personaje-tabs {
       margin-block: 4px;
       display: flex;
       gap: 12px;
       justify-content: flex-start;
   }

   .tab-btn {
       padding: 8px 20px;
       background: #333;
       color: white;
       border: none;
       border-radius: 8px;
       font-size: 18px;
       cursor: pointer;
   }

   .tab-btn.active {
       background: #007bff;
       font-weight: bold;
   }

   .tab-content {
       display: none;
       margin-top: 20px;
       animation: fadeIn 0.4s ease;
   }

   .tab-content.active {
       display: block;
   }

   .habilidades-container {
       display: flex;
       gap: 20px;
   }

   .prueba {
       flex: 1;
       display: flex;
       flex-direction: column;
       gap: 10px;
   }

   .cuadros-container {
       display: flex;
       justify-content: center;
       flex-wrap: wrap;
       gap: 10px;
       width: 100%;
   }

   .cuadros-container .cuadro {
       width: 60px;
       height: 60px;
       border-radius: 5px;
       cursor: pointer;
   }

   .cuadro.activo {
       border: 1px solid #007bff;
   }

   .descripcion-container,
   .atributos-container {
       padding: 10px;
       background-color: #715757;
       border-radius: 5px;
   }

   .video-container {
       width: 400px;
       height: 200px;
       flex-shrink: 0;
       align-self: center;
       background-color: #000;
   }

   .attribute--cardsContainer {
       display: flex;
       justify-content: center;
       gap: 20px;
       flex-wrap: wrap;
       margin-top: 10px;
       background: unset;
       border: unset;
   }

   .cardAttribute {
       width: 80px;
       height: 90px;
       background-color: #473838;
       border-radius: 8px;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       text-align: center;
       padding: 5px;
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
       transition: transform 0.2s;
   }

   .cardAttribute--icon {
       height: 28px;
       margin-bottom: 14px;
   }

   .cardAttribute--value {
       font-size: 14px !important;
       font-weight: bold;
       margin: 0 !important;
       color: white;
       border-bottom: unset;
   }

   .attribute-title,
   .card-skins-title {
       font-size: 1.4em;
       text-align: center;
       justify-self: center;
       letter-spacing: 1px;
       font-family: sans-serif !important;
       border-bottom: 2px solid #9d9c9c;
       color: white !important;
       padding-bottom: 8px;
       margin-bottom: 16px;
       width: 75%;
   }

   .card-skins {
       padding: 16px;
       border-radius: 12px;
       box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
       margin-top: 20px;
   }

   .card-skins-title {
       display: block;
       border-bottom: unset;
       font-size: 18px;
       font-weight: bold;
       margin-bottom: 12px;
   }

   .skins--container {
       display: flex;
       gap: 16px;
       flex-wrap: wrap;
       justify-content: center;
   }

   .skins--imageSkin {
       width: 200px;
       height: auto;
       background-color: #fefefe;
       border-radius: 6px;
       border: 1px solid #ccc;
       transition: transform 0.2s;
   }

   .skins--imageSkin:hover {
       transform: scale(1.05);
   }

   @keyframes fadeIn {
       from {
           opacity: 0;
       }

       to {
           opacity: 1;
       }
   }

</style>