Spaces:

christopher
/

chess

Running

App Files Files Community

christopher commited on Oct 19, 2025

Commit

50d0d7d

1 Parent(s): 2ba5ab4

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +2 -116

templates/index.html CHANGED Viewed

@@ -2,26 +2,7 @@
 <html>
 <head>
     <link rel="stylesheet" href="/static/chessboard-1.0.0.min.css">
-    <style>
-        body { font-family: Arial; max-width: 1200px; margin: 50px auto; padding: 20px; }
-        .container { display: flex; gap: 40px; margin: 20px 0; }
-        #board { width: 400px; }
-        .info-panel { flex: 1; }
-        .info-panel h3 { margin-top: 0; }
-        button { padding: 10px 20px; margin: 5px; cursor: pointer; }
-        #fen { background: #f0f0f0; padding: 10px; margin: 10px 0; font-family: monospace; }
-        #results { margin-top: 30px; }
-        .pagination { text-align: center; margin: 20px 0; }
-        .pagination button { padding: 10px 20px; margin: 0 5px; }
-        .pagination button:disabled { opacity: 0.5; cursor: not-allowed; }
-        .puzzle { border: 1px solid #ddd; padding: 15px; margin: 15px 0; display: flex; gap: 20px; }
-        .puzzle-board { width: 200px; height: 200px; }
-        .puzzle-info { flex: 1; }
-        .puzzle-info h3 { margin: 0 0 10px 0; }
-        .puzzle-info a { color: #0066cc; }
-        .themes { display: flex; gap: 5px; flex-wrap: wrap; margin: 10px 0; }
-        .theme { background: #e0e0e0; padding: 3px 8px; border-radius: 3px; font-size: 12px; }
-    </style>
 </head>
 <body>
     <h1>Chess Position Search</h1>
@@ -42,101 +23,6 @@
     <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
     <script src="/static/chessboard-1.0.0.min.js"></script>
-    <script>
-        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();
-    </script>
 </body>
 </html>

 <html>
 <head>
     <link rel="stylesheet" href="/static/chessboard-1.0.0.min.css">
+    <link rel="stylesheet" href="/static/styles.css">
 </head>
 <body>
     <h1>Chess Position Search</h1>
     <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
     <script src="/static/chessboard-1.0.0.min.js"></script>
+    <script src="/static/app.js"></script>
 </body>
 </html>