fix: correct all DOM element ID mismatches and add null safety checks
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>
This commit is contained in:
co-authored by
Claude
parent
b44f071630
commit
9011e3b51e
+21
-3
@@ -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';
|
||||
}
|
||||
|
||||
@@ -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');
|
||||
|
||||
if (!dialog) {
|
||||
console.error('Promotion dialog not found');
|
||||
return;
|
||||
}
|
||||
|
||||
if (overlay) {
|
||||
overlay.style.display = 'block';
|
||||
}
|
||||
dialog.style.display = 'block';
|
||||
|
||||
// Update symbols for current color
|
||||
|
||||
Reference in New Issue
Block a user