bookmarklets page, apps, info/credits, other misc
This commit is contained in:
333
js/apps.js
333
js/apps.js
@ -1,197 +1,142 @@
|
||||
$.getJSON("/data/apps.json", function (data) {
|
||||
if (document.readyState === "complete") {
|
||||
loadGames(data);
|
||||
} else {
|
||||
let areGamesReady = setInterval(() => {
|
||||
if (document.readyState === "complete") {
|
||||
loadGames(data);
|
||||
clearInterval(areGamesReady);
|
||||
}
|
||||
}, 50);
|
||||
}
|
||||
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("/resources/apps.json")).json();
|
||||
let 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");
|
||||
let starredGames = JSON.parse(localStorage.getItem("selenite.starred") || '[]');
|
||||
sorted.forEach(element => {
|
||||
isStarred = starredGames.indexOf(element.directory) != -1;
|
||||
let newElement = document.createElement("game");
|
||||
newElement.setAttribute("data-target", element.directory);
|
||||
newElement.setAttribute("data-image", element.image);
|
||||
let image = document.createElement("img");
|
||||
image.src = `/resources/sppa/${element.directory}/${element.image}`
|
||||
let holder = document.createElement("div");
|
||||
holder.id = "holder";
|
||||
let title = document.createElement("h1");
|
||||
title.innerText = element.name;
|
||||
let star = document.createElement("img");
|
||||
star.id = "star";
|
||||
star.classList = "star";
|
||||
star.src = isStarred ? "/img/star-fill.svg" : "/img/star.svg";
|
||||
newElement.appendChild(image);
|
||||
holder.appendChild(title);
|
||||
holder.appendChild(star);
|
||||
newElement.appendChild(holder);
|
||||
gamesElement.appendChild(newElement);
|
||||
elements.push(newElement);
|
||||
newElement.addEventListener("click", ()=>{
|
||||
location.href=`/loader.html?title=${encodeURIComponent(element.name)}&dir=${element.directory}&img=${element.image}`
|
||||
});
|
||||
star.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
starEvent(e);
|
||||
});
|
||||
});
|
||||
document.getElementById("loadingMsg").style.display = "none";
|
||||
document.getElementById("allHeader").style.display = "block";
|
||||
starredGames = JSON.parse(localStorage.getItem("selenite.starred") || '[]');
|
||||
if(starredGames.length > 0) {
|
||||
document.getElementById("starredHeader").style.display = "block";
|
||||
starredGames.forEach((e) => {
|
||||
let element = document.querySelector(`#games game[data-target='${e}']`);
|
||||
let newElement = element.cloneNode(true);
|
||||
document.getElementById("starredgames").appendChild(newElement);
|
||||
newElement.addEventListener("click", ()=>{
|
||||
location.href=`/loader.html?title=${newElement.childNodes[1].childNodes[0].innerText}&dir=${newElement.getAttribute("data-target")}&img=${newElement.getAttribute("data-image")}`
|
||||
});
|
||||
});
|
||||
document.querySelectorAll("#starredgames #star").forEach((e) => {
|
||||
e.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
starEvent(e);
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
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].childNodes[0].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"
|
||||
})
|
||||
});
|
||||
|
||||
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 + " apps!",
|
||||
});
|
||||
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: "sppa/" + data[i].directory + "/index.html",
|
||||
})
|
||||
.data("recommended", data[i].recommended)
|
||||
.append(
|
||||
$("<img>").prop({
|
||||
src: "sppa/" + data[i].directory + "/" + data[i].image,
|
||||
alt: data[i].name + " logo",
|
||||
})
|
||||
)
|
||||
.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 + "/sppa/" + 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 apps again!");
|
||||
viewrecommended = 1;
|
||||
} else {
|
||||
$("#games .game").hide();
|
||||
$("#games .game").show();
|
||||
viewrecommended = 0;
|
||||
$("#recommend").text("Click to view recommended apps!");
|
||||
}
|
||||
function starEvent(e) {
|
||||
let game = e.target.parentNode.parentNode.getAttribute("data-target");
|
||||
starredGames = JSON.parse(localStorage.getItem("selenite.starred") || '[]');
|
||||
if(starredGames.indexOf(game) == -1) {
|
||||
starredGames.push(game);
|
||||
starredGames.sort();
|
||||
if(starredGames.length > 0) {
|
||||
document.getElementById("starredHeader").style.display = "block";
|
||||
} else {
|
||||
document.getElementById("starredHeader").style.display = "none";
|
||||
}
|
||||
localStorage.setItem("selenite.starred", JSON.stringify(starredGames));
|
||||
e.target.src = "/img/star-fill.svg";
|
||||
starredgames.innerHTML = "";
|
||||
starredGames.forEach((e) => {
|
||||
let element = document.querySelector(`#games game[data-target='${e}']`);
|
||||
let newElement = element.cloneNode(true);
|
||||
document.getElementById("starredgames").appendChild(newElement);
|
||||
newElement.addEventListener("click", ()=>{
|
||||
location.href=`/loader.html?title=${newElement.childNodes[1].childNodes[0].innerText}&dir=${newElement.getAttribute("data-target")}&img=${newElement.getAttribute("data-image")}`
|
||||
});
|
||||
})
|
||||
} else {
|
||||
starredGames.splice(starredGames.indexOf(game), 1);
|
||||
document.querySelectorAll(`game[data-target='${game}'] #star`).forEach((e) => {
|
||||
e.src = "/img/star.svg";
|
||||
})
|
||||
if(starredGames.length > 0) {
|
||||
document.getElementById("starredHeader").style.display = "block";
|
||||
} else {
|
||||
document.getElementById("starredHeader").style.display = "none";
|
||||
}
|
||||
localStorage.setItem("selenite.starred", JSON.stringify(starredGames));
|
||||
starredgames.innerHTML = "";
|
||||
starredGames.forEach((e) => {
|
||||
let element = document.querySelector(`#games game[data-target='${e}']`);
|
||||
let newElement = element.cloneNode(true);
|
||||
document.getElementById("starredgames").appendChild(newElement);
|
||||
newElement.addEventListener("click", ()=>{
|
||||
location.href=`/loader.html?title=${newElement.childNodes[1].childNodes[0].innerText}&dir=${newElement.getAttribute("data-target")}&img=${newElement.getAttribute("data-image")}`
|
||||
});
|
||||
})
|
||||
}
|
||||
document.querySelectorAll("#starredgames #star").forEach((e) => {
|
||||
e.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
starEvent(e);
|
||||
})
|
||||
})
|
||||
}
|
||||
Reference in New Issue
Block a user