first dev commit

js/games.js

@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 $.getJSON("/data/games.json", function (data) {
 	if (document.readyState === "complete") {
 		loadGames(data);
@@ -197,3 +198,58 @@ function recommendedGames() {
 		$("#recommend").text("Click to view recommended games!");
 	}
 }
+=======
+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"
+  })
+})
+>>>>>>> c2041b6 (first dev commit)