Widget:Teste

<select id="layerSelector" style="margin-bottom: 8px">

 <option value="camada1">Camada 1</option>
 <option value="camada2">Camada 2</option>

</select>

<script>

 const MAP_DATA = {
   camada1: {
     background: "https://i.imgur.com/9z4WZL1.png",
     skulls: [
       { x: 410, y: 220, title: "White Skull", desc: "Boss: White Skull
Área sombria, cuidado com os ataques surpresa!" },
       { x: 650, y: 125, title: "Red Fang", desc: "Boss: Red Fang
Possui resistência a fogo. Traga ataques de gelo!" },
       { x: 250, y: 410, title: "Void Wraith", desc: "Boss: Void Wraith
Evite ataques diretos. Usa magia de sombras." },
       { x: 248, y: 320, title: "Night Howler", desc: "Boss: Night Howler
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." }
     ],
     puzzle: { x: 244, y: 217, videoUrl: "https://www.youtube.com/embed/10rhyP32vdw" }
   },
   camada2: {
     background: "https://i.imgur.com/IoBLbik.png",
     skulls: [
       { x: 330, y: 150, title: "Phantom", desc: "Boss: Phantom
Usa invisibilidade e veneno." }
     ],
     hearts: [
       { x: 290, y: 190 }
     ],
     puzzle: { x: 220, y: 200, videoUrl: "https://www.youtube.com/embed/10rhyP32vdw" }
   }
 };

 const map = document.getElementById("map");
 const selector = document.getElementById("layerSelector");

 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;
   popup.style.left = (x + 30) + "px";
   popup.style.top = (y - 10) + "px";

   icon.addEventListener("click", () => {
     popup.style.display = popup.style.display === "block" ? "none" : "block";
   });
   document.addEventListener("click", (e) => {
     if (!icon.contains(e.target) && !popup.contains(e.target)) {
       popup.style.display = "none";
     }
   });

   map.appendChild(icon);
   map.appendChild(popup);
 }

 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",
       `${skull.title}
${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",
       `Cura
${desc}`);
   });

   if (config.puzzle) {
     createIcon(config.puzzle.x, config.puzzle.y, "puzzle-button", "/images/d/de/Engrenagem.png",
       `Desafio Puzzle
<iframe width="400" height="260" src="${config.puzzle.videoUrl}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`);
   }
 }

 selector.addEventListener("change", e => renderLayer(e.target.value));
 renderLayer("camada1");

 document.head.insertAdjacentHTML('beforeend', `
   <style>
     .map-container {
       position: relative;
       width: 811px;
       height: 554px;
       background-size: cover;
       background-repeat: no-repeat;
       background-position: center center;
     }
     .skull-icon, .heart-icon, .puzzle-button {
       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; }
     .puzzle-button { width: 28px; height: 28px; z-index: 999; }
     .skull-icon:hover, .heart-icon:hover, .puzzle-button: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;
     }
     .popup iframe {
       border-radius: 6px;
       margin-top: 6px;
       max-width: 100%;
     }
     @keyframes fadeIn {
       from { opacity: 0; transform: translateY(-5px); }
       to   { opacity: 1; transform: translateY(0); }
     }
   </style>
 `);

</script>