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';
     }
 
@@ -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