feat(tournaments): external server management UI and official-bot join
Add TournamentServerService (GET/POST/DELETE /api/tournament/servers). Add OfficialBotService (POST /api/bots/official/join-tournament). Tournaments page gains a Servers button that opens a dialog to register, list, and remove external tournament servers. Join dialog gains four difficulty buttons (Easy/Medium/Hard/Expert) for spawning official bots into a tournament at runtime. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Janis Eccarius
@@ -64,6 +64,18 @@
|
||||
}
|
||||
.page-title { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
|
||||
|
||||
.page-actions { display: flex; align-items: center; gap: 8px; }
|
||||
|
||||
.btn-servers {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
padding: 7px 14px; border-radius: 8px;
|
||||
border: 1px solid var(--nc-border-strong);
|
||||
background: transparent; color: var(--nc-text-muted);
|
||||
font-size: 13px; font-weight: 600; cursor: pointer;
|
||||
transition: color 0.15s, border-color 0.15s;
|
||||
}
|
||||
.btn-servers:hover { color: var(--nc-text); border-color: var(--nc-text-muted); }
|
||||
|
||||
.btn-new {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
padding: 7px 14px; border-radius: 8px; border: none;
|
||||
@@ -327,3 +339,74 @@
|
||||
color: var(--nc-success); letter-spacing: 0.06em; text-transform: uppercase;
|
||||
}
|
||||
.pairing-ongoing svg { animation: pulse 1.4s ease-in-out infinite; }
|
||||
|
||||
/* Official bot join section */
|
||||
.join-divider {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
margin: 20px 0 14px;
|
||||
}
|
||||
.join-divider::before, .join-divider::after {
|
||||
content: ''; flex: 1; height: 1px; background: var(--nc-border);
|
||||
}
|
||||
.join-divider-label {
|
||||
font-size: 10px; font-weight: 600; text-transform: uppercase;
|
||||
letter-spacing: 0.08em; color: var(--nc-text-dim); white-space: nowrap;
|
||||
}
|
||||
|
||||
.official-bot-grid {
|
||||
display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.official-bot-btn {
|
||||
display: flex; align-items: center; justify-content: center; gap: 6px;
|
||||
padding: 9px 4px; border-radius: 8px; border: 1px solid var(--nc-border);
|
||||
background: var(--nc-surface); font-size: 12px; font-weight: 700;
|
||||
cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s;
|
||||
color: var(--nc-text-muted); text-transform: capitalize;
|
||||
}
|
||||
.official-bot-btn:disabled { opacity: 0.45; cursor: not-allowed; }
|
||||
.official-btn-easy:hover:not(:disabled) { border-color: var(--nc-success); color: var(--nc-success); background: rgba(94,229,161,0.07); }
|
||||
.official-btn-medium:hover:not(:disabled) { border-color: var(--nc-warn); color: var(--nc-warn); background: rgba(255,209,102,0.07); }
|
||||
.official-btn-hard:hover:not(:disabled) { border-color: var(--nc-neon); color: var(--nc-neon); background: rgba(255,69,200,0.07); }
|
||||
.official-btn-expert:hover:not(:disabled) { border-color: var(--nc-danger); color: var(--nc-danger); background: rgba(255,122,122,0.07); }
|
||||
|
||||
/* Servers dialog */
|
||||
.servers-dialog { max-width: 480px; }
|
||||
|
||||
.servers-list {
|
||||
display: flex; flex-direction: column; gap: 6px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.server-row {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 10px 12px; border-radius: 8px;
|
||||
border: 1px solid var(--nc-border); background: var(--nc-surface);
|
||||
}
|
||||
.server-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
|
||||
.server-label { font-size: 13px; font-weight: 600; color: var(--nc-text); }
|
||||
.server-url {
|
||||
font-size: 11px; color: var(--nc-text-dim);
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
font-family: monospace;
|
||||
}
|
||||
.server-remove-btn {
|
||||
background: none; border: none; cursor: pointer;
|
||||
color: var(--nc-text-dim); padding: 4px; border-radius: 6px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
flex-shrink: 0; transition: color 0.15s, background 0.15s;
|
||||
font-size: 13px;
|
||||
}
|
||||
.server-remove-btn:hover:not(:disabled) { color: var(--nc-danger); background: rgba(255,122,122,0.1); }
|
||||
.server-remove-btn:disabled { opacity: 0.4; cursor: not-allowed; }
|
||||
|
||||
.server-add-form {
|
||||
border-top: 1px solid var(--nc-border);
|
||||
padding-top: 16px;
|
||||
display: flex; flex-direction: column; gap: 0;
|
||||
}
|
||||
.server-add-heading {
|
||||
font-size: 11px; font-weight: 700; text-transform: uppercase;
|
||||
letter-spacing: 0.08em; color: var(--nc-text-muted);
|
||||
margin: 0 0 14px;
|
||||
}
|
||||
|
||||
@@ -16,15 +16,25 @@
|
||||
<header class="page-header">
|
||||
<div class="page-title-row">
|
||||
<h1 class="page-title">Tournaments</h1>
|
||||
@if (currentUser) {
|
||||
<button type="button" class="btn-new" (click)="openCreateDialog()">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
|
||||
</svg>
|
||||
New tournament
|
||||
</button>
|
||||
}
|
||||
<div class="page-actions">
|
||||
@if (currentUser) {
|
||||
<button type="button" class="btn-servers" (click)="openServersDialog()">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="2" y="2" width="20" height="8" rx="2"/><rect x="2" y="14" width="20" height="8" rx="2"/>
|
||||
<line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/>
|
||||
</svg>
|
||||
Servers
|
||||
</button>
|
||||
<button type="button" class="btn-new" (click)="openCreateDialog()">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
|
||||
</svg>
|
||||
New tournament
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabs" role="tablist">
|
||||
<button type="button" class="tab-btn" [class.active]="tab === 'started'" (click)="setTab('started')">
|
||||
@@ -218,6 +228,97 @@
|
||||
@if (joinError) {
|
||||
<div class="dialog-error">{{ joinError }}</div>
|
||||
}
|
||||
|
||||
<div class="join-divider">
|
||||
<span class="join-divider-label">or join with an official bot</span>
|
||||
</div>
|
||||
|
||||
<div class="official-bot-grid">
|
||||
@for (d of officialDifficulties; track d) {
|
||||
<button type="button" class="official-bot-btn"
|
||||
[class]="'official-btn-' + d"
|
||||
[disabled]="!!joiningOfficialDifficulty || !!joiningBotId"
|
||||
(click)="joinWithOfficialBot(d)">
|
||||
@if (joiningOfficialDifficulty === d) {
|
||||
<span class="pulse"></span>
|
||||
}
|
||||
{{ d | titlecase }}
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
|
||||
@if (officialJoinError) {
|
||||
<div class="dialog-error">{{ officialJoinError }}</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (showServersDialog) {
|
||||
<div class="dialog-overlay" (click)="closeServersDialog()">
|
||||
<div class="dialog-card servers-dialog" (click)="$event.stopPropagation()">
|
||||
<div class="dialog-head">
|
||||
<span class="dialog-brand">Tournament servers</span>
|
||||
<button type="button" class="dialog-close" (click)="closeServersDialog()">×</button>
|
||||
</div>
|
||||
|
||||
<p class="join-hint">External tournament servers aggregated into this view. Tournaments from all servers appear in the list.</p>
|
||||
|
||||
@if (serversLoading) {
|
||||
<div class="dialog-loading"><span class="pulse"></span>Loading servers…</div>
|
||||
} @else if (servers.length === 0) {
|
||||
<p class="join-empty">No external servers registered yet.</p>
|
||||
} @else {
|
||||
<div class="servers-list">
|
||||
@for (s of servers; track s.id) {
|
||||
<div class="server-row">
|
||||
<div class="server-info">
|
||||
<span class="server-label">{{ s.label }}</span>
|
||||
<span class="server-url">{{ s.url }}</span>
|
||||
</div>
|
||||
<button type="button" class="server-remove-btn"
|
||||
[disabled]="removingServerId === s.id"
|
||||
(click)="removeServer(s.id)"
|
||||
title="Remove server">
|
||||
@if (removingServerId === s.id) { … } @else {
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/>
|
||||
<path d="M10 11v6"/><path d="M14 11v6"/>
|
||||
<path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/>
|
||||
</svg>
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="server-add-form">
|
||||
<h4 class="server-add-heading">Add server</h4>
|
||||
<div class="dialog-field">
|
||||
<label class="dialog-label">Label</label>
|
||||
<input type="text" class="dialog-input" [(ngModel)]="newServerLabel"
|
||||
placeholder="e.g. Local Dev Server" />
|
||||
</div>
|
||||
<div class="dialog-field">
|
||||
<label class="dialog-label">URL</label>
|
||||
<input type="url" class="dialog-input" [(ngModel)]="newServerUrl"
|
||||
placeholder="http://host:8089" />
|
||||
</div>
|
||||
@if (addServerError) {
|
||||
<div class="dialog-error">{{ addServerError }}</div>
|
||||
}
|
||||
<div class="dialog-actions">
|
||||
<button type="button" class="btn-ghost" (click)="closeServersDialog()">Close</button>
|
||||
<button type="button" class="btn-primary"
|
||||
[disabled]="addingServer || !newServerLabel.trim() || !newServerUrl.trim()"
|
||||
(click)="addServer()">
|
||||
{{ addingServer ? 'Adding…' : 'Add' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
import { Component, DestroyRef, OnInit, inject } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { CommonModule, TitleCasePipe } from '@angular/common';
|
||||
import { Router, RouterLink } from '@angular/router';
|
||||
import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
|
||||
import { FormBuilder, FormGroup, FormsModule, 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 { OfficialBotService } from '../../services/official-bot.service';
|
||||
import { TournamentServerService, ExternalTournamentServer } from '../../services/tournament-server.service';
|
||||
import { Bot } from '../../models/bot.models';
|
||||
import { Tournament, TournamentResult, RoundPairings } from '../../models/tournament.models';
|
||||
import { CurrentUser } from '../../models/auth.models';
|
||||
@@ -15,7 +17,7 @@ type StatusTab = 'started' | 'created' | 'finished';
|
||||
@Component({
|
||||
selector: 'app-tournaments',
|
||||
standalone: true,
|
||||
imports: [CommonModule, RouterLink, ReactiveFormsModule],
|
||||
imports: [CommonModule, RouterLink, FormsModule, ReactiveFormsModule, TitleCasePipe],
|
||||
templateUrl: './tournaments.component.html',
|
||||
styleUrl: './tournaments.component.css'
|
||||
})
|
||||
@@ -25,6 +27,8 @@ export class TournamentsComponent implements OnInit {
|
||||
private readonly authService = inject(AuthService);
|
||||
private readonly fb = inject(FormBuilder);
|
||||
private readonly botService = inject(BotService);
|
||||
private readonly officialBotService = inject(OfficialBotService);
|
||||
private readonly tournamentServerService = inject(TournamentServerService);
|
||||
private readonly router = inject(Router);
|
||||
|
||||
loading = true;
|
||||
@@ -58,6 +62,19 @@ export class TournamentsComponent implements OnInit {
|
||||
joiningBotId: string | null = null;
|
||||
joinError: string | null = null;
|
||||
|
||||
readonly officialDifficulties = ['easy', 'medium', 'hard', 'expert'] as const;
|
||||
joiningOfficialDifficulty: string | null = null;
|
||||
officialJoinError: string | null = null;
|
||||
|
||||
showServersDialog = false;
|
||||
servers: ExternalTournamentServer[] = [];
|
||||
serversLoading = false;
|
||||
newServerLabel = '';
|
||||
newServerUrl = '';
|
||||
addingServer = false;
|
||||
addServerError: string | null = null;
|
||||
removingServerId: string | null = null;
|
||||
|
||||
ngOnInit(): void {
|
||||
this.authService.currentUser$
|
||||
.pipe(takeUntilDestroyed(this.destroyRef))
|
||||
@@ -170,6 +187,32 @@ export class TournamentsComponent implements OnInit {
|
||||
this.joinDialogTournamentId = null;
|
||||
this.joiningBotId = null;
|
||||
this.joinError = null;
|
||||
this.joiningOfficialDifficulty = null;
|
||||
this.officialJoinError = null;
|
||||
}
|
||||
|
||||
joinWithOfficialBot(difficulty: string): void {
|
||||
if (!this.joinDialogTournamentId || this.joiningOfficialDifficulty || this.joiningBotId) return;
|
||||
this.joiningOfficialDifficulty = difficulty;
|
||||
this.officialJoinError = null;
|
||||
const tid = this.joinDialogTournamentId;
|
||||
this.officialBotService.joinTournament(tid, difficulty).subscribe({
|
||||
next: () => {
|
||||
this.joiningOfficialDifficulty = null;
|
||||
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.joiningOfficialDifficulty = null;
|
||||
this.officialJoinError = err.error?.error ?? 'Failed to join with official bot.';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
joinWithBot(bot: Bot): void {
|
||||
@@ -204,6 +247,58 @@ export class TournamentsComponent implements OnInit {
|
||||
});
|
||||
}
|
||||
|
||||
openServersDialog(): void {
|
||||
this.newServerLabel = '';
|
||||
this.newServerUrl = '';
|
||||
this.addServerError = null;
|
||||
this.showServersDialog = true;
|
||||
this.serversLoading = true;
|
||||
this.tournamentServerService.list()
|
||||
.pipe(takeUntilDestroyed(this.destroyRef))
|
||||
.subscribe({
|
||||
next: res => { this.servers = res.servers; this.serversLoading = false; },
|
||||
error: () => { this.serversLoading = false; }
|
||||
});
|
||||
}
|
||||
|
||||
closeServersDialog(): void {
|
||||
this.showServersDialog = false;
|
||||
}
|
||||
|
||||
addServer(): void {
|
||||
const label = this.newServerLabel.trim();
|
||||
const url = this.newServerUrl.trim();
|
||||
if (!label || !url || this.addingServer) return;
|
||||
this.addingServer = true;
|
||||
this.addServerError = null;
|
||||
this.tournamentServerService.register(label, url).subscribe({
|
||||
next: server => {
|
||||
this.addingServer = false;
|
||||
this.servers = [...this.servers, server];
|
||||
this.newServerLabel = '';
|
||||
this.newServerUrl = '';
|
||||
this.loadTournaments();
|
||||
},
|
||||
error: err => {
|
||||
this.addingServer = false;
|
||||
this.addServerError = err.error?.error ?? 'Failed to add server.';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
removeServer(id: string): void {
|
||||
if (this.removingServerId) return;
|
||||
this.removingServerId = id;
|
||||
this.tournamentServerService.remove(id).subscribe({
|
||||
next: () => {
|
||||
this.removingServerId = null;
|
||||
this.servers = this.servers.filter(s => s.id !== id);
|
||||
this.loadTournaments();
|
||||
},
|
||||
error: () => { this.removingServerId = null; }
|
||||
});
|
||||
}
|
||||
|
||||
private loadTournaments(): void {
|
||||
this.tournamentService.list()
|
||||
.pipe(takeUntilDestroyed(this.destroyRef))
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
import { Injectable, inject } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Observable } from 'rxjs';
|
||||
|
||||
export interface JoinTournamentResponse {
|
||||
botId: string;
|
||||
difficulty: string;
|
||||
status: string;
|
||||
}
|
||||
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class OfficialBotService {
|
||||
private readonly http = inject(HttpClient);
|
||||
private readonly base = '/api/bots/official';
|
||||
|
||||
joinTournament(tournamentId: string, difficulty: string): Observable<JoinTournamentResponse> {
|
||||
return this.http.post<JoinTournamentResponse>(`${this.base}/join-tournament`, {
|
||||
tournamentId,
|
||||
difficulty,
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import { Injectable, inject } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Observable } from 'rxjs';
|
||||
|
||||
export interface ExternalTournamentServer {
|
||||
id: string;
|
||||
label: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
export interface ExternalTournamentServerList {
|
||||
servers: ExternalTournamentServer[];
|
||||
}
|
||||
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class TournamentServerService {
|
||||
private readonly http = inject(HttpClient);
|
||||
private readonly base = '/api/tournament/servers';
|
||||
|
||||
list(): Observable<ExternalTournamentServerList> {
|
||||
return this.http.get<ExternalTournamentServerList>(this.base);
|
||||
}
|
||||
|
||||
register(label: string, url: string): Observable<ExternalTournamentServer> {
|
||||
return this.http.post<ExternalTournamentServer>(this.base, { label, url });
|
||||
}
|
||||
|
||||
remove(id: string): Observable<void> {
|
||||
return this.http.delete<void>(`${this.base}/${id}`);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user