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

add stars

Browse Source
This commit is contained in:
sky
2025-07-07 19:44:08 -04:00
parent e11d48d181
commit aa4bb69786
7 changed files with 136 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
backgrounds.html
View File

@ -1,74 +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 externals -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src=" https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js "></script>
<!-- initialize my stuff -->
<script src="/js/all.min.js"></script>
<script src="/js/main.js"></script>
<script src="/js/widget.js"></script>
<script src="/js/themes.js"></script>
<link rel="stylesheet" href="/style.css" />
<!-- seo + other things -->
<title>Selenite</title>
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<!-- toastify -->
<script>
</script>
</head>
<alerts>
</alerts>
<body>
<header>
<a href="/index.html">Home</a>
<a href="/bookmarklets.html">Bookmarklets</a>
<a href="/projects.html">Games</a>
<a href="/apps.html">Apps</a>
<a href="/settings.html">Settings</a>
<a id="blank" href="#">Open Blank</a>
<a href="/u/" class="usericon"><img src="/img/user.svg"></a>
</header>
<main id="main">
<img src="img/backgrounds/sunset_theme.jpg" class="img-credits">
<a href="https://www.pixiv.net/en/users/10746425">邦乔彦</a>
<img src="img/backgrounds/mountains_theme.jpg" class="img-credits">
<a href="https://www.mattvince.com/">Matt Vince</a>
<img src="img/backgrounds/vaporwave_theme.jpg" class="img-credits">
<a href="https://www.rafaeldejongh.com/synthwave-neon-80s-background/">Rafaël De Jongh</a>
<img src="img/backgrounds/seraph_theme.png" class="img-credits">
<a href="https://github.com/a456pur/">a456pur</a>
</main>
<footer>
<a href="https://gitlab.com/skysthelimit.dev/selenite">Source</a>
<a href="https://discord.gg/7jyufnwJNf">Discord</a>
<a href="/suggest.html">Suggestions & Bugs</a>
<a href="/contact.html">Contact</a>
<a href="/support.html">Donate</a>
<a href="/about.html">About</a>
</footer>
</body>
</html>

41
css/games.css
View File

@ -24,27 +24,52 @@ game img {
justify-self: left;
margin-right: auto;
}
game h1 {
#holder h1 {
font-size: 14px;
margin: 15px;
max-width: 50%;
width: 100%;
text-align: right;
height: 70%;
}
#games {
#holder {
width: 70%;
height: auto;
display: flex;
flex-direction: column;
align-items: flex-end;
}
#star {
width: 10%;
justify-self: right;
margin-left: auto;
margin-right: 15px;
transition-duration: 0.25s;
}
#star:hover {
transform: scale(1.1);
filter: drop-shadow(0 0 5px var(--color-1))
}
#games, #starredgames {
width: 90vw;
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
min-height: calc(100vh - (18px * 2 + 5px * 2 + 20px * 2));
height: 100%;
gap: 0px;
}
#noResults, #loadingMsg {
font-size: 28px;
font-size: 24px;
color: var(--color-1);
text-shadow: var(--color-1) 0 0 10px;
}
#noResults {
#starredHeader, #allHeader {
font-size: 32px;
color: var(--color-1);
}
#noResults, #starredHeader, #allHeader {
display: none;
}
body {
justify-content: flex-start;
}

2
css/loader.css
View File

@ -23,7 +23,7 @@
}
#infobox img {
height: 100%;
margin: 1.5%;
margin: 0.5%;
aspect-ratio: 1 / 1;
border-radius: 8px;
}

4
css/main.css
View File

@ -25,6 +25,7 @@ body {
}
body {
animation: 1s ease-out loadIn;
user-select: none;
}
@keyframes loadIn {
from {opacity: 0;transform: translateY(-32px);}
@ -68,3 +69,6 @@ p {
font-size: 16px;
margin: 2px;
}
img {
image-rendering: pixelated;
}

99
js/games.js
View File

@ -4,7 +4,7 @@ async function loadGames() {
// taken from mdn
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
let data = await (await fetch("/resources/games.json")).json();
sorted = data.sort((a, b) => {
let sorted = data.sort((a, b) => {
const n1 = a.name.toUpperCase();
const n2 = b.name.toUpperCase();
if (n1 < n2) {
@ -17,23 +17,58 @@ async function loadGames() {
return 0;
});
let gamesElement = document.getElementById("games");
let starredGames = JSON.parse(localStorage.getItem("selenite.starred") || '[]');
sorted.forEach(element => {
console.log(element);
isStarred = starredGames.indexOf(element.directory) != -1;
let newElement = document.createElement("game");
newElement.setAttribute("data-target", element.directory);
newElement.setAttribute("data-image", element.image);
let image = document.createElement("img");
image.src = `/resources/semag/${element.directory}/${element.image}`
let holder = document.createElement("div");
holder.id = "holder";
let 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";
newElement.appendChild(image);
newElement.appendChild(title);
holder.appendChild(title);
holder.appendChild(star);
newElement.appendChild(holder);
gamesElement.appendChild(newElement);
elements.push(newElement);
newElement.addEventListener("click", ()=>{
location.href=`/loader.html?title=${encodeURIComponent(element.name)}&dir=${element.directory}&img=${element.image}`
})
elements.push(newElement);
});
star.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
starEvent(e);
});
});
document.getElementById("loadingMsg").style.display = "none";
document.getElementById("allHeader").style.display = "block";
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 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")}`
});
});
document.querySelectorAll("#starredgames #star").forEach((e) => {
e.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
starEvent(e);
})
})
}
}
document.addEventListener("DOMContentLoaded", ()=>{
document.getElementById("gamesearch").addEventListener("input", ()=>{
@ -41,7 +76,7 @@ document.addEventListener("DOMContentLoaded", ()=>{
let total = 0;
if(elements.length > 0) {
elements.forEach((element) => {
let title = element.childNodes[1].innerText.toUpperCase();
let title = element.childNodes[1].childNodes[0].innerText.toUpperCase();
if(title.includes(input)) {
element.style.display = "flex";
} else {
@ -52,4 +87,56 @@ document.addEventListener("DOMContentLoaded", ()=>{
}
document.getElementById("noResults").style.display = total >= elements.length ? "flex" : "none"
})
});
function starEvent(e) {
let game = e.target.parentNode.parentNode.getAttribute("data-target");
starredGames = JSON.parse(localStorage.getItem("selenite.starred") || '[]');
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));
e.target.src = "/img/star-fill.svg";
starredgames.innerHTML = "";
starredGames.forEach((e) => {
let element = document.querySelector(`#games game[data-target='${e}']`);
let newElement = element.cloneNode(true);
document.getElementById("starredgames").appendChild(newElement);
newElement.addEventListener("click", ()=>{
location.href=`/loader.html?title=${encodeURIComponent(element.name)}&dir=${element.directory}&img=${element.image}`
});
})
} else {
starredGames.splice(starredGames.indexOf(game), 1);
document.querySelectorAll(`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 game[data-target='${e}']`);
let newElement = element.cloneNode(true);
document.getElementById("starredgames").appendChild(newElement);
newElement.addEventListener("click", ()=>{
location.href=`/loader.html?title=${encodeURIComponent(element.name)}&dir=${element.directory}&img=${element.image}`
});
})
}
document.querySelectorAll("#starredgames #star").forEach((e) => {
e.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
starEvent(e);
})
})
}

1
js/main.js
View File

@ -28,7 +28,6 @@ function cursor() {
cursor.style.pointerEvents = "none";
document.body.appendChild(cursor);
document.addEventListener("mousemove", (e) => {
console.log(e);
cursor.style.top = `${e.pageY - 15}px`;
cursor.style.left = `${e.pageX - 15}px`;
})

4
projects.html
View File

@ -52,6 +52,10 @@
<!-- <h2>All Games</h2> -->
<input type="text" class="searchbar" id="gamesearch" placeholder="Type here to search.." />
<p id="starredHeader">starred games</p>
<div id="starredgames">
</div>
<p id="allHeader">all games</p>
<div id="games">
<p id="loadingMsg">games loading..</p>
<p id="noResults">nothing was found! try a new search query.</p>