static/app.js

const RESULTS_PER_PAGE = 10;
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').textContent = 'FEN: ' + 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);
let html = `<h2>Found ${allResults.length} puzzles${allResults.length > 0 ? ` 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>`;
    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' }));
}

function nextPage() {
    if ((currentPage + 1) * RESULTS_PER_PAGE < allResults.length) {
        currentPage++;
        displayPage();
        window.scrollTo(0, 0);
    }
}

function prevPage() {
    if (currentPage > 0) {
        currentPage--;
        displayPage();
        window.scrollTo(0, 0);
    }
}

updateInfo();