Spaces:

Raven7
/

HuggingChess

Running

App Files Files Community

Raven7 commited on Dec 3, 2024

Commit

f45f133

verified ·

1 Parent(s): 073c4dc

Update index.html

Browse files

Files changed (1) hide show

index.html +185 -301

index.html CHANGED Viewed

@@ -1,327 +1,211 @@
 <!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>

 <!DOCTYPE html>
 <html>
 <head>
+    <title>Chess Game</title>
+    <style>
+        body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            background: #f0f0f0;
         }
+        #chessboard {
+            display: grid;
+            grid-template-columns: repeat(8, 60px);
+            grid-template-rows: repeat(8, 60px);
+            border: 2px solid #333;
+        }
+        .square {
+            width: 60px;
+            height: 60px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 40px;
+            cursor: pointer;
+            position: relative;
+        }
+        .white {
+            background-color: #EEEED2;
+        }
+        .black {
+            background-color: #769656;
+        }
+        .highlight {
+            background-color: rgba(255, 255, 0, 0.4) !important;
+        }
+        .possible-move {
+            position: relative;
+        }
+        .possible-move::before {
+            content: '';
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            background-color: rgba(0,0,0,0.2);
+            border-radius: 50%;
+        }
+        .piece {
+            user-select: none;
+        }
+        .white-piece {
+            color: white;
+            text-shadow: 1px 1px 2px black;
+        }
+        .black-piece {
+            color: black;
+        }
+    </style>
+</head>
+<body>
+    <div id="chessboard"></div>
+    <script>
+        let selectedPiece = null;
+        let currentTurn = 'white';
+        const pieces = {
+            'white': {
+                'king': '♔',
+                'queen': '♕',
+                'rook': '♖',
+                'bishop': '♗',
+                'knight': '♘',
+                'pawn': '♙'
+            },
+            'black': {
+                'king': '♚',
+                'queen': '♛',
+                'rook': '♜',
+                'bishop': '♝',
+                'knight': '♞',
+                'pawn': '♟'
             }
+        };
+        function createBoard() {
+            const board = document.getElementById('chessboard');
+            for (let row = 0; row < 8; row++) {
+                for (let col = 0; col < 8; col++) {
+                    const square = document.createElement('div');
+                    square.classList.add('square');
+                    square.classList.add((row + col) % 2 ? 'black' : 'white');
+                    square.dataset.row = row;
+                    square.dataset.col = col;
+                    // Add pieces
+                    if (row < 2 || row > 5) {
+                        const color = row < 2 ? 'black' : 'white';
+                        let piece;
+                        if (row === 1 || row === 6) {
+                            piece = 'pawn';
+                        } else {
+                            if (col === 0 || col === 7) piece = 'rook';
+                            if (col === 1 || col === 6) piece = 'knight';
+                            if (col === 2 || col === 5) piece = 'bishop';
+                            if (col === 3) piece = 'queen';
+                            if (col === 4) piece = 'king';
+                        }
+                        if (piece) {
+                            square.innerHTML = pieces[color][piece];
+                            square.dataset.piece = piece;
+                            square.dataset.color = color;
+                            square.classList.add('piece', `${color}-piece`);
+                        }
+                    }
+                    square.addEventListener('click', handleClick);
+                    board.appendChild(square);
+                }
             }
         }
+        function clearHighlights() {
+            document.querySelectorAll('.square').forEach(square => {
+                square.classList.remove('highlight', 'possible-move');
+            });
         }
+        function showPossibleMoves(square) {
+            const piece = square.dataset.piece;
+            const row = parseInt(square.dataset.row);
+            const col = parseInt(square.dataset.col);
+            const color = square.dataset.color;
+            if (piece === 'pawn') {
+                const direction = color === 'white' ? -1 : 1;
+                const startRow = color === 'white' ? 6 : 1;
+                // Forward moves
+                let nextRow = row + direction;
+                if (nextRow >= 0 && nextRow < 8) {
+                    const forwardSquare = document.querySelector(`[data-row="${nextRow}"][data-col="${col}"]`);
+                    if (!forwardSquare.dataset.piece) {
+                        forwardSquare.classList.add('possible-move');
+                        // Initial two-square move
+                        if (row === startRow) {
+                            const twoAheadSquare = document.querySelector(`[data-row="${row + 2 * direction}"][data-col="${col}"]`);
+                            if (!twoAheadSquare.dataset.piece) {
+                                twoAheadSquare.classList.add('possible-move');
+                            }
+                        }
+                    }
+                }
+                // Captures
+                [-1, 1].forEach(offset => {
+                    const captureSquare = document.querySelector(`[data-row="${nextRow}"][data-col="${col + offset}"]`);
+                    if (captureSquare && captureSquare.dataset.piece && captureSquare.dataset.color !== color) {
+                        captureSquare.classList.add('possible-move');
+                    }
+                });
             }
         }
+        function handleClick(event) {
+            const square = event.target;
+            const piece = square.dataset.piece;
+            const color = square.dataset.color;
+            clearHighlights();
+            if (selectedPiece) {
+                if (square.classList.contains('possible-move')) {
+                    // Move piece
+                    square.innerHTML = selectedPiece.innerHTML;
+                    square.dataset.piece = selectedPiece.dataset.piece;
+                    square.dataset.color = selectedPiece.dataset.color;
+                    square.classList.add('piece', `${selectedPiece.dataset.color}-piece`);
+                    selectedPiece.innerHTML = '';
+                    selectedPiece.removeAttribute('data-piece');
+                    selectedPiece.removeAttribute('data-color');
+                    selectedPiece.classList.remove('piece', 'white-piece', 'black-piece');
+                    currentTurn = currentTurn === 'white' ? 'black' : 'white';
+                }
+                selectedPiece = null;
+            } else if (piece && color === currentTurn) {
+                selectedPiece = square;
+                square.classList.add('highlight');
+                showPossibleMoves(square);
+            }
+        }
+        createBoard();
+    </script>
 </body>
 </html>