From 9011e3b51e53cede24f5e113d34767a13b6c48ab Mon Sep 17 00:00:00 2001
From: Christoph Wagner <christoph@christoph-w.com>
Date: Sun, 23 Nov 2025 15:20:06 +0100
Subject: [PATCH] fix: correct all DOM element ID mismatches and add null
 safety checks
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes critical regression where moves weren't reflected in UI and
turns weren't switching properly.

Root Cause:
- updateTurnIndicator() was looking for 'turn-indicator' but HTML has 'current-turn'
- This caused a null reference error that broke the entire update chain
- Prevented board updates, turn switching, and move history from working

Changes:
1. Fix turn indicator ID: 'turn-indicator' → 'current-turn' (line 175)
2. Add null check for turn indicator to prevent crashes (line 176)
3. Add null check for status-message element (line 239)
4. Add null check for promotion-overlay element (line 266)
5. Add null check for btn-offer-draw element (line 87)

All fixes include graceful degradation with console warnings instead
of throwing errors that break game functionality.

Testing:
- All 124 tests passing ✅
- ESLint passes with 0 errors (6 pre-existing warnings)
- Move history displays correctly
- Captured pieces display correctly
- Turn indicator updates correctly
- Game flow works as expected

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

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

diff --git a/js/main.js b/js/main.js
index ddf6c73..17e0eb1 100644
--- a/js/main.js
+++ b/js/main.js
@@ -84,10 +84,13 @@ class ChessApp {
         });
 
         // Offer Draw
-        document.getElementById('btn-offer-draw').addEventListener('click', () => {
-            this.game.offerDraw();
-            this.showMessage('Draw offered to opponent');
-        });
+        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';
     }
 
@@ -232,6 +239,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 +261,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