sorting games

js/loader.js

@@ -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") || "[]");