Hugging Face's logo

Spaces:
christopher
/
chess-2
Paused

App Files Community
chess-2
File size: 4,226 Bytes 
230d129
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
 
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 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;
//   }
  
//   allResults = [];
//   document.getElementById("results").innerHTML = "<p>Searching...</p>";
//   const startTime = performance.now();
  
//   fetch("/search", {
//     method: "POST",
//     headers: { "Content-Type": "application/json" },
//     body: JSON.stringify({ fen: board.fen() }),
//   })
//     .then(r => r.body.getReader())
//     .then(reader => {
//       const decoder = new TextDecoder();
//       let buffer = '';
      
//       function read() {
//         reader.read().then(({done, value}) => {
//           if (done) {
//             window.searchTimeMs = performance.now() - startTime;
//             currentPage = 0;
//             displayPage();
//             return;
//           }
          
//           buffer += decoder.decode(value, {stream: true});
//           const lines = buffer.split('\n');
//           buffer = lines.pop();
          
//           lines.forEach(line => {
//             if (line.trim()) {
//               allResults.push(JSON.parse(line));
//               if (allResults.length === 1 || allResults.length % 20 === 0) displayPage();
//             }
//           });
          
//           read();
//         });
//       }
//       read();
//     });
// }

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();