diff --git a/apps.html b/apps.html index c70084c..959126f 100755 --- a/apps.html +++ b/apps.html @@ -5,7 +5,7 @@ https://coolors.co/10002b-240046-3c096c-5a189a-7b2cbf-9d4edd-c77dff-e0aaff --> - + diff --git a/css/games.css b/css/games.css index c1d2b28..7883ecd 100755 --- a/css/games.css +++ b/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; - left: -20px; + top: 0px; + right: 5px; display: flex; justify-content: center; align-items: center; } warning { - width: 25px; - height: 25px; + width: 20px; + height: 20px; color: var(--text-color); border-radius: 100%; display: flex; diff --git a/css/main.css b/css/main.css index cae5684..1d472c2 100755 --- a/css/main.css +++ b/css/main.css @@ -121,4 +121,24 @@ mobile-warning, loading-game { flex-direction: column; /* 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); } \ No newline at end of file diff --git a/css/pages.css b/css/pages.css index b5d960a..cfe317f 100755 --- a/css/pages.css +++ b/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; diff --git a/css/sidebar.css b/css/sidebar.css index 69690cd..077e366 100755 --- a/css/sidebar.css +++ b/css/sidebar.css @@ -1,102 +1,114 @@ -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%);; - height: 100%; - width: 50px; - display: flex; - flex-direction: column; - align-items: center; - user-select: none; - z-index: 10; + background-color: linear-gradient(19deg, rgba(87, 199, 133, 1) 0%, rgba(237, 221, 83, 1) 100%); + ; + height: 100%; + width: 50px; + display: flex; + flex-direction: column; + align-items: center; + user-select: none; + z-index: 10; } + .sidebar-item { - margin: 6px; - padding: 6px; - height: 26px; - width: 26px; - transition-duration: 0.5s; - transition-timing-function: ease-in-out; + margin: 6px; + padding: 6px; + height: 26px; + width: 26px; + transition-duration: 0.5s; + transition-timing-function: ease-in-out; } iframe { - width: calc(100% - 50px - 10px); - height: calc(100vh - 20px); - margin: 10px; - margin-right: 0px; - border-radius: 8px; + width: calc(100% - 50px - 10px); + height: calc(100vh - 20px); + margin: 10px; + margin-right: 0px; + border-radius: 8px; } .sidebar-divider { - background-color: #ffffff22; - /* auto is being stupid + background-color: #ffffff22; + /* auto is being stupid 100vh minus height of 1 object 7 times minus the margin and padding of 7 objects (multiplied twice bc margin and padding on top and bottom) */ - margin-bottom: calc(100vh - 26px * 9 - ((6px + 6px) * 2) * 9); + margin-bottom: calc(100vh - 26px * 9 - ((6px + 6px) * 2) * 9); } .sidebar-item-descriptor { - position: fixed; - right: 25px; - opacity: 0; - transform: translateY(-32px); - text-align: left; - background-color: black; - border-radius: 10px; - padding: 8px; - color: white; - font-size: 12px; - user-select: none; - pointer-events: none; - transition: opacity 0.5s 0.2s, right 0.5s 0.2s; - font-family: "Mulish", serif; + position: fixed; + right: 25px; + opacity: 0; + transform: translateY(-32px); + text-align: left; + background-color: black; + border-radius: 10px; + padding: 8px; + color: white; + font-size: 12px; + user-select: none; + pointer-events: none; + 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 { - position: absolute; - bottom: -40px; - height: 50px; - left: 0; - right: 0; - width: 40%; - margin-left: auto; - margin-right: auto; - display: flex; - justify-content: center; - align-items: center; - background-color: black; - z-index: 5; - border-radius: 10px 10px 0 0; - cursor: pointer; - color: black; -} -#bottom-menu { - width: fit-content; - padding-left: 16px; - padding-right: 16px; + opacity: 1; + right: 55px; } + +#bottom-menu, #open-bottom-menu { - bottom: 10px; - height: 15px; - width: 70px; - z-index: 5; - filter: drop-shadow(0 0 16px #fff5); + position: absolute; + bottom: -40px; + height: 50px; + left: 0; + right: 0; + width: 40%; + margin-left: auto; + margin-right: auto; + display: flex; + justify-content: center; + align-items: center; + background-color: black; + z-index: 5; + border-radius: 10px 10px 0 0; + cursor: pointer; + color: black; } + +#bottom-menu { + width: fit-content; + padding-left: 16px; + padding-right: 16px; +} + +#open-bottom-menu { + bottom: 10px; + height: 15px; + width: 70px; + 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; + 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; + bottom: 60px; + filter: drop-shadow(0 0 0 #fff5); + opacity: 0; } + alert { border-radius: 4px; display: flex; @@ -108,46 +120,94 @@ alert { padding: 8px; color: white; background-color: color-mix(in srgb, #d46c6c 80%, #00000000 20%); - backdrop-filter: blur(2px); + backdrop-filter: blur(2px); box-shadow: 0 0 10px #d46c6c; left: 50%; transform: translateX(-50%); 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; + 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 { + sidebar { height: 50px; width: 100vw; display: flex; @@ -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; } diff --git a/index.html b/index.html index 25852a2..23c09d9 100755 --- a/index.html +++ b/index.html @@ -20,7 +20,7 @@ - + @@ -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 @@

your device is not supported!

please rotate your screen for the best experience.

we are loading your game!

please allow us to fetch the data first, this should only take a second.

 + +
+

welcome to selenite!

+ + +
+
+

themes

+

theme selector

+ +
+
+

settings

+

tab cloak

+

panic button

+

automaically launch in tab cloak

+ +
+
+

performance

+

fast mode

+ +
+
+

thank you! enjoy

+ +
+ +
diff --git a/js/games.js b/js/games.js index fed7b7c..81631ae 100755 --- a/js/games.js +++ b/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) => { diff --git a/loader.html b/loader.html index 8b49159..ff31827 100755 --- a/loader.html +++ b/loader.html @@ -7,7 +7,7 @@ - + diff --git a/projects.html b/projects.html index 33cc6af..e823a1f 100755 --- a/projects.html +++ b/projects.html @@ -5,7 +5,7 @@ https://coolors.co/10002b-240046-3c096c-5a189a-7b2cbf-9d4edd-c77dff-e0aaff --> - + diff --git a/projects_opt.html b/projects_opt.html index 23f4145..8fe2179 100755 --- a/projects_opt.html +++ b/projects_opt.html @@ -5,7 +5,7 @@ https://coolors.co/10002b-240046-3c096c-5a189a-7b2cbf-9d4edd-c77dff-e0aaff --> - + diff --git a/settings.html b/settings.html index 902d7ee..2d10667 100755 --- a/settings.html +++ b/settings.html @@ -26,7 +26,7 @@ - + @@ -188,7 +188,7 @@ fileReader.readAsText(e.target.files[0]); } }) - } + }; async function deleteAllCaches() { try { const cacheNames = await caches.keys(); diff --git a/sw.js b/sw.js index b52da5a..f724bee 100644 --- a/sw.js +++ b/sw.js @@ -7,30 +7,30 @@ 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") { + if (e.data && e.data.type == "localStorage") { localStorageData = e.data; } }); -if(workbox) { - self.skipWaiting(); - workbox.core.clientsClaim(); +if (workbox) { + self.skipWaiting(); + workbox.core.clientsClaim(); workbox.routing.registerRoute( - ({url}) => { - if(localStorageData.disableCDN) return false; - if(localStorageData.cdns.length == 0) return false; - if(url.origin != location.origin) return false; - if(!url.pathname.includes("/resources/")) return false; + ({ url }) => { + if (localStorageData.disableCDN) return false; + if (localStorageData.cdns.length == 0) return false; + if (url.origin != location.origin) return false; + if (!url.pathname.includes("/resources/")) return false; for (const file of cacheable_files) { - if(url.pathname.includes(file)) return true; + if (url.pathname.includes(file)) return true; } return false; }, - async ({url}) => { + async ({ url }) => { let cdn = localStorageData.cdns[0]; console.warn(url.href); return Response.redirect(cdn + url.pathname, 302); @@ -50,12 +50,12 @@ if(workbox) { }) ); workbox.routing.registerRoute( - /.*resources\/(semag|sppa).*/, + /.*resources\/(semag|sppa).*/, new workbox.strategies.CacheFirst({ cacheName: 'resources-cache', plugins: [ new workbox.expiration.ExpirationPlugin({ - maxEntries: 500, + maxEntries: 700, maxAgeSeconds: 365 * 24 * 60 * 60, }), ], @@ -63,7 +63,7 @@ if(workbox) { ); workbox.routing.registerRoute( - /.*resources\/(games|apps)\.json$/, + /.*resources\/(games|apps)\.json$/, new workbox.strategies.StaleWhileRevalidate({ cacheName: 'json-cache', plugins: [