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

De Wiki Gla
Ir para navegação Ir para pesquisar
m
m
Linha 1: Linha 1:
<div class="map-container" id="map"></div>
<div class="map-container" id="map"></div>


<!-- Dados JSON injetados por Lua -->
<script type="application/json" id="mapa-dados">{{#invoke:MapaInterativo|data|mapa={{{mapa|Sabaody}}} }}</script>
<script type="application/json" id="mapa-dados">
  {{#invoke:Teste|data|mapa={{{mapa|Teste}}} }}
</script>


<script>
<script>
(function() {
(function () {
   const data = JSON.parse(document.getElementById('mapa-dados').textContent);
   const data = JSON.parse(document.getElementById("mapa-dados").textContent);
   const skulls = data.skulls || [];
   const skulls = data.skulls || [];
   const hearts = data.hearts || [];
   const hearts = data.hearts || [];
   const puzzleButton = data.puzzle || {};
   const puzzle = data.puzzle || {};
  const background = data.background || "/images/0/00/MapaDefault.png";
 
   const map = document.getElementById("map");
   const map = document.getElementById("map");
  map.style.backgroundImage = `url('${background}')`;


   // Caveiras
   // Caveiras
Linha 72: Linha 72:


   // Puzzle
   // Puzzle
   if (puzzleButton && puzzleButton.x && puzzleButton.y) {
   if (puzzle.x && puzzle.y && puzzle.videoUrl) {
     const button = document.createElement("img");
     const icon = document.createElement("img");
     button.className = "puzzle-button";
     icon.className = "puzzle-button";
     button.src = "/images/d/de/Engrenagem.png";
     icon.src = "/images/d/de/Engrenagem.png";
     button.alt = "Puzzle";
     icon.style.left = puzzle.x + "px";
    button.style.left = puzzleButton.x + "px";
     icon.style.top = puzzle.y + "px";
     button.style.top = puzzleButton.y + "px";


     const popup = document.createElement("div");
     const popup = document.createElement("div");
     popup.className = "popup";
     popup.className = "popup";
     popup.style.left = (puzzleButton.x + 60) + "px";
     popup.style.left = (puzzle.x + 60) + "px";
     popup.style.top = (puzzleButton.y - 10) + "px";
     popup.style.top = (puzzle.y - 10) + "px";
     popup.innerHTML = `
     popup.innerHTML = `
       <strong>Desafio Puzzle</strong><br>
       <strong>Desafio Puzzle</strong><br>
       <iframe width="400" height="260"
       <iframe width="400" height="260"
         src="${puzzleButton.videoUrl}"
         src="${puzzle.videoUrl}"
         frameborder="0"
         frameborder="0"
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
Linha 94: Linha 93:
     `;
     `;


     button.addEventListener("click", () => {
     icon.addEventListener("click", () => {
       popup.style.display = popup.style.display === "block" ? "none" : "block";
       popup.style.display = popup.style.display === "block" ? "none" : "block";
     });
     });


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


     map.appendChild(button);
     map.appendChild(icon);
     map.appendChild(popup);
     map.appendChild(popup);
   }
   }
Linha 115: Linha 114:
   width: 811px;
   width: 811px;
   height: 554px;
   height: 554px;
  background: url('/images/5/55/SabaodyMap.png') no-repeat center center;
   background-size: cover;
   background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.skull-icon {
  position: absolute;
  width: 24px;
  height: 24px;
  cursor: pointer;
  transition: transform 0.2s, filter 0.2s;
}
}


.skull-icon, .heart-icon, .puzzle-button {
.heart-icon {
   position: absolute;
   position: absolute;
   width: 26px;
   width: 26px;
   height: 26px;
   height: 26px;
  padding: 1px;
  cursor: pointer;
  transition: transform 0.2s, filter 0.2s;
}
.puzzle-button {
  position: absolute;
   cursor: pointer;
   cursor: pointer;
  z-index: 999;
  width: 28px;
  height: 28px;
   transition: transform 0.2s, filter 0.2s;
   transition: transform 0.2s, filter 0.2s;
}
.skull-icon:hover,
.heart-icon:hover,
.puzzle-button:hover {
  transform: scale(1.3);
  filter: brightness(1.5);
}
}


Linha 139: Linha 164:
   max-width: 500px;
   max-width: 500px;
   font-size: 14px;
   font-size: 14px;
  animation: fadeIn 0.3s ease-out;
}
}


Linha 147: Linha 173:
}
}


.skull-icon:hover,
@keyframes fadeIn {
.heart-icon:hover,
   from { opacity: 0; transform: translateY(-5px); }
.puzzle-button:hover {
   to { opacity: 1; transform: translateY(0); }
   transform: scale(1.3);
   filter: brightness(1.5);
}
}
</style>
</style>

Edição das 03h34min de 18 de junho de 2025

<script type="application/json" id="mapa-dados">Erro de script: Nenhum módulo desse tipo "MapaInterativo".</script>

<script> (function () { 

 const data = JSON.parse(document.getElementById("mapa-dados").textContent);
 const skulls = data.skulls || [];
 const hearts = data.hearts || [];
 const puzzle = data.puzzle || {};
 const background = data.background || "/images/0/00/MapaDefault.png";

 const map = document.getElementById("map");
 map.style.backgroundImage = `url('${background}')`;

 // Caveiras
 skulls.forEach((skull) => {
   const icon = document.createElement("img");
   icon.src = "/images/d/dc/Whiteskull.png";
   icon.className = "skull-icon";
   icon.style.left = skull.x + "px";
   icon.style.top = skull.y + "px";

   const popup = document.createElement("div");
   popup.className = "popup";
   popup.innerHTML = `${skull.title}
${skull.desc}`;
   popup.style.left = (skull.x + 30) + "px";
   popup.style.top = (skull.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);
 });

 // Corações
 hearts.forEach((heart) => {
   const icon = document.createElement("img");
   icon.src = "https://wiki.gla.com.br/images/a/ae/Pose.png";
   icon.className = "heart-icon";
   icon.style.left = heart.x + "px";
   icon.style.top = heart.y + "px";

   const popup = document.createElement("div");
   popup.className = "popup";
   const desc = heart.desc || "Pegue o coração para se curar";
   popup.innerHTML = `Cura
${desc}`;
   popup.style.left = (heart.x + 30) + "px";
   popup.style.top = (heart.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);
 });

 // Puzzle
 if (puzzle.x && puzzle.y && puzzle.videoUrl) {
   const icon = document.createElement("img");
   icon.className = "puzzle-button";
   icon.src = "/images/d/de/Engrenagem.png";
   icon.style.left = puzzle.x + "px";
   icon.style.top = puzzle.y + "px";

   const popup = document.createElement("div");
   popup.className = "popup";
   popup.style.left = (puzzle.x + 60) + "px";
   popup.style.top = (puzzle.y - 10) + "px";
   popup.innerHTML = `
     Desafio Puzzle

     <iframe width="400" height="260"
       src="${puzzle.videoUrl}"
       frameborder="0"
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
       allowfullscreen>
     </iframe>
   `;

   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);
 }

})(); </script>

<style> .map-container { 

 position: relative;
 width: 811px;
 height: 554px;
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center center;

}

.skull-icon { 

 position: absolute;
 width: 24px;
 height: 24px;
 cursor: pointer;
 transition: transform 0.2s, filter 0.2s;

}

.heart-icon { 

 position: absolute;
 width: 26px;
 height: 26px;
 padding: 1px;
 cursor: pointer;
 transition: transform 0.2s, filter 0.2s;

}

.puzzle-button { 

 position: absolute;
 cursor: pointer;
 z-index: 999;
 width: 28px;
 height: 28px;
 transition: transform 0.2s, filter 0.2s;

}

.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>

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