Merge pull request #5: Fix DOM element ID mismatches and game logic bugs

This PR fixes critical bugs that prevented the chess game from functioning correctly.

Fixes #2: No Move History Display
Fixes #3: No Captures Display

## Summary of Changes

### 1. DOM Element ID Mismatches (Issues #2 & #3)
Fixed incorrect element IDs that prevented UI updates:
- ✅ Move history: 'move-list' → 'move-history'
- ✅ Captured pieces: 'white-captured' → 'captured-white-pieces'
- ✅ Captured pieces: 'black-captured' → 'captured-black-pieces'
- ✅ Turn indicator: 'turn-indicator' → 'current-turn'

### 2. Null Safety Improvements
Added defensive null checks to prevent crashes:
- ✅ Turn indicator element validation
- ✅ Status message element validation
- ✅ Promotion dialog element validation
- ✅ Offer draw button validation

### 3. Critical Game Logic Bug
Fixed captured piece extraction from Board.movePiece():
- **Root Cause:** Board.movePiece() returns { captured: piece }, but code treated it as returning piece directly
- **Impact:** Game crashed on any move with a capture
- **Fix:** Extract captured piece from return object: `captured = moveResult.captured`

### 4. Captured Pieces Display Logic
Fixed inverted display of captured pieces:
- **Issue:** "Captured by White" showed white pieces (backwards!)
- **Fix:** "Captured by White" now correctly shows black pieces that white captured

## Impact

**Before:**
- ❌ Moves not reflected in UI
- ❌ Turns not switching
- ❌ Game crashed on captures
- ❌ Captured pieces displayed backwards

**After:**
- ✅ All UI elements update correctly
- ✅ Turns switch properly between white and black
- ✅ Captures work without crashes
- ✅ Captured pieces display correctly
- ✅ Move history shows all moves
- ✅ All 124 tests passing

## Testing

- ✅ All unit tests passing (124/124)
- ✅ ESLint passes with 0 errors
- ✅ Manual testing confirms all features working
- ✅ No regressions introduced

## Commits

1. b44f071 - Fix move history and captured pieces DOM IDs
2. 9011e3b - Fix turn indicator and add null safety checks
3. 8390862 - Fix captured piece extraction from Board.movePiece()
4. 90fcf25 - Fix captured pieces display logic

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

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');
+        if (offerDrawBtn) {
+            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');
 
+        if (!dialog) {
+            console.error('Promotion dialog not found');
+            return;
+        }
+
+        if (overlay) {
             overlay.style.display = 'block';
+        }
         dialog.style.display = 'block';
 
         // Update symbols for current color