document.addEventListener("DOMContentLoaded", loadGames);
let elements = [];
async function loadGames() {
  // taken from mdn
  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
  let data = await (await fetch("/data/games.json")).json();
  sorted = data.sort((a, b) => {
    const n1 = a.name.toUpperCase();
    const n2 = b.name.toUpperCase();
    if (n1 < n2) {
      return -1;
    }
    if (n1 > n2) {
      return 1;
    }
    // shouldnt happen but just incase
    return 0;
  });
  let gamesElement = document.getElementById("games");
  sorted.forEach(element => {
    let newElement = document.createElement("game");
    newElement.setAttribute("data-target", element.directory);
    let image = document.createElement("img");
    image.src = `/semag/${element.directory}/${element.image}`
    let title = document.createElement("h1");
    title.innerText = element.name;
    newElement.appendChild(image);
    newElement.appendChild(title);
    gamesElement.appendChild(newElement);
    newElement.addEventListener("click", ()=>{
      location.href=`/loader.html?title=${encodeURIComponent(element.name)}&dir=${element.directory}&img=${element.image}`
    })
    elements.push(newElement);
  });
}
document.addEventListener("DOMContentLoaded", ()=>{
  document.getElementById("gamesearch").addEventListener("input", ()=>{
    let input = document.getElementById("gamesearch").value.toUpperCase();
    let total = 0;
    if(elements.length > 0) {
      elements.forEach((element) => {
        let title = element.childNodes[1].innerText.toUpperCase();
        if(title.includes(input)) {
          element.style.display = "flex";
        } else {
          element.style.display = "none";
          total++;
        }
      })
    }
    document.getElementById("noResults").style.display = total >= elements.length ?  "flex" : "none"
  })
})