selenite/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

optimize a lot of stuff

Browse Source
This commit is contained in:
sky
2026-04-06 21:49:07 -04:00
parent 6391f71710
commit d6cb5bd114
10 changed files with 306 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
css/games.css
View File

@ -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%;
height: auto;
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-end;

43
css/loader.css
View File

@ -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;
}

54
css/main.css
View File

@ -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);
}

2
css/pages.css
View File

@ -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%;

5
css/sidebar.css
View File

@ -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;

13
home.html
View File

@ -24,16 +24,18 @@
</script>
<!-- initialize my stuff -->
<script src="/js/all.js"></script>
<script src="/js/main.js"></script>
<link rel="stylesheet" href="/css/main.css" />
<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>

3
index.html
View File

@ -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)=>{

240
js/loader.js
View File

@ -2,99 +2,85 @@ document.addEventListener("DOMContentLoaded", loadGames);
let elements = [];
let isDev = [];
let pageData;
async function loadGames() {
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 starredGames = [];
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("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=${pageData.type}`);
let image = document.createElement("img");
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" };
else { sAlert("this is not valid"); return; }
let data = await (await fetch(pageData.path)).json();
data.forEach(g => g._key = g.name.toUpperCase());
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);
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.onerror = function () {
this.src = "/img/missing.svg";
};
let holder = document.createElement("div");
image.loading = "lazy";
image.onerror = function() { this.src = "/img/missing.svg"; };
const 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+")) {
let thirteenplus = document.createElement("warning");
thirteenplus.innerText = "18+";
thirteenplus.classList = "thirteen";
warnings.appendChild(thirteenplus);
[["18+", "thirteen", "18+"], ["13+", "thirteen", "13+"],
["horror", "horror", "😱"], ["gore", "gore", "🩸"]].forEach(([tag, cls, text]) => {
if (element.tags.includes(tag)) {
const w = document.createElement("warning");
w.innerText = text;
w.className = cls;
warnings.appendChild(w);
}
});
if (element.tags.includes("wip")) {
isDev.push(element.directory);
const w = document.createElement("warning");
w.innerText = "WIP";
w.className = "thirteen";
warnings.appendChild(w);
}
if (element.tags.includes("13+")) {
let thirteenplus = document.createElement("warning");
thirteenplus.innerText = "13+";
thirteenplus.classList = "thirteen";
warnings.appendChild(thirteenplus);
}
if (element.tags.includes("horror")) {
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") {
if (element.tags.includes("top") && disableTop) {
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") {
document.getElementById("topHeader").style.display = "block";
}
if (isDev.length > 0) {
sAlert("wip games", "dev message, shouldnt be seen");
console.log(isDev.join(","));
}
if (disableTop) document.getElementById("topHeader").style.display = "block";
if (isDev.length > 0) console.log(isDev.join(","));
starredGames = JSON.parse(localStorage.getItem("selenite.starred") || "[]");
if (starredGames.length > 0) {
document.getElementById("starredHeader").style.display = "block";
starredGames.forEach((e) => {
let element = document.querySelector(`#games a.game[data-target='${e}']`);
let newElement = element.cloneNode(true);
document.getElementById("starredgames").appendChild(newElement);
});
_rebuildStarred();
document.querySelectorAll("#starredgames #star").forEach((e) => {
e.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
starEvent(e);
});
e.addEventListener("click", (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();
let total = 0;
if (elements.length > 0) {
elements.forEach((element) => {
let title = element.childNodes[1].childNodes[0].innerText.toUpperCase();
if (title.includes(input)) {
element.style.display = "flex";
if (searchRaf) cancelAnimationFrame(searchRaf);
searchRaf = requestAnimationFrame(() => {
const input = document.getElementById("gamesearch").value.toUpperCase();
let hidden = 0;
elements.forEach((el) => {
if (el.dataset.name.includes(input)) {
el.style.display = "flex";
} else {
element.style.display = "none";
total++;
el.style.display = "none";
hidden++;
}
});
}
document.getElementById("noResults").style.display = total >= elements.length ? "flex" : "none";
document.getElementById("noResults").style.display = hidden >= 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) {
document.getElementById("starredHeader").style.display = "block";
} else {
document.getElementById("starredHeader").style.display = "none";
}
localStorage.setItem("selenite.starred", JSON.stringify(starredGames));
header.style.display = "block";
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) => {
e.src = "/img/star.svg";
});
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 = "";
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(`a.game[data-target='${game}'] #star`).forEach((s) => { s.src = "/img/star.svg"; });
header.style.display = starredGames.length > 0 ? "block" : "none";
}
localStorage.setItem("selenite.starred", JSON.stringify(starredGames));
_rebuildStarred();
document.querySelectorAll("#starredgames #star").forEach((e) => {
e.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
starEvent(e);
});
e.addEventListener("click", (e) => { e.preventDefault(); e.stopPropagation(); starEvent(e); });
});
}

61
js/main.js
View File

@ -19,20 +19,16 @@ function loadPJS() {
function cursor() {
let cursor = document.createElement("div");
cursor.style.width = "30px";
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";
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;";
document.body.appendChild(cursor);
let rafId = null;
document.addEventListener("mousemove", (e) => {
cursor.style.top = `${e.pageY - 15}px`;
cursor.style.left = `${e.pageX - 15}px`;
})
if (rafId) return;
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++) {
let cdn = cdns[i];
await fetch(cdn + "/alive.txt")
.then(data => data.text())
.then(data => {
if(data.startsWith("yeah true")) {
goods.push(cdn);
}
})
}
sessionStorage.setItem("cdns", JSON.stringify(goods));
const results = await Promise.all(cdns.map(cdn =>
fetch(cdn + "/alive.txt").then(r => r.text()).then(t => t.startsWith("yeah true") ? cdn : null).catch(() => null)
));
sessionStorage.setItem("cdns", JSON.stringify(results.filter(Boolean)));
return;
}
function sendData() {
@ -110,17 +98,26 @@ document.addEventListener("DOMContentLoaded", async ()=>{
}
})
document.addEventListener("scroll", ()=>{
document.getElementById("pjs").style.top = window.scrollY + "px";
})
navigator.serviceWorker.addEventListener('message', (event) => {
if (event.data.command === 'localStorage') {
const data = localStorage.getItem(event.data.key);
event.ports[0].postMessage({ data: data });
}
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;
// document.addEventListener("DOMContentLoaded", function () {

131
loader.html
View File

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