Gronkh Suche: Adde Funktion um mehr Ergebnisse anzuzeigen

gronkh_games/index.html

@@ -222,6 +222,29 @@
             color: #666;
         }
         
+        .load-more-btn {
+            display: block;
+            background-color: var(--primary-color);
+            color: white;
+            border: none;
+            border-radius: 4px;
+            padding: 10px 15px;
+            margin: 15px auto 5px;
+            cursor: pointer;
+            font-size: 0.9rem;
+            transition: background-color 0.3s;
+            width: fit-content;
+        }
+        
+        .load-more-btn:hover {
+            background-color: var(--accent-color);
+        }
+        
+        .load-more-btn:disabled {
+            background-color: #cccccc;
+            cursor: not-allowed;
+        }
+        
         @media (max-width: 768px) {
             header {
                 padding: 1.5rem 1rem;
@@ -284,6 +307,7 @@
             <div class="game-container" id="search-results">
                 <p id="no-results-message">Gib einen Suchbegriff ein, um Spiele zu finden.</p>
                 <ul class="game-list" id="results-list" style="display: none;"></ul>
+                <button id="load-more-btn" class="load-more-btn" style="display: none;">Lade 5 weitere</button>
             </div>
         </div>
         
@@ -324,6 +348,9 @@
         // Standard-Kanal
         let currentChannel = 'all';
         let allGames = {}; // Cache für alle geladenen Spiele
+        let currentSearchResults = []; // Speichert die aktuellen Suchergebnisse
+        let currentResultsPage = 1; // Aktuelle Seite der Suchergebnisse
+        const resultsPerPage = 5; // Anzahl der Ergebnisse pro Seite
         
         // Daten aus JSON-Datei laden
         async function loadGames(channel = currentChannel) {
@@ -433,11 +460,13 @@
             const searchTerm = document.getElementById('search-input').value.trim().toLowerCase();
             const resultsList = document.getElementById('results-list');
             const noResultsMessage = document.getElementById('no-results-message');
+            const loadMoreBtn = document.getElementById('load-more-btn');
             
             if (!searchTerm) {
                 resultsList.style.display = 'none';
                 noResultsMessage.textContent = 'Gib einen Suchbegriff ein, um Spiele zu finden.';
                 noResultsMessage.style.display = 'block';
+                loadMoreBtn.style.display = 'none';
                 return;
             }
             
@@ -449,26 +478,71 @@
                 game.title.toLowerCase().includes(searchTerm)
             );
             
+            // Speichere die Suchergebnisse für späteres Nachladen
+            currentSearchResults = matchingGames;
+            currentResultsPage = 1;
+            
             resultsList.innerHTML = '';
             
             if (matchingGames.length === 0) {
                 resultsList.style.display = 'none';
                 noResultsMessage.textContent = 'Keine Spiele gefunden, die zum Suchbegriff passen.';
                 noResultsMessage.style.display = 'block';
+                loadMoreBtn.style.display = 'none';
                 return;
             }
             
-            // Zeige maximal 5 Suchergebnisse an
-            const displayGames = matchingGames.slice(0, 5);
-            displayGames.forEach(game => {
+            // Zeige die ersten 5 Suchergebnisse an
+            displaySearchResults(matchingGames, 1);
+            
+            noResultsMessage.style.display = 'none';
+            resultsList.style.display = 'block';
+            
+            // "Lade mehr" Button einrichten
+            if (matchingGames.length > resultsPerPage) {
+                loadMoreBtn.style.display = 'block';
+            } else {
+                loadMoreBtn.style.display = 'none';
+            }
+        }
+        
+        // Zeigt eine bestimmte Seite von Suchergebnissen an
+        function displaySearchResults(matchingGames, page) {
+            const resultsList = document.getElementById('results-list');
+            const startIndex = (page - 1) * resultsPerPage;
+            const endIndex = Math.min(startIndex + resultsPerPage, matchingGames.length);
+            
+            // Wenn es eine neue Suche ist (Seite 1), leere die Liste
+            if (page === 1) {
+                resultsList.innerHTML = '';
+            }
+            
+            // Spiele für die aktuelle Seite anzeigen
+            for (let i = startIndex; i < endIndex; i++) {
+                const game = matchingGames[i];
                 const li = document.createElement('li');
                 li.className = 'game-item';
                 li.innerHTML = `<a href="${game.url}" target="_blank">${game.title}</a>`;
                 resultsList.appendChild(li);
-            });
+            }
             
-            noResultsMessage.style.display = 'none';
-            resultsList.style.display = 'block';
+            // "Lade mehr" Button Status aktualisieren
+            const loadMoreBtn = document.getElementById('load-more-btn');
+            if (endIndex >= matchingGames.length) {
+                loadMoreBtn.style.display = 'none';
+            } else {
+                loadMoreBtn.style.display = 'block';
+            }
+        }
+        
+        // Funktion zum Laden weiterer Ergebnisse
+        function loadMoreResults() {
+            if (currentSearchResults.length <= currentResultsPage * resultsPerPage) {
+                return; // Keine weiteren Ergebnisse vorhanden
+            }
+            
+            currentResultsPage++;
+            displaySearchResults(currentSearchResults, currentResultsPage);
         }
         
         // Seiteninitalisierung
@@ -482,6 +556,9 @@
                 if (event.key === 'Enter') performSearch();
             });
             
+            // "Lade mehr" Button
+            document.getElementById('load-more-btn').addEventListener('click', loadMoreResults);
+            
             // Initiale Listen laden
             await updateLists();
         }