From 228fc5308349554e1f13db652b8975abba2d102e Mon Sep 17 00:00:00 2001 From: sky Date: Sun, 8 Feb 2026 19:04:44 -0500 Subject: [PATCH] fix apps --- apps.html | 12 +- js/apps.js | 143 ---------------------- js/games_improved.js | 243 ------------------------------------- js/{games.js => loader.js} | 8 +- projects.html | 3 +- 5 files changed, 13 insertions(+), 396 deletions(-) delete mode 100755 js/apps.js delete mode 100644 js/games_improved.js rename js/{games.js => loader.js} (95%) diff --git a/apps.html b/apps.html index 959126f..d70f7f8 100755 --- a/apps.html +++ b/apps.html @@ -6,11 +6,9 @@ - - + + - - @@ -33,9 +31,9 @@

xx games loaded..

starred apps

-
-
-

all apps

+
+
+

all apps

games loading..

nothing was found! try a new search query.

diff --git a/js/apps.js b/js/apps.js deleted file mode 100755 index 462b515..0000000 --- a/js/apps.js +++ /dev/null @@ -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); - }) - }) -} \ No newline at end of file diff --git a/js/games_improved.js b/js/games_improved.js deleted file mode 100644 index b59139f..0000000 --- a/js/games_improved.js +++ /dev/null @@ -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"; - } - }); -}); diff --git a/js/games.js b/js/loader.js similarity index 95% rename from js/games.js rename to js/loader.js index 81631ae..8045ca3 100755 --- a/js/games.js +++ b/js/loader.js @@ -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"); diff --git a/projects.html b/projects.html index e823a1f..c2170ba 100755 --- a/projects.html +++ b/projects.html @@ -6,7 +6,8 @@ - + +