bookmarklets page, apps, info/credits, other misc

This commit is contained in:
sky
2025-08-12 14:15:49 -04:00
parent 0c2d272068
commit b6c7d612a4
19 changed files with 589 additions and 560 deletions

View File

@ -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);
})
})
}

View File

@ -1,97 +1,97 @@
.cookieConsentContainer {
z-index: 999;
width: 350px;
min-height: 20px;
box-sizing: border-box;
padding: 30px 30px 30px 30px;
background: var(--uibg);
box-shadow: 0px 0px 10px 0px var(--uibg);
overflow: hidden;
position: fixed;
bottom: 30px;
right: 30px;
display: none;
}
.cookieConsentContainer .cookieTitle a {
color: #ffffff;
font-size: 22px;
line-height: 20px;
display: block;
}
.cookieConsentContainer .cookieDesc p {
margin: 0;
padding: 0;
color: #ffffff;
font-size: 13px;
line-height: 20px;
display: block;
margin-top: 10px;
}
.cookieConsentContainer .cookieDesc a {
color: #ffffff;
text-decoration: underline;
}
.cookieConsentContainer .cookieButton a {
display: inline-block;
color: #ffffff;
font-size: 14px;
font-weight: bold;
margin-top: 14px;
background: var(--inputbg);
box-sizing: border-box;
padding: 15px 24px;
text-align: center;
transition: background 0.3s;
}
.cookieConsentContainer .cookieButton a:hover {
cursor: pointer;
filter: brightness(0.9);
}
@media (max-width: 980px) {
.cookieConsentContainer {
bottom: 0px !important;
left: 0px !important;
width: 100% !important;
}
}
.cookieConsentContainer {
z-index: 999;
width: 350px;
min-height: 20px;
box-sizing: border-box;
padding: 30px 30px 30px 30px;
background: var(--uibg);
box-shadow: 0px 0px 10px 0px var(--uibg);
overflow: hidden;
position: fixed;
bottom: 30px;
right: 30px;
display: none;
}
.cookieConsentContainer .cookieTitle a {
color: #ffffff;
font-size: 22px;
line-height: 20px;
display: block;
}
.cookieConsentContainer .cookieDesc p {
margin: 0;
padding: 0;
color: #ffffff;
font-size: 13px;
line-height: 20px;
display: block;
margin-top: 10px;
}
.cookieConsentContainer .cookieDesc a {
color: #ffffff;
text-decoration: underline;
}
.cookieConsentContainer .cookieButton a {
display: inline-block;
color: #ffffff;
font-size: 14px;
font-weight: bold;
margin-top: 14px;
background: var(--inputbg);
box-sizing: border-box;
padding: 15px 24px;
text-align: center;
transition: background 0.3s;
}
.cookieConsentContainer .cookieButton a:hover {
cursor: pointer;
filter: brightness(0.9);
}
@media (max-width: 980px) {
.cookieConsentContainer {
bottom: 0px !important;
left: 0px !important;
width: 100% !important;
}
}

View File

@ -1,72 +1,72 @@
// --- Config --- //
var purecookieTitle = "Cookies."; // Title
var purecookieDesc = "By using this website, you automatically accept that we use cookies."; // Description
var purecookieLink = 'Selenite uses cookies to store settings and game progress. Selenite is also powered by Google Adsense and a self hosted instance of Plausible Analytics.'; // Cookiepolicy link
var purecookieButton = "Understood"; // Button text
// --- --- //
function pureFadeIn(elem, display){
var el = document.getElementById(elem);
el.style.opacity = 0;
el.style.display = display || "block";
(function fade() {
var val = parseFloat(el.style.opacity);
if (!((val += .04) > 1)) {
el.style.opacity = val;
requestAnimationFrame(fade);
}
})();
};
function pureFadeOut(elem){
var el = document.getElementById(elem);
el.style.opacity = 1;
(function fade() {
if ((el.style.opacity -= .04) < 0) {
el.style.display = "none";
} else {
requestAnimationFrame(fade);
}
})();
};
function setCookie(name,value,days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
document.cookie = name+'=; Max-Age=-99999999;';
}
function cookieConsent() {
if (!getCookie('purecookieDismiss')) {
let element = document.createElement("div");
element.innerHTML = '<div class="cookieConsentContainer" id="cookieConsentContainer"><div class="cookieTitle"><a>' + purecookieTitle + '</a></div><div class="cookieDesc"><p>' + purecookieDesc + ' ' + purecookieLink + '</p></div><div class="cookieButton"><a onClick="purecookieDismiss();">' + purecookieButton + '</a></div></div>';
document.body.appendChild(element);
pureFadeIn("cookieConsentContainer");
}
}
function purecookieDismiss() {
setCookie('purecookieDismiss','1',7);
pureFadeOut("cookieConsentContainer");
}
window.onload = function() { cookieConsent(); };
// --- Config --- //
var purecookieTitle = "Cookies."; // Title
var purecookieDesc = "By using this website, you automatically accept that we use cookies."; // Description
var purecookieLink = 'Selenite uses cookies to store settings and game progress. Selenite is also powered by Google Adsense and a self hosted instance of Plausible Analytics.'; // Cookiepolicy link
var purecookieButton = "Understood"; // Button text
// --- --- //
function pureFadeIn(elem, display){
var el = document.getElementById(elem);
el.style.opacity = 0;
el.style.display = display || "block";
(function fade() {
var val = parseFloat(el.style.opacity);
if (!((val += .04) > 1)) {
el.style.opacity = val;
requestAnimationFrame(fade);
}
})();
};
function pureFadeOut(elem){
var el = document.getElementById(elem);
el.style.opacity = 1;
(function fade() {
if ((el.style.opacity -= .04) < 0) {
el.style.display = "none";
} else {
requestAnimationFrame(fade);
}
})();
};
function setCookie(name,value,days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
document.cookie = name+'=; Max-Age=-99999999;';
}
function cookieConsent() {
if (!getCookie('purecookieDismiss')) {
let element = document.createElement("div");
element.innerHTML = '<div class="cookieConsentContainer" id="cookieConsentContainer"><div class="cookieTitle"><a>' + purecookieTitle + '</a></div><div class="cookieDesc"><p>' + purecookieDesc + ' ' + purecookieLink + '</p></div><div class="cookieButton"><a onClick="purecookieDismiss();">' + purecookieButton + '</a></div></div>';
document.body.appendChild(element);
pureFadeIn("cookieConsentContainer");
}
}
function purecookieDismiss() {
setCookie('purecookieDismiss','1',7);
pureFadeOut("cookieConsentContainer");
}
window.onload = function() { cookieConsent(); };