Skip to content

Polish: Custom Player Labels (YOU vs AI) #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dhanjit wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Polish: Custom Player Labels (YOU vs AI) #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fd6e40c
Polish: Update player labels to YOU/AI in PvC mode
dhanjit Jan 1, 2026
4704c8a
Polish: Rename AI player to DD
dhanjit Jan 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions web/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down Expand Up @@ -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: 'DD' }
: { P1: 'P1', P2: 'P2' };

ui = new UI(game, playerNames);

// Setup AI Hooks
// Override UI's updateStatus to detect turn change?
Expand Down
18 changes: 12 additions & 6 deletions web/js/ui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -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!";
Expand All @@ -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'}`;
}
}
Expand Down