frontend/js/games.js

<<<<<<< HEAD
$.getJSON("/data/games.json", function (data) {
	if (document.readyState === "complete") {
		loadGames(data);
	} else {
		let areGamesReady = setInterval(() => {
			if (document.readyState === "complete") {
				loadGames(data);
				clearInterval(areGamesReady);
			}
		}, 50);
	}
});

function loadGames(data) {
	starredgames = getCookie("starred");
	if (!starredgames) {
		starredgames = [];
	} else {
		starredgames = JSON.parse(decodeURIComponent(getCookie("starred")));
	}
	$("#gamesearch").prop({
		placeholder: "Click here to search through our " + data.length + " games!",
	});
	data.sort(dynamicSort("name"));
	gamelist = data;
	for (let i = 0; i < data.length; i++) {
		let $element = $("<a>")
			.attr({
				class: "game",
				id: data[i].directory,
				recommended: data[i].recommended,
				// href: "loader.html#" + btoa(encodeURIComponent(JSON.stringify([data[i].directory, data[i].image, data[i].name]))),
				href: "semag/" + data[i].directory + "/index.html",
			})
			.data("recommended", data[i].recommended)
			.append(
				$("<img>").prop({
					src: "semag/" + data[i].directory + "/" + data[i].image,
					alt: data[i].name + " logo",
					loading: "lazy"
				})
			)
			.append($("<h1>").text(data[i].name))
			.append(
				$("<img>").prop({
					src: "img/star.svg",
					alt: "star",
					class: "star",
				})
			);

		if (starredgames.includes(data[i].directory)) {
			$element.find("img.star").attr("id", "starred");
			$element.find("img.star").attr("src", "img/star-fill.svg");
			let $pinnedelement = $element.clone();
			$("#pinned").append($pinnedelement);
			if ($("#pinnedmessage")) {
				$("#pinnedmessage").hide();
			}
		}

		$("#games").append($element);
	}
	$("#games #message").remove();

	if ((search = 1)) {
		var txt = $("#gamesearch").val();
		if (txt == "") {
			$("#games .suggest").show();
		} else {
			$("#games .suggest").hide();
		}
		$("#games .game").hide();
		$("#games .game").each(function () {
			if ($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1 || $(this).attr("id").toUpperCase().indexOf(txt.toUpperCase()) != -1) {
				$(this).show();
			}
		});
	}

	// starred games
	let starred;
	$(document).on("click", "img.star", function (event) {

	});
	$(document).on("click", ".game", function (event) {
		if ($(event.target).is("img.star")) {
			event.preventDefault();
			event.stopPropagation();
			if (!$(event.target).attr("id")) {
				$(event.target).prop({ id: "starred" });
				$(event.target).prop({ src: "img/star-fill.svg" });
				starred = Cookies.get("starred");
				if (starred) {
					starred = JSON.parse(starred);
				} else {
					starred = [];
				}
				starred.push($(this).attr("id"));
				Cookies.set("starred", JSON.stringify(starred));
				$element = $(this).clone();
				$("#pinned").append($element);
				$("#pinnedmessage").hide();
				temp = $("#pinned")[0].childNodes;
				pinnedarray = [...temp];
				pinnedarray.sort(dynamicSort("id"));
				$("#pinned").empty();
				for (let i = 0; i < pinnedarray.length; i++) {
					pinnedarraynodes = pinnedarray[i].childNodes;
					pinnedarraynodes = [...pinnedarraynodes];
					let $element = $("<div>")
						.prop({
							class: "game",
							id: pinnedarray[i].id,
						})
						.append(
							$("<img>").prop({
								src: pinnedarraynodes[0].src,
								alt: pinnedarraynodes[0].alt,
								class: "gameicon",
							})
						)
						.append($("<h1>").text(pinnedarraynodes[1].innerHTML))
						.append(
							$("<img>").prop({
								src: "img/star-fill.svg",
								alt: "star",
								class: "star",
								id: "starred",
							})
						);
					$("#pinned").append($element);
				}
			} else {
				$(event.target).removeAttr("id");
				$(event.target).attr("src", "img/star.svg");
				$thisdiv = "#" + $(this).attr("id");
				$thisdiv = $thisdiv.replace(".", "\\.");
				starred = Cookies.get("starred");
				starred = JSON.parse(starred);
				ourindex = starred.indexOf($(this).attr("id"));
				starred.splice(ourindex, 1);
				Cookies.set("starred", JSON.stringify(starred));
				$("#pinned " + $thisdiv).remove();
				if ($("#pinned").is(":empty")) {
					$("#pinnedmessage").show();
				}
				$($thisdiv + " #starred").attr("src", "img/star.svg");
				$($thisdiv + " #starred").removeAttr("id");
			}
		}
	});
	$(document).on("click", "#game img .star", function (event) {
		event.stopPropagation();
		$(this).prop({ class: "material-symbols-outlined fill" });
	});
}

function redirectGame(dir) {
	window.location.href = window.location.origin + "/semag/" + dir + "/index.html";
}
function dynamicSort(property) {
	var sortOrder = 1;

	if (property[0] === "-") {
		sortOrder = -1;
		property = property.substr(1);
	}
	return function (a, b) {
		if (sortOrder == -1) {
			return b[property].localeCompare(a[property]);
		} else {
			return a[property].localeCompare(b[property]);
		}
	};
}

function selectRandomGame() {
	redirectGame(gamelist[Math.floor(Math.random() * gamelist.length - 1)].directory);
}

let viewrecommended = 0;
function recommendedGames() {
	if (viewrecommended == 0) {
		$("#games .game").hide();
		$("#games .game").each(function () {
			if ($(this).attr("recommended")) {
				$(this).show();
			}
		});
		$("#recommend").text("Click to view all games again!");
		viewrecommended = 1;
	} else {
		$("#games .game").hide();
		$("#games .game").show();
		viewrecommended = 0;
		$("#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)