Spaces:

Raven7
/

HuggingChess

Running

App Files Files Community

Raven7 commited on Dec 2, 2024

Commit

073c4dc

verified ·

1 Parent(s): 52b4b86

Update index.html

Browse files

Files changed (1) hide show

index.html +326 -18

index.html CHANGED Viewed

@@ -1,19 +1,327 @@
-<!doctype html>
 <html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
 <html>
+<head>
+  <style>
+    .board {
+      width: 480px;
+      height: 480px;
+      border: 2px solid #333;
+      display: grid;
+      grid-template-columns: repeat(8, 1fr);
+    }
+    .square {
+      width: 60px;
+      height: 60px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 40px;
+      cursor: pointer;
+      position: relative;
+    }
+    .white {
+      background: #fff;
+    }
+    .black {
+      background: #999;
+    }
+    .highlight {
+      background: rgba(255, 255, 0, 0.5);
+    }
+    .possible-move::after {
+      content: '';
+      position: absolute;
+      width: 20px;
+      height: 20px;
+      background: rgba(0, 255, 0, 0.3);
+      border-radius: 50%;
+    }
+    .captured {
+      margin: 20px;
+      padding: 10px;
+      border: 1px solid #ccc;
+    }
+    .captured-piece {
+      font-size: 24px;
+      margin: 0 5px;
+    }
+  </style>
+</head>
+<body>
+  <div class="board" id="board"></div>
+  <div class="captured">
+    <div>
+      White captured: <span id="whiteCaptured"></span>
+    </div>
+    <div>
+      Black captured: <span id="blackCaptured"></span>
+    </div>
+  </div>
+  <script>
+    const board = document.getElementById('board');
+    const whiteCaptured = document.getElementById('whiteCaptured');
+    const blackCaptured = document.getElementById('blackCaptured');
+    let selectedPiece = null;
+    let currentTurn = 'white';
+    let whiteCapturedPieces = [];
+    let blackCapturedPieces = [];
+    const initialBoard = [
+      ['♜', '♞', '♝', '♛', '♚', '♝', '♞', '♜'],
+      ['♟', '♟', '♟', '♟', '♟', '♟', '♟', '♟'],
+      ['', '', '', '', '', '', '', ''],
+      ['', '', '', '', '', '', '', ''],
+      ['', '', '', '', '', '', '', ''],
+      ['', '', '', '', '', '', '', ''],
+      ['♙', '♙', '♙', '♙', '♙', '♙', '♙', '♙'],
+      ['♖', '♘', '♗', '♕', '♔', '♗', '♘', '♖']
+    ];
+    let gameBoard = JSON.parse(JSON.stringify(initialBoard));
+    function createBoard() {
+      board.innerHTML = '';
+      for (let i = 0; i < 8; i++) {
+        for (let j = 0; j < 8; j++) {
+          const square = document.createElement('div');
+          square.className = `square ${(i + j) % 2 === 0 ? 'white' : 'black'}`;
+          square.dataset.row = i;
+          square.dataset.col = j;
+          square.textContent = gameBoard[i][j];
+          square.addEventListener('click', handleClick);
+          board.appendChild(square);
+        }
+      }
+    }
+    function isWhitePiece(piece) {
+      return '♔♕♖♗♘♙'.includes(piece);
+    }
+    function isBlackPiece(piece) {
+      return '♚♛♜♝♞♟'.includes(piece);
+    }
+    function clearHighlights() {
+      document.querySelectorAll('.square').forEach(square => {
+        square.classList.remove('highlight', 'possible-move');
+      });
+    }
+    function getPossibleMoves(row, col) {
+      const piece = gameBoard[row][col];
+      const moves = [];
+      switch (piece) {
+        case '♔':
+        case '♚':
+          // King moves
+          for (let i = -1; i <= 1; i++) {
+            for (let j = -1; j <= 1; j++) {
+              if (i === 0 && j === 0) continue;
+              const newRow = row + i;
+              const newCol = col + j;
+              if (isValidMove(newRow, newCol, piece)) {
+                moves.push([newRow, newCol]);
+              }
+            }
+          }
+          break;
+        case '♕':
+        case '♛':
+          // Queen moves (combination of rook and bishop)
+          moves.push(...getRookMoves(row, col));
+          moves.push(...getBishopMoves(row, col));
+          break;
+        case '♖':
+        case '♜':
+          // Rook moves
+          moves.push(...getRookMoves(row, col));
+          break;
+        case '♗':
+        case '♝':
+          // Bishop moves
+          moves.push(...getBishopMoves(row, col));
+          break;
+        case '♘':
+        case '♞':
+          // Knight moves
+          const knightMoves = [
+            [-2, -1], [-2, 1], [-1, -2], [-1, 2],
+            [1, -2], [1, 2], [2, -1], [2, 1]
+          ];
+          for (const [dRow, dCol] of knightMoves) {
+            const newRow = row + dRow;
+            const newCol = col + dCol;
+            if (isValidMove(newRow, newCol, piece)) {
+              moves.push([newRow, newCol]);
+            }
+          }
+          break;
+        case '♙':
+          // White pawn moves
+          if (row > 0 && !gameBoard[row - 1][col]) {
+            moves.push([row - 1, col]);
+            if (row === 6 && !gameBoard[row - 2][col]) {
+              moves.push([row - 2, col]);
+            }
+          }
+          // Capture diagonally
+          if (row > 0 && col > 0 && isBlackPiece(gameBoard[row - 1][col - 1])) {
+            moves.push([row - 1, col - 1]);
+          }
+          if (row > 0 && col < 7 && isBlackPiece(gameBoard[row - 1][col + 1])) {
+            moves.push([row - 1, col + 1]);
+          }
+          break;
+        case '♟':
+          // Black pawn moves
+          if (row < 7 && !gameBoard[row + 1][col]) {
+            moves.push([row + 1, col]);
+            if (row === 1 && !gameBoard[row + 2][col]) {
+              moves.push([row + 2, col]);
+            }
+          }
+          // Capture diagonally
+          if (row < 7 && col > 0 && isWhitePiece(gameBoard[row + 1][col - 1])) {
+            moves.push([row + 1, col - 1]);
+          }
+          if (row < 7 && col < 7 && isWhitePiece(gameBoard[row + 1][col + 1])) {
+            moves.push([row + 1, col + 1]);
+          }
+          break;
+      }
+      return moves;
+    }
+    function getRookMoves(row, col) {
+      const moves = [];
+      const directions = [[0, 1], [0, -1], [1, 0], [-1, 0]];
+      for (const [dRow, dCol] of directions) {
+        let newRow = row + dRow;
+        let newCol = col + dCol;
+        while (isValidMove(newRow, newCol, gameBoard[row][col])) {
+          moves.push([newRow, newCol]);
+          if (gameBoard[newRow][newCol]) break;
+          newRow += dRow;
+          newCol += dCol;
+        }
+      }
+      return moves;
+    }
+    function getBishopMoves(row, col) {
+      const moves = [];
+      const directions = [[1, 1], [1, -1], [-1, 1], [-1, -1]];
+      for (const [dRow, dCol] of directions) {
+        let newRow = row + dRow;
+        let newCol = col + dCol;
+        while (isValidMove(newRow, newCol, gameBoard[row][col])) {
+          moves.push([newRow, newCol]);
+          if (gameBoard[newRow][newCol]) break;
+          newRow += dRow;
+          newCol += dCol;
+        }
+      }
+      return moves;
+    }
+    function isValidMove(row, col, piece) {
+      if (row < 0 || row > 7 || col < 0 || col > 7) return false;
+      const targetPiece = gameBoard[row][col];
+      if (!targetPiece) return true;
+      return isWhitePiece(piece) ? isBlackPiece(targetPiece) : isWhitePiece(targetPiece);
+    }
+    function handleClick(event) {
+      const row = parseInt(event.target.dataset.row);
+      const col = parseInt(event.target.dataset.col);
+      const piece = gameBoard[row][col];
+      if (selectedPiece) {
+        const selectedRow = parseInt(selectedPiece.dataset.row);
+        const selectedCol = parseInt(selectedPiece.dataset.col);
+        const possibleMoves = getPossibleMoves(selectedRow, selectedCol);
+        const isValidMove = possibleMoves.some(([r, c]) => r === row && c === col);
+        if (isValidMove) {
+          const capturedPiece = gameBoard[row][col];
+          if (capturedPiece) {
+            if (isWhitePiece(gameBoard[selectedRow][selectedCol])) {
+              whiteCapturedPieces.push(capturedPiece);
+            } else {
+              blackCapturedPieces.push(capturedPiece);
+            }
+            updateCapturedPieces();
+            if (capturedPiece === '♚' || capturedPiece === '♔') {
+              alert('Game Over! ' + (isWhitePiece(gameBoard[selectedRow][selectedCol]) ? 'White' : 'Black') + ' wins!');
+              resetGame();
+              return;
+            }
+          }
+          gameBoard[row][col] = gameBoard[selectedRow][selectedCol];
+          gameBoard[selectedRow][selectedCol] = '';
+          currentTurn = currentTurn === 'white' ? 'black' : 'white';
+        }
+        selectedPiece = null;
+        clearHighlights();
+        createBoard();
+        return;
+      }
+      if (!piece) return;
+      const isWhiteTurn = currentTurn === 'white';
+      if ((isWhiteTurn && !isWhitePiece(piece)) || (!isWhiteTurn && !isBlackPiece(piece))) {
+        return;
+      }
+      selectedPiece = event.target;
+      clearHighlights();
+      event.target.classList.add('highlight');
+      const possibleMoves = getPossibleMoves(row, col);
+      possibleMoves.forEach(([r, c]) => {
+        const square = document.querySelector(`[data-row="${r}"][data-col="${c}"]`);
+        square.classList.add('possible-move');
+      });
+    }
+    function updateCapturedPieces() {
+      whiteCaptured.textContent = whiteCapturedPieces.join(' ');
+      blackCaptured.textContent = blackCapturedPieces.join(' ');
+    }
+    function resetGame() {
+      gameBoard = JSON.parse(JSON.stringify(initialBoard));
+      currentTurn = 'white';
+      whiteCapturedPieces = [];
+      blackCapturedPieces = [];
+      selectedPiece = null;
+      updateCapturedPieces();
+      createBoard();
+    }
+    createBoard();
+  </script>
+</body>
+</html>