feat: added web view 1v1

src/app/components/chess-piece/chess-piece.component.css

@@ -0,0 +1,7 @@
+.piece {
+  width: 90%;
+  height: 90%;
+  display: block;
+  object-fit: contain;
+  pointer-events: none;
+}

src/app/components/chess-piece/chess-piece.component.html

@@ -0,0 +1,3 @@
+@if (pieceCode) {
+  <img class="piece" [src]="spriteUrl" [alt]="pieceCode" />
+}

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

@@ -0,0 +1,40 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-chess-piece',
+  standalone: true,
+  templateUrl: './chess-piece.component.html',
+  styleUrl: './chess-piece.component.css'
+})
+export class ChessPieceComponent {
+  @Input({ required: true }) pieceCode: string | null = null;
+
+  get spriteUrl(): string {
+    if (!this.pieceCode) {
+      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`;
+  }
+
+  private getPieceName(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';
+    }
+  }
+}