shahdlala66
91 lines
2.5 KiB
TypeScript
91 lines
2.5 KiB
TypeScript
import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
|
|
import { ChessPieceComponent } from '../chess-piece/chess-piece.component';
|
|
|
|
interface BoardSquare {
|
|
coordinate: string;
|
|
isLight: boolean;
|
|
pieceCode: string | null;
|
|
}
|
|
|
|
@Component({
|
|
selector: 'app-chess-board',
|
|
standalone: true,
|
|
imports: [ChessPieceComponent],
|
|
templateUrl: './chess-board.component.html',
|
|
styleUrl: './chess-board.component.css'
|
|
})
|
|
export class ChessBoardComponent implements OnChanges {
|
|
@Input({ required: true }) fen = '';
|
|
@Input() selectedSquare: string | null = null;
|
|
@Input() highlightedSquares: string[] = [];
|
|
@Output() squareSelected = new EventEmitter<string>();
|
|
|
|
squares: BoardSquare[] = [];
|
|
private highlightedSquareSet = new Set<string>();
|
|
|
|
ngOnChanges(changes: SimpleChanges): void {
|
|
if (changes['fen']) {
|
|
this.squares = this.buildSquares(this.fen);
|
|
}
|
|
|
|
if (changes['highlightedSquares']) {
|
|
this.highlightedSquareSet = new Set(this.highlightedSquares);
|
|
}
|
|
}
|
|
|
|
trackByCoordinate(_index: number, square: BoardSquare): string {
|
|
return square.coordinate;
|
|
}
|
|
|
|
onSquareClick(square: BoardSquare): void {
|
|
this.squareSelected.emit(square.coordinate);
|
|
}
|
|
|
|
isSelected(square: BoardSquare): boolean {
|
|
return this.selectedSquare === square.coordinate;
|
|
}
|
|
|
|
isHighlighted(square: BoardSquare): boolean {
|
|
return this.highlightedSquareSet.has(square.coordinate);
|
|
}
|
|
|
|
private buildSquares(fen: string): BoardSquare[] {
|
|
const placement = fen.split(' ')[0] ?? '';
|
|
const rows = placement.split('/');
|
|
if (rows.length !== 8) {
|
|
return [];
|
|
}
|
|
|
|
const squares: BoardSquare[] = [];
|
|
|
|
rows.forEach((row, rowIndex) => {
|
|
let column = 0;
|
|
|
|
for (const char of row) {
|
|
if (char >= '1' && char <= '8') {
|
|
const emptyCount = Number(char);
|
|
for (let step = 0; step < emptyCount; step += 1) {
|
|
squares.push(this.createSquare(rowIndex, column, null));
|
|
column += 1;
|
|
}
|
|
} else {
|
|
squares.push(this.createSquare(rowIndex, column, char));
|
|
column += 1;
|
|
}
|
|
}
|
|
});
|
|
|
|
return squares;
|
|
}
|
|
|
|
private createSquare(rowIndex: number, column: number, pieceCode: string | null): BoardSquare {
|
|
const file = String.fromCharCode(97 + column);
|
|
const rank = String(8 - rowIndex);
|
|
return {
|
|
coordinate: `${file}${rank}`,
|
|
isLight: (rowIndex + column) % 2 === 0,
|
|
pieceCode
|
|
};
|
|
}
|
|
}
|