feat: added game active page
This commit is contained in:
Lala, Shahd
@@ -3,10 +3,12 @@ import { GameComponent } from './pages/game/game.component';
|
||||
import { WelcomeComponent } from './pages/welcome/welcome.component';
|
||||
import { ProfileComponent } from './pages/profile/profile.component';
|
||||
import { ChallengesComponent } from './pages/challenges/challenges.component';
|
||||
import { GamesComponent } from './pages/games/games.component';
|
||||
|
||||
export const routes: Routes = [
|
||||
{ path: '', component: WelcomeComponent },
|
||||
{ path: 'profile', component: ProfileComponent },
|
||||
{ path: 'games', component: GamesComponent },
|
||||
{ path: 'challenges', component: ChallengesComponent },
|
||||
{ path: 'game/:gameId', component: GameComponent },
|
||||
{ path: '**', redirectTo: '' }
|
||||
|
||||
@@ -165,6 +165,30 @@
|
||||
padding: 0 3px;
|
||||
}
|
||||
|
||||
/* ============ GAMES BUTTON ============ */
|
||||
.nc-games-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
height: 36px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid var(--nc-border);
|
||||
background: transparent;
|
||||
color: var(--nc-text-muted);
|
||||
font-family: inherit;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.nc-games-btn:hover {
|
||||
background: var(--nc-accent-hover);
|
||||
color: var(--nc-text);
|
||||
}
|
||||
|
||||
/* ============ PROFILE BUTTON ============ */
|
||||
.nc-profile {
|
||||
display: flex;
|
||||
|
||||
@@ -101,6 +101,18 @@
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Games quick-access -->
|
||||
<button type="button" class="nc-games-btn" (click)="goToGames()">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"
|
||||
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>
|
||||
Games
|
||||
</button>
|
||||
|
||||
<!-- Profile -->
|
||||
<div class="nc-dropdown-wrap" data-dropdown="profile">
|
||||
<button type="button" class="nc-profile" [class.is-open]="profileOpen" (click)="toggleProfile($event)">
|
||||
|
||||
@@ -161,6 +161,12 @@ export class ToolbarComponent implements OnInit {
|
||||
void this.router.navigate(['/profile']);
|
||||
}
|
||||
|
||||
goToGames(): void {
|
||||
this.profileOpen = false;
|
||||
this.notifOpen = false;
|
||||
void this.router.navigate(['/games']);
|
||||
}
|
||||
|
||||
goToChallenges(): void {
|
||||
this.profileOpen = false;
|
||||
this.notifOpen = false;
|
||||
|
||||
@@ -8,6 +8,7 @@ import { GameCompletionService } from '../../services/game-completion.service';
|
||||
import { GameImportService } from '../../services/game-import.service';
|
||||
import { BoardSelectionService, BoardSelection } from '../../services/board-selection.service';
|
||||
import { GameStreamService } from '../../services/game-stream.service';
|
||||
import { GameHistoryService } from '../../services/game-history.service';
|
||||
|
||||
@Injectable()
|
||||
export class GameFacade implements OnDestroy {
|
||||
@@ -37,6 +38,7 @@ export class GameFacade implements OnDestroy {
|
||||
private readonly importService = inject(GameImportService);
|
||||
private readonly boardSelectionService = inject(BoardSelectionService);
|
||||
private readonly streamService = inject(GameStreamService);
|
||||
private readonly gameHistory = inject(GameHistoryService);
|
||||
|
||||
get state(): GameState | null {
|
||||
return this.game?.state ?? null;
|
||||
@@ -212,6 +214,7 @@ export class GameFacade implements OnDestroy {
|
||||
this.clockSyncedAt = Date.now();
|
||||
this.loading = false;
|
||||
this.updateGameCompletion();
|
||||
this.gameHistory.recordGame(this.gameId);
|
||||
this.startStreaming();
|
||||
this.tryMakeBotMove();
|
||||
},
|
||||
|
||||
@@ -0,0 +1,366 @@
|
||||
:host {
|
||||
--nc-neon: #ff45c8;
|
||||
--nc-bg: #06060d;
|
||||
--nc-surface: rgba(20, 17, 42, 0.6);
|
||||
--nc-text: #fff;
|
||||
--nc-text-muted: rgba(255, 255, 255, 0.65);
|
||||
--nc-text-dim: rgba(255, 255, 255, 0.45);
|
||||
--nc-border: rgba(255, 255, 255, 0.08);
|
||||
--nc-border-strong: rgba(255, 255, 255, 0.15);
|
||||
--nc-success: #5ee5a1;
|
||||
--nc-danger: #ff7a7a;
|
||||
--nc-sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--nc-mono: "JetBrains Mono", "Fira Code", monospace;
|
||||
|
||||
display: block;
|
||||
min-height: 100vh;
|
||||
background: var(--nc-bg);
|
||||
font-family: var(--nc-sans);
|
||||
color: var(--nc-text);
|
||||
}
|
||||
|
||||
:host-context(html:not([data-theme='dark'])) {
|
||||
--nc-neon: #c026d3;
|
||||
--nc-bg: #f5f0fc;
|
||||
--nc-surface: rgba(255, 255, 255, 0.88);
|
||||
--nc-text: #0f0022;
|
||||
--nc-text-muted: rgba(15, 0, 34, 0.65);
|
||||
--nc-text-dim: rgba(15, 0, 34, 0.4);
|
||||
--nc-border: rgba(15, 0, 34, 0.1);
|
||||
--nc-border-strong: rgba(15, 0, 34, 0.2);
|
||||
--nc-success: #16a34a;
|
||||
--nc-danger: #dc2626;
|
||||
}
|
||||
|
||||
.games-shell {
|
||||
padding-top: 72px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.page {
|
||||
max-width: 760px;
|
||||
margin: 0 auto;
|
||||
padding: 32px 20px 64px;
|
||||
}
|
||||
|
||||
/* ── Breadcrumb ─────────────────────────── */
|
||||
.crumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 28px;
|
||||
font-size: 11px;
|
||||
color: var(--nc-text-dim);
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.crumb-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: var(--nc-text-dim);
|
||||
text-decoration: none;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
.crumb-link:hover { color: var(--nc-neon); }
|
||||
|
||||
.crumb-sep { opacity: 0.4; }
|
||||
|
||||
.crumb-current {
|
||||
color: var(--nc-text-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ── Header ─────────────────────────────── */
|
||||
.page-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 28px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--nc-text);
|
||||
}
|
||||
|
||||
/* ── Tabs ───────────────────────────────── */
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
background: var(--nc-surface);
|
||||
border: 1px solid var(--nc-border);
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--nc-text-muted);
|
||||
font-family: var(--nc-sans);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
padding: 6px 16px;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.tab-btn:hover { color: var(--nc-text); }
|
||||
|
||||
.tab-btn.active {
|
||||
background: var(--nc-neon);
|
||||
color: #1a0014;
|
||||
}
|
||||
|
||||
:host-context(html:not([data-theme='dark'])) .tab-btn.active { color: #fff; }
|
||||
|
||||
.tab-badge {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
color: inherit;
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
padding: 1px 5px;
|
||||
border-radius: 8px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* ── State messages ─────────────────────── */
|
||||
.state-msg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: var(--nc-text-dim);
|
||||
font-size: 13px;
|
||||
padding: 32px 0;
|
||||
}
|
||||
|
||||
.pulse {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--nc-neon);
|
||||
animation: pulse-ring 1.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-ring {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.4; transform: scale(0.6); }
|
||||
}
|
||||
|
||||
/* ── Empty state ────────────────────────── */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 64px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border: 1px solid var(--nc-border);
|
||||
background: var(--nc-surface);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--nc-text-dim);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--nc-text);
|
||||
}
|
||||
|
||||
.empty-sub {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: var(--nc-text-dim);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
margin-top: 12px;
|
||||
background: var(--nc-neon);
|
||||
color: #1a0014;
|
||||
border: none;
|
||||
padding: 9px 22px;
|
||||
font-family: var(--nc-sans);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
cursor: pointer;
|
||||
transition: filter 0.15s;
|
||||
}
|
||||
|
||||
:host-context(html:not([data-theme='dark'])) .btn-primary { color: #fff; }
|
||||
|
||||
.btn-primary:hover { filter: brightness(1.1); }
|
||||
|
||||
/* ── Game list ──────────────────────────── */
|
||||
.game-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
border: 1px solid var(--nc-border);
|
||||
background: var(--nc-surface);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.game-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 14px 18px;
|
||||
border-bottom: 1px solid var(--nc-border);
|
||||
transition: background 0.12s;
|
||||
}
|
||||
|
||||
.game-row:last-child { border-bottom: none; }
|
||||
|
||||
.game-row:hover { background: rgba(255, 255, 255, 0.03); }
|
||||
|
||||
:host-context(html:not([data-theme='dark'])) .game-row:hover {
|
||||
background: rgba(192, 38, 211, 0.04);
|
||||
}
|
||||
|
||||
.game-row-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.game-players {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.player { color: var(--nc-text); }
|
||||
|
||||
.vs-sep {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
color: var(--nc-text-dim);
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.game-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
color: var(--nc-text-dim);
|
||||
font-family: var(--nc-mono);
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.active-dot {
|
||||
background: var(--nc-success);
|
||||
box-shadow: 0 0 6px var(--nc-success);
|
||||
}
|
||||
|
||||
.finished-dot {
|
||||
background: var(--nc-text-dim);
|
||||
}
|
||||
|
||||
.status-text { color: var(--nc-text-muted); }
|
||||
|
||||
.meta-sep { opacity: 0.4; }
|
||||
|
||||
.meta-item { color: var(--nc-text-dim); }
|
||||
|
||||
.game-id-label {
|
||||
font-size: 10px;
|
||||
color: var(--nc-text-dim);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* ── Row actions ────────────────────────── */
|
||||
.game-row-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.btn-resume,
|
||||
.btn-view {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 14px;
|
||||
border: none;
|
||||
font-family: var(--nc-sans);
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
transition: filter 0.15s;
|
||||
}
|
||||
|
||||
.btn-resume {
|
||||
background: var(--nc-neon);
|
||||
color: #1a0014;
|
||||
}
|
||||
|
||||
:host-context(html:not([data-theme='dark'])) .btn-resume { color: #fff; }
|
||||
|
||||
.btn-resume:hover { filter: brightness(1.1); }
|
||||
|
||||
.btn-view {
|
||||
background: transparent;
|
||||
color: var(--nc-text-muted);
|
||||
border: 1px solid var(--nc-border-strong);
|
||||
}
|
||||
|
||||
.btn-view:hover {
|
||||
color: var(--nc-neon);
|
||||
border-color: var(--nc-neon);
|
||||
}
|
||||
|
||||
.btn-remove {
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
color: var(--nc-text-dim);
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: color 0.15s, border-color 0.15s;
|
||||
}
|
||||
|
||||
.btn-remove:hover {
|
||||
color: var(--nc-danger);
|
||||
border-color: var(--nc-border);
|
||||
}
|
||||
@@ -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>
|
||||
@@ -0,0 +1,100 @@
|
||||
import { Component, DestroyRef, OnInit, inject } from '@angular/core';
|
||||
import { Router, RouterLink } from '@angular/router';
|
||||
import { forkJoin, of } from 'rxjs';
|
||||
import { catchError } from 'rxjs/operators';
|
||||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
||||
import { AuthService } from '../../services/auth.service';
|
||||
import { GameApiService } from '../../services/game-api.service';
|
||||
import { GameHistoryService } from '../../services/game-history.service';
|
||||
import { GameFull, GameStatus } from '../../models/game.models';
|
||||
|
||||
type GamesTab = 'active' | 'history';
|
||||
|
||||
const FINISHED_STATUSES: GameStatus[] = [
|
||||
'checkmate', 'stalemate', 'resign', 'draw', 'insufficientMaterial'
|
||||
];
|
||||
|
||||
@Component({
|
||||
selector: 'app-games',
|
||||
standalone: true,
|
||||
imports: [RouterLink],
|
||||
templateUrl: './games.component.html',
|
||||
styleUrl: './games.component.css'
|
||||
})
|
||||
export class GamesComponent implements OnInit {
|
||||
private readonly destroyRef = inject(DestroyRef);
|
||||
private readonly router = inject(Router);
|
||||
private readonly authService = inject(AuthService);
|
||||
private readonly gameApi = inject(GameApiService);
|
||||
private readonly gameHistory = inject(GameHistoryService);
|
||||
|
||||
tab: GamesTab = 'active';
|
||||
loading = true;
|
||||
activeGames: GameFull[] = [];
|
||||
finishedGames: GameFull[] = [];
|
||||
|
||||
ngOnInit(): void {
|
||||
this.authService.currentUser$
|
||||
.pipe(takeUntilDestroyed(this.destroyRef))
|
||||
.subscribe((user) => {
|
||||
if (!user) void this.router.navigate(['/']);
|
||||
});
|
||||
|
||||
this.loadGames();
|
||||
}
|
||||
|
||||
setTab(tab: GamesTab): void {
|
||||
this.tab = tab;
|
||||
}
|
||||
|
||||
resumeGame(gameId: string): void {
|
||||
void this.router.navigate(['/game', gameId]);
|
||||
}
|
||||
|
||||
removeGame(gameId: string): void {
|
||||
this.gameHistory.removeGame(gameId);
|
||||
this.activeGames = this.activeGames.filter((g) => g.gameId !== gameId);
|
||||
this.finishedGames = this.finishedGames.filter((g) => g.gameId !== gameId);
|
||||
}
|
||||
|
||||
statusLabel(status: GameStatus): string {
|
||||
const labels: Record<GameStatus, string> = {
|
||||
started: 'In Progress',
|
||||
check: 'Check',
|
||||
checkmate: 'Checkmate',
|
||||
stalemate: 'Stalemate',
|
||||
resign: 'Resigned',
|
||||
draw: 'Draw',
|
||||
drawOffered: 'Draw Offered',
|
||||
fiftyMoveAvailable: 'In Progress',
|
||||
promotionPending: 'In Progress',
|
||||
insufficientMaterial: 'Draw'
|
||||
};
|
||||
return labels[status] ?? status;
|
||||
}
|
||||
|
||||
isFinished(status: GameStatus): boolean {
|
||||
return FINISHED_STATUSES.includes(status);
|
||||
}
|
||||
|
||||
private loadGames(): void {
|
||||
const ids = this.gameHistory.getGameIds();
|
||||
if (ids.length === 0) {
|
||||
this.loading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const requests = ids.map((id) =>
|
||||
this.gameApi.getGame(id).pipe(catchError(() => of(null)))
|
||||
);
|
||||
|
||||
forkJoin(requests)
|
||||
.pipe(takeUntilDestroyed(this.destroyRef))
|
||||
.subscribe((results) => {
|
||||
const valid = results.filter((g): g is GameFull => g !== null);
|
||||
this.activeGames = valid.filter((g) => !FINISHED_STATUSES.includes(g.state.status));
|
||||
this.finishedGames = valid.filter((g) => FINISHED_STATUSES.includes(g.state.status));
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
const STORAGE_KEY = 'nowchess.games';
|
||||
const MAX_ENTRIES = 50;
|
||||
|
||||
interface GameEntry {
|
||||
id: string;
|
||||
addedAt: number;
|
||||
}
|
||||
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class GameHistoryService {
|
||||
recordGame(gameId: string): void {
|
||||
const entries = this.load().filter((e) => e.id !== gameId);
|
||||
entries.unshift({ id: gameId, addedAt: Date.now() });
|
||||
this.save(entries.slice(0, MAX_ENTRIES));
|
||||
}
|
||||
|
||||
getGameIds(): string[] {
|
||||
return this.load().map((e) => e.id);
|
||||
}
|
||||
|
||||
removeGame(gameId: string): void {
|
||||
this.save(this.load().filter((e) => e.id !== gameId));
|
||||
}
|
||||
|
||||
private load(): GameEntry[] {
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY);
|
||||
return raw ? (JSON.parse(raw) as GameEntry[]) : [];
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
private save(entries: GameEntry[]): void {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(entries));
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user