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-board/chess-board.component.css

@@ -27,12 +27,56 @@
   cursor: pointer;
 }
 
+.square[draggable='true'] {
+  cursor: grab;
+}
+
+.square.drag-source {
+  opacity: 0.65;
+  cursor: grabbing;
+}
+
+.square.drag-over {
+  outline: 3px dashed var(--color-primary);
+  outline-offset: -4px;
+}
+
 .square.light {
-  background-image: url('/arabian-chess/sprites/board/board_square_white.png');
+  background-image: url('/assets/arabian-chess/sprites/board/board_square_white.png');
 }
 
 .square.dark {
-  background-image: url('/arabian-chess/sprites/board/board_square_black.png');
+  background-image: url('/assets/arabian-chess/sprites/board/board_square_black.png');
+}
+
+.board-grid--classic {
+  border-radius: var(--border-radius-md);
+}
+
+.board-grid--classic .square {
+  background-image: none;
+  transition: filter 160ms ease;
+}
+
+.board-grid--classic .square.light {
+  background-color: #f3c8a0;
+}
+
+.board-grid--classic .square.dark {
+  background-color: #ba6d4b;
+}
+
+.board-grid--classic .square.drag-over {
+  outline-color: #5a2c28;
+}
+
+.board-grid--classic .square.selected {
+  outline-color: #5a2c28;
+}
+
+.board-grid--classic .square.highlighted::after {
+  background: #b9dad1;
+  border-color: #5a2c28;
 }
 
 .square.highlighted::after {

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

@@ -1,5 +1,5 @@
 <div class="board-shell">
-  <div class="board-grid">
+  <div class="board-grid" [class.board-grid--classic]="boardTheme === 'classic'" [class.board-grid--arabian]="boardTheme === 'arabian'">
     @for (square of squares; track trackByCoordinate($index, square)) {
       <button
         type="button"
@@ -8,13 +8,25 @@
         [class.dark]="!square.isLight"
         [class.selected]="isSelected(square)"
         [class.highlighted]="isHighlighted(square)"
+        [class.drag-source]="isDraggingSource(square)"
+        [class.drag-over]="isDragOver(square)"
         [attr.data-square]="square.coordinate"
         (click)="onSquareClick(square)"
+        (dragover)="onSquareDragOver($event, square)"
+        (drop)="onSquareDrop($event, square)"
       >
-        <app-chess-piece [pieceCode]="square.pieceCode" />
+        <app-chess-piece
+          [pieceCode]="square.pieceCode"
+          [boardTheme]="boardTheme"
+          [draggable]="!!square.pieceCode"
+          (pieceDragStart)="onPieceDragStart($event, square)"
+          (pieceDragEnd)="onSquareDragEnd()"
+        />
       </button>
     }
   </div>
 
-  <img class="board-bottom" src="/arabian-chess/sprites/board/board_bottom.png" alt="Board frame" />
+  @if (boardTheme === 'arabian') {
+    <img class="board-bottom" src="/assets/arabian-chess/sprites/board/board_bottom.png" alt="Board frame" />
+  }
 </div>

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,10 +20,14 @@ 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<string>();
 
   squares: BoardSquare[] = [];
   private highlightedSquareSet = new Set<string>();
+  private draggingFromSquare: string | null = null;
+  private dragOverSquare: string | null = null;
+  private suppressNextClick = false;
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes['fen']) {
@@ -38,9 +44,61 @@ export class ChessBoardComponent implements OnChanges {
   }
 
   onSquareClick(square: BoardSquare): void {
+    if (this.suppressNextClick) {
+      this.suppressNextClick = false;
+      return;
+    }
+
     this.squareSelected.emit(square.coordinate);
   }
 
+  onPieceDragStart(event: DragEvent, square: BoardSquare): void {
+    if (!square.pieceCode) {
+      event.preventDefault();
+      return;
+    }
+
+    this.draggingFromSquare = square.coordinate;
+    if (event.dataTransfer) {
+      event.dataTransfer.setData('text/plain', square.coordinate);
+      event.dataTransfer.effectAllowed = 'move';
+    }
+    this.squareSelected.emit(square.coordinate);
+  }
+
+  onSquareDragOver(event: DragEvent, square: BoardSquare): void {
+    if (!this.draggingFromSquare) {
+      return;
+    }
+
+    event.preventDefault();
+    if (event.dataTransfer) {
+      event.dataTransfer.dropEffect = 'move';
+    }
+    this.dragOverSquare = square.coordinate === this.draggingFromSquare ? null : square.coordinate;
+  }
+
+  onSquareDrop(event: DragEvent, square: BoardSquare): void {
+    event.preventDefault();
+    if (!this.draggingFromSquare) {
+      return;
+    }
+
+    const fromSquare = this.draggingFromSquare;
+    this.clearDragState();
+
+    if (fromSquare === square.coordinate) {
+      return;
+    }
+
+    this.suppressNextClick = true;
+    this.squareSelected.emit(square.coordinate);
+  }
+
+  onSquareDragEnd(): void {
+    this.clearDragState();
+  }
+
   isSelected(square: BoardSquare): boolean {
     return this.selectedSquare === square.coordinate;
   }
@@ -49,6 +107,14 @@ export class ChessBoardComponent implements OnChanges {
     return this.highlightedSquareSet.has(square.coordinate);
   }
 
+  isDraggingSource(square: BoardSquare): boolean {
+    return this.draggingFromSquare === square.coordinate;
+  }
+
+  isDragOver(square: BoardSquare): boolean {
+    return this.dragOverSquare === square.coordinate;
+  }
+
   private buildSquares(fen: string): BoardSquare[] {
     const placement = fen.split(' ')[0] ?? '';
     const rows = placement.split('/');
@@ -87,4 +153,9 @@ export class ChessBoardComponent implements OnChanges {
       pieceCode
     };
   }
+
+  private clearDragState(): void {
+    this.draggingFromSquare = null;
+    this.dragOverSquare = null;
+  }
 }