feat: added web view 1v1

src/app/components/chess-board/chess-board.component.ts

@@ -0,0 +1,90 @@
+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
+    };
+  }
+}