Mudanças entre as edições de "Widget:Teste"

De Wiki Gla
Ir para navegação Ir para pesquisar
m
m (Limpou toda a página)
Etiquetas: Reversão manual anulando
 
(177 revisões intermediárias por 3 usuários não estão sendo mostradas)
Linha 1: Linha 1:
<div class="map-controls">
  <button class="layer-button active" data-layer="camada1">Camada 1</button>
  <button class="layer-button" data-layer="camada2">Camada 2</button>
</div>


<div class="map-container" id="map"></div>
<script>
  const MAP_DATA = {
    camada1: {
      background: "https://i.imgur.com/9z4WZL1.png",
      skulls: [
        { x: 410, y: 220, title: "White Skull", desc: "Boss: White Skull<br>Área sombria, cuidado com os ataques surpresa!" },
        { x: 650, y: 125, title: "Red Fang", desc: "Boss: Red Fang<br>Possui resistência a fogo. Traga ataques de gelo!" },
        { x: 250, y: 410, title: "Void Wraith", desc: "Boss: Void Wraith<br>Evite ataques diretos. Usa magia de sombras." },
        { x: 248, y: 320, title: "Night Howler", desc: "Boss: Night Howler<br>Ataca com velocidade e confusão. Use proteção contra atordoamento!" }
      ],
      hearts: [
        { x: 280, y: 210, desc: "Cura escondida: Quebre a caixa para obter uma cura." },
        { x: 312, y: 196 },
        { x: 245, y: 358, desc: "Após o chefe, o jogador com menos vida receberá uma cura automática." }
      ]
    },
    camada2: {
      background: "https://i.imgur.com/IoBLbik.png",
      skulls: [
        { x: 330, y: 150, title: "Phantom", desc: "Boss: Phantom<br>Usa invisibilidade e veneno." }
      ],
      hearts: [
        { x: 290, y: 190 }
      ]
    }
  };
  const map = document.getElementById("map");
  function createIcon(x, y, className, src, popupHTML) {
    const icon = document.createElement("img");
    icon.src = src;
    icon.className = className;
    icon.style.left = x + "px";
    icon.style.top = y + "px";
    const popup = document.createElement("div");
    popup.className = "popup";
    popup.innerHTML = popupHTML;
    map.appendChild(icon);
    map.appendChild(popup);
    function positionPopup() {
      const mapRect = map.getBoundingClientRect();
      const iconRect = icon.getBoundingClientRect();
      const popupRect = popup.getBoundingClientRect();
      const spaceRight = mapRect.right - iconRect.right;
      const spaceLeft = iconRect.left - mapRect.left;
      if (spaceRight < popupRect.width && spaceLeft > popupRect.width) {
        popup.style.left = (x - popupRect.width - 10) + "px";
      } else {
        popup.style.left = (x + 30) + "px";
      }
      popup.style.top = (y - 10) + "px";
    }
    icon.addEventListener("click", () => {
      const visible = popup.style.display === "block";
      document.querySelectorAll(".popup").forEach(p => p.style.display = "none");
      if (!visible) {
        popup.style.display = "block";
        positionPopup();
      }
    });
    document.addEventListener("click", (e) => {
      if (!icon.contains(e.target) && !popup.contains(e.target)) {
        popup.style.display = "none";
      }
    });
  }
  function renderLayer(layerKey) {
    const config = MAP_DATA[layerKey];
    if (!config) return;
    map.innerHTML = "";
    map.style.backgroundImage = `url('${config.background}')`;
    config.skulls?.forEach(skull => {
      createIcon(skull.x, skull.y, "skull-icon", "/images/d/dc/Whiteskull.png",
        `<strong>${skull.title}</strong><br>${skull.desc}`);
    });
    config.hearts?.forEach(heart => {
      const desc = heart.desc || "Pegue o coração para se curar";
      createIcon(heart.x, heart.y, "heart-icon", "/images/d/d9/Heart.png",
        `<strong>Cura</strong><br>${desc}`);
    });
  }
  document.querySelectorAll(".layer-button").forEach(btn => {
    btn.addEventListener("click", e => {
      document.querySelectorAll(".layer-button").forEach(b => b.classList.remove("active"));
      e.target.classList.add("active");
      renderLayer(e.target.dataset.layer);
    });
  });
  renderLayer("camada1");
  document.head.insertAdjacentHTML('beforeend', `
    <style>
      .map-controls {
        margin-bottom: 10px;
        display: flex;
        gap: 8px;
      }
      .layer-button {
        padding: 6px 14px;
        background-color: #222;
        color: #eee;
        border: 1px solid #444;
        border-radius: 6px;
        cursor: pointer;
        font-weight: bold;
        transition: background 0.3s, border 0.3s;
      }
      .layer-button.active {
        background-color: #3b82f6;
        border-color: #3b82f6;
        color: white;
      }
      .map-container {
        position: relative;
        width: 811px;
        height: 554px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
      }
      .skull-icon, .heart-icon {
        position: absolute;
        cursor: pointer;
        transition: transform 0.2s, filter 0.2s;
      }
      .skull-icon { width: 24px; height: 24px; }
      .heart-icon { width: 26px; height: 26px; padding: 1px; }
      .skull-icon:hover, .heart-icon:hover {
        transform: scale(1.3);
        filter: brightness(1.5);
      }
      .popup {
        position: absolute;
        background: #1e1e1e;
        color: #fff;
        padding: 10px 14px;
        border-radius: 8px;
        border: 1px solid #444;
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
        display: none;
        z-index: 10;
        max-width: 500px;
        font-size: 14px;
        animation: fadeIn 0.3s ease-out;
      }
      @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-5px); }
        to  { opacity: 1; transform: translateY(0); }
      }
    </style>
  `);
</script>

Edição atual tal como às 19h10min de 12 de setembro de 2025

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