From 90fcf25dec9897512fcf42235b1f97105e765483 Mon Sep 17 00:00:00 2001
From: Christoph Wagner <christoph@christoph-w.com>
Date: Sun, 23 Nov 2025 15:42:02 +0100
Subject: [PATCH] fix: correct captured pieces display logic
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes inverted display of captured pieces in UI sidebars.

Issue:
- "Captured by White" was showing white pieces
- "Captured by Black" was showing black pieces

This is backwards! The display should show:
- "Captured by White" = black pieces that white captured
- "Captured by Black" = white pieces that black captured

Root Cause:
The capturedPieces object stores pieces by their color:
- capturedPieces.white = white pieces that were captured (by black)
- capturedPieces.black = black pieces that were captured (by white)

So the display logic was inverted.

The Fix:
- whiteCaptured (header "Captured by Black") now displays captured.white
- blackCaptured (header "Captured by White") now displays captured.black

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 js/main.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/js/main.js b/js/main.js
index 17e0eb1..4b90119 100644
--- a/js/main.js
+++ b/js/main.js
@@ -223,12 +223,14 @@ class ChessApp {
 
         const captured = this.game.gameState.capturedPieces;
 
-        whiteCaptured.innerHTML = captured.black.map(piece =>
-            `<span class="captured-piece black">${piece.getSymbol()}</span>`
+        // "Captured by Black" shows white pieces that black captured
+        whiteCaptured.innerHTML = captured.white.map(piece =>
+            `<span class="captured-piece white">${piece.getSymbol()}</span>`
         ).join('') || '-';
 
-        blackCaptured.innerHTML = captured.white.map(piece =>
-            `<span class="captured-piece white">${piece.getSymbol()}</span>`
+        // "Captured by White" shows black pieces that white captured
+        blackCaptured.innerHTML = captured.black.map(piece =>
+            `<span class="captured-piece black">${piece.getSymbol()}</span>`
         ).join('') || '-';
     }