optimizations

apps.html

@@ -5,7 +5,7 @@
     https://coolors.co/10002b-240046-3c096c-5a189a-7b2cbf-9d4edd-c77dff-e0aaff -->
 
 		<!-- initialize my stuff -->
-		<script src="/js/all.min.js"></script>
+		<script src="/js/all.min.js" async></script>
 		<script src="/js/apps.js"></script>
 		<script src="/js/search.js"></script>
 		<script src="/js/main.js"></script>

css/games.css

@@ -1,4 +1,4 @@
-game {
+.game {
     width: 20vw;
     height: 10vh;
     background-color: color-mix(in srgb, var(--color-2) 40%, #00000000 60%);
@@ -11,12 +11,15 @@ game {
     /* transition-duration: 0.25s; */
 	backdrop-filter: blur(2px);
     box-shadow: 0 0 10px var(--color-2);
+    text-decoration: none;
+    content-visibility: auto;
+    contain-intrinsic-size: auto 10vh;
 }
-game:hover {
+.game:hover {
     transform: scale(1.1);
     filter:brightness(1.15);
 }
-game img {
+.game img {
     height: 80%;
 	border-radius: 15px;
 	aspect-ratio: 1 / 1;
@@ -80,15 +83,15 @@ body {
 }
 warnings {
     position: absolute;
-    top: -20px;
+    top: 0px;
-    left: -20px;
+    right: 5px;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 warning {
-    width: 25px;
+    width: 20px;
-    height: 25px;
+    height: 20px;
     color: var(--text-color);
     border-radius: 100%;
     display: flex;

css/main.css

@@ -122,3 +122,23 @@ mobile-warning, loading-game {
   /* transition-duration: 1s; */
   text-align: center;
 }
+button {
+  border-style: solid;
+  border-width: 2px;
+  padding: 12px;
+  margin: 8px;
+  text-align: center;
+  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: 14px;
+  text-shadow: var(--color-1) 0 0 10px;
+  cursor:pointer;
+}
+button:hover {
+  filter: brightness(1.1);
+  transform: scale(1.05);
+}

css/pages.css

@@ -44,26 +44,6 @@ body {
     transition-duration: 0.05s;
     transition-timing-function: ease-out;
 }
-button {
-  border-style: solid;
-  border-width: 2px;
-  padding: 12px;
-  margin: 8px;
-  text-align: center;
-  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: 14px;
-  text-shadow: var(--color-1) 0 0 10px;
-  cursor:pointer;
-}
-button:hover {
-  filter: brightness(1.1);
-  transform: scale(1.05);
-}
 input[type=text], input[type=password] {
   width: 70%;
   border-style: solid;

css/sidebar.css

@@ -1,9 +1,12 @@
-html,body {
+html,
+body {
   overflow: hidden;
   height: 100%;
 }
+
 sidebar {
-    background-color: linear-gradient(19deg,rgba(87, 199, 133, 1) 0%, rgba(237, 221, 83, 1) 100%);;
+  background-color: linear-gradient(19deg, rgba(87, 199, 133, 1) 0%, rgba(237, 221, 83, 1) 100%);
+  ;
   height: 100%;
   width: 50px;
   display: flex;
@@ -12,6 +15,7 @@ sidebar {
   user-select: none;
   z-index: 10;
 }
+
 .sidebar-item {
   margin: 6px;
   padding: 6px;
@@ -52,11 +56,14 @@ iframe {
   transition: opacity 0.5s 0.2s, right 0.5s 0.2s;
   font-family: "Mulish", serif;
 }
+
 .sidebar-item:hover .sidebar-item-descriptor {
   opacity: 1;
   right: 55px;
 }
-#bottom-menu, #open-bottom-menu {
+
+#bottom-menu,
+#open-bottom-menu {
   position: absolute;
   bottom: -40px;
   height: 50px;
@@ -74,11 +81,13 @@ iframe {
   cursor: pointer;
   color: black;
 }
+
 #bottom-menu {
   width: fit-content;
   padding-left: 16px;
   padding-right: 16px;
 }
+
 #open-bottom-menu {
   bottom: 10px;
   height: 15px;
@@ -86,17 +95,20 @@ iframe {
   z-index: 5;
   filter: drop-shadow(0 0 16px #fff5);
 }
+
 #bottom-menu[enabled=true] {
   bottom: 10px;
   color: white;
   filter: drop-shadow(0 0 16px #fff5);
   z-index: 0;
 }
+
 #open-bottom-menu[enabled=true] {
   bottom: 60px;
   filter: drop-shadow(0 0 0 #fff5);
   opacity: 0;
 }
+
 alert {
   border-radius: 4px;
   display: flex;
@@ -115,37 +127,85 @@ alert {
   animation: fadeIn 1s ease-in-out forwards, fadeOut 1s ease-in-out forwards 14s;
   cursor: pointer;
 }
+
 alert h1 {
   font-size: 20px;
   margin: 0;
 }
+
 alert p {
   font-size: 16px;
   margin: 0;
 }
+
 @keyframes fadeIn {
   0% {
     opacity: 0;
     top: -50px;
   }
+
   100% {
     opacity: 1;
     top: 10px;
   }
 }
+
 @keyframes fadeOut {
   0% {
     opacity: 1;
     top: 10px;
   }
+
   100% {
     opacity: 0;
     top: -50px;
   }
 }
+
 #fullscreen {
   display: none;
 }
+
+welcome {
+  position: absolute;
+  width: 400px;
+  height: 600px;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto auto;
+  overflow: hidden;
+  transition-duration: 1s;
+  display: none;
+  opacity: 0;
+  /* display: flex; */
+  background-color: color-mix(in srgb, var(--color-3) 95%, #00000000 5%);
+  border-radius: 20px;
+  backdrop-filter: blur(8px);
+  box-shadow: 0 0 10px var(--color-3);
+  z-index: 1000;
+}
+
+welcome section {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  transition-duration: 1s;
+  transition-timing-function: cubic-bezier(.53, 0, .5, 1);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  text-align: center;
+}
+#blur {
+  backdrop-filter: blur(8px);
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 999;
+}
 @media screen and (max-width: 660px) {
   sidebar {
     height: 50px;
@@ -158,6 +218,7 @@ alert p {
     overflow: scroll;
     justify-content: center;
   }
+
   iframe {
     width: calc(100% - 20px);
     height: calc(100% - 50px - 20px);
@@ -165,16 +226,22 @@ alert p {
     margin-right: 0px;
     border-radius: 8px;
   }
+
   body {
     display: flex;
     flex-direction: column-reverse;
   }
-  #bottom-menu, #open-bottom-menu, .sidebar-item-descriptor {
+
+  #bottom-menu,
+  #open-bottom-menu,
+  .sidebar-item-descriptor {
     display: none;
   }
+
   #openblank {
     display: none;
   }
+
   #fullscreen {
     display: block;
   }

index.html

@@ -20,7 +20,7 @@
 		<meta property="og:image"content="https://www.ixl.com/dv3/powZqMuTE7du4asFrVyNGxxoqkw/yui3/opengraph/assets/general_us.png"/>
 
 		<!-- initialize my stuff -->
-		<script src="/js/all.min.js"></script>
+		<script src="/js/all.min.js" async></script>
 
 		<link rel="stylesheet" href="/css/main.css" />
 		<link rel="stylesheet" href="/css/sidebar.css" />
@@ -131,6 +131,48 @@
 					alertHolder.remove();
 				}, 1000 * 15)
 			}
+
+			function welcomeScreen() {
+				let screenIDs = ["zero", "one", "two", "three", "four"];
+				let screens = screenIDs.map((e) => document.getElementById(e));
+				let index = 0;
+
+				let welcome = document.querySelector("welcome");
+				let blur = document.getElementById("blur");
+				
+				// TODO: finish
+				hideAll();
+				return;
+				// LEAKED LEAKED!!!
+				// new selenite feature woah
+				
+				function hideAll() {
+					welcome.remove();
+					blur.remove();
+				}
+				function finish() {
+                    welcome.style.opacity = "0";
+                    blur.style.opacity = "0";
+                    setTimeout(() => {
+                        hideAll();
+						document.cookie = "selenite.welcomeFinished=true";
+                    }, 1000)
+				}
+				function showNextScreen() {
+					index++;
+					if(index == screens.length) {finish();return;};
+					screens[index-1].style.transform = "translateY(-100%)";
+					screens[index].style.transform = "translateY(0%)";
+					screens[index].querySelector("#nextPage").addEventListener("click", showNextScreen);
+				}
+				if(document.cookie.includes("selenite.welcomeFinished")) hideAll();
+
+				welcome.style.display = "block";
+                welcome.style.opacity = "1";
+				screens[0].style.transform = "translateY(0%)";
+				screens[0].querySelector("#nextPage").addEventListener("click", showNextScreen);
+				screens[0].querySelector("#skip").addEventListener("click", finish);
+			}
 			document.addEventListener("DOMContentLoaded", async ()=>{
 				connectToSocket();
 				getWeather();
@@ -165,7 +207,11 @@
 							})
 						});
 						document.querySelector("loading-game").style.display = "none";
+					} else {
+						welcomeScreen();
 					}
+				} else {
+					welcomeScreen();
 				}
 				let currentCloak = {name: "", icon: ""};
 				setInterval(()=>{
@@ -241,6 +287,35 @@
 	<mobile-warning><h1 class="title">your device is not supported!</h1><p>please rotate your screen for the best experience.</p></mobile-warning>
 	<loading-game><h1 class="title">we are loading your game!</h1><p>please allow us to fetch the data first, this should only take a second.</p></loading-game>
 	<body>
+		<welcome>
+			<section id="zero" style="transform: translateY(100%);">
+				<h1>welcome to selenite!</h1>
+				<button id="nextPage">next</button>
+				<button id="skip">skip</button>
+			</section>
+			<section id="one" style="transform: translateY(100%);">
+				<h1>themes</h1>
+				<p>theme selector</p>
+				<button id="nextPage">next</button>
+			</section>
+			<section id="two" style="transform: translateY(100%);">
+				<h1>settings</h1>
+				<p>tab cloak</p>
+				<p>panic button</p>
+				<p>automaically launch in tab cloak</p>
+				<button id="nextPage">next</button>
+			</section>
+			<section id="three" style="transform: translateY(100%);">
+				<h1>performance</h1>
+				<p>fast mode</p>
+				<button id="nextPage">next</button>
+			</section>
+			<section id="four" style="transform: translateY(100%);">
+				<h1>thank you! enjoy</h1>
+				<button id="nextPage">done</button>
+			</section>
+		</welcome>
+		<div id="blur"></div>
         <iframe id="iframe" src="home.html" allow="cross-origin-isolated"></iframe>
 		<!-- to do
 		add colors -->

js/games.js

@@ -19,12 +19,17 @@ async function loadGames() {
   });
   let gamesElement = document.getElementById("games");
   let topGElement = document.getElementById("topGames");
+
+  let gamesFragment = document.createDocumentFragment();
+  let topFragment = document.createDocumentFragment();
   let starredGames = JSON.parse(localStorage.getItem("selenite.starred") || '[]');
   sorted.forEach(element => {
     isStarred = starredGames.indexOf(element.directory) != -1;
-    let newElement = document.createElement("game");
+    let newElement = document.createElement("a");
     newElement.setAttribute("data-target", element.directory);
     newElement.setAttribute("data-image", element.image);
+    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.loading = `lazy`;
@@ -43,6 +48,12 @@ async function loadGames() {
     newElement.appendChild(holder);
     newElement.appendChild(warnings);
     if(element.tags) {
+      if(element.tags.includes("18+")) {
+        let thirteenplus = document.createElement("warning");
+        thirteenplus.innerText = "18+";
+        thirteenplus.classList = "thirteen";
+        warnings.appendChild(thirteenplus);
+      }
       if(element.tags.includes("13+")) {
         let thirteenplus = document.createElement("warning");
         thirteenplus.innerText = "13+";
@@ -62,26 +73,25 @@ async function loadGames() {
         warnings.appendChild(gore);
       }
       if(element.tags.includes("top") && localStorage.getItem("selenite.disableTopGames") != "false") {
-        topGElement.appendChild(newElement);
+        topFragment.appendChild(newElement);
       } else {
-        gamesElement.appendChild(newElement);
+        gamesFragment.appendChild(newElement);
         holder.appendChild(star);
       }
       if(element.tags.includes("tofinish")) isDev.push(element.directory);
     } else {
-      gamesElement.appendChild(newElement);
+      gamesFragment.appendChild(newElement);
       holder.appendChild(star);
     }
     elements.push(newElement);
-    newElement.addEventListener("click", ()=>{
-      location.href=`/loader.html?title=${encodeURIComponent(element.name)}&dir=${element.directory}&img=${element.image}&type=g`
-    });
     star.addEventListener("click", (e) => {
       e.preventDefault();
 	    e.stopPropagation();
       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";
@@ -93,12 +103,9 @@ async function loadGames() {
   if(starredGames.length > 0) {
     document.getElementById("starredHeader").style.display = "block";
     starredGames.forEach((e) => {
-      let element = document.querySelector(`#games game[data-target='${e}']`);
+      let element = document.querySelector(`#games a.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=g`
-      });
     });
     document.querySelectorAll("#starredgames #star").forEach((e) => {
       e.addEventListener("click", (e) => {
@@ -143,16 +150,13 @@ function starEvent(e) {
     e.target.src = "/img/star-fill.svg";
     starredgames.innerHTML = "";
     starredGames.forEach((e) => {
-      let element = document.querySelector(`#games game[data-target='${e}']`);
+      let element = document.querySelector(`#games a.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=g`
-      });
     })
   } else {
     starredGames.splice(starredGames.indexOf(game), 1);
-    document.querySelectorAll(`game[data-target='${game}'] #star`).forEach((e) => {
+    document.querySelectorAll(`a.game[data-target='${game}'] #star`).forEach((e) => {
       e.src = "/img/star.svg";
     })
     if(starredGames.length > 0) {
@@ -163,12 +167,9 @@ function starEvent(e) {
     localStorage.setItem("selenite.starred", JSON.stringify(starredGames));
     starredgames.innerHTML = "";
     starredGames.forEach((e) => {
-      let element = document.querySelector(`#games game[data-target='${e}']`);
+      let element = document.querySelector(`#games a.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=g`
-      });
     })
   }
   document.querySelectorAll("#starredgames #star").forEach((e) => {

loader.html

@@ -7,7 +7,7 @@
 		<!-- initialize externals -->
 
 		<!-- initialize my stuff -->
-		<script src="/js/all.min.js"></script>
+		<script src="/js/all.min.js" async></script>
 		<script>
 			document.addEventListener("DOMContentLoaded", () => {
 				let gameData = {};
@@ -48,6 +48,13 @@
 					let link = location.origin + "#/" + gameData["type"] + "/" + gameData["path"];
 					navigator.clipboard.writeText(link);
 				});
+				fetch("/api/analytics/game", {
+					method: "POST",
+					headers: {
+						"Content-Type": "application/json"
+					},
+					body: JSON.stringify({type: gameData["type"], path: gameData["path"]})
+				})
 			});
 		</script>
 

projects.html

@@ -5,7 +5,7 @@
     https://coolors.co/10002b-240046-3c096c-5a189a-7b2cbf-9d4edd-c77dff-e0aaff -->
 
 		<!-- initialize my stuff -->
-		<script src="/js/all.min.js"></script>
+		<script src="/js/all.min.js" async></script>
 		<script src="/js/games.js"></script>
 		<script src="/js/main.js"></script>
 

projects_opt.html

@@ -5,7 +5,7 @@
     https://coolors.co/10002b-240046-3c096c-5a189a-7b2cbf-9d4edd-c77dff-e0aaff -->
 
 		<!-- initialize my stuff -->
-		<script src="/js/all.min.js"></script>
+		<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>

settings.html

@@ -26,7 +26,7 @@
     </script>
 
 		<!-- initialize my stuff -->
-		<script src="/js/all.min.js"></script>
+		<script src="/js/all.min.js" async></script>
 		<script src="/js/main.js"></script>
 		<!-- <script src="/js/widget.js"></script> -->
 
@@ -188,7 +188,7 @@
             fileReader.readAsText(e.target.files[0]);
           }
         })
-      }
+      };
       async function deleteAllCaches() {
         try {
           const cacheNames = await caches.keys();

sw.js

@@ -7,7 +7,7 @@ let localStorageData = {
   disableCDN: true,
 };
 // yandere sim big files, cuphead, ddlc assets, renpy, renpy, buckshot roulette, half life, undertale & deltarune, hollow knight
-let cacheable_files = ["YandereSim.data", "cuphead/Build/Build.data.unityweb.", "/ddlc/game/", "/ddlcplus/game/", "/co09/game/", "/co09flipside/game/", "/co09reup/game/", "renpy.data", "game.zip", "buckshot-roulette.pck", "halva_en-", "game.unx", "bog.data", "FTFHAPort.data.unityweb", "Content.tar.part"];
+let cacheable_files = ["YandereSim.data", "cuphead/Build/Build.data.unityweb.", "/ddlc/game/", "/ddlcplus/game/", "/co09/game/", "/co09flipside/game/", "/co09reup/game/", "renpy.data", "game.zip", "buckshot-roulette.pck", "halva_en-", "game.unx", "bog.data", "FTFHAPort.data.unityweb", "Content.tar.part", "thats-not-my-neighbor.pck", ".unityweb", "index.data.path"];
 
 self.addEventListener("message", e => {
   if (e.data && e.data.type == "localStorage") {
@@ -55,7 +55,7 @@ if(workbox) {
       cacheName: 'resources-cache',
       plugins: [
         new workbox.expiration.ExpirationPlugin({
-          maxEntries: 500,
+          maxEntries: 700,
           maxAgeSeconds: 365 * 24 * 60 * 60,
         }),
       ],