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

sorting games

Browse Source
This commit is contained in:
sky
2026-04-11 15:46:12 -04:00
parent d6cb5bd114
commit aec7ff3018
4 changed files with 104 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
apps.html
View File

@ -29,13 +29,19 @@
</head>
<body>
<input type="text" class="searchbar" id="gamesearch" placeholder="Type here to search.." />
<p id="gameCount">xx games loaded..</p>
<select id="gamesort">
<option value="az">a -> z</option>
<option value="za">z -> a</option>
<option value="new">newest</option>
<option value="played">your top apps</option>
<option value="global">global top apps</option>
</select>
<p id="gameCount">xx apps loaded..</p>
<p id="starredHeader">starred 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="loadingMsg">apps loading..</p>
<p id="noResults">nothing was found! try a new search query.</p>
</div>
</body>

17
css/games.css
View File

@ -74,6 +74,23 @@
body {
justify-content: flex-start;
}
#gamesort {
border-style: solid;
border-width: 2px;
padding: 10px 18px;
margin: 5px;
border-radius: 10px;
background-color: var(--color-2);
border-color: var(--color-3);
color: var(--text-color);
outline: none;
transition-duration: 0.25s;
font-size: 16px;
cursor: pointer;
}
#gamesort:hover {
filter: brightness(1.1);
}
@-moz-document url-prefix() {
game {
backdrop-filter: blur(0);

76
js/loader.js
View File

@ -1,8 +1,11 @@
document.addEventListener("DOMContentLoaded", loadGames);
let elements = [];
let gameElements = [];
let topElements = [];
let isDev = [];
let pageData;
let starredGames = [];
let globalPlays = null;
async function loadGames() {
if (type == "g") pageData = { path: "/resources/games-tagged.json", prefix: "semag", type: "g" };
@ -11,14 +14,13 @@ async function loadGames() {
let data = await (await fetch(pageData.path)).json();
data.forEach(g => g._key = g.name.toUpperCase());
data.forEach((g, i) => { g._key = g.name.toUpperCase(); g._index = i; });
data.sort((a, b) => a._key < b._key ? -1 : a._key > b._key ? 1 : 0);
const gamesElement = document.getElementById("games");
const topGElement = document.getElementById("topGames");
const gamesFragment = document.createDocumentFragment();
const topFragment = document.createDocumentFragment();
const disableTop = localStorage.getItem("selenite.disableTopGames") != "false";
starredGames = JSON.parse(localStorage.getItem("selenite.starred") || "[]");
const starredSet = new Set(starredGames);
@ -29,6 +31,8 @@ async function loadGames() {
newElement.dataset.target = element.directory;
newElement.dataset.image = element.image;
newElement.dataset.name = element._key;
newElement.dataset.top = element.tags && element.tags.includes("top") ? "1" : "";
newElement.dataset.index = element._index;
newElement.className = "game";
newElement.href = `/loader.html?title=${encodeURIComponent(element.name)}&dir=${element.directory}&img=${element.image}&type=${pageData.type}`;
@ -70,14 +74,17 @@ async function loadGames() {
w.className = "thirteen";
warnings.appendChild(w);
}
if (element.tags.includes("top") && disableTop) {
if (element.tags.includes("top")) {
topFragment.appendChild(newElement);
topElements.push(newElement);
} else {
gamesFragment.appendChild(newElement);
gameElements.push(newElement);
holder.appendChild(star);
}
} else {
gamesFragment.appendChild(newElement);
gameElements.push(newElement);
holder.appendChild(star);
}
@ -90,11 +97,12 @@ async function loadGames() {
});
gamesElement.appendChild(gamesFragment);
topGElement.appendChild(topFragment);
if (topGElement) topGElement.appendChild(topFragment);
document.getElementById("gameCount").innerText = `${data.length} games loaded!`;
document.getElementById("loadingMsg").style.display = "none";
document.getElementById("allHeader").style.display = "block";
if (disableTop) document.getElementById("topHeader").style.display = "block";
const topHeader = document.getElementById("topHeader");
if (topHeader && topElements.length > 0) topHeader.style.display = "block";
if (isDev.length > 0) console.log(isDev.join(","));
starredGames = JSON.parse(localStorage.getItem("selenite.starred") || "[]");
@ -140,6 +148,64 @@ function _rebuildStarred() {
container.appendChild(fragment);
}
function getTotalPlayTime(directory) {
const playTime = JSON.parse(localStorage.getItem("selenite.playTime") || "{}");
return Object.values(playTime).reduce((total, day) => total + (day[directory] || 0), 0);
}
function reSort(sortBy) {
const gamesEl = document.getElementById("games");
const topGEl = document.getElementById("topGames");
const topHeader = document.getElementById("topHeader");
if (sortBy === "az") {
if (topGEl) {
const frag = document.createDocumentFragment();
topElements.forEach(el => frag.appendChild(el));
topGEl.appendChild(frag);
if (topHeader && topElements.length > 0) topHeader.style.display = "block";
}
const sorted = [...gameElements].sort((a, b) => a.dataset.name < b.dataset.name ? -1 : a.dataset.name > b.dataset.name ? 1 : 0);
const frag = document.createDocumentFragment();
sorted.forEach(el => frag.appendChild(el));
gamesEl.appendChild(frag);
return;
}
if (topHeader) topHeader.style.display = "none";
const all = [...gameElements, ...topElements];
if (sortBy === "za") {
all.sort((a, b) => a.dataset.name > b.dataset.name ? -1 : a.dataset.name < b.dataset.name ? 1 : 0);
} else if (sortBy === "played") {
all.sort((a, b) => getTotalPlayTime(b.dataset.target) - getTotalPlayTime(a.dataset.target));
} else if (sortBy === "global") {
if (!globalPlays) return;
all.sort((a, b) => (globalPlays.get(b.dataset.target) || 0) - (globalPlays.get(a.dataset.target) || 0));
} else if (sortBy === "new") {
all.sort((a, b) => a.dataset.index - b.dataset.index);
}
const fragment = document.createDocumentFragment();
all.forEach(el => fragment.appendChild(el));
gamesEl.appendChild(fragment);
}
document.addEventListener("DOMContentLoaded", () => {
const sortSelect = document.getElementById("gamesort");
if (!sortSelect) return;
sortSelect.addEventListener("change", async () => {
if (sortSelect.value === "global" && !globalPlays) {
sortSelect.disabled = true;
try {
const data = await (await fetch("/api/analytics/get")).json();
globalPlays = new Map(data.map(e => [e.name, e.plays]));
} finally {
sortSelect.disabled = false;
}
}
reSort(sortSelect.value);
});
});
function starEvent(e) {
const game = e.target.parentNode.parentNode.getAttribute("data-target");
starredGames = JSON.parse(localStorage.getItem("selenite.starred") || "[]");

7
projects.html
View File

@ -29,6 +29,13 @@
</head>
<body>
<input type="text" class="searchbar" id="gamesearch" placeholder="Type here to search.." />
<select id="gamesort">
<option value="az">a -> z</option>
<option value="za">z -> a</option>
<option value="new">newest</option>
<option value="played">your top games</option>
<option value="global">global top games</option>
</select>
<p id="gameCount">xx games loaded..</p>
<p id="starredHeader">starred games</p>
<div id="starredgames"></div>