oh wow i was meant to push this a long time ago

css/pages.css

@@ -42,7 +42,7 @@ body {
     overflow-y: hidden;
     top: 0;
 }
-input[type=text], input[type=password] {
+input {
   width: 70%;
   border-style: solid;
   border-width: 2px;
@@ -58,13 +58,13 @@ input[type=text], input[type=password] {
   font-size: 20px;
   text-shadow: var(--color-1) 0 0 10px;
 }
-input[type=text]:focus, input[type=password]:focus {
+input:focus {
   filter:brightness(1.25) !important;
 }
-input[type=text]:hover, input[type=password]:hover {
+input:hover {
   filter:brightness(1.1);
 }
-input[type=text]::placeholder, input[type=password]::placeholder {
+input::placeholder {
   color: color-mix(in srgb, var(--text-color) 20%, #00000000 80%);
   text-shadow: color-mix(in srgb, var(--text-color) 40%, #00000000 60%) 0 0 10px;
 }

css/settings.css

@@ -1,6 +1,6 @@
 section {
     min-width: 20%;
-    height: 400px;
+    height: 420px;
     padding: 8px;
     margin: 16px;
     background-color: color-mix(in srgb, var(--color-2) 40%, #00000000 60%);
@@ -27,6 +27,28 @@ sections {
   margin: 6px;
 }
 
+#hiddenGamesList {
+  width: min(280px, 90%);
+  height: 200px;
+  overflow-y: auto;
+  border: 1px solid color-mix(in srgb, var(--color-1) 50%, #00000000 50%);
+  border-radius: 12px;
+  padding: 8px;
+  margin: 8px 0;
+}
+
+.hidden-game-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 4px 0;
+  width: 100%;
+}
+
+#hiddenGamesSearch {
+  width: min(280px, 90%);
+}
+
 @-moz-document url-prefix() {
   section {
     backdrop-filter: blur(0);

index.html

@@ -137,7 +137,7 @@
 				let index = 0;
 
 				let welcome = document.querySelector("welcome");
-				let blur = document.getElementById("blur");
+				// let blur = document.getElementById("blur");
 				
 				// TODO: finish
 				hideAll();
@@ -147,11 +147,11 @@
 				
 				function hideAll() {
 					welcome.remove();
-					blur.remove();
+					// blur.remove();
 				}
 				function finish() {
                     welcome.style.opacity = "0";
-                    blur.style.opacity = "0";
+                    // blur.style.opacity = "0";
                     setTimeout(() => {
                         hideAll();
 						document.cookie = "selenite.welcomeFinished=true";
@@ -315,7 +315,7 @@
 				<button id="nextPage">done</button>
 			</section>
 		</welcome>
-		<div id="blur"></div>
+		<!-- <div id="blur"></div> -->
         <iframe id="iframe" src="home.html" allow="cross-origin-isolated"></iframe>
 		<!-- to do
 		add colors -->

js/loader.js

@@ -7,6 +7,15 @@ let pageData;
 let starredGames = [];
 let globalPlays = null;
 
+function getHiddenGames() {
+    try {
+        const parsed = JSON.parse(localStorage.getItem("selenite.hiddenGames") || "[]");
+        return parsed;
+    } catch {
+        return [];
+    }
+}
+
 async function loadGames() {
     if (type == "g") pageData = { path: "/resources/games-tagged.json", prefix: "semag", type: "g" };
     else if (type == "a") pageData = { path: "/resources/apps.json", prefix: "sppa", type: "a" };
@@ -22,10 +31,18 @@ async function loadGames() {
     const gamesFragment = document.createDocumentFragment();
     const topFragment = document.createDocumentFragment();
 
+    const hiddenGames = pageData.type === "g" ? getHiddenGames() : [];
+    const hiddenSet = new Set(hiddenGames);
+
     starredGames = JSON.parse(localStorage.getItem("selenite.starred") || "[]");
+    if (hiddenGames.length > 0) {
+        starredGames = starredGames.filter((game) => !hiddenSet.has(game));
+        localStorage.setItem("selenite.starred", JSON.stringify(starredGames));
+    }
     const starredSet = new Set(starredGames);
 
     data.forEach((element) => {
+        if (hiddenSet.has(element.directory)) return;
         const isStarred = starredSet.has(element.directory);
         const newElement = document.createElement("a");
         newElement.dataset.target = element.directory;
@@ -98,7 +115,11 @@ async function loadGames() {
 
     gamesElement.appendChild(gamesFragment);
     if (topGElement) topGElement.appendChild(topFragment);
-    document.getElementById("gameCount").innerText = `${data.length} games loaded!`;
+    const visibleGameCount = elements.length;
+    const hiddenCount = hiddenGames.length;
+    document.getElementById("gameCount").innerText = hiddenCount > 0
+        ? `${visibleGameCount} games loaded (${hiddenCount} hidden)`
+        : `${visibleGameCount} games loaded!`;
     document.getElementById("loadingMsg").style.display = "none";
     document.getElementById("allHeader").style.display = "block";
     const topHeader = document.getElementById("topHeader");

profile.html

@@ -1,58 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<!-- initialize theme vars
-    https://coolors.co/10002b-240046-3c096c-5a189a-7b2cbf-9d4edd-c77dff-e0aaff -->
-
-		<!-- initialize externals -->
-		
-	<script type="application/ld+json">
-        {
-            "@context": "https://schema.org",
-            "@type": "Organization",
-            "name": "Selenite",
-            "alternateName": "selenite.cc",
-            "url": "https://selenite.cc",
-            "logo": "https://selenite.cc/favicon.png",
-            "sameAs": [
-                "https://github.com/selenite-cc",
-                "https://youtube.com/@selenitecc",
-                "https://tiktok.com/@selenitecc",
-                "https://selenite.cc",
-            ]
-        }
-    </script>
-
-		<!-- initialize my stuff -->
-		<script src="/js/all.js"></script>
-		<script src="/js/main.js"></script>
-		<!-- <script src="/js/widget.js"></script> -->
-
-		<link rel="stylesheet" href="/css/main.css" />
-		<link rel="stylesheet" href="/css/pages.css" />
-		<link rel="stylesheet" href="/css/profile.css" />
-		<link rel="manifest" href="/manifest.json" />
-		<!-- seo + other things -->
-		<title>{{ name }}'s Profile | Selenite</title>
-		<link rel="icon" href="/favicon.ico" />
-	</head>
-	<alerts> </alerts>
-	<body>
-		<section>
-			<img src="{{ user_pfp }}" class="pfp" />
-			<div>
-				<h1>{{ name }}</h1>
-				<p>/u/{{ username }}</p>
-				<div class="badges">{{ badges }}</div>
-			</div>
-			<right>
-				<h2>Joined {{ join_date }}</h2>
-				<h2>Last online {{ online_time }}</h2>
-			</right>
-		</section>
-		<section class="column">
-			<h1>About Me</h1>
-			<p>{{ about }}</p>
-		</section>
-	</body>
-</html>

projects_opt.html

@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html class="sl-theme-dark" lang="en">
-	<head>
-		<!-- initialize theme vars
-    https://coolors.co/10002b-240046-3c096c-5a189a-7b2cbf-9d4edd-c77dff-e0aaff -->
-
-		<!-- initialize my stuff -->
-		<script src="/js/all.min.js" async></script>
-		<!-- <script src="/js/games.js"></script> -->
-		<script src="/js/games_improved.js"></script>
-		<script src="/js/main.js"></script>
-
-		
-		<link rel="stylesheet" href="/css/main.css" />
-		<link rel="stylesheet" href="/css/pages.css" />
-		<link rel="stylesheet" href="/css/games.css" />
-		
-
-		<!-- seo + other things -->
-		<title>Projects | Selenite</title>
-		<link rel="icon" href="/favicon.ico" />
-
-		<meta name="viewport" content="width=device-width,initial-scale=1" />
-
-		<!-- toastify -->
-		<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3415518411898563"
-		crossorigin="anonymous"></script>
-		<script></script>
-	</head>
-	<body>
-			<input type="text" class="searchbar" id="gamesearch" placeholder="Type here to search.." />
-			<p id="gameCount">xx games loaded..</p>
-			<p id="starredHeader">starred games</p>
-			<div id="starredgames"></div>
-			<p id="topHeader" class="title">top games</p>
-			<div id="topGames"></div>
-			<p id="allHeader" class="title">all games</p>
-			<div id="games">
-				<p id="loadingMsg">games loading..</p>
-				<p id="noResults">nothing was found! try a new search query.</p>
-			</div>
-	</body>
-</html>

settings.html

@@ -131,7 +131,8 @@
           } else {
             localStorage.setItem("selenite.disableCDN", "true")
           }
-        })
+        });
+        initHiddenGameSettings();
         function generatePallete(color) {
           let theme = {};
           let chromaColor = chroma(color);
@@ -145,6 +146,85 @@
           return theme;
         }
       });
+
+      function getHiddenGames() {
+        try {
+          const parsed = JSON.parse(localStorage.getItem("selenite.hiddenGames") || "[]");
+          return parsed;
+        } catch {
+          return [];
+        }
+      }
+
+      function setHiddenGames(games) {
+        localStorage.setItem("selenite.hiddenGames", JSON.stringify(games));
+      }
+
+      function updateHiddenGamesCount(total) {
+        const hiddenCount = getHiddenGames().length;
+        const countEl = document.getElementById("hiddenGamesCount");
+        countEl.innerText = `${hiddenCount} hidden${total ? ` / ${total} total` : ""}`;
+      }
+
+      function renderHiddenGameList(games, hiddenSet, filter = "") {
+        const list = document.getElementById("hiddenGamesList");
+        list.innerHTML = "";
+
+        const input = filter.trim().toUpperCase();
+        const shown = games.filter((game) => game.name.toUpperCase().includes(input));
+
+        if (shown.length === 0) {
+          const empty = document.createElement("p");
+          empty.innerText = "no games matched your search";
+          list.appendChild(empty);
+          return;
+        }
+
+        shown.forEach((game) => {
+          const row = document.createElement("label");
+          row.className = "hidden-game-row";
+
+          const checkbox = document.createElement("input");
+          checkbox.type = "checkbox";
+          checkbox.checked = hiddenSet.has(game.directory);
+          checkbox.addEventListener("change", () => {
+            const next = new Set(getHiddenGames());
+            if (checkbox.checked) next.add(game.directory);
+            else next.delete(game.directory);
+            const hidden = [...next].sort();
+            setHiddenGames(hidden);
+            updateHiddenGamesCount(games.length);
+          });
+
+          const text = document.createElement("span");
+          text.innerText = game.name;
+
+          row.appendChild(checkbox);
+          row.appendChild(text);
+          list.appendChild(row);
+        });
+      }
+
+      async function initHiddenGameSettings() {
+        const searchInput = document.getElementById("hiddenGamesSearch");
+        let games = [];
+        try {
+          games = await (await fetch("/resources/games-tagged.json")).json();
+        } catch {
+          document.getElementById("hiddenGamesList").innerHTML = "<p>failed to load games list</p>";
+          return;
+        }
+
+        games.sort((a, b) => a.name.localeCompare(b.name));
+
+        renderHiddenGameList(games, new Set(getHiddenGames()));
+        updateHiddenGamesCount(games.length);
+
+        searchInput.addEventListener("input", () => {
+          renderHiddenGameList(games, new Set(getHiddenGames()), searchInput.value);
+        });
+      }
+
       function wipeData() {
         if(prompt("Wiping your data means you will lose all progress in every game, and every setting you have selected.\nAre you sure you would like to continue?\n\nType \"please wipe my data\" to continue.") == "please wipe my data") {
           localStorage.clear();
@@ -254,6 +334,12 @@
           <button onclick="deleteAllCaches()">wipe all cache</button>
           <input id="toggleCDN" name="toggleCDN" type="checkbox"></inpuit> <label for="toggleCDN">cdn enabled</label>
         </section>
+        <section>
+          <h2>hidden games</h2>
+          <p id="hiddenGamesCount">0 hidden</p>
+          <input type="text" id="hiddenGamesSearch" placeholder="search games">
+          <div id="hiddenGamesList"></div>
+        </section>
       </sections>
 	</body>
 </html>