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

Reviewed-on: https://gitea.sentt.lol/sent/waves/pulls/2

public/!!.html

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

public/!.html

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

public/$.html

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

public/assets/css/$.css

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

public/assets/js/g.js

@@ -1,43 +1,98 @@
-document.addEventListener('DOMContentLoaded', function() {
+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;
+
+  const sentinel = document.createElement('div');
+  sentinel.className = 'sentinel';
+  grid.after(sentinel);
+
+  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(response => response.json())
+    .then(r => r.json())
     .then(data => {
       gamesData    = data;
-            searchInput.placeholder = `Search through ${gamesData.length} Games…`;
+      filteredData = data;
-            displayGames(gamesData);
+      searchInput.placeholder = `Search through ${data.length} Games…`;
-            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));
 
-    function displayGames(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 = '';
-        if (games.length === 0) {
+    renderedCount  = 0;
-            grid.innerHTML = '<p>Zero games were found matching your search :(</p>';
+    observer.observe(sentinel);
+    renderNextBatch();
+  }
+
+  function renderNextBatch() {
+    const batch = filteredData.slice(renderedCount, renderedCount + BATCH_SIZE);
+    if (!batch.length) {
+      observer.unobserve(sentinel);
       return;
     }
-        games.forEach(game => {
+
+    const frag = document.createDocumentFragment();
+    batch.forEach(game => {
       const card = document.createElement('div');
-            card.classList.add('game-card');
+      card.className = 'game-card';
       card.innerHTML = `
-		  <img src="/assets/g/${game.directory}/${game.image}" alt="${game.name} Icon" />
+        <img
+          loading="lazy"
+          src="/assets/g/${game.directory}/${game.image}"
+          alt="${game.name} Icon"
+        />
         <h2>${game.name}</h2>
       `;
-            card.addEventListener('click', function() {
+      card.addEventListener('click', () => {
-                const url = `/assets/g/${game.directory}`;
+        window.handleSearch(`/assets/g/${game.directory}`);
-                window.handleSearch(url);
       });
-            grid.appendChild(card);
+      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}`;
     });
   }
 });