selenite/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix apps

Browse Source
This commit is contained in:
sky
2026-02-08 19:04:44 -05:00
parent 755211d4b9
commit 228fc53083
5 changed files with 13 additions and 396 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
apps.html
View File

@ -6,11 +6,9 @@
<!-- initialize my stuff -->
<script src="/js/all.min.js" async></script>
<script src="/js/apps.js"></script>
<script src="/js/search.js"></script>
<script>let type = "a";</script>
<script src="/js/loader.js"></script>
<script src="/js/main.js"></script>
<script src="/js/themes.js"></script>
<script src="/js/cookie.js"></script>
<link rel="stylesheet" href="/css/main.css" />
@ -33,9 +31,9 @@
<input type="text" class="searchbar" id="gamesearch" placeholder="Type here to search.." />
<p id="gameCount">xx games loaded..</p>
<p id="starredHeader">starred apps</p>
<div id="starredgames">
</div>
<p id="allHeader">all apps</p>
<div id="starredgames"></div>
<div id="topGames"></div>
<p id="allHeader" class="title">all apps</p>
<div id="games">
<p id="loadingMsg">games loading..</p>
<p id="noResults">nothing was found! try a new search query.</p>

143
js/apps.js
View File

@ -1,143 +0,0 @@
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}&type=a`
});
star.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
starEvent(e);
});
});
document.getElementById("gameCount").innerText = `${data.length} apps loaded!`;
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")}&type=a`
});
});
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 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")}&type=a`
});
})
} 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")}&type=a`
});
})
}
document.querySelectorAll("#starredgames #star").forEach((e) => {
e.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
starEvent(e);
})
})
}

243
js/games_improved.js
View File

@ -1,243 +0,0 @@
// this IS ai generated
// wanna test real world difference soon
document.addEventListener("DOMContentLoaded", loadGames);
let elements = [];
let isDev = [];
let starredGames = [];
// Cache DOM references
const domCache = {
games: null,
topGames: null,
starredGames: null,
gameCount: null,
loadingMsg: null,
allHeader: null,
topHeader: null,
starredHeader: null,
noResults: null,
gameSearch: null
};
function initDOMCache() {
domCache.games = document.getElementById("games");
domCache.topGames = document.getElementById("topGames");
domCache.starredGames = document.getElementById("starredgames");
domCache.gameCount = document.getElementById("gameCount");
domCache.loadingMsg = document.getElementById("loadingMsg");
domCache.allHeader = document.getElementById("allHeader");
domCache.topHeader = document.getElementById("topHeader");
domCache.starredHeader = document.getElementById("starredHeader");
domCache.noResults = document.getElementById("noResults");
domCache.gameSearch = document.getElementById("gamesearch");
}
async function loadGames() {
initDOMCache();
// Load starred games once
starredGames = JSON.parse(localStorage.getItem("selenite.starred") || '[]');
// Fetch and sort games
const data = await (await fetch("/resources/games.json")).json();
const sorted = data.sort((a, b) => {
const n1 = a.name.toUpperCase();
const n2 = b.name.toUpperCase();
return n1 < n2 ? -1 : n1 > n2 ? 1 : 0;
});
// Use DocumentFragments for batched DOM operations
const gamesFragment = document.createDocumentFragment();
const topGamesFragment = document.createDocumentFragment();
sorted.forEach(element => {
const isStarred = starredGames.includes(element.directory);
const newElement = createGameElement(element, isStarred);
elements.push(newElement);
if (element.tags?.includes("top")) {
topGamesFragment.appendChild(newElement);
} else {
gamesFragment.appendChild(newElement);
}
if (element.tags?.includes("tofinish")) {
isDev.push(element.directory);
}
});
// Append all elements at once (2 reflows instead of N)
domCache.games.appendChild(gamesFragment);
domCache.topGames.appendChild(topGamesFragment);
// Update UI
domCache.gameCount.innerText = `${data.length} games loaded!`;
domCache.loadingMsg.style.display = "none";
domCache.allHeader.style.display = "block";
domCache.topHeader.style.display = "block";
if (isDev.length > 0) {
sAlert("wip games", "dev message, shouldnt be seen");
console.log(isDev.join(","));
}
// Render starred games if any
if (starredGames.length > 0) {
renderStarredGames();
}
// Setup event delegation for game clicks and stars
setupEventDelegation();
}
function createGameElement(element, isStarred) {
const newElement = document.createElement("game");
newElement.setAttribute("data-target", element.directory);
newElement.setAttribute("data-image", element.image);
newElement.setAttribute("data-name", element.name);
const image = document.createElement("img");
image.src = `/resources/semag/${element.directory}/${element.image}`;
image.loading = "lazy";
const holder = document.createElement("div");
holder.id = "holder";
const title = document.createElement("h1");
title.innerText = element.name;
const warnings = document.createElement("warnings");
// Add warning tags if present
if (element.tags) {
if (element.tags.includes("13+")) {
const thirteenplus = document.createElement("warning");
thirteenplus.innerText = "13+";
thirteenplus.classList = "thirteen";
warnings.appendChild(thirteenplus);
}
if (element.tags.includes("horror")) {
const horror = document.createElement("warning");
horror.innerText = "😱";
horror.classList = "horror";
warnings.appendChild(horror);
}
if (element.tags.includes("gore")) {
const gore = document.createElement("warning");
gore.innerText = "🩸";
gore.classList = "gore";
warnings.appendChild(gore);
}
}
// Only add star for non-top games
if (!element.tags?.includes("top")) {
const star = document.createElement("img");
star.id = "star";
star.classList = "star";
star.src = isStarred ? "/img/star-fill.svg" : "/img/star.svg";
holder.appendChild(title);
holder.appendChild(star);
} else {
holder.appendChild(title);
}
newElement.appendChild(image);
newElement.appendChild(holder);
newElement.appendChild(warnings);
return newElement;
}
function setupEventDelegation() {
// Delegate game clicks on parent containers
const gameContainers = [domCache.games, domCache.topGames, domCache.starredGames];
gameContainers.forEach(container => {
container.addEventListener("click", (e) => {
const gameElement = e.target.closest("game");
if (!gameElement) return;
const clickedStar = e.target.id === "star" || e.target.classList.contains("star");
if (clickedStar) {
e.preventDefault();
e.stopPropagation();
handleStarClick(gameElement);
} else {
const name = gameElement.getAttribute("data-name");
const dir = gameElement.getAttribute("data-target");
const img = gameElement.getAttribute("data-image");
location.href = `/loader.html?title=${encodeURIComponent(name)}&dir=${dir}&img=${img}&type=g`;
}
});
});
}
function handleStarClick(gameElement) {
const game = gameElement.getAttribute("data-target");
const starImages = document.querySelectorAll(`game[data-target='${game}'] #star`);
starredGames = JSON.parse(localStorage.getItem("selenite.starred") || '[]');
if (!starredGames.includes(game)) {
starredGames.push(game);
starredGames.sort();
starImages.forEach(img => img.src = "/img/star-fill.svg");
} else {
starredGames.splice(starredGames.indexOf(game), 1);
starImages.forEach(img => img.src = "/img/star.svg");
}
localStorage.setItem("selenite.starred", JSON.stringify(starredGames));
renderStarredGames();
}
function renderStarredGames() {
domCache.starredHeader.style.display = starredGames.length > 0 ? "block" : "none";
domCache.starredGames.innerHTML = "";
if (starredGames.length === 0) return;
const fragment = document.createDocumentFragment();
starredGames.forEach((gameDir) => {
const originalElement = domCache.games.querySelector(`game[data-target='${gameDir}']`);
if (originalElement) {
const clonedElement = originalElement.cloneNode(true);
fragment.appendChild(clonedElement);
}
});
domCache.starredGames.appendChild(fragment);
}
// Search functionality
document.addEventListener("DOMContentLoaded", () => {
const gameSearch = document.getElementById("gamesearch");
if (!gameSearch) return;
gameSearch.addEventListener("input", () => {
const input = gameSearch.value.toUpperCase();
let hiddenCount = 0;
if (elements.length > 0) {
elements.forEach((element) => {
const title = element.getAttribute("data-name").toUpperCase();
if (title.includes(input)) {
element.style.display = "flex";
} else {
element.style.display = "none";
hiddenCount++;
}
});
}
const noResults = document.getElementById("noResults");
if (noResults) {
noResults.style.display = hiddenCount >= elements.length ? "flex" : "none";
}
});
});

8
js/games.js → js/loader.js
View File

@ -1,10 +1,14 @@
document.addEventListener("DOMContentLoaded", loadGames);
let elements = [];
let isDev = [];
let pageData;
async function loadGames() {
if(type == "g") pageData = {path: "/resources/games.json", prefix: "semag"}
else if(type == "a") pageData = {path: "/resources/apps.json", prefix: "sppa"}
else sAlert("this is not valid");
// taken from mdn
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
let data = await (await fetch("/resources/games.json")).json();
let data = await (await fetch(pageData.path)).json();
let sorted = data.sort((a, b) => {
const n1 = a.name.toUpperCase();
const n2 = b.name.toUpperCase();
@ -31,7 +35,7 @@ async function loadGames() {
newElement.setAttribute("class", "game");
newElement.setAttribute("href", `/loader.html?title=${encodeURIComponent(element.name)}&dir=${element.directory}&img=${element.image}&type=g`);
let image = document.createElement("img");
image.src = `/resources/semag/${element.directory}/${element.image}`;
image.src = `/resources/${pageData.prefix}/${element.directory}/${element.image}`;
image.loading = `lazy`;
image.onerror = function() {this.src="/img/missing.svg"};
let holder = document.createElement("div");

3
projects.html
View File

@ -6,7 +6,8 @@
<!-- initialize my stuff -->
<script src="/js/all.min.js" async></script>
<script src="/js/games.js"></script>
<script>let type = "g";</script>
<script src="/js/loader.js"></script>
<script src="/js/main.js"></script>