Hugging Face's logo

Spaces:
Raven7
/
ChessAnalyzer
Running

App Files Community
Raven7 commited on
Commit
2483475
·
verified ·
1 Parent(s): d1b48cb

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +386 -19
index.html CHANGED
@@ -1,19 +1,386 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Advanced Chess Analyzer</title>
7
+ <style>
8
+ :root {
9
+ --board-size: min(80vh, 600px);
10
+ --square-size: calc(var(--board-size) / 8);
11
+ --primary-dark: #2c3e50;
12
+ --primary-light: #34495e;
13
+ --highlight: #f1c40f;
14
+ --move-highlight: rgba(46, 204, 113, 0.4);
15
+ --check-highlight: rgba(231, 76, 60, 0.4);
16
+ }
17
+
18
+ * {
19
+ margin: 0;
20
+ padding: 0;
21
+ box-sizing: border-box;
22
+ }
23
+
24
+ body {
25
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
26
+ background: var(--primary-dark);
27
+ color: #ecf0f1;
28
+ min-height: 100vh;
29
+ display: flex;
30
+ }
31
+
32
+ .container {
33
+ display: grid;
34
+ grid-template-columns: var(--board-size) 300px;
35
+ gap: 2rem;
36
+ margin: auto;
37
+ padding: 2rem;
38
+ background: var(--primary-light);
39
+ border-radius: 1rem;
40
+ box-shadow: 0 10px 20px rgba(0,0,0,0.2);
41
+ }
42
+
43
+ .board-container {
44
+ width: var(--board-size);
45
+ height: var(--board-size);
46
+ position: relative;
47
+ }
48
+
49
+ .chessboard {
50
+ width: 100%;
51
+ height: 100%;
52
+ display: grid;
53
+ grid-template-columns: repeat(8, 1fr);
54
+ grid-template-rows: repeat(8, 1fr);
55
+ border: 4px solid #2c3e50;
56
+ border-radius: 4px;
57
+ overflow: hidden;
58
+ }
59
+
60
+ .square {
61
+ display: flex;
62
+ align-items: center;
63
+ justify-content: center;
64
+ font-size: calc(var(--square-size) * 0.7);
65
+ cursor: pointer;
66
+ transition: all 0.2s;
67
+ position: relative;
68
+ user-select: none;
69
+ }
70
+
71
+ .white { background: #f0d9b5; }
72
+ .black { background: #b58863; }
73
+
74
+ .square.selected {
75
+ background: var(--highlight) !important;
76
+ }
77
+
78
+ .square.valid-move::after {
79
+ content: '';
80
+ position: absolute;
81
+ width: 25%;
82
+ height: 25%;
83
+ background: rgba(0,0,0,0.2);
84
+ border-radius: 50%;
85
+ }
86
+
87
+ .square.last-move {
88
+ background: var(--move-highlight) !important;
89
+ }
90
+
91
+ .square.check {
92
+ background: var(--check-highlight) !important;
93
+ }
94
+
95
+ .controls {
96
+ display: flex;
97
+ flex-direction: column;
98
+ gap: 1rem;
99
+ }
100
+
101
+ .status-panel {
102
+ background: rgba(0,0,0,0.2);
103
+ padding: 1rem;
104
+ border-radius: 0.5rem;
105
+ }
106
+
107
+ .move-list {
108
+ background: rgba(0,0,0,0.2);
109
+ padding: 1rem;
110
+ border-radius: 0.5rem;
111
+ flex-grow: 1;
112
+ overflow-y: auto;
113
+ height: 300px;
114
+ }
115
+
116
+ .move-row {
117
+ display: grid;
118
+ grid-template-columns: 30px 1fr 1fr;
119
+ padding: 0.3rem;
120
+ gap: 0.5rem;
121
+ }
122
+
123
+ .move-row:hover {
124
+ background: rgba(255,255,255,0.1);
125
+ border-radius: 0.3rem;
126
+ }
127
+
128
+ button {
129
+ background: #3498db;
130
+ color: white;
131
+ border: none;
132
+ padding: 0.8rem;
133
+ border-radius: 0.5rem;
134
+ cursor: pointer;
135
+ font-weight: 500;
136
+ transition: background 0.2s;
137
+ }
138
+
139
+ button:hover {
140
+ background: #2980b9;
141
+ }
142
+
143
+ .piece {
144
+ width: 100%;
145
+ height: 100%;
146
+ display: flex;
147
+ align-items: center;
148
+ justify-content: center;
149
+ font-size: calc(var(--square-size) * 0.7);
150
+ cursor: grab;
151
+ }
152
+
153
+ .piece:active {
154
+ cursor: grabbing;
155
+ }
156
+
157
+ .coordinates {
158
+ position: absolute;
159
+ font-size: 0.8rem;
160
+ color: #95a5a6;
161
+ }
162
+
163
+ .file {
164
+ bottom: -1.5rem;
165
+ left: calc(var(--square-size) * 0.5);
166
+ }
167
+
168
+ .rank {
169
+ left: -1.5rem;
170
+ top: calc(var(--square-size) * 0.5);
171
+ }
172
+
173
+ @media (max-width: 1024px) {
174
+ .container {
175
+ grid-template-columns: 1fr;
176
+ grid-template-rows: auto auto;
177
+ }
178
+
179
+ .board-container {
180
+ margin: auto;
181
+ }
182
+ }
183
+ </style>
184
+ </head>
185
+ <body>
186
+ <div class="container">
187
+ <div class="board-container">
188
+ <div class="chessboard" id="board"></div>
189
+ <div class="coordinates" id="coordinates"></div>
190
+ </div>
191
+ <div class="controls">
192
+ <div class="status-panel">
193
+ <h3>Position Analysis</h3>
194
+ <p id="status">White to move</p>
195
+ <p id="evaluation">Evaluation: 0.0</p>
196
+ </div>
197
+ <div class="move-list" id="moveList">
198
+ <!-- Moves will be inserted here -->
199
+ </div>
200
+ <button onclick="analyzePosition()">Analyze Position</button>
201
+ <button onclick="resetBoard()">Reset Board</button>
202
+ </div>
203
+ </div>
204
+
205
+ <script>
206
+ class ChessGame {
207
+ constructor() {
208
+ this.board = this.createInitialBoard();
209
+ this.currentPlayer = 'white';
210
+ this.selectedPiece = null;
211
+ this.moveHistory = [];
212
+ this.initializeBoard();
213
+ }
214
+
215
+ createInitialBoard() {
216
+ return [
217
+ ['♜', '♞', '♝', '♛', '♚', '♝', '♞', '♜'],
218
+ ['♟', '♟', '♟', '♟', '♟', '♟', '♟', '♟'],
219
+ [null, null, null, null, null, null, null, null],
220
+ [null, null, null, null, null, null, null, null],
221
+ [null, null, null, null, null, null, null, null],
222
+ [null, null, null, null, null, null, null, null],
223
+ ['♙', '♙', '♙', '♙', '♙', '♙', '♙', '♙'],
224
+ ['♖', '♘', '♗', '♕', '♔', '♗', '♘', '♖']
225
+ ];
226
+ }
227
+
228
+ initializeBoard() {
229
+ const boardElement = document.getElementById('board');
230
+ boardElement.innerHTML = '';
231
+
232
+ for (let row = 0; row < 8; row++) {
233
+ for (let col = 0; col < 8; col++) {
234
+ const square = document.createElement('div');
235
+ square.className = `square ${(row + col) % 2 === 0 ? 'white' : 'black'}`;
236
+ square.dataset.row = row;
237
+ square.dataset.col = col;
238
+ square.onclick = (e) => this.handleSquareClick(e);
239
+
240
+ if (this.board[row][col]) {
241
+ const piece = document.createElement('div');
242
+ piece.className = 'piece';
243
+ piece.textContent = this.board[row][col];
244
+ square.appendChild(piece);
245
+ }
246
+
247
+ boardElement.appendChild(square);
248
+ }
249
+ }
250
+
251
+ this.updateStatus();
252
+ }
253
+
254
+ handleSquareClick(event) {
255
+ const square = event.target.closest('.square');
256
+ const row = parseInt(square.dataset.row);
257
+ const col = parseInt(square.dataset.col);
258
+
259
+ if (this.selectedPiece) {
260
+ this.tryMove(row, col);
261
+ } else if (this.board[row][col]) {
262
+ this.selectPiece(row, col);
263
+ }
264
+ }
265
+
266
+ selectPiece(row, col) {
267
+ const piece = this.board[row][col];
268
+ if (!piece) return;
269
+
270
+ // Remove previous selection
271
+ document.querySelectorAll('.square').forEach(sq => {
272
+ sq.classList.remove('selected');
273
+ sq.classList.remove('valid-move');
274
+ });
275
+
276
+ document.querySelector(`[data-row="${row}"][data-col="${col}"]`).classList.add('selected');
277
+ this.selectedPiece = { row, col };
278
+
279
+ // Show valid moves
280
+ this.showValidMoves(row, col);
281
+ }
282
+
283
+ tryMove(toRow, toCol) {
284
+ if (this.isValidMove(this.selectedPiece.row, this.selectedPiece.col, toRow, toCol)) {
285
+ this.makeMove(this.selectedPiece.row, this.selectedPiece.col, toRow, toCol);
286
+ }
287
+
288
+ document.querySelectorAll('.square').forEach(sq => {
289
+ sq.classList.remove('selected');
290
+ sq.classList.remove('valid-move');
291
+ });
292
+
293
+ this.selectedPiece = null;
294
+ }
295
+
296
+ isValidMove(fromRow, fromCol, toRow, toCol) {
297
+ // Basic move validation - can be expanded
298
+ return true;
299
+ }
300
+
301
+ makeMove(fromRow, fromCol, toRow, toCol) {
302
+ const piece = this.board[fromRow][fromCol];
303
+ this.board[fromRow][fromCol] = null;
304
+ this.board[toRow][toCol] = piece;
305
+
306
+ this.moveHistory.push({
307
+ piece,
308
+ from: { row: fromRow, col: fromCol },
309
+ to: { row: toRow, col: toCol }
310
+ });
311
+
312
+ this.currentPlayer = this.currentPlayer === 'white' ? 'black' : 'white';
313
+ this.initializeBoard();
314
+ this.updateMoveList();
315
+ }
316
+
317
+ showValidMoves(row, col) {
318
+ // Simplified valid moves - can be expanded
319
+ for (let i = 0; i < 8; i++) {
320
+ for (let j = 0; j < 8; j++) {
321
+ if (this.isValidMove(row, col, i, j)) {
322
+ document.querySelector(`[data-row="${i}"][data-col="${j}"]`)
323
+ .classList.add('valid-move');
324
+ }
325
+ }
326
+ }
327
+ }
328
+
329
+ updateStatus() {
330
+ document.getElementById('status').textContent = `${this.currentPlayer.charAt(0).toUpperCase() +
331
+ this.currentPlayer.slice(1)} to move`;
332
+ }
333
+
334
+ updateMoveList() {
335
+ const moveList = document.getElementById('moveList');
336
+ moveList.innerHTML = '';
337
+
338
+ for (let i = 0; i < this.moveHistory.length; i += 2) {
339
+ const moveRow = document.createElement('div');
340
+ moveRow.className = 'move-row';
341
+
342
+ const moveNumber = document.createElement('span');
343
+ moveNumber.textContent = `${Math.floor(i/2 + 1)}.`;
344
+
345
+ const whiteMove = document.createElement('span');
346
+ whiteMove.textContent = this.formatMove(this.moveHistory[i]);
347
+
348
+ const blackMove = document.createElement('span');
349
+ if (this.moveHistory[i + 1]) {
350
+ blackMove.textContent = this.formatMove(this.moveHistory[i + 1]);
351
+ }
352
+
353
+ moveRow.appendChild(moveNumber);
354
+ moveRow.appendChild(whiteMove);
355
+ moveRow.appendChild(blackMove);
356
+ moveList.appendChild(moveRow);
357
+ }
358
+
359
+ moveList.scrollTop = moveList.scrollHeight;
360
+ }
361
+
362
+ formatMove(move) {
363
+ const files = 'abcdefgh';
364
+ const ranks = '87654321';
365
+ return `${move.piece}${files[move.from.col]}${ranks[move.from.row]}-${files[move.to.col]}${ranks[move.to.row]}`;
366
+ }
367
+ }
368
+
369
+ const game = new ChessGame();
370
+
371
+ function analyzePosition() {
372
+ // Simulated analysis
373
+ const eval = (Math.random() * 2 - 1).toFixed(2);
374
+ document.getElementById('evaluation').textContent = `Evaluation: ${eval}`;
375
+ }
376
+
377
+ function resetBoard() {
378
+ game.board = game.createInitialBoard();
379
+ game.currentPlayer = 'white';
380
+ game.selectedPiece = null;
381
+ game.moveHistory = [];
382
+ game.initializeBoard();
383
+ }
384
+ </script>
385
+ </body>
386
+ </html>