js/controllers/GameController.js

@@ -105,7 +105,8 @@ export class GameController {
             captured = SpecialMoves.executeEnPassant(this.board, piece, toRow, toCol);
         } else {
             // Normal move
-            captured = this.board.movePiece(fromRow, fromCol, toRow, toCol);
+            const moveResult = this.board.movePiece(fromRow, fromCol, toRow, toCol);
+            captured = moveResult.captured;
 
             // Check for promotion
             if (specialMoveType === 'promotion' || (piece.type === 'pawn' && piece.canPromote())) {

js/main.js

@@ -84,10 +84,13 @@ class ChessApp {
         });
 
         // Offer Draw
-        document.getElementById('btn-offer-draw').addEventListener('click', () => {
+        const offerDrawBtn = document.getElementById('btn-offer-draw');
-            this.game.offerDraw();
+        if (offerDrawBtn) {
-            this.showMessage('Draw offered to opponent');
+            offerDrawBtn.addEventListener('click', () => {
-        });
+                this.game.offerDraw();
+                this.showMessage('Draw offered to opponent');
+            });
+        }
 
         // Resign
         document.getElementById('btn-resign').addEventListener('click', () => {
@@ -172,9 +175,13 @@ class ChessApp {
      * Update turn indicator
      */
     updateTurnIndicator() {
-        const indicator = document.getElementById('turn-indicator');
+        const indicator = document.getElementById('current-turn');
+        if (!indicator) {
+            console.error('Turn indicator element not found');
+            return;
+        }
         const turn = this.game.currentTurn;
-        indicator.textContent = `${turn.charAt(0).toUpperCase() + turn.slice(1)} to move`;
+        indicator.textContent = `${turn.charAt(0).toUpperCase() + turn.slice(1)}'s Turn`;
         indicator.style.color = turn === 'white' ? '#ffffff' : '#333333';
     }
 
@@ -182,7 +189,7 @@ class ChessApp {
      * Update move history display
      */
     updateMoveHistory() {
-        const moveList = document.getElementById('move-list');
+        const moveList = document.getElementById('move-history');
         const history = this.game.gameState.moveHistory;
 
         if (history.length === 0) {
@@ -211,17 +218,19 @@ class ChessApp {
      * Update captured pieces display
      */
     updateCapturedPieces() {
-        const whiteCaptured = document.getElementById('white-captured');
+        const whiteCaptured = document.getElementById('captured-white-pieces');
-        const blackCaptured = document.getElementById('black-captured');
+        const blackCaptured = document.getElementById('captured-black-pieces');
 
         const captured = this.game.gameState.capturedPieces;
 
-        whiteCaptured.innerHTML = captured.black.map(piece =>
+        // "Captured by Black" shows white pieces that black captured
-            `<span class="captured-piece black">${piece.getSymbol()}</span>`
+        whiteCaptured.innerHTML = captured.white.map(piece =>
+            `<span class="captured-piece white">${piece.getSymbol()}</span>`
         ).join('') || '-';
 
-        blackCaptured.innerHTML = captured.white.map(piece =>
+        // "Captured by White" shows black pieces that white captured
-            `<span class="captured-piece white">${piece.getSymbol()}</span>`
+        blackCaptured.innerHTML = captured.black.map(piece =>
+            `<span class="captured-piece black">${piece.getSymbol()}</span>`
         ).join('') || '-';
     }
 
@@ -232,6 +241,10 @@ class ChessApp {
      */
     showMessage(message, type = 'info') {
         const statusMessage = document.getElementById('status-message');
+        if (!statusMessage) {
+            console.warn('Status message element not found, using console:', message);
+            return;
+        }
         statusMessage.textContent = message;
         statusMessage.style.display = 'block';
 
@@ -250,7 +263,14 @@ class ChessApp {
         const overlay = document.getElementById('promotion-overlay');
         const dialog = document.getElementById('promotion-dialog');
 
-        overlay.style.display = 'block';
+        if (!dialog) {
+            console.error('Promotion dialog not found');
+            return;
+        }
+
+        if (overlay) {
+            overlay.style.display = 'block';
+        }
         dialog.style.display = 'block';
 
         // Update symbols for current color