Update static/app.js

static/app.js

@@ -34,45 +34,14 @@ function search() {
 }
 
 function displayPage() {
-    const start = currentPage * RESULTS_PER_PAGE;
-    const end = start + RESULTS_PER_PAGE;
-    const pageResults = allResults.slice(start, end);
-    const totalPages = Math.ceil(allResults.length / RESULTS_PER_PAGE);
-    
+    const start = currentPage * RESULTS_PER_PAGE, end = start + RESULTS_PER_PAGE, pageResults = allResults.slice(start, end), totalPages = Math.ceil(allResults.length / RESULTS_PER_PAGE);
     let html = `<h2>Found ${allResults.length} puzzles in ${window.searchTimeMs.toFixed(0)}ms (page ${currentPage + 1} of ${totalPages})</h2>`;
-    html += `<div class="pagination">
-        <button onclick="prevPage()" ${currentPage === 0 ? 'disabled' : ''}>Previous</button>
-        <button onclick="nextPage()" ${end >= allResults.length ? 'disabled' : ''}>Next</button>
-    </div>`;
-    
-    pageResults.forEach((p, i) => {
-        const globalIdx = start + i;
-        html += `
-            <div class="puzzle">
-                <div class="puzzle-board" id="result-board-${globalIdx}"></div>
-                <div class="puzzle-info">
-                    <h3><a href="https://lichess.org/training/${p.PuzzleId}" target="_blank">${p.PuzzleId}</a></h3>
-                    <p>Rating: ${p.Rating} | Popularity: ${p.Popularity}%</p>
-                    <div class="themes">${p.Themes.map(t => `<span class="theme">${t}</span>`).join('')}</div>
-                    <p>Position in puzzle: ${p.MatchedMove}</p>
-                </div>
-            </div>`;
-    });
-    
-    html += `<div class="pagination">
-        <button onclick="prevPage()" ${currentPage === 0 ? 'disabled' : ''}>Previous</button>
-        <button onclick="nextPage()" ${end >= allResults.length ? 'disabled' : ''}>Next</button>
-    </div>`;
-    
+    html += `<div class="pagination"><button onclick="prevPage()" ${currentPage === 0 ? 'disabled' : ''}>Previous</button><button onclick="nextPage()" ${end >= allResults.length ? 'disabled' : ''}>Next</button></div>`;
+    html += `<div class="puzzle-grid">`;
+    pageResults.forEach((p, i) => { const idx = start + i; html += `<div class="puzzle"><div class="puzzle-board" id="result-board-${idx}"></div><div class="puzzle-info"><h3><a href="https://lichess.org/training/${p.PuzzleId}" target="_blank">${p.PuzzleId}</a></h3><p>Rating: ${p.Rating} | Pop: ${p.Popularity}%</p><div class="themes">${p.Themes.map(t => `<span class="theme">${t}</span>`).join(' ')}</div><p>Move ${p.MatchedMove}</p></div></div>`; });
+    html += `</div>`;
     document.getElementById('results').innerHTML = html;
-    
-    pageResults.forEach((p, i) => {
-        const globalIdx = start + i;
-        Chessboard(`result-board-${globalIdx}`, {
-            position: p.FEN,
-            pieceTheme: '/static/img/chesspieces/wikipedia/{piece}.png'
-        });
-    });
+    pageResults.forEach((p, i) => Chessboard(`result-board-${start + i}`, { position: p.FEN, pieceTheme: '/static/img/chesspieces/wikipedia/{piece}.png' }));
 }
 
 function nextPage() {