+
diff --git a/src/app/pages/bots/bots.component.ts b/src/app/pages/bots/bots.component.ts
new file mode 100644
index 0000000..a4915fe
--- /dev/null
+++ b/src/app/pages/bots/bots.component.ts
@@ -0,0 +1,111 @@
+import { Component, DestroyRef, OnInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterLink } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { BotService } from '../../services/bot.service';
+import { Bot, BotWithToken } from '../../models/bot.models';
+
+@Component({
+ selector: 'app-bots',
+ standalone: true,
+ imports: [CommonModule, RouterLink, FormsModule],
+ templateUrl: './bots.component.html',
+ styleUrl: './bots.component.css'
+})
+export class BotsComponent implements OnInit {
+ private readonly destroyRef = inject(DestroyRef);
+ private readonly botService = inject(BotService);
+
+ bots: Bot[] = [];
+ loading = true;
+
+ showCreate = false;
+ newBotName = '';
+ creating = false;
+ createError: string | null = null;
+
+ revealedTokens: Record
+
+
+
+
+
+
+ @if (showCreate) {
+
+
+
+ My Bots
+ +Bots are automated players owned by your account. Each has a token used to join tournaments and make moves.
+
+
+ }
+
+ @if (loading) {
+
+
+
+
+
+
+
+
+ @if (createError) {
+ {{ createError }}
+ } +Loading bots…
+ } @else if (bots.length === 0) {
+
+
+
+ } @else {
+ No bots yet
+Create a bot to join tournaments and play automated games.
+
+ @for (bot of bots; track bot.id) {
+
+ }
+
+
+
+ }
+
+
+
+ @if (revealedTokens[bot.id]) {
+ {{ bot.name.charAt(0).toUpperCase() }}
+
+ {{ bot.name }}
+
+
+
+
+
+
+
+
+ }
+
+
+ Token was just regenerated — the old one is now invalid. Keep this secret.
+
+
+
+ {{ revealedTokens[bot.id] }}
+
+
+
+
+@if (facade.resignConfirmPending) {
+
+}
+
@if (toastMessage) {
{{ toastMessage }}
diff --git a/src/app/pages/game/game.component.ts b/src/app/pages/game/game.component.ts
index 18b68c4..7bfaf36 100644
--- a/src/app/pages/game/game.component.ts
+++ b/src/app/pages/game/game.component.ts
@@ -4,7 +4,7 @@ import { ActivatedRoute, RouterLink } from '@angular/router';
import { BoardActionsBarComponent } from '../../components/board-actions-bar/board-actions-bar.component';
import { ChessBoardComponent } from '../../components/chess-board/chess-board.component';
import { ExportPanelComponent } from '../../components/export-panel/export-panel.component';
-import { MoveHistoryComponent, MoveNavDirection } from '../../components/move-history/move-history.component';
+import { MoveHistoryComponent } from '../../components/move-history/move-history.component';
import { PlayerCardComponent } from '../../components/player-card/player-card.component';
import { PromotionDialogComponent } from '../../components/promotion-dialog/promotion-dialog.component';
import { GameFacade } from './game.facade';
@@ -158,12 +158,7 @@ export class GameComponent implements OnInit, OnDestroy {
}
onResign(): void {
- this.showToast('Resigned');
- }
-
- // ── Move history navigation ───────────────────────────────────
- onMoveNavigate(_direction: MoveNavDirection): void {
- // Visual-only for now; board always reflects live position.
+ this.facade.requestResign();
}
// ── Timer helpers ─────────────────────────────────────────────
@@ -199,6 +194,11 @@ export class GameComponent implements OnInit, OnDestroy {
this.blackTimerMs = clock.blackRemainingMs < 0
? -1
: Math.max(0, clock.blackRemainingMs - (!activeIsWhite ? elapsed : 0));
+
+ if ((this.whiteTimerMs !== null && this.whiteTimerMs <= 0 && clock.whiteRemainingMs > 0) ||
+ (this.blackTimerMs !== null && this.blackTimerMs <= 0 && clock.blackRemainingMs > 0)) {
+ this.facade.errorMessage = '';
+ }
}
private showToast(msg: string): void {
diff --git a/src/app/pages/game/game.facade.ts b/src/app/pages/game/game.facade.ts
index ae5d4b0..390e735 100644
--- a/src/app/pages/game/game.facade.ts
+++ b/src/app/pages/game/game.facade.ts
@@ -23,6 +23,11 @@ export class GameFacade implements OnDestroy {
gameCompletionMessage = '';
isGameFinished = false;
isPromotionDialogOpen = false;
+ resignConfirmPending = false;
+
+ private fenHistory: string[] = [];
+ private sessionStartPly = 0;
+ viewingPly: number | null = null;
private boardSelection: BoardSelection = {
selectedSquare: null,
@@ -52,6 +57,46 @@ export class GameFacade implements OnDestroy {
return this.boardSelection.highlightedSquares;
}
+ get displayFen(): string {
+ if (this.viewingPly !== null) {
+ const historyIndex = this.viewingPly - this.sessionStartPly;
+ return this.fenHistory[historyIndex] ?? this.game?.state.fen ?? '';
+ }
+ return this.game?.state.fen ?? '';
+ }
+
+ get isReviewing(): boolean {
+ return this.viewingPly !== null;
+ }
+
+ navigateToPly(ply: number): void {
+ const historyIndex = ply - this.sessionStartPly;
+ if (historyIndex < 0 || historyIndex >= this.fenHistory.length) return;
+ this.viewingPly = ply;
+ this.boardSelection = this.boardSelectionService.clearSelection();
+ }
+
+ navigateHistory(direction: 'first' | 'prev' | 'next' | 'last'): void {
+ const totalPly = this.sessionStartPly + this.fenHistory.length - 1;
+ const current = this.viewingPly ?? totalPly;
+
+ let next: number;
+ switch (direction) {
+ case 'first': next = this.sessionStartPly; break;
+ case 'prev': next = Math.max(this.sessionStartPly, current - 1); break;
+ case 'next': next = Math.min(totalPly, current + 1); break;
+ case 'last':
+ default: next = totalPly; break;
+ }
+
+ if (next === totalPly) {
+ this.viewingPly = null;
+ } else {
+ this.viewingPly = next;
+ }
+ this.boardSelection = this.boardSelectionService.clearSelection();
+ }
+
ngOnDestroy(): void {
this.streamService.cleanup();
this.botMoveService.cleanup();
@@ -63,7 +108,7 @@ export class GameFacade implements OnDestroy {
}
onBoardSquareSelected(square: string): void {
- if (!this.state) {
+ if (!this.state || this.viewingPly !== null) {
return;
}
@@ -123,6 +168,8 @@ export class GameFacade implements OnDestroy {
if (this.game) {
this.game = { ...this.game, state };
this.clockSyncedAt = Date.now();
+ this.pushFen(state.fen);
+ this.viewingPly = null;
this.updateGameCompletion();
}
this.moveInput = '';
@@ -171,6 +218,26 @@ export class GameFacade implements OnDestroy {
this.pendingPromotionMoves = [];
}
+ requestResign(): void {
+ this.resignConfirmPending = true;
+ }
+
+ cancelResign(): void {
+ this.resignConfirmPending = false;
+ }
+
+ confirmResign(): void {
+ this.resignConfirmPending = false;
+ this.gameApi
+ .resignGame(this.gameId)
+ .pipe(takeUntilDestroyed(this.destroyRef))
+ .subscribe({
+ error: (error) => {
+ this.errorMessage = getErrorMessage(error, 'Could not resign.');
+ }
+ });
+ }
+
importFen(): void {
this.errorMessage = '';
this.importService.importFen(
@@ -204,6 +271,8 @@ export class GameFacade implements OnDestroy {
this.errorMessage = '';
this.boardSelection = this.boardSelectionService.clearSelection();
this.streamService.cleanup();
+ this.fenHistory = [];
+ this.viewingPly = null;
this.gameApi
.getGame(this.gameId)
@@ -213,6 +282,8 @@ export class GameFacade implements OnDestroy {
this.game = game;
this.clockSyncedAt = Date.now();
this.loading = false;
+ this.sessionStartPly = game.state.moves.length;
+ this.fenHistory = [game.state.fen];
this.updateGameCompletion();
this.gameHistory.recordGame(this.gameId);
this.startStreaming();
@@ -237,7 +308,10 @@ export class GameFacade implements OnDestroy {
if (event.type === 'gameFull') {
this.game = event.game;
this.clockSyncedAt = Date.now();
- this.boardSelection = this.boardSelectionService.clearSelection();
+ this.pushFen(event.game.state.fen);
+ if (this.viewingPly === null) {
+ this.boardSelection = this.boardSelectionService.clearSelection();
+ }
this.updateGameCompletion();
this.tryMakeBotMove();
return;
@@ -247,8 +321,9 @@ export class GameFacade implements OnDestroy {
const moveCountBefore = this.game.state.moves.length;
this.game = { ...this.game, state: event.state };
this.clockSyncedAt = Date.now();
+ this.pushFen(event.state.fen);
this.updateGameCompletion();
- if (event.state.moves.length !== moveCountBefore) {
+ if (event.state.moves.length !== moveCountBefore && this.viewingPly === null) {
this.boardSelection = this.boardSelectionService.clearSelection();
this.tryMakeBotMove();
}
@@ -260,6 +335,13 @@ export class GameFacade implements OnDestroy {
}
}
+ private pushFen(fen: string): void {
+ const last = this.fenHistory[this.fenHistory.length - 1];
+ if (last !== fen) {
+ this.fenHistory.push(fen);
+ }
+ }
+
private tryMakeBotMove(): void {
this.botMoveService.tryMakeBotMove(
this.gameId,
diff --git a/src/app/pages/games/games.component.ts b/src/app/pages/games/games.component.ts
index 9a78042..dbbfb0f 100644
--- a/src/app/pages/games/games.component.ts
+++ b/src/app/pages/games/games.component.ts
@@ -85,7 +85,14 @@ export class GamesComponent implements OnInit {
}
const requests = ids.map((id) =>
- this.gameApi.getGame(id).pipe(catchError(() => of(null)))
+ this.gameApi.getGame(id).pipe(
+ catchError((err: unknown) => {
+ if (typeof err === 'object' && err !== null && (err as { status: number }).status === 404) {
+ this.gameHistory.removeGame(id);
+ }
+ return of(null);
+ })
+ )
);
forkJoin(requests)
diff --git a/src/app/pages/tournaments/tournaments.component.css b/src/app/pages/tournaments/tournaments.component.css
new file mode 100644
index 0000000..6e40a72
--- /dev/null
+++ b/src/app/pages/tournaments/tournaments.component.css
@@ -0,0 +1,329 @@
+: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-warn: #ffd166;
+ --nc-sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+
+ 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;
+ --nc-warn: #b45309;
+}
+
+.t-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.35; }
+.crumb-current { color: var(--nc-text-muted); }
+
+/* Header */
+.page-header { margin-bottom: 28px; }
+.page-title-row {
+ display: flex; align-items: center; justify-content: space-between;
+ margin-bottom: 16px;
+}
+.page-title { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
+
+.btn-new {
+ display: inline-flex; align-items: center; gap: 6px;
+ padding: 7px 14px; border-radius: 8px; border: none;
+ background: var(--nc-neon); color: #fff;
+ font-size: 13px; font-weight: 600; cursor: pointer;
+ transition: opacity 0.15s;
+}
+.btn-new:hover { opacity: 0.85; }
+
+/* Create dialog */
+.dialog-overlay {
+ position: fixed; inset: 0; z-index: 200;
+ background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
+ display: flex; align-items: center; justify-content: center;
+ padding: 20px;
+}
+.dialog-card {
+ background: var(--nc-bg); border: 1px solid var(--nc-border-strong);
+ border-radius: 16px; padding: 24px; width: 100%; max-width: 420px;
+}
+.dialog-head {
+ display: flex; justify-content: space-between; align-items: center;
+ margin-bottom: 20px;
+}
+.dialog-brand { font-size: 14px; font-weight: 700; color: var(--nc-neon); }
+.dialog-close {
+ background: none; border: none; cursor: pointer;
+ font-size: 20px; line-height: 1; color: var(--nc-text-muted);
+ padding: 0 4px;
+}
+.dialog-close:hover { color: var(--nc-text); }
+.dialog-field { display: flex; flex-direction: column; gap: 6px; flex: 1; }
+.dialog-label { font-size: 11px; font-weight: 600; text-transform: uppercase;
+ letter-spacing: 0.06em; color: var(--nc-text-muted); }
+.dialog-input {
+ width: 100%; padding: 8px 10px; border-radius: 8px;
+ border: 1px solid var(--nc-border-strong);
+ background: rgba(255,255,255,0.04); color: var(--nc-text);
+ font-size: 14px; box-sizing: border-box;
+}
+.dialog-input:focus { outline: 2px solid var(--nc-neon); outline-offset: 1px; border-color: transparent; }
+.dialog-row { display: flex; gap: 12px; margin-bottom: 16px; }
+.dialog-field:not(.dialog-row .dialog-field) { margin-bottom: 16px; }
+.dialog-toggle {
+ display: flex; align-items: center; gap: 10px; cursor: pointer;
+ margin-bottom: 20px; user-select: none;
+}
+.dialog-toggle input[type=checkbox] { display: none; }
+.toggle-track {
+ width: 36px; height: 20px; border-radius: 10px;
+ background: var(--nc-border-strong); flex-shrink: 0;
+ transition: background 0.2s; position: relative;
+}
+.toggle-track::after {
+ content: ''; position: absolute; top: 3px; left: 3px;
+ width: 14px; height: 14px; border-radius: 50%;
+ background: var(--nc-text-muted); transition: transform 0.2s, background 0.2s;
+}
+.dialog-toggle input:checked ~ .toggle-track { background: var(--nc-neon); }
+.dialog-toggle input:checked ~ .toggle-track::after { transform: translateX(16px); background: #fff; }
+.toggle-label { font-size: 14px; color: var(--nc-text); }
+.dialog-error {
+ font-size: 13px; color: var(--nc-danger);
+ background: rgba(255,122,122,0.1); border-radius: 8px;
+ padding: 10px 12px; margin-bottom: 16px;
+}
+.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }
+.btn-ghost {
+ padding: 8px 16px; border-radius: 8px; border: 1px solid var(--nc-border-strong);
+ background: transparent; color: var(--nc-text-muted); font-size: 13px; cursor: pointer;
+}
+.btn-ghost:hover { color: var(--nc-text); border-color: var(--nc-text-muted); }
+.btn-primary {
+ padding: 8px 18px; border-radius: 8px; border: none;
+ background: var(--nc-neon); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
+ transition: opacity 0.15s;
+}
+.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* Tabs */
+.tabs { display: flex; gap: 4px; }
+.tab-btn {
+ display: inline-flex; align-items: center; gap: 6px;
+ padding: 6px 14px; border-radius: 8px; border: none;
+ background: transparent; color: var(--nc-text-muted);
+ font-size: 13px; font-weight: 500; cursor: pointer;
+ transition: background 0.15s, color 0.15s;
+}
+.tab-btn:hover { background: var(--nc-border); color: var(--nc-text); }
+.tab-btn.active { background: var(--nc-surface); color: var(--nc-text); border: 1px solid var(--nc-border-strong); }
+.tab-badge {
+ display: inline-flex; align-items: center; justify-content: center;
+ min-width: 18px; height: 18px; padding: 0 5px;
+ border-radius: 9px; background: var(--nc-border-strong);
+ font-size: 10px; font-weight: 700; color: var(--nc-text-muted);
+}
+.live-badge { background: rgba(94, 229, 161, 0.2); color: var(--nc-success); }
+
+/* States */
+.state-msg {
+ display: flex; align-items: center; gap: 10px;
+ padding: 24px 0; color: var(--nc-text-muted); font-size: 13px;
+}
+.state-msg.small { padding: 12px 0; }
+.pulse {
+ width: 8px; height: 8px; border-radius: 50%;
+ background: var(--nc-neon); flex-shrink: 0;
+ animation: pulse 1.4s ease-in-out infinite;
+}
+@keyframes pulse {
+ 0%, 100% { opacity: 1; transform: scale(1); }
+ 50% { opacity: 0.4; transform: scale(0.85); }
+}
+
+.empty-state {
+ display: flex; flex-direction: column; align-items: center;
+ gap: 8px; padding: 64px 0; text-align: center;
+}
+.empty-icon { color: var(--nc-text-dim); margin-bottom: 4px; }
+.empty-title { font-size: 15px; font-weight: 600; margin: 0; }
+.empty-sub { font-size: 13px; color: var(--nc-text-muted); margin: 0; }
+
+/* Tournament list */
+.t-list { display: flex; flex-direction: column; gap: 8px; }
+
+.t-card {
+ border: 1px solid var(--nc-border);
+ border-radius: 12px;
+ background: var(--nc-surface);
+ overflow: hidden;
+ cursor: pointer;
+ transition: border-color 0.15s, background 0.15s;
+}
+.t-card:hover, .t-card.expanded {
+ border-color: var(--nc-border-strong);
+ background: rgba(255, 255, 255, 0.04);
+}
+.t-card:focus-visible { outline: 2px solid var(--nc-neon); outline-offset: 2px; }
+
+.t-action-btn {
+ padding: 5px 12px; border-radius: 7px; font-size: 12px; font-weight: 600;
+ cursor: pointer; border: none; transition: opacity 0.15s; white-space: nowrap;
+}
+.t-action-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.t-btn-start { background: var(--nc-success); color: #0f0022; }
+.t-btn-start:hover:not(:disabled) { opacity: 0.85; }
+.t-btn-join { background: var(--nc-neon); color: #fff; }
+.t-btn-join:hover:not(:disabled) { opacity: 0.85; }
+
+/* Join dialog extras */
+.join-hint { font-size: 13px; color: var(--nc-text-muted); margin: 0 0 16px; line-height: 1.5; }
+.join-empty { font-size: 13px; color: var(--nc-text-muted); margin: 0 0 8px; }
+.dialog-loading { display: flex; align-items: center; gap: 8px;
+ font-size: 13px; color: var(--nc-text-muted); padding: 12px 0; }
+.bot-pick-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
+.bot-pick-row {
+ display: flex; align-items: center; gap: 10px;
+ padding: 10px 12px; border-radius: 8px;
+ border: 1px solid var(--nc-border); background: var(--nc-surface);
+ cursor: pointer; text-align: left; width: 100%;
+ transition: border-color 0.15s, background 0.15s;
+}
+.bot-pick-row:hover:not(:disabled) { border-color: var(--nc-neon); background: rgba(255,69,200,0.06); }
+.bot-pick-row:disabled { opacity: 0.5; cursor: not-allowed; }
+.bot-pick-avatar {
+ width: 30px; height: 30px; border-radius: 50%; background: var(--nc-neon);
+ color: #fff; display: flex; align-items: center; justify-content: center;
+ font-size: 13px; font-weight: 700; flex-shrink: 0;
+}
+.bot-pick-name { flex: 1; font-size: 14px; font-weight: 600; color: var(--nc-text); }
+.bot-pick-rating { font-size: 12px; color: var(--nc-text-muted); }
+.bot-pick-spinner { font-size: 13px; color: var(--nc-neon); }
+
+.t-card-main {
+ display: flex; justify-content: space-between; align-items: center;
+ padding: 14px 16px; gap: 12px;
+}
+.t-card-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
+.t-card-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
+
+.t-status-dot {
+ width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
+}
+.dot-started { background: var(--nc-success); box-shadow: 0 0 6px var(--nc-success); }
+.dot-created { background: var(--nc-warn); }
+.dot-finished { background: var(--nc-text-dim); }
+
+.t-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
+.t-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.t-meta { font-size: 11px; color: var(--nc-text-muted); }
+
+.winner-badge {
+ font-size: 11px; font-weight: 600; color: var(--nc-warn);
+ padding: 3px 8px; border-radius: 6px;
+ background: rgba(255, 209, 102, 0.12);
+}
+
+.chevron { color: var(--nc-text-dim); transition: transform 0.2s; }
+.chevron.open { transform: rotate(180deg); }
+
+/* Detail panel */
+.t-detail {
+ border-top: 1px solid var(--nc-border);
+ padding: 16px;
+ display: flex; flex-direction: column; gap: 20px;
+}
+
+.detail-section { display: flex; flex-direction: column; gap: 10px; }
+.detail-heading {
+ font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
+ text-transform: uppercase; color: var(--nc-text-muted); margin: 0;
+}
+
+.no-standings { font-size: 12px; color: var(--nc-text-dim); margin: 0; }
+
+/* Standings table */
+.standings-table {
+ width: 100%; border-collapse: collapse; font-size: 13px;
+}
+.standings-table th {
+ text-align: left; padding: 6px 8px;
+ font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
+ text-transform: uppercase; color: var(--nc-text-dim);
+ border-bottom: 1px solid var(--nc-border);
+}
+.standings-table td { padding: 8px 8px; border-bottom: 1px solid var(--nc-border); }
+.standings-table tr:last-child td { border-bottom: none; }
+.top-row td { color: var(--nc-text); }
+.standings-table tr:not(.top-row) td { color: var(--nc-text-muted); }
+
+.col-rank { width: 40px; font-size: 14px; }
+.col-pts { width: 48px; font-weight: 700; color: var(--nc-neon) !important; }
+.col-tb { width: 52px; color: var(--nc-text-dim) !important; font-size: 12px; }
+.col-games { width: 64px; }
+
+.wdl { font-size: 12px; font-variant-numeric: tabular-nums; }
+.w { color: var(--nc-success); }
+.d { color: var(--nc-text-muted); }
+.l { color: var(--nc-danger); }
+
+/* Pairings */
+.pairings-list { display: flex; flex-direction: column; gap: 6px; }
+.pairing-row {
+ display: flex; align-items: center; gap: 8px;
+ padding: 8px 10px; border-radius: 8px;
+ background: rgba(255,255,255,0.025);
+ font-size: 13px; transition: background 0.15s;
+}
+.pairing-row.is-watchable { cursor: pointer; }
+.pairing-row.is-watchable:hover { background: rgba(255,255,255,0.06); }
+.pairing-white { font-weight: 600; flex: 1; }
+.pairing-vs { color: var(--nc-text-dim); font-size: 11px; flex-shrink: 0; }
+.pairing-black { flex: 1; }
+.pairing-result { font-weight: 700; font-size: 12px; margin-left: auto; }
+.result-white { color: var(--nc-success); }
+.result-black { color: var(--nc-danger); }
+.result-draw { color: var(--nc-text-muted); }
+.pairing-ongoing {
+ display: inline-flex; align-items: center; gap: 5px;
+ margin-left: auto; font-size: 10px; font-weight: 700;
+ color: var(--nc-success); letter-spacing: 0.06em; text-transform: uppercase;
+}
+.pairing-ongoing svg { animation: pulse 1.4s ease-in-out infinite; }
diff --git a/src/app/pages/tournaments/tournaments.component.html b/src/app/pages/tournaments/tournaments.component.html
new file mode 100644
index 0000000..6ce1fe6
--- /dev/null
+++ b/src/app/pages/tournaments/tournaments.component.html
@@ -0,0 +1,273 @@
+
+
+
+@if (joinDialogTournamentId) {
+
+}
+
+@if (showCreateDialog) {
+
+}
diff --git a/src/app/pages/tournaments/tournaments.component.ts b/src/app/pages/tournaments/tournaments.component.ts
new file mode 100644
index 0000000..adfbd83
--- /dev/null
+++ b/src/app/pages/tournaments/tournaments.component.ts
@@ -0,0 +1,232 @@
+import { Component, DestroyRef, OnInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Router, RouterLink } from '@angular/router';
+import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { TournamentService } from '../../services/tournament.service';
+import { AuthService } from '../../services/auth.service';
+import { BotService } from '../../services/bot.service';
+import { Bot } from '../../models/bot.models';
+import { Tournament, TournamentResult, RoundPairings } from '../../models/tournament.models';
+import { CurrentUser } from '../../models/auth.models';
+
+type StatusTab = 'started' | 'created' | 'finished';
+
+@Component({
+ selector: 'app-tournaments',
+ standalone: true,
+ imports: [CommonModule, RouterLink, ReactiveFormsModule],
+ templateUrl: './tournaments.component.html',
+ styleUrl: './tournaments.component.css'
+})
+export class TournamentsComponent implements OnInit {
+ private readonly destroyRef = inject(DestroyRef);
+ private readonly tournamentService = inject(TournamentService);
+ private readonly authService = inject(AuthService);
+ private readonly fb = inject(FormBuilder);
+ private readonly botService = inject(BotService);
+ private readonly router = inject(Router);
+
+ loading = true;
+ tab: StatusTab = 'started';
+ currentUser: CurrentUser | null = null;
+
+ started: Tournament[] = [];
+ created: Tournament[] = [];
+ finished: Tournament[] = [];
+
+ selectedTournament: Tournament | null = null;
+ pairings: RoundPairings | null = null;
+ pairingsLoading = false;
+
+ showCreateDialog = false;
+ createForm: FormGroup = this.fb.group({
+ name: ['', [Validators.required, Validators.minLength(3)]],
+ nbRounds: [4, [Validators.required, Validators.min(1), Validators.max(20)]],
+ clockLimitMinutes: [3, [Validators.required, Validators.min(1), Validators.max(60)]],
+ clockIncrement: [0, [Validators.required, Validators.min(0), Validators.max(60)]],
+ rated: [false]
+ });
+ createLoading = false;
+ createError: string | null = null;
+
+ startingId: string | null = null;
+
+ joinDialogTournamentId: string | null = null;
+ userBots: Bot[] = [];
+ botsLoading = false;
+ joiningBotId: string | null = null;
+ joinError: string | null = null;
+
+ ngOnInit(): void {
+ this.authService.currentUser$
+ .pipe(takeUntilDestroyed(this.destroyRef))
+ .subscribe(u => { this.currentUser = u; });
+ this.loadTournaments();
+ }
+
+ openCreateDialog(): void {
+ this.createForm.reset({ name: '', nbRounds: 4, clockLimitMinutes: 3, clockIncrement: 0, rated: false });
+ this.createError = null;
+ this.showCreateDialog = true;
+ }
+
+ closeCreateDialog(): void {
+ this.showCreateDialog = false;
+ }
+
+ submitCreate(): void {
+ if (this.createForm.invalid) return;
+ this.createLoading = true;
+ this.createError = null;
+ this.tournamentService.create(this.createForm.value).subscribe({
+ next: t => {
+ this.createLoading = false;
+ this.showCreateDialog = false;
+ this.created = [t, ...this.created];
+ this.tab = 'created';
+ this.selectedTournament = null;
+ },
+ error: err => {
+ this.createLoading = false;
+ this.createError = err.error?.message ?? err.error?.error ?? 'Failed to create tournament.';
+ }
+ });
+ }
+
+ setTab(tab: StatusTab): void {
+ this.tab = tab;
+ this.selectedTournament = null;
+ this.pairings = null;
+ }
+
+ selectTournament(t: Tournament): void {
+ if (this.selectedTournament?.id === t.id) {
+ this.selectedTournament = null;
+ this.pairings = null;
+ return;
+ }
+ this.selectedTournament = t;
+ this.pairings = null;
+ if (t.round > 0) {
+ this.loadPairings(t.id, t.round);
+ }
+ }
+
+ get activeList(): Tournament[] {
+ return this[this.tab];
+ }
+
+ clockDisplay(t: Tournament): string {
+ const min = Math.floor(t.clock.limit / 60);
+ return `${min}+${t.clock.increment}`;
+ }
+
+ rankMedal(rank: number): string {
+ if (rank === 1) return '🥇';
+ if (rank === 2) return '🥈';
+ if (rank === 3) return '🥉';
+ return `${rank}.`;
+ }
+
+ scoreDisplay(r: TournamentResult): string {
+ return r.points % 1 === 0 ? `${r.points}` : `${r.points}`;
+ }
+
+ startTournament(event: MouseEvent, t: Tournament): void {
+ event.stopPropagation();
+ this.startingId = t.id;
+ this.tournamentService.start(t.id).subscribe({
+ next: updated => {
+ this.startingId = null;
+ const list = this.created.map(x => x.id === t.id ? updated : x);
+ this.created = list.filter(x => x.status === 'created');
+ if (!this.started.find(x => x.id === updated.id)) this.started = [updated, ...this.started];
+ this.selectedTournament = updated;
+ this.tab = 'started';
+ },
+ error: () => { this.startingId = null; }
+ });
+ }
+
+ watchGame(gameId: string): void {
+ void this.router.navigate(['/game', gameId]);
+ }
+
+ openJoinDialog(event: MouseEvent, tournamentId: string): void {
+ event.stopPropagation();
+ this.joinDialogTournamentId = tournamentId;
+ this.joinError = null;
+ this.botsLoading = true;
+ this.botService.list()
+ .pipe(takeUntilDestroyed(this.destroyRef))
+ .subscribe({
+ next: bots => { this.userBots = bots; this.botsLoading = false; },
+ error: () => { this.botsLoading = false; }
+ });
+ }
+
+ closeJoinDialog(): void {
+ this.joinDialogTournamentId = null;
+ this.joiningBotId = null;
+ this.joinError = null;
+ }
+
+ joinWithBot(bot: Bot): void {
+ if (!this.joinDialogTournamentId || this.joiningBotId) return;
+ this.joiningBotId = bot.id;
+ this.joinError = null;
+ this.botService.rotateToken(bot.id).subscribe({
+ next: token => {
+ this.tournamentService.joinWithBotToken(this.joinDialogTournamentId!, token).subscribe({
+ next: () => {
+ this.joiningBotId = null;
+ const tid = this.joinDialogTournamentId!;
+ this.closeJoinDialog();
+ this.tournamentService.get(tid)
+ .pipe(takeUntilDestroyed(this.destroyRef))
+ .subscribe(updated => {
+ this.created = this.created.map(x => x.id === tid ? updated : x);
+ this.started = this.started.map(x => x.id === tid ? updated : x);
+ if (this.selectedTournament?.id === tid) this.selectedTournament = updated;
+ });
+ },
+ error: err => {
+ this.joiningBotId = null;
+ this.joinError = err.error?.message ?? err.error?.error ?? 'Failed to join tournament.';
+ }
+ });
+ },
+ error: () => {
+ this.joiningBotId = null;
+ this.joinError = 'Failed to get bot token.';
+ }
+ });
+ }
+
+ private loadTournaments(): void {
+ this.tournamentService.list()
+ .pipe(takeUntilDestroyed(this.destroyRef))
+ .subscribe({
+ next: list => {
+ this.started = list.started;
+ this.created = list.created;
+ this.finished = list.finished;
+ this.loading = false;
+ if (this.started.length === 0 && this.created.length > 0) this.tab = 'created';
+ else if (this.started.length === 0 && this.finished.length > 0) this.tab = 'finished';
+ },
+ error: () => { this.loading = false; }
+ });
+ }
+
+ private loadPairings(id: string, round: number): void {
+ this.pairingsLoading = true;
+ this.tournamentService.roundPairings(id, round)
+ .pipe(takeUntilDestroyed(this.destroyRef))
+ .subscribe({
+ next: p => { this.pairings = p; this.pairingsLoading = false; },
+ error: () => { this.pairingsLoading = false; }
+ });
+ }
+}
diff --git a/src/app/pages/welcome/Auth Dialog.html b/src/app/pages/welcome/Auth Dialog.html
new file mode 100644
index 0000000..32dfb08
--- /dev/null
+++ b/src/app/pages/welcome/Auth Dialog.html
@@ -0,0 +1,89 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ @if (loading) {
+
+
+
+ Tournaments
+ @if (currentUser) { + + } +
+
+
+
+
+ Loading tournaments…
+ } @else if (activeList.length === 0) {
+
+
+
+ } @else {
+ No tournaments here
+Check back later or look in another tab.
+
+ @for (t of activeList; track t.id) {
+
+ }
+
+
+
+
+ }
+
+
+
+ @if (selectedTournament?.id === t.id) {
+
+
+
+
+ {{ t.fullName }}
+
+
+
+ @if (t.status === 'finished' && t.winner) {
+ 🏆 {{ t.winner.name }}
+ }
+ @if (currentUser && t.status === 'created') {
+ @if (t.createdBy === currentUser.id) {
+
+ }
+
+ }
+
+
+
+
+
+ @if (t.standing.players.length > 0) {
+
+
+
+
+
+ } @else {
+
+
+ }
+
+
+ }
+ Leaderboard
+| # | +Bot | +Pts | +Bkh | +W/D/L | +
|---|---|---|---|---|
| {{ rankMedal(r.rank) }} | +{{ r.bot.name }} | +{{ scoreDisplay(r) }} | +{{ r.tieBreak }} | ++ + {{ r.wins }}/{{ r.draws }}/{{ r.losses }} + + | +
No standings yet — waiting for games to complete.
+ } + + + @if (t.round > 0) { +Round {{ t.round }} pairings
+ @if (pairingsLoading) { +Loading…
+ } @else if (pairings && pairings.pairings.length > 0) {
+
+ @for (p of pairings.pairings; track p.id) {
+
+ } @else {
+
+ {{ p.white?.name ?? 'Bye' }}
+ vs
+ {{ p.black.name }}
+ @if (p.winner) {
+
+ {{ p.winner === 'draw' ? '½–½' : p.winner === 'white' ? '1–0' : '0–1' }}
+
+ } @else if (p.gameId) {
+
+
+ Watch
+
+ }
+
+ }
+ No pairings recorded yet.
+ } +
- 🍖
-
- }
@@ -145,50 +138,6 @@
-
- @if (showSpeechBubble) {
-
-
- }
-
-
- @if (isZoomedIn) {
-
-
- {{ bubbleMessage }}
-
-
-
- }
-
diff --git a/src/app/pages/welcome/welcome.component.ts b/src/app/pages/welcome/welcome.component.ts
index 9a3bbaa..5126331 100644
--- a/src/app/pages/welcome/welcome.component.ts
+++ b/src/app/pages/welcome/welcome.component.ts
@@ -79,28 +79,11 @@ export class WelcomeComponent implements OnInit, OnDestroy {
private authDialogState: 'login' | 'register' | null = null;
private pendingAction: (() => void) | null = null;
- // Speech bubble and zoom features
- showSpeechBubble = false;
- isZoomedIn = false;
- showSecondSpeechBubble = false;
- showHappyBubble = false;
- showMeatEmoji = false;
- bubbleMessage = 'meow';
-
- // Meat emoji drag state
- meatX = 0;
- meatY = 0;
- isDraggingMeat = false;
- meatDragOffsetX = 0;
- meatDragOffsetY = 0;
-
stars: Star[] = [];
bgBuildings: BackgroundBuilding[] = [];
windows: Record
-
-
-
-
-
- @if (showMeatEmoji) {
-
- 
- @if (showSecondSpeechBubble) {
-
-
- @if (showSecondSpeechBubble) {
-
-
- }
- @if (showHappyBubble) {
- Feed me! 🍖
-
-
-
- }
- Happy meow! 😸
-
-
- 🍖
-
- }
-