sent/waves
2
1
Fork 7
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merge pull request 'Small Little Update' (#2) from master into main

Browse Source 
Reviewed-on: https://gitea.sentt.lol/sent/waves/pulls/2
This commit is contained in:
sent 2025-05-21 21:24:35 -07:00
commit 4551ab18c1
5 changed files with 115 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/!!.html
View File

@ -43,7 +43,7 @@
<span id="waves">Waves.</span>
<a href="/" id="home">Home</a>
<a href="/g" id="games">Games</a>
<a href="/a" id="apps">Apps</a>
<a href="/a" id="apps" style="color: #ffffff;">Apps</a>
<a href="#" id="movies">Movies</a>
<a href="#" id="ai">AI</a>
<a href="#" id="settings-icon">

2
public/!.html
View File

@ -42,7 +42,7 @@
<img src="/assets/images/icons/favicon.ico" class="favicon">
<span id="waves">Waves.</span>
<a href="/" id="home">Home</a>
<a href="/g" id="games">Games</a>
<a href="/g" id="games" style="color: #ffffff;">Games</a>
<a href="/a" id="apps">Apps</a>
<a href="#" id="movies">Movies</a>
<a href="#" id="ai">AI</a>

2
public/$.html
View File

@ -45,7 +45,7 @@
<div class="home-navbar">
<img src="/assets/images/icons/favicon.ico" class="favicon">
<span id="waves">Waves.</span>
<a href="/" id="home">Home</a>
<a href="/" id="home" style="color: #ffffff;">Home</a>
<a href="/g" id="games">Games</a>
<a href="/a" id="apps">Apps</a>
<a href="#" id="movies">Movies</a>

36
public/assets/css/$.css
View File

@ -17,6 +17,23 @@ body {
color: #000000;
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: #000000;
}
::-webkit-scrollbar-thumb {
background: #4e4e4e;
border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
background: #6b6b6b;
}
#nprogress .bar {
background: #ffffff !important;
z-index: 99999 !important;
@ -76,7 +93,7 @@ body {
}
.home-navbar a {
color: #e6e6e6;
color: #afafaf;
text-decoration: none;
padding: 8px 16px;
font-size: 14px;
@ -100,23 +117,6 @@ body {
margin-left: 115px;
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: #000000;
}
::-webkit-scrollbar-thumb {
background: #4e4e4e;
border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
background: #6b6b6b;
}
.navbar {
top: 1%;
background-color: #1111119c;

133
public/assets/js/g.js
View File

@ -1,43 +1,98 @@
document.addEventListener('DOMContentLoaded', function() {
const searchInput = document.getElementById('gameSearchInput');
const grid = document.querySelector('.games-grid');
let gamesData = [];
document.addEventListener('DOMContentLoaded', () => {
const searchInput = document.getElementById('gameSearchInput');
const grid = document.querySelector('.games-grid');
let gamesData = [];
let filteredData = [];
const BATCH_SIZE = 50;
let renderedCount = 0;
fetch('/assets/data/g.json')
.then(response => response.json())
.then(data => {
gamesData = data;
searchInput.placeholder = `Search through ${gamesData.length} Games…`;
displayGames(gamesData);
searchInput.addEventListener('input', function() {
const query = searchInput.value.toLowerCase();
const filtered = gamesData.filter(game => {
const name = (game.name || '').toLowerCase();
return name.includes(query);
});
displayGames(filtered);
});
})
.catch(err => console.error('Error loading games data:', err));
const sentinel = document.createElement('div');
sentinel.className = 'sentinel';
grid.after(sentinel);
function displayGames(games) {
grid.innerHTML = '';
if (games.length === 0) {
grid.innerHTML = '<p>Zero games were found matching your search :(</p>';
return;
}
games.forEach(game => {
const card = document.createElement('div');
card.classList.add('game-card');
card.innerHTML = `
<img src="/assets/g/${game.directory}/${game.image}" alt="${game.name} Icon" />
<h2>${game.name}</h2>
`;
card.addEventListener('click', function() {
const url = `/assets/g/${game.directory}`;
window.handleSearch(url);
});
grid.appendChild(card);
});
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
renderNextBatch();
}
});
}, { rootMargin: '200px', threshold: 0.1 });
function debounce(fn, wait = 200) {
let t;
return (...args) => {
clearTimeout(t);
t = setTimeout(() => fn.apply(this, args), wait);
};
}
fetch('/assets/data/g.json')
.then(r => r.json())
.then(data => {
gamesData = data;
filteredData = data;
searchInput.placeholder = `Search through ${data.length} Games…`;
observer.observe(sentinel);
renderNextBatch();
searchInput.addEventListener('input', debounce(() => {
const q = searchInput.value.trim().toLowerCase();
filteredData = gamesData.filter(g =>
(g.name || '').toLowerCase().includes(q)
);
resetRendering();
}, 250));
})
.catch(console.error);
function resetRendering() {
grid.innerHTML = '';
renderedCount = 0;
observer.observe(sentinel);
renderNextBatch();
}
function renderNextBatch() {
const batch = filteredData.slice(renderedCount, renderedCount + BATCH_SIZE);
if (!batch.length) {
observer.unobserve(sentinel);
return;
}
const frag = document.createDocumentFragment();
batch.forEach(game => {
const card = document.createElement('div');
card.className = 'game-card';
card.innerHTML = `
<img
loading="lazy"
src="/assets/g/${game.directory}/${game.image}"
alt="${game.name} Icon"
/>
<h2>${game.name}</h2>
`;
card.addEventListener('click', () => {
window.handleSearch(`/assets/g/${game.directory}`);
});
frag.appendChild(card);
});
grid.appendChild(frag);
renderedCount += batch.length;
preloadNextImages(5);
if (renderedCount >= filteredData.length) {
observer.unobserve(sentinel);
}
}
function preloadNextImages(limit = 3) {
const next = filteredData.slice(renderedCount, renderedCount + limit);
next.forEach(({ directory, image }) => {
const img = new Image();
img.src = `/assets/g/${directory}/${image}`;
});
}
});