feat: NCS-63 User account implementation (#2)

User Profile info, no game before login/register, menu bar

---------

Co-authored-by: Lala, Shahd <Shahd.Lala@sybit.de>
Co-authored-by: shahdlala66 <shahd.lala66@gmail.com>
Reviewed-on: #2

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

@@ -3,7 +3,15 @@
   height: clamp(40px, 8cqh, 120px);
   display: block;
   object-fit: contain;
-  pointer-events: none;
+  pointer-events: auto;
+}
+
+.piece[draggable='true'] {
+  cursor: grab;
+}
+
+.piece[draggable='true']:active {
+  cursor: grabbing;
 }
 
 @media (max-width: 991px) {

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

@@ -1,3 +1,10 @@
 @if (pieceCode) {
-  <img class="piece" [src]="spriteUrl" [alt]="pieceCode" />
+  <img
+    class="piece"
+    [src]="spriteUrl"
+    [alt]="pieceCode"
+    [attr.draggable]="draggable ? 'true' : null"
+    (dragstart)="onDragStart($event)"
+    (dragend)="onDragEnd()"
+  />
 }

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

@@ -1,4 +1,6 @@
-import { Component, Input } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+type BoardTheme = 'arabian' | 'classic';
 
 @Component({
   selector: 'app-chess-piece',
@@ -8,18 +10,44 @@ import { Component, Input } from '@angular/core';
 })
 export class ChessPieceComponent {
   @Input({ required: true }) pieceCode: string | null = null;
+  @Input() boardTheme: BoardTheme = 'arabian';
+  @Input() draggable = false;
+  @Output() pieceDragStart = new EventEmitter<DragEvent>();
+  @Output() pieceDragEnd = new EventEmitter<void>();
+
+  onDragStart(event: DragEvent): void {
+    if (!this.draggable) {
+      event.preventDefault();
+      return;
+    }
+
+    this.pieceDragStart.emit(event);
+  }
+
+  onDragEnd(): void {
+    this.pieceDragEnd.emit();
+  }
 
   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`;
+    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';
@@ -37,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';
+    }
+  }
 }