static/app.js

const RESULTS_PER_PAGE = 20;
let allResults = [];
let currentPage = 0;

var board = Chessboard("board", {
  draggable: true,
  dropOffBoard: "trash",
  sparePieces: true,
  pieceTheme: "/static/img/chesspieces/wikipedia/{piece}.png",
  onSnapEnd: updateInfo,
});

function updateInfo() {
  document.getElementById('fen').value = board.fen();
  let pos = board.position();
  let pieces = Object.keys(pos).length;
}

function search() {
  let pos = board.position();
  if (Object.keys(pos).length < 3) {
    document.getElementById("results").innerHTML =
      "<p>Add at least 3 pieces to search.</p>";
    return;
  }
  document.getElementById("results").innerHTML = "<p>Searching...</p>";
  fetch("/search", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ fen: board.fen() }),
  })
    .then((r) => r.json())
    .then((data) => {
      allResults = data.results;
      window.searchTimeMs = data.time_ms;
      currentPage = 0;
      displayPage();
    });
}

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);
    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() {
  if ((currentPage + 1) * RESULTS_PER_PAGE < allResults.length) {
    currentPage++;
    displayPage();
  }
}

function prevPage() {
  if (currentPage > 0) {
    currentPage--;
    displayPage();
  }
}

updateInfo();