fix: NCWF-2 bugs and desing fixes (#7)

Co-authored-by: Lala, Shahd <Shahd.Lala@sybit.de> Reviewed-on: #7
2026-05-15 02:16:43 +02:00
parent 70a4debb40
commit c02414ea40
45 changed files with 3167 additions and 1277 deletions
@@ -0,0 +1,90 @@
+.player {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 12px 16px;
+  background: var(--nc-surface);
+  border: 1px solid var(--nc-border);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.player.is-turn {
+  border-color: var(--nc-neon-soft);
+  box-shadow: 0 0 0 1px rgba(255, 69, 200, 0.2), 0 0 20px rgba(255, 69, 200, 0.1);
+}
+
+.player-avatar {
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 17px;
+  font-weight: 700;
+  color: #fff;
+}
+
+.avatar-black {
+  background: linear-gradient(135deg, #2a2a40 0%, #0a0a14 100%);
+  border: 1px solid var(--nc-border-strong);
+}
+
+.avatar-white {
+  background: linear-gradient(135deg, var(--nc-neon) 0%, #7a2fd6 100%);
+}
+
+.player-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.player-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--nc-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.captured {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  font-size: 13px;
+  color: var(--nc-text-muted);
+  line-height: 1;
+}
+
+.clock {
+  font-family: var(--nc-mono);
+  font-size: 22px;
+  font-weight: 600;
+  padding: 8px 14px;
+  min-width: 92px;
+  text-align: center;
+  background: var(--nc-clock-bg);
+  border: 1px solid var(--nc-border);
+  color: var(--nc-text);
+  letter-spacing: 0.02em;
+  transition: color 0.2s, border-color 0.2s, background 0.2s, text-shadow 0.2s;
+}
+
+.clock.clock-active {
+  color: var(--nc-neon);
+  border-color: var(--nc-neon-soft);
+  background: var(--nc-neon-clock-bg, rgba(255, 69, 200, 0.08));
+  text-shadow: 0 0 8px rgba(255, 69, 200, 0.4);
+}
+
+.clock.clock-low {
+  color: var(--nc-warning);
+  border-color: var(--nc-warning-soft, rgba(255, 177, 58, 0.4));
+}
@@ -0,0 +1,22 @@
+<div class="player" [class.is-turn]="isActive">
+  <div class="player-avatar" [class.avatar-black]="color === 'black'" [class.avatar-white]="color === 'white'">
+    {{ initial }}
+  </div>
+
+  <div class="player-info">
+    <div class="player-name">{{ name }}</div>
+    @if (capturedPieces.length > 0) {
+      <div class="captured">
+        @for (pc of capturedPieces; track $index) {
+          <span class="pc">{{ pc }}</span>
+        }
+      </div>
+    }
+  </div>
+
+  @if (clockDisplay !== '--:--') {
+    <div class="clock" [class.clock-active]="isActive" [class.clock-low]="isLowTime && !isActive">
+      {{ clockDisplay }}
+    </div>
+  }
+</div>
@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-player-card',
+  standalone: true,
+  imports: [],
+  templateUrl: './player-card.component.html',
+  styleUrl: './player-card.component.css'
+})
+export class PlayerCardComponent {
+  @Input({ required: true }) name = '';
+  @Input({ required: true }) initial = '';
+  @Input({ required: true }) color: 'white' | 'black' = 'white';
+  @Input() isActive = false;
+  @Input() clockDisplay = '--:--';
+  @Input() isLowTime = false;
+  @Input() capturedPieces: string[] = [];
+}