PokeXGames

Widget:SearchQuestScript: mudanças entre as edições

(Criou página com '<script> // Container dos cartões const container = document.querySelector("#quests-container") const contentLevel = document.querySelector("#contentLevel").value; const questCheck = document.querySelector("#questCheck"); const catchCheck = document.querySelector("#catchCheck"); const dailyCheck = document.querySelector("#dailyCheck"); const tasksCheck = document.querySelector("#tasksCheck"); const pvpCheck = document.querySelector("#pvpCheck"); let ConvertStringToHTM...')
 
Sem resumo de edição
 
(19 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
<script>
<script defer>
// Container dos cartões
// Container dos cartões
const container = document.querySelector("#quests-container")
const container = document.querySelector("#app-quests")
const contentLevel = document.querySelector("#contentLevel").value;
const contentLevel = document.querySelector("#contentLevel");
const questCheck = document.querySelector("#questCheck");
const questCheck = document.querySelector("#questCheck");
const catchCheck = document.querySelector("#catchCheck");
const catchCheck = document.querySelector("#catchCheck");
Linha 8: Linha 8:
const tasksCheck = document.querySelector("#tasksCheck");
const tasksCheck = document.querySelector("#tasksCheck");
const pvpCheck = document.querySelector("#pvpCheck");
const pvpCheck = document.querySelector("#pvpCheck");
 
const nwCheck = document.querySelector("#nightmareCheck");
 
let ConvertStringToHTML = function (str) {
    let parser = new DOMParser();
    let doc = parser.parseFromString(str, 'text/html');
    return doc.body;
};


function filterData(data) {
function filterData(data) {
     const temp = data.filter((item) => {
     const temp = data.filter((item) => {
         if (contentLevel < item.level) return false;
         if (Number(contentLevel.value) < Number(item.level) || !(Number(contentLevel.value) - 50 <= Number(item.level))) return false;


         if (
         if (
Linha 27: Linha 19:
             dailyCheck.checked != item.categories.daily &&
             dailyCheck.checked != item.categories.daily &&
             tasksCheck.checked != item.categories.catch &&
             tasksCheck.checked != item.categories.catch &&
             pvpCheck.checked != item.categories.pvp
             pvpCheck.checked != item.categories.pvp &&
         )
            nwCheck.checked != item.categories.nw
            return false;
         ) return false;


         return true;
         return true;
Linha 39: Linha 31:
function createCard(cardData) {
function createCard(cardData) {
     const icons = cardData.icons.map((icon) => (
     const icons = cardData.icons.map((icon) => (
         `<img src="./assets/img/icon.png" alt="Image simbolica">`
         `<img src="${icon.image}" title="${icon.title}" alt="Icone ${icon.title}">`
     ));
     ));


Linha 45: Linha 37:
         <a href="${cardData.link}" class="card">
         <a href="${cardData.link}" class="card">
             <main>
             <main>
                <header class="icon-container">
                    ${icons.join("")}                   
                </header>
                 <h2>
                 <h2>
                     ${cardData.title} <span class="level"> (Level: ${cardData.level}) </span>
                     ${cardData.title} <br /> <span class="level"> Level: ${cardData.level} </span>
                 </h2>
                 </h2>


                 <div class="description-container">
                 <div class="description-container">
                     <p class="description">
                     <p class="description" title="${cardData.description}">
                       ${cardData.description}
                       ${cardData.description}
                     </p>
                     </p>
                 </div>
                 </div>
               
                <footer class="icon-container">
                    ${icons.join("")}                   
                </footer>
             </main>
             </main>


Linha 68: Linha 60:


document.querySelector("#quests-form").addEventListener("submit", function (e) {
document.querySelector("#quests-form").addEventListener("submit", function (e) {
     e.preventDefault()
     e.preventDefault();
    container.innerHTML = '';
     const filteredData = filterData(json);
     const filteredData = filterData(json);
    console.log(filteredData)


     filteredData.forEach(data => {
     filteredData.forEach(data => {
         container.append(ConvertStringToHTML(createCard(data)))
         container.innerHTML += (createCard(data));
     });
     });
})
});
</script>
</script>

Edição atual tal como às 18h22min de 27 de dezembro de 2023

<script defer> // Container dos cartões const container = document.querySelector("#app-quests") const contentLevel = document.querySelector("#contentLevel"); const questCheck = document.querySelector("#questCheck"); const catchCheck = document.querySelector("#catchCheck"); const dailyCheck = document.querySelector("#dailyCheck"); const tasksCheck = document.querySelector("#tasksCheck"); const pvpCheck = document.querySelector("#pvpCheck"); const nwCheck = document.querySelector("#nightmareCheck");

function filterData(data) { 

   const temp = data.filter((item) => {
       if (Number(contentLevel.value) < Number(item.level) || !(Number(contentLevel.value) - 50 <= Number(item.level))) return false;

       if (
           questCheck.checked != item.categories.quest &&
           catchCheck.checked != item.categories.task &&
           dailyCheck.checked != item.categories.daily &&
           tasksCheck.checked != item.categories.catch &&
           pvpCheck.checked != item.categories.pvp && 
           nwCheck.checked != item.categories.nw
       ) return false;

       return true;
   });

   return temp;

}

function createCard(cardData) { 

   const icons = cardData.icons.map((icon) => (
       `<img src="${icon.image}" title="${icon.title}" alt="Icone ${icon.title}">`
   ));

   return (`
       <a href="${cardData.link}" class="card">
           <main>

${cardData.title}
Level: ${cardData.level}

${cardData.description} 

               <footer class="icon-container">
                   ${icons.join("")}                    
               </footer>
           </main>

           <aside>
               <img src="${cardData.imageSource}" alt="Imagem da missão - ${cardData.title}">
           </aside>
       </a>
   `)

}

document.querySelector("#quests-form").addEventListener("submit", function (e) { 

   e.preventDefault();
   container.innerHTML = ;
   const filteredData = filterData(json);

   filteredData.forEach(data => {
       container.innerHTML += (createCard(data));
   });

}); </script>

Disponível em “https://wiki.pokexgames.com/index.php?title=Widget:SearchQuestScript&oldid=73486”