Create app.js

static/app.js

@@ -0,0 +1,94 @@
+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;
+    document.getElementById('position-info').textContent = `Pieces on board: ${pieces}`;
+}
+
+function search() {
+    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;
+        currentPage = 0;
+        displayPage();
+    });
+}
+
+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);
+    
+    let html = `<h2>Found ${allResults.length} puzzles (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="${p.PuzzleUrl}" 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>Moves: ${p.Moves}</p>
+                    <p><a href="${p.GameUrl}" target="_blank">View game</a></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>`;
+    
+    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'
+        });
+    });
+}
+
+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();