Update index.html

index.html

@@ -25,9 +25,8 @@
             display: flex;
             justify-content: center;
             align-items: center;
-            font-size: 40px;
-            cursor: pointer;
             position: relative;
+            cursor: pointer;
         }
 
         .white {
@@ -38,34 +37,17 @@
             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 {
+            font-size: 45px;
             user-select: none;
         }
 
-        .white-piece {
-            color: white;
-            text-shadow: 1px 1px 2px black;
+        .highlight {
+            background-color: yellow !important;
         }
 
-        .black-piece {
-            color: black;
+        .possible-move {
+            background-color: rgba(144, 238, 144, 0.5) !important;
         }
     </style>
 </head>
@@ -73,9 +55,6 @@
     <div id="chessboard"></div>
 
     <script>
-        let selectedPiece = null;
-        let currentTurn = 'white';
-
         const pieces = {
             'white': {
                 'king': '♔',
@@ -95,35 +74,25 @@
             }
         };
 
+        let selectedPiece = null;
+        let currentTurn = 'white';
+
         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.classList.add('square', (row + col) % 2 === 0 ? 'white' : 'black');
                     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`);
-                        }
+                    if (row === 1 || row === 6) {
+                        const color = row === 1 ? 'black' : 'white';
+                        addPiece(square, color, 'pawn');
+                    } else if (row === 0 || row === 7) {
+                        const color = row === 0 ? 'black' : 'white';
+                        const pieceOrder = ['rook', 'knight', 'bishop', 'queen', 'king', 'bishop', 'knight', 'rook'];
+                        addPiece(square, color, pieceOrder[col]);
                     }
 
                     square.addEventListener('click', handleClick);
@@ -132,79 +101,174 @@
             }
         }
 
-        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 addPiece(square, color, pieceType) {
+            const piece = document.createElement('span');
+            piece.classList.add('piece');
+            piece.dataset.piece = pieceType;
+            piece.dataset.color = color;
+            piece.textContent = pieces[color][pieceType];
+            square.appendChild(piece);
         }
 
         function handleClick(event) {
-            const square = event.target;
-            const piece = square.dataset.piece;
-            const color = square.dataset.color;
+            const square = event.currentTarget;
+            const piece = square.querySelector('.piece');
 
             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');
-                    
+                    movePiece(selectedPiece, square);
+                    selectedPiece = null;
                     currentTurn = currentTurn === 'white' ? 'black' : 'white';
+                } else {
+                    selectedPiece = null;
                 }
-                selectedPiece = null;
-            } else if (piece && color === currentTurn) {
+            } else if (piece && piece.dataset.color === currentTurn) {
                 selectedPiece = square;
-                square.classList.add('highlight');
                 showPossibleMoves(square);
             }
         }
 
+        function movePiece(fromSquare, toSquare) {
+            const piece = fromSquare.querySelector('.piece');
+            toSquare.innerHTML = '';
+            toSquare.appendChild(piece);
+        }
+
+        function showPossibleMoves(square) {
+            const piece = square.querySelector('.piece');
+            const pieceType = piece.dataset.piece;
+            const color = piece.dataset.color;
+            const row = parseInt(square.dataset.row);
+            const col = parseInt(square.dataset.col);
+
+            switch (pieceType) {
+                case 'pawn':
+                    showPawnMoves(row, col, color);
+                    break;
+                case 'knight':
+                    showKnightMoves(row, col, color);
+                    break;
+                case 'bishop':
+                    showBishopMoves(row, col, color);
+                    break;
+                case 'rook':
+                    showRookMoves(row, col, color);
+                    break;
+                case 'queen':
+                    showQueenMoves(row, col, color);
+                    break;
+                case 'king':
+                    showKingMoves(row, col, color);
+                    break;
+            }
+        }
+
+        function showPawnMoves(row, col, color) {
+            const direction = color === 'white' ? -1 : 1;
+            const startRow = color === 'white' ? 6 : 1;
+
+            // Forward move
+            let nextRow = row + direction;
+            if (isEmpty(nextRow, col)) {
+                highlightSquare(nextRow, col);
+                if (row === startRow && isEmpty(nextRow + direction, col)) {
+                    highlightSquare(nextRow + direction, col);
+                }
+            }
+
+            // Captures
+            [-1, 1].forEach(offset => {
+                const captureRow = row + direction;
+                const captureCol = col + offset;
+                if (isOpponent(captureRow, captureCol, color)) {
+                    highlightSquare(captureRow, captureCol);
+                }
+            });
+        }
+
+        function showKnightMoves(row, col, color) {
+            const moves = [[-2, -1], [-2, 1], [-1, -2], [-1, 2], [1, -2], [1, 2], [2, -1], [2, 1]];
+            moves.forEach(([dr, dc]) => {
+                const r = row + dr;
+                const c = col + dc;
+                if (isValidMove(r, c, color)) {
+                    highlightSquare(r, c);
+                }
+            });
+        }
+
+        function showBishopMoves(row, col, color) {
+            showLineMoves(row, col, color, [[-1, -1], [-1, 1], [1, -1], [1, 1]]);
+        }
+
+        function showRookMoves(row, col, color) {
+            showLineMoves(row, col, color, [[-1, 0], [1, 0], [0, -1], [0, 1]]);
+        }
+
+        function showQueenMoves(row, col, color) {
+            showBishopMoves(row, col, color);
+            showRookMoves(row, col, color);
+        }
+
+        function showKingMoves(row, col, color) {
+            const moves = [[-1, -1], [-1, 0], [-1, 1], [0, -1], [0, 1], [1, -1], [1, 0], [1, 1]];
+            moves.forEach(([dr, dc]) => {
+                const r = row + dr;
+                const c = col + dc;
+                if (isValidMove(r, c, color)) {
+                    highlightSquare(r, c);
+                }
+            });
+        }
+
+        function showLineMoves(row, col, color, directions) {
+            directions.forEach(([dr, dc]) => {
+                let r = row + dr;
+                let c = col + dc;
+                while (isValidMove(r, c, color)) {
+                    highlightSquare(r, c);
+                    if (isOpponent(r, c, color)) break;
+                    r += dr;
+                    c += dc;
+                }
+            });
+        }
+
+        function isValidMove(row, col, color) {
+            return isOnBoard(row, col) && !isAlly(row, col, color);
+        }
+
+        function isEmpty(row, col) {
+            return isOnBoard(row, col) && !document.querySelector(`[data-row="${row}"][data-col="${col}"] .piece`);
+        }
+
+        function isOpponent(row, col, color) {
+            const piece = document.querySelector(`[data-row="${row}"][data-col="${col}"] .piece`);
+            return piece && piece.dataset.color !== color;
+        }
+
+        function isAlly(row, col, color) {
+            const piece = document.querySelector(`[data-row="${row}"][data-col="${col}"] .piece`);
+            return piece && piece.dataset.color === color;
+        }
+
+        function isOnBoard(row, col) {
+            return row >= 0 && row < 8 && col >= 0 && col < 8;
+        }
+
+        function highlightSquare(row, col) {
+            const square = document.querySelector(`[data-row="${row}"][data-col="${col}"]`);
+            square.classList.add('possible-move');
+        }
+
+        function clearHighlights() {
+            document.querySelectorAll('.square').forEach(square => {
+                square.classList.remove('highlight', 'possible-move');
+            });
+        }
+
         createBoard();
     </script>
 </body>