Hugging Face's logo

Spaces:
Raven7
/
ChessAnalyzer
Running

App Files Community
Raven7 commited on
Commit
ec11f27
·
verified ·
1 Parent(s): 088cfa5

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +185 -182
index.html CHANGED
@@ -3,7 +3,7 @@
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);
@@ -11,7 +11,7 @@
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
 
@@ -71,73 +71,24 @@
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 {
@@ -148,11 +99,12 @@
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
  @media (max-width: 1024px) {
158
  .container {
@@ -175,12 +127,9 @@
175
  <div class="status-panel">
176
  <h3>Position Analysis</h3>
177
  <p id="status">White to move</p>
178
- <p id="evaluation">Evaluation: 0.0</p>
179
  </div>
180
- <div class="move-list" id="moveList">
181
- <!-- Moves will be inserted here -->
182
- </div>
183
- <button onclick="analyzePosition()">Analyze Position</button>
184
  <button onclick="resetBoard()">Reset Board</button>
185
  </div>
186
  </div>
@@ -192,18 +141,6 @@
192
  this.currentPlayer = 'white';
193
  this.selectedPiece = null;
194
  this.moveHistory = [];
195
- this.validMoves = [
196
- {type: 'K', move: {dx: [-1,0,1], dy: [-1,0,1]}},
197
- {type: 'Q', move: {dx: [-7,-6,-5,-4,-3,-2,-1,0,1,2,3,4,5,6,7],
198
- dy: [-7,-6,-5,-4,-3,-2,-1,0,1,2,3,4,5,6,7]}},
199
- {type: 'R', move: {dx: [-7,-6,-5,-4,-3,-2,-1,0,1,2,3,4,5,6,7],
200
- dy: [0]}},
201
- {type: 'B', move: {dx: [-7,-6,-5,-4,-3,-2,-1,1,2,3,4,5,6,7],
202
- dy: [-7,-6,-5,-4,-3,-2,-1,1,2,3,4,5,6,7]}},
203
- {type: 'N', move: {dx: [-2,-2,-1,-1,1,1,2,2],
204
- dy: [-1,1,-2,2,-2,2,-1,1]}},
205
- {type: 'P', move: {dx: [0], dy: [-1,1]}}
206
- ];
207
  this.initializeBoard();
208
  }
209
 
@@ -212,7 +149,7 @@
212
  ['♜', '♞', '♝', '♛', '♚', '♝', '♞', '♜'],
213
  ['♟', '♟', '♟', '♟', '♟', '♟', '♟', '♟'],
214
  [null, null, null, null, null, null, null, null],
215
- [null, null, null, null, null, null, null, null],
216
  [null, null, null, null, null, null, null, null],
217
  [null, null, null, null, null, null, null, null],
218
  ['♙', '♙', '♙', '♙', '♙', '♙', '♙', '♙'],
@@ -220,7 +157,6 @@
220
  ];
221
  }
222
 
223
- // Initialize the board display
224
  initializeBoard() {
225
  const boardElement = document.getElementById('board');
226
  boardElement.innerHTML = '';
@@ -243,156 +179,223 @@
243
  boardElement.appendChild(square);
244
  }
245
  }
246
-
247
- this.updateStatus();
248
  }
249
 
250
- // Handle square clicks
251
  handleSquareClick(event) {
252
  const square = event.target.closest('.square');
253
  const row = parseInt(square.dataset.row);
254
  const col = parseInt(square.dataset.col);
255
 
256
- if (this.selectedPiece) {
257
- this.tryMove(row, col);
258
- } else if (this.board[row][col]) {
 
 
 
 
259
  this.selectPiece(row, col);
 
 
260
  }
261
  }
262
 
263
- // Select a piece to move
264
- selectPiece(row, col) {
265
  const piece = this.board[row][col];
266
- if (!piece) return;
267
-
268
- document.querySelectorAll('.square').forEach(sq => {
269
- sq.classList.remove('selected');
270
- sq.classList.remove('valid-move');
271
- });
272
-
273
- document.querySelector(`[data-row="${row}"][data-col="${col}"]`).classList.add('selected');
274
- this.selectedPiece = { row, col };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
275
 
276
- this.showValidMoves(row, col);
277
  }
278
 
279
- // Try to make a move
280
- tryMove(toRow, toCol) {
281
- if (this.isValidMove(this.selectedPiece.row, this.selectedPiece.col, toRow, toCol)) {
282
- this.makeMove(this.selectedPiece.row, this.selectedPiece.col, toRow, toCol);
 
 
 
 
 
 
 
 
 
283
  }
 
 
284
 
285
- document.querySelectorAll('.square').forEach(sq => {
286
- sq.classList.remove('selected');
287
- sq.classList.remove('valid-move');
288
- });
289
 
290
- this.selectedPiece = null;
 
 
 
 
 
 
 
 
 
 
291
  }
292
 
293
- // Check if move is valid
294
- isValidMove(fromRow, fromCol, toRow, toCol) {
295
- // Simplified validation
296
- const piece = this.board[fromRow][fromCol];
297
- return piece !== null;
298
  }
299
 
300
- // Execute a move
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
- // Show valid moves for selected piece
318
  showValidMoves(row, col) {
319
- const piece = this.board[row][col];
320
- const moves = this.getValidMoves(piece, row, col);
321
-
322
  moves.forEach(move => {
323
  const square = document.querySelector(
324
  `[data-row="${move.row}"][data-col="${move.col}"]`
325
  );
326
- if (square) square.classList.add('valid-move');
 
 
 
 
327
  });
328
  }
329
 
330
- // Get valid moves for a piece
331
- getValidMoves(piece, row, col) {
332
- // Simplified move generation
333
- return [{row: row + 1, col}, {row: row - 1, col},
334
- {row, col: col + 1}, {row, col: col - 1}]
335
- .filter(pos => pos.row >= 0 && pos.row < 8 &&
336
- pos.col >= 0 && pos.col < 8);
337
- }
338
 
339
- // Update game status display
340
- updateStatus() {
341
- document.getElementById('status').textContent =
342
- `${this.currentPlayer.charAt(0).toUpperCase() +
343
- this.currentPlayer.slice(1)} to move`;
344
  }
345
 
346
- // Update move list display
347
- updateMoveList() {
348
- const moveList = document.getElementById('moveList');
349
- moveList.innerHTML = '';
350
-
351
- for (let i = 0; i < this.moveHistory.length; i += 2) {
352
- const moveRow = document.createElement('div');
353
- moveRow.className = 'move-row';
354
-
355
- const moveNumber = document.createElement('span');
356
- moveNumber.textContent = `${Math.floor(i/2 + 1)}.`;
357
-
358
- const whiteMove = document.createElement('span');
359
- whiteMove.textContent = this.formatMove(this.moveHistory[i]);
360
-
361
- const blackMove = document.createElement('span');
362
- if (this.moveHistory[i + 1]) {
363
- blackMove.textContent = this.formatMove(this.moveHistory[i + 1]);
364
- }
365
 
366
- moveRow.appendChild(moveNumber);
367
- moveRow.appendChild(whiteMove);
368
- moveRow.appendChild(blackMove);
369
- moveList.appendChild(moveRow);
370
  }
371
 
372
- moveList.scrollTop = moveList.scrollHeight;
 
 
 
 
373
  }
374
 
375
- // Format move for display
376
- formatMove(move) {
377
- const files = 'abcdefgh';
378
- const ranks = '87654321';
379
- return `${move.piece}${files[move.from.col]}${ranks[move.from.row]}-${files[move.to.col]}${ranks[move.to.row]}`;
 
 
 
 
 
 
380
  }
381
  }
382
 
383
  const game = new ChessGame();
384
 
385
- function analyzePosition() {
386
- const eval = (Math.random() * 2 - 1).toFixed(2);
387
- document.getElementById('evaluation').textContent = `Evaluation: ${eval}`;
388
- }
389
-
390
  function resetBoard() {
391
  game.board = game.createInitialBoard();
392
  game.currentPlayer = 'white';
393
  game.selectedPiece = null;
394
  game.moveHistory = [];
395
  game.initializeBoard();
 
396
  }
397
  </script>
398
  </body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Chess Game</title>
7
  <style>
8
  :root {
9
  --board-size: min(80vh, 600px);
 
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
 
 
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
+ color: rgba(0,0,0,0.3);
82
+ font-size: 2em;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
83
  }
84
 
85
+ .square.attack-move::after {
86
+ content: '';
87
+ position: absolute;
88
+ width: 100%;
89
+ height: 100%;
90
+ border: 2px solid rgba(231, 76, 60, 0.6);
91
+ border-radius: 50%;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
92
  }
93
 
94
  .piece {
 
99
  justify-content: center;
100
  font-size: calc(var(--square-size) * 0.7);
101
  cursor: grab;
102
+ color: #000;
103
  }
104
 
105
+ .piece.white { color: #fff; }
106
+
107
+ /* Rest of styles remain same */
108
 
109
  @media (max-width: 1024px) {
110
  .container {
 
127
  <div class="status-panel">
128
  <h3>Position Analysis</h3>
129
  <p id="status">White to move</p>
130
+ <p id="evaluation">Evaluation: 0.0</p>
131
  </div>
132
+ <div class="move-list" id="moveList"></div>
 
 
 
133
  <button onclick="resetBoard()">Reset Board</button>
134
  </div>
135
  </div>
 
141
  this.currentPlayer = 'white';
142
  this.selectedPiece = null;
143
  this.moveHistory = [];
 
 
 
 
 
 
 
 
 
 
 
 
144
  this.initializeBoard();
145
  }
146
 
 
149
  ['♜', '♞', '♝', '♛', '♚', '♝', '♞', '♜'],
150
  ['♟', '♟', '♟', '♟', '♟', '♟', '♟', '♟'],
151
  [null, null, null, null, null, null, null, null],
152
+ [null, null, null, null, null, null, null, null],
153
  [null, null, null, null, null, null, null, null],
154
  [null, null, null, null, null, null, null, null],
155
  ['♙', '♙', '♙', '♙', '♙', '♙', '♙', '♙'],
 
157
  ];
158
  }
159
 
 
160
  initializeBoard() {
161
  const boardElement = document.getElementById('board');
162
  boardElement.innerHTML = '';
 
179
  boardElement.appendChild(square);
180
  }
181
  }
 
 
182
  }
183
 
 
184
  handleSquareClick(event) {
185
  const square = event.target.closest('.square');
186
  const row = parseInt(square.dataset.row);
187
  const col = parseInt(square.dataset.col);
188
 
189
+ const piece = this.board[row][col];
190
+ const isWhitePiece = '♔♕♖♗♘♙'.includes(piece);
191
+ const isBlackPiece = '♚♛♜♝♞♟'.includes(piece);
192
+
193
+ // Only allow selecting pieces of current player's color
194
+ if (piece && ((this.currentPlayer === 'white' && isWhitePiece) ||
195
+ (this.currentPlayer === 'black' && isBlackPiece))) {
196
  this.selectPiece(row, col);
197
+ } else if (this.selectedPiece) {
198
+ this.tryMove(row, col);
199
  }
200
  }
201
 
202
+ getPieceMoves(row, col) {
 
203
  const piece = this.board[row][col];
204
+ const moves = [];
205
+
206
+ switch(piece) {
207
+ case '♔':
208
+ case '♚': // King
209
+ for(let i = -1; i <= 1; i++) {
210
+ for(let j = -1; j <= 1; j++) {
211
+ if(i === 0 && j === 0) continue;
212
+ const newRow = row + i;
213
+ const newCol = col + j;
214
+ if(this.isValidPosition(newRow, newCol)) {
215
+ moves.push({row: newRow, col: newCol});
216
+ }
217
+ }
218
+ }
219
+ break;
220
+
221
+ case '♕':
222
+ case '♛': // Queen
223
+ moves.push(...this.getDiagonalMoves(row, col));
224
+ moves.push(...this.getStraightMoves(row, col));
225
+ break;
226
+
227
+ case '♖':
228
+ case '♜': // Rook
229
+ moves.push(...this.getStraightMoves(row, col));
230
+ break;
231
+
232
+ case '♗':
233
+ case '♝': // Bishop
234
+ moves.push(...this.getDiagonalMoves(row, col));
235
+ break;
236
+
237
+ case '♘':
238
+ case '♞': // Knight
239
+ const knightMoves = [
240
+ [-2,-1], [-2,1], [-1,-2], [-1,2],
241
+ [1,-2], [1,2], [2,-1], [2,1]
242
+ ];
243
+ for(let [i,j] of knightMoves) {
244
+ const newRow = row + i;
245
+ const newCol = col + j;
246
+ if(this.isValidPosition(newRow, newCol)) {
247
+ moves.push({row: newRow, col: newCol});
248
+ }
249
+ }
250
+ break;
251
+
252
+ case '♙': // White Pawn
253
+ if(row > 0) {
254
+ if(!this.board[row-1][col]) {
255
+ moves.push({row: row-1, col: col});
256
+ if(row === 6 && !this.board[row-2][col]) {
257
+ moves.push({row: row-2, col: col});
258
+ }
259
+ }
260
+ // Captures
261
+ if(col > 0 && this.isOpponentPiece(row-1, col-1))
262
+ moves.push({row: row-1, col: col-1});
263
+ if(col < 7 && this.isOpponentPiece(row-1, col+1))
264
+ moves.push({row: row-1, col: col+1});
265
+ }
266
+ break;
267
+
268
+ case '♟': // Black Pawn
269
+ if(row < 7) {
270
+ if(!this.board[row+1][col]) {
271
+ moves.push({row: row+1, col: col});
272
+ if(row === 1 && !this.board[row+2][col]) {
273
+ moves.push({row: row+2, col: col});
274
+ }
275
+ }
276
+ // Captures
277
+ if(col > 0 && this.isOpponentPiece(row+1, col-1))
278
+ moves.push({row: row+1, col: col-1});
279
+ if(col < 7 && this.isOpponentPiece(row+1, col+1))
280
+ moves.push({row: row+1, col: col+1});
281
+ }
282
+ break;
283
+ }
284
 
285
+ return moves;
286
  }
287
 
288
+ getDiagonalMoves(row, col) {
289
+ const moves = [];
290
+ const directions = [[-1,-1], [-1,1], [1,-1], [1,1]];
291
+
292
+ for(let [dx,dy] of directions) {
293
+ let newRow = row + dx;
294
+ let newCol = col + dy;
295
+ while(this.isValidPosition(newRow, newCol)) {
296
+ moves.push({row: newRow, col: newCol});
297
+ if(this.board[newRow][newCol]) break;
298
+ newRow += dx;
299
+ newCol += dy;
300
+ }
301
  }
302
+ return moves;
303
+ }
304
 
305
+ getStraightMoves(row, col) {
306
+ const moves = [];
307
+ const directions = [[-1,0], [1,0], [0,-1], [0,1]];
 
308
 
309
+ for(let [dx,dy] of directions) {
310
+ let newRow = row + dx;
311
+ let newCol = col + dy;
312
+ while(this.isValidPosition(newRow, newCol)) {
313
+ moves.push({row: newRow, col: newCol});
314
+ if(this.board[newRow][newCol]) break;
315
+ newRow += dx;
316
+ newCol += dy;
317
+ }
318
+ }
319
+ return moves;
320
  }
321
 
322
+ isValidPosition(row, col) {
323
+ return row >= 0 && row < 8 && col >= 0 && col < 8;
 
 
 
324
  }
325
 
326
+ isOpponentPiece(row, col) {
327
+ const piece = this.board[row][col];
328
+ if (!piece) return false;
 
 
329
 
330
+ const isWhitePiece = '♔♕♖♗♘♙'.includes(piece);
331
+ return this.currentPlayer === 'black' ? isWhitePiece : !isWhitePiece;
 
 
 
 
 
 
 
332
  }
333
 
 
334
  showValidMoves(row, col) {
335
+ const moves = this.getPieceMoves(row, col);
 
 
336
  moves.forEach(move => {
337
  const square = document.querySelector(
338
  `[data-row="${move.row}"][data-col="${move.col}"]`
339
  );
340
+ if(this.board[move.row][move.col]) {
341
+ square.classList.add('attack-move');
342
+ } else {
343
+ square.classList.add('valid-move');
344
+ }
345
  });
346
  }
347
 
348
+ selectPiece(row, col) {
349
+ document.querySelectorAll('.square').forEach(sq => {
350
+ sq.classList.remove('selected', 'valid-move', 'attack-move');
351
+ });
 
 
 
 
352
 
353
+ document.querySelector(`[data-row="${row}"][data-col="${col}"]`)
354
+ .classList.add('selected');
355
+ this.selectedPiece = {row, col};
356
+ this.showValidMoves(row, col);
 
357
  }
358
 
359
+ tryMove(toRow, toCol) {
360
+ const moves = this.getPieceMoves(this.selectedPiece.row, this.selectedPiece.col);
361
+ const isValidMove = moves.some(move =>
362
+ move.row === toRow && move.col === toCol
363
+ );
 
 
 
 
 
 
 
 
 
 
 
 
 
 
364
 
365
+ if (isValidMove) {
366
+ this.makeMove(this.selectedPiece.row, this.selectedPiece.col, toRow, toCol);
 
 
367
  }
368
 
369
+ document.querySelectorAll('.square').forEach(sq => {
370
+ sq.classList.remove('selected', 'valid-move', 'attack-move');
371
+ });
372
+
373
+ this.selectedPiece = null;
374
  }
375
 
376
+ makeMove(fromRow, fromCol, toRow, toCol) {
377
+ const piece = this.board[fromRow][fromCol];
378
+ this.board[fromRow][fromCol] = null;
379
+ this.board[toRow][toCol] = piece;
380
+
381
+ this.currentPlayer = this.currentPlayer === 'white' ? 'black' : 'white';
382
+ document.getElementById('status').textContent =
383
+ `${this.currentPlayer.charAt(0).toUpperCase() +
384
+ this.currentPlayer.slice(1)} to move`;
385
+
386
+ this.initializeBoard();
387
  }
388
  }
389
 
390
  const game = new ChessGame();
391
 
 
 
 
 
 
392
  function resetBoard() {
393
  game.board = game.createInitialBoard();
394
  game.currentPlayer = 'white';
395
  game.selectedPiece = null;
396
  game.moveHistory = [];
397
  game.initializeBoard();
398
+ document.getElementById('status').textContent = 'White to move';
399
  }
400
  </script>
401
  </body>