+
@for (square of squares; track trackByCoordinate($index, square)) {
diff --git a/src/app/components/chess-board/chess-board.component.ts b/src/app/components/chess-board/chess-board.component.ts
index dc38701..0a1a1a8 100644
--- a/src/app/components/chess-board/chess-board.component.ts
+++ b/src/app/components/chess-board/chess-board.component.ts
@@ -7,6 +7,8 @@ interface BoardSquare {
pieceCode: string | null;
}
+type BoardTheme = 'arabian' | 'classic';
+
@Component({
selector: 'app-chess-board',
standalone: true,
@@ -18,6 +20,7 @@ export class ChessBoardComponent implements OnChanges {
@Input({ required: true }) fen = '';
@Input() selectedSquare: string | null = null;
@Input() highlightedSquares: string[] = [];
+ @Input() boardTheme: BoardTheme = 'arabian';
@Output() squareSelected = new EventEmitter
();
squares: BoardSquare[] = [];
diff --git a/src/app/components/chess-piece/chess-piece.component.ts b/src/app/components/chess-piece/chess-piece.component.ts
index bdfb755..6b3e125 100644
--- a/src/app/components/chess-piece/chess-piece.component.ts
+++ b/src/app/components/chess-piece/chess-piece.component.ts
@@ -1,5 +1,7 @@
import { Component, EventEmitter, Input, Output } from '@angular/core';
+type BoardTheme = 'arabian' | 'classic';
+
@Component({
selector: 'app-chess-piece',
standalone: true,
@@ -8,6 +10,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
})
export class ChessPieceComponent {
@Input({ required: true }) pieceCode: string | null = null;
+ @Input() boardTheme: BoardTheme = 'arabian';
@Input() draggable = false;
@Output() pieceDragStart = new EventEmitter();
@Output() pieceDragEnd = new EventEmitter();
@@ -30,12 +33,21 @@ export class ChessPieceComponent {
return '';
}
- const color = this.pieceCode === this.pieceCode.toUpperCase() ? 'white' : 'black';
- const pieceName = this.getPieceName(this.pieceCode.toLowerCase());
- return `/arabian-chess/sprites/pieces/${color}_${pieceName}.png`;
+ const isWhite = this.pieceCode === this.pieceCode.toUpperCase();
+ const pieceCode = this.pieceCode.toLowerCase();
+
+ if (this.boardTheme === 'classic') {
+ const colorPrefix = isWhite ? 'w' : 'b';
+ const classicPieceName = this.getClassicPieceName(pieceCode);
+ return `/assets/ChessAssets/${colorPrefix}_${classicPieceName}.png`;
+ }
+
+ const arabianColor = isWhite ? 'white' : 'black';
+ const arabianPieceName = this.getArabianPieceName(pieceCode);
+ return `/assets/arabian-chess/sprites/pieces/${arabianColor}_${arabianPieceName}.png`;
}
- private getPieceName(piece: string): string {
+ private getArabianPieceName(piece: string): string {
switch (piece) {
case 'k':
return 'king';
@@ -53,4 +65,23 @@ export class ChessPieceComponent {
return 'pawn';
}
}
+
+ private getClassicPieceName(piece: string): string {
+ switch (piece) {
+ case 'k':
+ return 'King';
+ case 'q':
+ return 'Queen';
+ case 'r':
+ return 'Rook';
+ case 'b':
+ return 'Bishop';
+ case 'n':
+ return 'Knight';
+ case 'p':
+ return 'Pawn';
+ default:
+ return 'Pawn';
+ }
+ }
}
diff --git a/src/app/pages/game/game.component.css b/src/app/pages/game/game.component.css
index b9ca9ea..611d0b5 100644
--- a/src/app/pages/game/game.component.css
+++ b/src/app/pages/game/game.component.css
@@ -48,6 +48,39 @@ h2 {
flex: 0 0 auto;
}
+.board-theme-card {
+ background: var(--color-bg-card);
+ border: var(--border-width) solid var(--color-border);
+ border-radius: var(--border-radius-md);
+ padding: var(--size-md-padding);
+ display: grid;
+ gap: var(--size-sm);
+}
+
+.board-theme-card h3 {
+ margin: 0;
+ color: var(--color-text-primary);
+ font-size: 1rem;
+}
+
+.board-theme-group {
+ display: flex;
+ gap: var(--size-md);
+ flex-wrap: wrap;
+}
+
+.board-theme-option {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--size-xs);
+ color: var(--color-text-primary);
+ font-weight: 600;
+}
+
+.board-theme-option input {
+ accent-color: var(--color-primary);
+}
+
.move-card {
padding: var(--size-lg-padding);
}
diff --git a/src/app/pages/game/game.component.html b/src/app/pages/game/game.component.html
index e0df059..9d54af4 100644
--- a/src/app/pages/game/game.component.html
+++ b/src/app/pages/game/game.component.html
@@ -48,11 +48,37 @@
[fen]="facade.state.fen"
[selectedSquare]="facade.selectedSquare"
[highlightedSquares]="facade.highlightedSquares"
+ [boardTheme]="boardTheme"
(squareSelected)="facade.onBoardSquareSelected($event)"
/>
+ 
- 
+ 
+ 
+ 