fix: NCWF-2 bugs and desing fixes (#7)
Co-authored-by: Lala, Shahd <Shahd.Lala@sybit.de> Reviewed-on: #7
This commit was merged in pull request #7.
This commit is contained in:
@@ -0,0 +1,156 @@
|
||||
<div class="games-shell">
|
||||
<div class="page">
|
||||
|
||||
<!-- Breadcrumb -->
|
||||
<nav class="crumb" aria-label="Breadcrumb">
|
||||
<a routerLink="/" class="crumb-link">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="15 18 9 12 15 6" />
|
||||
</svg>
|
||||
Back to lobby
|
||||
</a>
|
||||
<span class="crumb-sep">/</span>
|
||||
<span class="crumb-current">Games</span>
|
||||
</nav>
|
||||
|
||||
<!-- Header -->
|
||||
<header class="page-header">
|
||||
<h1 class="page-title">Games</h1>
|
||||
|
||||
<!-- Tabs -->
|
||||
<div class="tabs" role="tablist">
|
||||
<button type="button" class="tab-btn" [class.active]="tab === 'active'" role="tab"
|
||||
(click)="setTab('active')">
|
||||
Active
|
||||
@if (activeGames.length > 0) {
|
||||
<span class="tab-badge">{{ activeGames.length }}</span>
|
||||
}
|
||||
</button>
|
||||
<button type="button" class="tab-btn" [class.active]="tab === 'history'" role="tab"
|
||||
(click)="setTab('history')">
|
||||
History
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Content -->
|
||||
@if (loading) {
|
||||
<div class="state-msg">
|
||||
<span class="pulse"></span>
|
||||
Loading games…
|
||||
</div>
|
||||
} @else if (tab === 'active') {
|
||||
|
||||
@if (activeGames.length === 0) {
|
||||
<div class="empty-state">
|
||||
<div class="empty-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="2" y="2" width="20" height="20" rx="2"/>
|
||||
<path d="M8 12h8M12 8v8"/>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="empty-title">No active games</p>
|
||||
<p class="empty-sub">Start a new game from the lobby to see it here.</p>
|
||||
<a routerLink="/" class="btn-primary">Go to lobby</a>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="game-list">
|
||||
@for (game of activeGames; track game.gameId) {
|
||||
<div class="game-row">
|
||||
<div class="game-row-main">
|
||||
<div class="game-players">
|
||||
<span class="player white-player">{{ game.white.displayName }}</span>
|
||||
<span class="vs-sep">vs</span>
|
||||
<span class="player black-player">{{ game.black.displayName }}</span>
|
||||
</div>
|
||||
<div class="game-meta">
|
||||
<span class="status-dot active-dot"></span>
|
||||
<span class="status-text">{{ statusLabel(game.state.status) }}</span>
|
||||
<span class="meta-sep">·</span>
|
||||
<span class="meta-item">{{ game.state.moves.length }} moves</span>
|
||||
<span class="meta-sep">·</span>
|
||||
<span class="game-id-label">{{ game.gameId.slice(0, 8) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="game-row-actions">
|
||||
<button type="button" class="btn-resume" (click)="resumeGame(game.gameId)">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<polygon points="5 3 19 12 5 21 5 3"/>
|
||||
</svg>
|
||||
Resume
|
||||
</button>
|
||||
<button type="button" class="btn-remove" title="Remove from list" (click)="removeGame(game.gameId)">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
} @else {
|
||||
|
||||
@if (finishedGames.length === 0) {
|
||||
<div class="empty-state">
|
||||
<div class="empty-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M14.5 17.5L3 6"/>
|
||||
<path d="M13 19l6-6"/><path d="M16 16l4 4"/>
|
||||
<path d="M19 21l2-2"/><path d="M15 5l4 4"/>
|
||||
<path d="M21 3l-3 1-4 4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="empty-title">No game history yet</p>
|
||||
<p class="empty-sub">Completed games will appear here.</p>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="game-list">
|
||||
@for (game of finishedGames; track game.gameId) {
|
||||
<div class="game-row">
|
||||
<div class="game-row-main">
|
||||
<div class="game-players">
|
||||
<span class="player white-player">{{ game.white.displayName }}</span>
|
||||
<span class="vs-sep">vs</span>
|
||||
<span class="player black-player">{{ game.black.displayName }}</span>
|
||||
</div>
|
||||
<div class="game-meta">
|
||||
<span class="status-dot finished-dot"></span>
|
||||
<span class="status-text">{{ statusLabel(game.state.status) }}</span>
|
||||
<span class="meta-sep">·</span>
|
||||
<span class="meta-item">{{ game.state.moves.length }} moves</span>
|
||||
<span class="meta-sep">·</span>
|
||||
<span class="game-id-label">{{ game.gameId.slice(0, 8) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="game-row-actions">
|
||||
<button type="button" class="btn-view" (click)="resumeGame(game.gameId)">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
</svg>
|
||||
View
|
||||
</button>
|
||||
<button type="button" class="btn-remove" title="Remove from list" (click)="removeGame(game.gameId)">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user