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

mid update

Browse Source
This commit is contained in:
sky
2025-09-27 20:54:26 -04:00
parent 7fca0fbde6
commit 6b448258ea
6 changed files with 59 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
css/games.css
View File

@ -49,7 +49,7 @@ game img {
transform: scale(1.1); transform: scale(1.1);
filter: drop-shadow(0 0 5px var(--color-1)) filter: drop-shadow(0 0 5px var(--color-1))
} }
#games, #starredgames { #games, #starredgames, #topGames {
width: 90vw; width: 90vw;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -63,11 +63,11 @@ game img {
font-size: 24px; font-size: 24px;
color: var(--color-1); color: var(--color-1);
} }
#starredHeader, #allHeader { #starredHeader, #allHeader, #topHeader {
font-size: 32px; font-size: 32px;
color: var(--color-1); color: var(--color-1);
} }
#noResults, #starredHeader, #allHeader { #noResults, #starredHeader, #allHeader, #topHeader {
display: none; display: none;
} }
body { body {

2
css/main.css
View File

@ -108,7 +108,7 @@ option:hover {
option:focus { option:focus {
background: color-mix(in srgb, var(--color-2) 60%, var(--color-4) 40%); background: color-mix(in srgb, var(--color-2) 60%, var(--color-4) 40%);
} }
mobile-warning { mobile-warning, loading-game {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;

34
index.html
View File

@ -57,7 +57,38 @@
<!-- <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3415518411898563" crossorigin="anonymous"></script> --> <!-- <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3415518411898563" crossorigin="anonymous"></script> -->
<script> <script>
let currentPanic = {key: "", url: ""}; let currentPanic = {key: "", url: ""};
document.addEventListener("DOMContentLoaded", ()=>{ document.addEventListener("DOMContentLoaded", async ()=>{
let hash = location.hash.substring(1);
if(hash) {
// location.hash = "";
if(hash.startsWith("/u/")) {
document.getElementById("iframe").src = hash;
} else if(hash.startsWith("/g/")) {
document.querySelector("loading-game").style.display = "flex";
await fetch("/resources/games.json")
.then(data => data.json())
.then(data => {
data.forEach(el => {
if(el.directory == hash.substring(3)) {
document.getElementById("iframe").src = `/loader.html?title=${encodeURIComponent(el.name)}&dir=${el.directory}&img=${el.image}&type=g`
}
})
})
document.querySelector("loading-game").style.display = "none";
} else if(hash.startsWith("/a/")) {
document.querySelector("loading-game").style.display = "flex";
await fetch("/resources/apps.json")
.then(data => data.json())
.then(data => {
data.forEach(el => {
if(el.directory == hash.substring(3)) {
document.getElementById("iframe").src = `/loader.html?title=${encodeURIComponent(el.name)}&dir=${el.directory}&img=${el.image}&type=g`
}
})
});
document.querySelector("loading-game").style.display = "none";
}
}
let socket = new WebSocket("/socket"); let socket = new WebSocket("/socket");
socket.addEventListener("open", () => { socket.addEventListener("open", () => {
let cookies = document.cookie.split("; "); let cookies = document.cookie.split("; ");
@ -142,6 +173,7 @@
</script> </script>
</head> </head>
<mobile-warning><h1 class="title">your device is not supported!</h1><p>please rotate your screen for the best experience.</p></mobile-warning> <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> <body>
<iframe id="iframe" src="home.html"></iframe> <iframe id="iframe" src="home.html"></iframe>
<!-- to do <!-- to do

18
js/games.js
View File

@ -17,6 +17,7 @@ async function loadGames() {
return 0; return 0;
}); });
let gamesElement = document.getElementById("games"); let gamesElement = document.getElementById("games");
let topGElement = document.getElementById("topGames");
let starredGames = JSON.parse(localStorage.getItem("selenite.starred") || '[]'); let starredGames = JSON.parse(localStorage.getItem("selenite.starred") || '[]');
sorted.forEach(element => { sorted.forEach(element => {
isStarred = starredGames.indexOf(element.directory) != -1; isStarred = starredGames.indexOf(element.directory) != -1;
@ -24,7 +25,8 @@ async function loadGames() {
newElement.setAttribute("data-target", element.directory); newElement.setAttribute("data-target", element.directory);
newElement.setAttribute("data-image", element.image); newElement.setAttribute("data-image", element.image);
let image = document.createElement("img"); let image = document.createElement("img");
image.src = `/resources/semag/${element.directory}/${element.image}` image.src = `/resources/semag/${element.directory}/${element.image}`;
image.loading = `lazy`;
let holder = document.createElement("div"); let holder = document.createElement("div");
holder.id = "holder"; holder.id = "holder";
let title = document.createElement("h1"); let title = document.createElement("h1");
@ -35,9 +37,18 @@ async function loadGames() {
star.src = isStarred ? "/img/star-fill.svg" : "/img/star.svg"; star.src = isStarred ? "/img/star-fill.svg" : "/img/star.svg";
newElement.appendChild(image); newElement.appendChild(image);
holder.appendChild(title); holder.appendChild(title);
holder.appendChild(star);
newElement.appendChild(holder); newElement.appendChild(holder);
gamesElement.appendChild(newElement); if(element.tags) {
if(element.tags.includes("top")) {
topGElement.appendChild(newElement);
} else {
gamesElement.appendChild(newElement);
holder.appendChild(star);
}
} else {
gamesElement.appendChild(newElement);
holder.appendChild(star);
}
elements.push(newElement); elements.push(newElement);
newElement.addEventListener("click", ()=>{ newElement.addEventListener("click", ()=>{
location.href=`/loader.html?title=${encodeURIComponent(element.name)}&dir=${element.directory}&img=${element.image}&type=g` location.href=`/loader.html?title=${encodeURIComponent(element.name)}&dir=${element.directory}&img=${element.image}&type=g`
@ -51,6 +62,7 @@ async function loadGames() {
document.getElementById("gameCount").innerText = `${data.length} games loaded!`; document.getElementById("gameCount").innerText = `${data.length} games loaded!`;
document.getElementById("loadingMsg").style.display = "none"; document.getElementById("loadingMsg").style.display = "none";
document.getElementById("allHeader").style.display = "block"; document.getElementById("allHeader").style.display = "block";
document.getElementById("topHeader").style.display = "block";
starredGames = JSON.parse(localStorage.getItem("selenite.starred") || '[]'); starredGames = JSON.parse(localStorage.getItem("selenite.starred") || '[]');
if(starredGames.length > 0) { if(starredGames.length > 0) {
document.getElementById("starredHeader").style.display = "block"; document.getElementById("starredHeader").style.display = "block";

6
js/particlesjs-config.json
View File

@ -1,7 +1,7 @@
{ {
"particles": { "particles": {
"number": { "number": {
"value": 100, "value": 30,
"density": { "density": {
"enable": true, "enable": true,
"value_area": 800 "value_area": 800
@ -25,7 +25,7 @@
"random": true, "random": true,
"anim": { "anim": {
"enable": true, "enable": true,
"speed": 1, "speed": 0.4,
"opacity_min": 0, "opacity_min": 0,
"sync": false "sync": false
} }
@ -35,7 +35,7 @@
"random": true, "random": true,
"anim": { "anim": {
"enable": true, "enable": true,
"speed": 1, "speed": 0.4,
"size_min": 0.3, "size_min": 0.3,
"sync": false "sync": false
} }

7
projects.html
View File

@ -36,9 +36,10 @@
<input type="text" class="searchbar" id="gamesearch" placeholder="Type here to search.." /> <input type="text" class="searchbar" id="gamesearch" placeholder="Type here to search.." />
<p id="gameCount">xx games loaded..</p> <p id="gameCount">xx games loaded..</p>
<p id="starredHeader">starred games</p> <p id="starredHeader">starred games</p>
<div id="starredgames"> <div id="starredgames"></div>
</div> <p id="topHeader" class="title">top games</p>
<p id="allHeader">all games</p> <div id="topGames"></div>
<p id="allHeader" class="title">all games</p>
<div id="games"> <div id="games">
<p id="loadingMsg">games loading..</p> <p id="loadingMsg">games loading..</p>
<p id="noResults">nothing was found! try a new search query.</p> <p id="noResults">nothing was found! try a new search query.</p>