From 806557edb72e63722fd5c40d351f3eacd0623cde Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=F0=93=8D=BC?= <143974574+xojw@users.noreply.github.com>
Date: Wed, 21 May 2025 23:20:31 -0500
Subject: [PATCH] Small Little Update

---
 public/!!.html          |   2 +-
 public/!.html           |   2 +-
 public/$.html           |   2 +-
 public/assets/css/$.css |  36 +++++------
 public/assets/js/g.js   | 133 ++++++++++++++++++++++++++++------------
 5 files changed, 115 insertions(+), 60 deletions(-)

diff --git a/public/!!.html b/public/!!.html
index 8e859866..3baa95e3 100644
--- a/public/!!.html
+++ b/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">
diff --git a/public/!.html b/public/!.html
index b95449b5..0155df38 100644
--- a/public/!.html
+++ b/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>
diff --git a/public/$.html b/public/$.html
index 9084db6a..4bad8c16 100644
--- a/public/$.html
+++ b/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>
diff --git a/public/assets/css/$.css b/public/assets/css/$.css
index 29e967c1..543f0096 100644
--- a/public/assets/css/$.css
+++ b/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;
diff --git a/public/assets/js/g.js b/public/assets/js/g.js
index d1b6fa03..194fa274 100644
--- a/public/assets/js/g.js
+++ b/public/assets/js/g.js
@@ -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}`;
+    });
+  }
 });
\ No newline at end of file