Update static/app.js

static/app.js

@@ -39,26 +39,27 @@ function search() {
 }
 
 function displayPage() {
-  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 = `<p>Found ${allResults.length} puzzles${allResults.length > 0 ? ` in ${window.searchTimeMs.toFixed(0)}ms (page ${currentPage + 1} of ${totalPages})` : ""}</p>`;
-  if (allResults.length > 0)
-    html += `<div class="pagination"><button onclick="prevPage()" ${currentPage === 0 ? "disabled" : ""}>&lt;</button><button onclick="nextPage()" ${end >= allResults.length ? "disabled" : ""}>&gt;</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) =>
-    Chessboard(`result-board-${start + i}`, {
-      position: p.FEN,
-      pieceTheme: "/static/img/chesspieces/wikipedia/{piece}.png",
-    }),
-  );
+    const start = currentPage * RESULTS_PER_PAGE,
+        end = start + RESULTS_PER_PAGE,
+        pageResults = allResults.slice(start, end),
+        totalPages = Math.ceil(allResults.length / RESULTS_PER_PAGE);
+    const paginationHtml = allResults.length > 0 ? `<div class="pagination"><button onclick="prevPage()" ${currentPage === 0 ? "disabled" : ""}>&lt;</button><button onclick="nextPage()" ${end >= allResults.length ? "disabled" : ""}>&gt;</button></div>` : "";
+    let html = `<p>Found ${allResults.length} puzzles${allResults.length > 0 ? ` in ${window.searchTimeMs.toFixed(0)}ms (page ${currentPage + 1} of ${totalPages})` : ""}</p>`;
+    html += paginationHtml;
+    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>`;
+    html += paginationHtml;
+    document.getElementById("results").innerHTML = html;
+    pageResults.forEach((p, i) =>
+        Chessboard(`result-board-${start + i}`, {
+            position: p.FEN,
+            pieceTheme: "/static/img/chesspieces/wikipedia/{piece}.png",
+        })
+    );
 }
 
 function nextPage() {