optimize a lot of stuff

css/games.css

@@ -1,6 +1,6 @@
 .game {
     width: 20vw;
-    height: 10vh;
+    height: 9vh;
     background-color: color-mix(in srgb, var(--color-2) 40%, #00000000 60%);
     display: flex;
     justify-content: center;
@@ -13,17 +13,16 @@
     box-shadow: 0 0 10px var(--color-2);
     text-decoration: none;
     content-visibility: auto;
-    contain-intrinsic-size: auto 10vh;
+    contain-intrinsic-size: auto 9vh;
 }
 .game:hover {
     transform: scale(1.1);
-    filter:brightness(1.15);
 }
 .game img {
-    height: 80%;
+    height: calc(100% - 4px - 4px);
 	border-radius: 15px;
 	aspect-ratio: 1 / 1;
-    margin: 10px;
+    margin: 4px;
     justify-self: left;
     margin-right: auto;
 }
@@ -35,8 +34,7 @@
     height: 70%;
 }
 #holder {
-    width: 70%;
+    flex: 1;
-    height: auto;
     display: flex;
     flex-direction: column;
     align-items: flex-end;

css/loader.css

@@ -3,26 +3,57 @@ body {
 }
 #gameFrame {
     width: 100vw;
-    height: 90vh;
+    height: 100vh;
     margin: 0;
     background-color: black;
 }
 #infobox {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: #000000;
+    transition: transform 0.3s ease;
+    z-index: 10;
+}
+#infobox.collapsed {
+    transform: translateY(100%);
+}
+#infobox:hover {
+    transform: translateY(0);
+}
+#infobox-toggle {
+    position: fixed;
+    bottom: calc(10vh + 8px);
+    right: 12px;
+    width: 28px;
+    height: 28px;
+    cursor: pointer;
+    opacity: 0.5;
+    z-index: 11;
+    transition: opacity 0.2s, transform 0.3s, bottom 0.3s;
+}
+#infobox-toggle:hover {
+    opacity: 1;
+}
+#infobox.collapsed ~ #infobox-toggle {
+    transform: rotate(180deg);
+    bottom: 8px;
+}
+#infobox-content {
     height: 10vh;
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: #000000;
-    backdrop-filter: blur(4px);
 }
-#infobox img {
+#infobox-content img {
     height: 90%;
     margin: 0.5%;
     aspect-ratio: 1 / 1;
     border-radius: 8px;
 }
-#infobox h2 {
+#infobox-content h2 {
     margin-right: auto;
 }
 .button {
@@ -59,7 +90,7 @@ body[fast] #gamecontainer {
 	backdrop-filter: blur(0);
 }
 @media screen and (max-width: 660px) {
-	#infobox h2 {
+	#infobox-content h2 {
         max-width: 45%;
         font-size: 16px;
     }

css/main.css

@@ -1,4 +1,3 @@
-@import url("/css/themes.css");
 @import url('https://fonts.googleapis.com/css2?family=Mulish&display=swap');
 :root {
     --text-color: #fff;
@@ -9,6 +8,51 @@
     --color-3: #3C096C;
     --color-4: #240046;
 }
+body[theme=blackandwhite] {
+    --text-color: #fff;
+    --bg-1: #504d53;
+    --bg-2: #090909;
+    --color-1: #bfbfbf;
+    --color-2: #8e8e8e;
+    --color-3: #5c5c5c;
+    --color-4: #000000;
+}
+body[theme=grass] {
+    --text-color: #ffffff;
+    --bg-1: #385041;
+    --bg-2: #1d3024;
+    --color-1: #a8e5a7;
+    --color-2: #559b7a;
+    --color-3: #3a5c3f;
+    --color-4: #242e22;
+}
+body[theme=evil] {
+    --text-color: #ffffff;
+    --bg-1: #ba2a2a;
+    --bg-2: #591414;
+    --color-1: #eb8181;
+    --color-2: #ae4141;
+    --color-3: #7b3838;
+    --color-4: #4f2626;
+}
+body[theme=sky] {
+    --text-color: #ffffff;
+    --bg-1: #5d9dae;
+    --bg-2: #3c7aa6;
+    --color-1: #04eeff;
+    --color-2: #2ab9f2;
+    --color-3: #3188bd;
+    --color-4: #23588a;
+}
+body[theme=xmas] {
+    --text-color: #dcffab;
+    --bg-1: #a00000;
+    --bg-2: #400000;
+    --color-1: #dcffab;
+    --color-2: #a32a2a;
+    --color-3: #000000;
+    --color-4: #630000;
+}
 html,
 body {
     /* height: 100vh; */
@@ -22,7 +66,9 @@ body {
     margin: 0;
     border: none;
     font-family: "Mulish", serif;
-    transition-duration: 0.5s;
+}
+a, button, select, input, option {
+    transition-duration: 0.4s;
 }
 body {
     animation: 1s ease-out loadIn;
@@ -35,7 +81,7 @@ body {
 
 body {
     display: flex;
-    filter: drop-shadow(0px 0px 4px #ffffff99);
+    isolation: isolate;
 }
 
 .samerow {
@@ -139,6 +185,6 @@ button {
   cursor:pointer;
 }
 button:hover {
-  filter: brightness(1.1);
+  box-shadow: 0 0 12px var(--color-2);
   transform: scale(1.05);
 }

css/pages.css

@@ -41,8 +41,6 @@ body {
     border: none;
     overflow-y: hidden;
     top: 0;
-    transition-duration: 0.05s;
-    transition-timing-function: ease-out;
 }
 input[type=text], input[type=password] {
   width: 70%;

css/sidebar.css

@@ -25,6 +25,10 @@ sidebar {
   transition-timing-function: ease-in-out;
 }
 
+.sidebar-item.active {
+
+}
+
 iframe {
   width: calc(100% - 50px - 10px);
   height: calc(100vh - 20px);
@@ -66,6 +70,7 @@ iframe {
 #open-bottom-menu {
   position: absolute;
   bottom: -40px;
+  transition-duration: 0.5s;
   height: 50px;
   left: 0;
   right: 0;

home.html

@@ -24,16 +24,18 @@
     </script>
 
 		<!-- initialize my stuff -->
-		<script src="/js/all.js"></script>
+		<link rel="stylesheet" href="/css/main.css" />
-		<script src="/js/main.js"></script>
+		<link rel="stylesheet" href="/css/pages.css" />
+		<link rel="preload" href="https://fonts.googleapis.com/css2?family=Mulish&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'" />
+		<script src="/js/main.js" defer></script>
 		<!-- <script src="/js/widget.js"></script> -->
-		<script>
+		<script defer>
 			document.addEventListener("DOMContentLoaded", () => {
 				setBackground();
 				fetch("/quotes.json")
 					.then((response) => response.json())
 					.then((data) => {
-						const randomQuote = data[Math.floor(Math.random() * data.length)];
+						let randomQuote = data[Math.floor(Math.random() * data.length)];
 
 						if (randomQuote.includes("OGNUM1") && randomQuote.includes("SQRTNUM1")) {
 							const ognum = Math.floor(Math.random() * 3000);
@@ -47,9 +49,6 @@
 					.catch((error) => console.error("Error loading quotes:", error));
 			});
 		</script>
-
-		<link rel="stylesheet" href="/css/main.css" />
-		<link rel="stylesheet" href="/css/pages.css" />
 		<link rel="manifest" href="/manifest.json" />
 		<!-- seo + other things -->
 		<title>Selenite</title>

index.html

@@ -252,9 +252,10 @@
 				document.querySelectorAll(".sidebar-item").forEach((item) => {
 					if(item.childNodes[0].target) {
 						item.childNodes[0].addEventListener("click", (e)=>{
-							console.log("created event listneer")
 							e.preventDefault();
 							document.getElementById("iframe").src = item.childNodes[0].target;
+							document.querySelectorAll(".sidebar-item").forEach(i => i.classList.remove("active"));
+							item.classList.add("active");
 						})
 					} else if(item.childNodes[0].id == "openblank") {
 						item.childNodes[0].addEventListener("click", (e)=>{

js/loader.js

@@ -2,99 +2,85 @@ document.addEventListener("DOMContentLoaded", loadGames);
 let elements = [];
 let isDev = [];
 let pageData;
-async function loadGames() {
+let starredGames = [];
-    if (type == "g") pageData = { path: "/resources/games.json", prefix: "semag", type: "g" };
-    else if (type == "a") pageData = { path: "/resources/apps.json", prefix: "sppa", type: "a" };
-    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(pageData.path)).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 topGElement = document.getElementById("topGames");
 
-    let gamesFragment = document.createDocumentFragment();
+async function loadGames() {
-    let topFragment = document.createDocumentFragment();
+    if (type == "g") pageData = { path: "/resources/games-tagged.json", prefix: "semag", type: "g" };
-    let starredGames = JSON.parse(localStorage.getItem("selenite.starred") || "[]");
+    else if (type == "a") pageData = { path: "/resources/apps.json", prefix: "sppa", type: "a" };
-    sorted.forEach((element) => {
+    else { sAlert("this is not valid"); return; }
-        isStarred = starredGames.indexOf(element.directory) != -1;
+
-        let newElement = document.createElement("a");
+    let data = await (await fetch(pageData.path)).json();
-        newElement.setAttribute("data-target", element.directory);
+
-        newElement.setAttribute("data-image", element.image);
+    data.forEach(g => g._key = g.name.toUpperCase());
-        newElement.setAttribute("class", "game");
+    data.sort((a, b) => a._key < b._key ? -1 : a._key > b._key ? 1 : 0);
-        newElement.setAttribute("href", `/loader.html?title=${encodeURIComponent(element.name)}&dir=${element.directory}&img=${element.image}&type=${pageData.type}`);
+
-        let image = document.createElement("img");
+    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);
+
+    data.forEach((element) => {
+        const isStarred = starredSet.has(element.directory);
+        const newElement = document.createElement("a");
+        newElement.dataset.target = element.directory;
+        newElement.dataset.image = element.image;
+        newElement.dataset.name = element._key;
+        newElement.className = "game";
+        newElement.href = `/loader.html?title=${encodeURIComponent(element.name)}&dir=${element.directory}&img=${element.image}&type=${pageData.type}`;
+
+        const image = document.createElement("img");
         image.src = `/resources/${pageData.prefix}/${element.directory}/${element.image}`;
-        image.loading = `lazy`;
+        image.loading = "lazy";
-        image.onerror = function () {
+        image.onerror = function() { this.src = "/img/missing.svg"; };
-            this.src = "/img/missing.svg";
+
-        };
+        const holder = document.createElement("div");
-        let holder = document.createElement("div");
         holder.id = "holder";
-        let title = document.createElement("h1");
+        const 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";
-        let warnings = document.createElement("warnings");
-        newElement.appendChild(image);
         holder.appendChild(title);
+
+        const star = document.createElement("img");
+        star.id = "star";
+        star.className = "star";
+        star.src = isStarred ? "/img/star-fill.svg" : "/img/star.svg";
+
+        const warnings = document.createElement("warnings");
+        newElement.appendChild(image);
         newElement.appendChild(holder);
         newElement.appendChild(warnings);
+
         if (element.tags) {
-            if (element.tags.includes("18+")) {
+            [["18+", "thirteen", "18+"], ["13+", "thirteen", "13+"],
-                let thirteenplus = document.createElement("warning");
+             ["horror", "horror", "😱"], ["gore", "gore", "🩸"]].forEach(([tag, cls, text]) => {
-                thirteenplus.innerText = "18+";
+                if (element.tags.includes(tag)) {
-                thirteenplus.classList = "thirteen";
+                    const w = document.createElement("warning");
-                warnings.appendChild(thirteenplus);
+                    w.innerText = text;
+                    w.className = cls;
+                    warnings.appendChild(w);
                 }
-            if (element.tags.includes("13+")) {
+            });
-                let thirteenplus = document.createElement("warning");
+            if (element.tags.includes("wip")) {
-                thirteenplus.innerText = "13+";
+                isDev.push(element.directory);
-                thirteenplus.classList = "thirteen";
+                const w = document.createElement("warning");
-                warnings.appendChild(thirteenplus);
+                w.innerText = "WIP";
+                w.className = "thirteen";
+                warnings.appendChild(w);
             }
-            if (element.tags.includes("horror")) {
+            if (element.tags.includes("top") && disableTop) {
-                let horror = document.createElement("warning");
-                horror.innerText = "😱";
-                horror.classList = "horror";
-                warnings.appendChild(horror);
-            }
-            if (element.tags.includes("gore")) {
-                let gore = document.createElement("warning");
-                gore.innerText = "🩸";
-                gore.classList = "gore";
-                warnings.appendChild(gore);
-            }
-            if (element.tags.includes("top") && localStorage.getItem("selenite.disableTopGames") != "false") {
                 topFragment.appendChild(newElement);
             } else {
                 gamesFragment.appendChild(newElement);
                 holder.appendChild(star);
             }
-            if (element.tags.includes("wip")) {
-                isDev.push(element.directory);
-                let thirteenplus = document.createElement("warning");
-                thirteenplus.innerText = "WIP";
-                thirteenplus.classList = "thirteen";
-                warnings.appendChild(thirteenplus);
-            }
         } else {
             gamesFragment.appendChild(newElement);
             holder.appendChild(star);
         }
+
         elements.push(newElement);
         star.addEventListener("click", (e) => {
             e.preventDefault();
@@ -102,96 +88,78 @@ async function loadGames() {
             starEvent(e);
         });
     });
+
     gamesElement.appendChild(gamesFragment);
     topGElement.appendChild(topFragment);
     document.getElementById("gameCount").innerText = `${data.length} games loaded!`;
     document.getElementById("loadingMsg").style.display = "none";
     document.getElementById("allHeader").style.display = "block";
-    if (localStorage.getItem("selenite.disableTopGames") != "false") {
+    if (disableTop) document.getElementById("topHeader").style.display = "block";
-        document.getElementById("topHeader").style.display = "block";
+    if (isDev.length > 0) console.log(isDev.join(","));
-    }
+
-    if (isDev.length > 0) {
-        sAlert("wip games", "dev message, shouldnt be seen");
-        console.log(isDev.join(","));
-    }
     starredGames = JSON.parse(localStorage.getItem("selenite.starred") || "[]");
     if (starredGames.length > 0) {
         document.getElementById("starredHeader").style.display = "block";
-        starredGames.forEach((e) => {
+        _rebuildStarred();
-            let element = document.querySelector(`#games a.game[data-target='${e}']`);
-            let newElement = element.cloneNode(true);
-            document.getElementById("starredgames").appendChild(newElement);
-        });
         document.querySelectorAll("#starredgames #star").forEach((e) => {
-            e.addEventListener("click", (e) => {
+            e.addEventListener("click", (e) => { e.preventDefault(); e.stopPropagation(); starEvent(e); });
-                e.preventDefault();
-                e.stopPropagation();
-                starEvent(e);
-            });
         });
     }
 }
+
+let searchRaf = null;
 document.addEventListener("DOMContentLoaded", () => {
     document.getElementById("gamesearch").addEventListener("input", () => {
-        let input = document.getElementById("gamesearch").value.toUpperCase();
+        if (searchRaf) cancelAnimationFrame(searchRaf);
-        let total = 0;
+        searchRaf = requestAnimationFrame(() => {
-        if (elements.length > 0) {
+            const input = document.getElementById("gamesearch").value.toUpperCase();
-            elements.forEach((element) => {
+            let hidden = 0;
-                let title = element.childNodes[1].childNodes[0].innerText.toUpperCase();
+            elements.forEach((el) => {
-                if (title.includes(input)) {
+                if (el.dataset.name.includes(input)) {
-                    element.style.display = "flex";
+                    el.style.display = "flex";
                 } else {
-                    element.style.display = "none";
+                    el.style.display = "none";
-                    total++;
+                    hidden++;
                 }
             });
-        }
+            document.getElementById("noResults").style.display = hidden >= elements.length ? "flex" : "none";
-        document.getElementById("noResults").style.display = total >= elements.length ? "flex" : "none";
+            searchRaf = null;
+        });
     });
 });
 
+function _rebuildStarred() {
+    const container = document.getElementById("starredgames");
+    const gamesEl = document.getElementById("games");
+    container.innerHTML = "";
+    const fragment = document.createDocumentFragment();
+    starredGames.forEach((dir) => {
+        const el = gamesEl.querySelector(`a.game[data-target='${dir}']`);
+        if (el) fragment.appendChild(el.cloneNode(true));
+    });
+    container.appendChild(fragment);
+}
+
 function starEvent(e) {
-    let game = e.target.parentNode.parentNode.getAttribute("data-target");
+    const game = e.target.parentNode.parentNode.getAttribute("data-target");
     starredGames = JSON.parse(localStorage.getItem("selenite.starred") || "[]");
+    const header = document.getElementById("starredHeader");
+
     if (starredGames.indexOf(game) == -1) {
         starredGames.push(game);
         starredGames.sort();
-        if (starredGames.length > 0) {
+        header.style.display = "block";
-            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 a.game[data-target='${e}']`);
-            let newElement = element.cloneNode(true);
-            document.getElementById("starredgames").appendChild(newElement);
-        });
     } else {
         starredGames.splice(starredGames.indexOf(game), 1);
-        document.querySelectorAll(`a.game[data-target='${game}'] #star`).forEach((e) => {
+        document.querySelectorAll(`a.game[data-target='${game}'] #star`).forEach((s) => { s.src = "/img/star.svg"; });
-            e.src = "/img/star.svg";
+        header.style.display = starredGames.length > 0 ? "block" : "none";
-        });
-        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 = "";
+    _rebuildStarred();
-        starredGames.forEach((e) => {
+
-            let element = document.querySelector(`#games a.game[data-target='${e}']`);
-            let newElement = element.cloneNode(true);
-            document.getElementById("starredgames").appendChild(newElement);
-        });
-    }
     document.querySelectorAll("#starredgames #star").forEach((e) => {
-        e.addEventListener("click", (e) => {
+        e.addEventListener("click", (e) => { e.preventDefault(); e.stopPropagation(); starEvent(e); });
-            e.preventDefault();
-            e.stopPropagation();
-            starEvent(e);
-        });
     });
 }

js/main.js

@@ -19,20 +19,16 @@ function loadPJS() {
 
 function cursor() {
 	let cursor = document.createElement("div");
-	cursor.style.width = "30px";
+	cursor.style.cssText = "width:30px;height:30px;background-color:var(--color-1);position:fixed;border-radius:100%;filter:blur(50px);opacity:1;pointer-events:none;top:0;left:0;";
-	cursor.style.height = "30px";
-	cursor.style.backgroundColor = "var(--color-1)";
-	cursor.style.position = "absolute";
-	cursor.style.borderRadius = "100%";
-	cursor.style.filter = "blur(50px)";
-	cursor.style.transitionDuration = "0s";
-	cursor.style.opacity = "1";
-	cursor.style.pointerEvents = "none";
 	document.body.appendChild(cursor);
+	let rafId = null;
 	document.addEventListener("mousemove", (e) => {
-		cursor.style.top = `${e.pageY - 15}px`;
+		if (rafId) return;
-		cursor.style.left = `${e.pageX - 15}px`;
+		rafId = requestAnimationFrame(() => {
-	})
+			cursor.style.transform = `translate(${e.clientX - 15}px, ${e.clientY - 15}px)`;
+			rafId = null;
+		});
+	});
 }
 function themes() {
 	document.body.setAttribute("theme", localStorage.getItem("selenite.theme") || "")
@@ -56,23 +52,15 @@ function setTheme(arg) {
 async function caching() {
 	if(sessionStorage.getItem("cdns")) return "done";
 	let cdns = JSON.parse(atob("WyJodHRwczovL2NhY2hpbmcuZnJlZXRscy5mYXN0bHkubmV0IiwiaHR0cHM6Ly9jYWNoaW5nLmdsb2JhbC5zc2wuZmFzdGx5Lm5ldCJd"));
-	let goods = [];
 	let cfStatus = (await fetch("/alive.txt")).headers.get("Cf-Ray") != null;
 	if(cfStatus) {
 		localStorage.setItem("selenite.disableCDN", "true");
 		return;
 	}
-	for(let i = 0;i<cdns.length;i++) {
+	const results = await Promise.all(cdns.map(cdn =>
-		let cdn = cdns[i];
+		fetch(cdn + "/alive.txt").then(r => r.text()).then(t => t.startsWith("yeah true") ? cdn : null).catch(() => null)
-		await fetch(cdn + "/alive.txt")
+	));
-		.then(data => data.text())
+	sessionStorage.setItem("cdns", JSON.stringify(results.filter(Boolean)));
-		.then(data => {
-			if(data.startsWith("yeah true")) {
-				goods.push(cdn);
-			}
-		})
-	}
-	sessionStorage.setItem("cdns", JSON.stringify(goods));
 	return;
 }
 function sendData() {
@@ -110,16 +98,25 @@ document.addEventListener("DOMContentLoaded", async ()=>{
 	}
 })
 
-document.addEventListener("scroll", ()=>{
-	document.getElementById("pjs").style.top = window.scrollY + "px";
-})
 
+let scrollRaf = null;
+document.addEventListener("scroll", () => {
+	if (scrollRaf) return;
+	scrollRaf = requestAnimationFrame(() => {
+		const pjs = document.getElementById("pjs");
+		if (pjs) pjs.style.top = window.scrollY + "px";
+		scrollRaf = null;
+	});
+});
+
+if ("serviceWorker" in navigator) {
 	navigator.serviceWorker.addEventListener('message', (event) => {
 		if (event.data.command === 'localStorage') {
 			const data = localStorage.getItem(event.data.key);
 			event.ports[0].postMessage({ data: data });
 		}
 	});
+}
 
 
 // var interval;

loader.html

@@ -7,70 +7,72 @@
 		<!-- initialize externals -->
 
 		<!-- initialize my stuff -->
-		<script src="/js/all.min.js" async></script>
+		<script src="/js/all.min.js" defer></script>
-		<script>
+		<script defer>
 			let gameData = {};
 			document.addEventListener("DOMContentLoaded", () => {
-				if (location.search != "") {
+				const gameFrame = document.getElementById("gameFrame");
-					let items = {};
+				const gameImage = document.getElementById("gameImage");
-					location.search.substr(1).split("&").forEach((e)=>{
+				const gameName = document.getElementById("gameName");
-						items[e.split("=")[0]] = e.split("=")[1]
+				const infobox = document.getElementById("infobox");
-					});
+				const toggle = document.getElementById("infobox-toggle");
-					if(items.type == "g") {
+
-						items.type = "semag";
+				const params = new URLSearchParams(location.search);
-						gameData["type"] = "g";
+				if (params.has("dir")) {
-					} else {
+					const prefix = params.get("type") == "g" ? "semag" : "sppa";
-						items.type = "sppa";
+					gameData.type = params.get("type");
-						gameData["type"] = "a";
+					gameData.path = params.get("dir");
-					}
+					gameFrame.src = `/resources/${prefix}/${gameData.path}/index.html`;
-					document.getElementById("gameFrame").setAttribute("src", `/resources/${items.type}/${items.dir}/index.html`);
+					gameImage.src = `/resources/${prefix}/${gameData.path}/${params.get("img")}`;
-					document.getElementById("gameImage").setAttribute("src", `/resources/${items.type}/${items.dir}/${items.img}`);
+					gameName.innerText = decodeURIComponent(params.get("title"));
-					document.getElementById("gameName").innerText = decodeURIComponent(items.title);
-					gameData["path"] = items.dir;
 				} else if (localStorage.getItem("selenite.lastGame")) {
-					let game = JSON.parse(decodeURIComponent(atob(localStorage.getItem("selenite.lastGame"))));
+					const game = JSON.parse(decodeURIComponent(atob(localStorage.getItem("selenite.lastGame"))));
-					document.getElementById("gameFrame").setAttribute("src", `/resources/${items.type}/${game[0]}/index.html`);
+					gameData.type = game[3];
-					document.getElementById("gameImage").setAttribute("src", `/resources/${items.type}/${game[0]}/${decodeURIComponent(game[1])}`);
+					gameData.path = game[0];
-					document.getElementById("gameName").innerText = game[2];
+					const prefix = gameData.type == "g" ? "semag" : "sppa";
-					gameData["path"] = game[0];
+					gameFrame.src = `/resources/${prefix}/${gameData.path}/index.html`;
-					gameData["type"] = items.type == "semag" ? "g" : "a";
+					gameImage.src = `/resources/${prefix}/${gameData.path}/${decodeURIComponent(game[1])}`;
+					gameName.innerText = game[2];
 				}
-				document.getElementById("fullscreen").addEventListener("click", () => {
+
-					document.getElementById("gameFrame").requestFullscreen();
+				document.getElementById("fullscreen").addEventListener("click", () => gameFrame.requestFullscreen());
-				});
+				document.getElementById("reload").addEventListener("click", () => { gameFrame.src = gameFrame.src; });
-				document.getElementById("reload").addEventListener("click", () => {
+				document.getElementById("open").addEventListener("click", () => window.open(gameFrame.src));
-					document.getElementById("gameFrame").src = document.getElementById("gameFrame").src;
-				});
-				document.getElementById("open").addEventListener("click", () => {
-					window.open(document.getElementById("gameFrame").src);
-				});
 				document.getElementById("share").addEventListener("click", () => {
-					let link = location.origin + "#/" + gameData["type"] + "/" + gameData["path"];
+					navigator.clipboard.writeText(location.origin + "#/" + gameData.type + "/" + gameData.path);
-					navigator.clipboard.writeText(link);
 				});
+
+				const isMobile = window.innerWidth <= 660;
+				const savedCollapsed = localStorage.getItem("selenite.infobarCollapsed");
+				const startCollapsed = savedCollapsed !== null ? savedCollapsed === "true" : isMobile;
+				if (startCollapsed) infobox.classList.add("collapsed");
+				toggle.addEventListener("click", () => {
+					const collapsed = infobox.classList.toggle("collapsed");
+					localStorage.setItem("selenite.infobarCollapsed", String(collapsed));
+				});
+
 				fetch("/api/analytics/game", {
 					method: "POST",
-					headers: {
+					headers: { "Content-Type": "application/json" },
-						"Content-Type": "application/json"
+					body: JSON.stringify({ type: gameData.type, path: gameData.path })
-					},
-					body: JSON.stringify({type: gameData["type"], path: gameData["path"]})
-				})
 				});
+
+				let playTimeDirty = false;
+				let playTimeCache = JSON.parse(localStorage.getItem("selenite.playTime") || "{}");
 				setInterval(() => {
-				let data = JSON.parse(localStorage.getItem("selenite.playTime") || "{}");
+					if (!gameData.path) return;
-				let date = getDate();
+					const date = getDate();
-				if(data[date]) {
+					if (!playTimeCache[date]) playTimeCache[date] = {};
-					if(data[date][gameData.path]) {
+					playTimeCache[date][gameData.path] = (playTimeCache[date][gameData.path] || 0) + 1;
-						data[date][gameData.path] = Number(data[date][gameData.path]) + 1;
+					playTimeDirty = true;
-					} else {
+				}, 1000);
-						data[date][gameData.path] = 1;
+				setInterval(() => {
+					if (playTimeDirty) {
+						localStorage.setItem("selenite.playTime", JSON.stringify(playTimeCache));
+						playTimeDirty = false;
 					}
-				} else {
+				}, 10000);
-					data[date]={};
+			});
-					data[date][gameData.path] = 1;
-				}
-				localStorage.setItem("selenite.playTime", JSON.stringify(data));
-			}, 1000)
 		</script>
 
 		<link rel="stylesheet" href="/css/main.css" />
@@ -83,6 +85,7 @@
 	<body>
 		<iframe id="gameFrame" allow="cross-origin-isolated"></iframe>
 		<div id="infobox">
+			<div id="infobox-content">
 				<img id="gameImage" src="favicon.png" />
 				<h2 id="gameName">Selenite</h2>
 				<div class="opposite">
@@ -92,5 +95,7 @@
 					<img class="button" id="share" src="/img/share.svg">
 				</div>
 			</div>
+		</div>
+		<img id="infobox-toggle" src="/img/up.svg" />
 	</body>
 </html>