From fd6e40c562962b90de11036665fdd6e4944fa1a8 Mon Sep 17 00:00:00 2001
From: Dhanjit Das <dhanjit@users.noreply.github.com>
Date: Thu, 1 Jan 2026 10:31:30 +0530
Subject: [PATCH 1/2] Polish: Update player labels to YOU/AI in PvC mode

---
 web/js/main.js |  9 +++++++--
 web/js/ui.js   | 18 ++++++++++++------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/web/js/main.js b/web/js/main.js
index ca1c3f61..89ee53da 100644
--- a/web/js/main.js
+++ b/web/js/main.js
@@ -62,7 +62,7 @@ document.addEventListener('DOMContentLoaded', () => {
     if (colsInput) colsInput.value = cols;
 
     let game = new GameState(rows, cols);
-    let ui = new UI(game);
+    let ui = new UI(game); // Defaults to P1/P2
 
     // Handlers for controls
     gameModeSelect.addEventListener('change', (e) => {
@@ -135,7 +135,12 @@ document.addEventListener('DOMContentLoaded', () => {
 
     function startNewGame(r, c) {
         game = new GameState(r, c);
-        ui = new UI(game);
+
+        const playerNames = (gameMode === 'pvc')
+            ? { P1: 'YOU', P2: 'AI' }
+            : { P1: 'P1', P2: 'P2' };
+
+        ui = new UI(game, playerNames);
 
         // Setup AI Hooks
         // Override UI's updateStatus to detect turn change?
diff --git a/web/js/ui.js b/web/js/ui.js
index e8bf490b..80896c30 100644
--- a/web/js/ui.js
+++ b/web/js/ui.js
@@ -3,8 +3,9 @@
  * UI Controller for Dots and Boxes
  */
 class UI {
-    constructor(game) {
+    constructor(game, playerNames = { P1: 'P1', P2: 'P2' }) {
         this.game = game;
+        this.playerNames = playerNames;
         this.dotSpacing = 60;
         this.margin = 30;
         this.container = document.getElementById('game-board');
@@ -183,7 +184,7 @@ class UI {
                         sqEl.style.fillOpacity = "0.3";
                     }
                     if (textEl) {
-                        textEl.textContent = owner; // "P1" or "P2"
+                        textEl.textContent = this.playerNames[owner]; // Custom name
                     }
                 });
                 this.messageEl.textContent = "Square Captured! Extra Turn!";
@@ -197,17 +198,22 @@ class UI {
     }
 
     updateStatus() {
-        this.p1ScoreEl.textContent = `P1: ${this.game.scores['P1']}`;
-        this.p2ScoreEl.textContent = `P2: ${this.game.scores['P2']}`;
+        this.p1ScoreEl.textContent = `${this.playerNames['P1']}: ${this.game.scores['P1']}`;
+        this.p2ScoreEl.textContent = `${this.playerNames['P2']}: ${this.game.scores['P2']}`;
 
         const currentPlayer = this.game.getCurrentPlayer();
 
         if (this.game.gameOver) {
-            this.turnIndicator.textContent = `Winner: ${this.game.winner === 'Draw' ? 'Draw!' : this.game.winner + ' Wins!'}`;
+            let winnerText = 'Draw!';
+            if (this.game.winner !== 'Draw') {
+                winnerText = `${this.playerNames[this.game.winner]} Wins!`;
+            }
+            this.turnIndicator.textContent = `Winner: ${winnerText}`;
             this.turnIndicator.className = 'turn-indicator'; // Reset colors or add gold
             this.messageEl.textContent = "Game Over!";
         } else {
-            this.turnIndicator.textContent = `${currentPlayer === 'P1' ? 'Player 1' : 'Player 2'}'s Turn`;
+            const name = this.playerNames[currentPlayer];
+            this.turnIndicator.textContent = `${name}'s Turn`;
             this.turnIndicator.className = `turn-indicator ${currentPlayer === 'P1' ? 'p1-turn' : 'p2-turn'}`;
         }
     }

From 4704c8ad33e29c6b8d5a640fdd13e18d69459b8f Mon Sep 17 00:00:00 2001
From: Dhanjit Das <dhanjit@users.noreply.github.com>
Date: Thu, 1 Jan 2026 10:33:06 +0530
Subject: [PATCH 2/2] Polish: Rename AI player to DD

---
 web/js/main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/js/main.js b/web/js/main.js
index 89ee53da..027967ac 100644
--- a/web/js/main.js
+++ b/web/js/main.js
@@ -137,7 +137,7 @@ document.addEventListener('DOMContentLoaded', () => {
         game = new GameState(r, c);
 
         const playerNames = (gameMode === 'pvc')
-            ? { P1: 'YOU', P2: 'AI' }
+            ? { P1: 'YOU', P2: 'DD' }
             : { P1: 'P1', P2: 'P2' };
 
         ui = new UI(game, playerNames);