Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 8603222ab4 | |||
| 76e0e3db78 | |||
| 0ac61032bd | |||
| 890c3fcecc | |||
| a98b5534b7 | |||
| 147d7f0d2c |
@@ -103,3 +103,18 @@
|
|||||||
* api streaming issues ([0621968](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/0621968c3ceddebe01e9c363bda345b5dcccfbbf))
|
* api streaming issues ([0621968](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/0621968c3ceddebe01e9c363bda345b5dcccfbbf))
|
||||||
* api url ([2229cfd](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/2229cfd00a7d16daa6a9544c8940e792c4362dfb))
|
* api url ([2229cfd](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/2229cfd00a7d16daa6a9544c8940e792c4362dfb))
|
||||||
* streaming issues ([bd6d023](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/bd6d02351336ed6adf66244979c6d959f47e318b))
|
* streaming issues ([bd6d023](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/bd6d02351336ed6adf66244979c6d959f47e318b))
|
||||||
|
## [0.0.0](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/compare/0.6.1...0.0.0) (2026-06-23)
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* jwt token issue ([147d7f0](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/147d7f0d2ca7a77bb80eb4b73b8d60b00ad2f708))
|
||||||
|
## [0.0.0](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/compare/0.6.2...0.0.0) (2026-06-23)
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* route tournament calls through backend gateway ([890c3fc](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/890c3fcecccec89e643180725e2a601f84fa5d99))
|
||||||
|
## [0.0.0](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/compare/0.6.3...0.0.0) (2026-06-28)
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* show actual bot names on watch page instead of Black/White fallbacks ([#15](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/issues/15)) ([76e0e3d](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/76e0e3db7869609e400593ca8f08ea8f72e72f68))
|
||||||
|
|||||||
@@ -2,10 +2,10 @@
|
|||||||
<header class="watch-head">
|
<header class="watch-head">
|
||||||
<a class="back-link" routerLink="/tournaments">← Tournaments</a>
|
<a class="back-link" routerLink="/tournaments">← Tournaments</a>
|
||||||
<div class="watch-title">
|
<div class="watch-title">
|
||||||
@if (snapshot?.white && snapshot?.black) {
|
@if (whiteName && blackName) {
|
||||||
<span class="player">{{ snapshot!.white!.name }}</span>
|
<span class="player">{{ whiteName }}</span>
|
||||||
<span class="vs">vs</span>
|
<span class="vs">vs</span>
|
||||||
<span class="player">{{ snapshot!.black!.name }}</span>
|
<span class="player">{{ blackName }}</span>
|
||||||
@if (snapshot?.round) {
|
@if (snapshot?.round) {
|
||||||
<span class="round-tag">Round {{ snapshot!.round }}</span>
|
<span class="round-tag">Round {{ snapshot!.round }}</span>
|
||||||
}
|
}
|
||||||
@@ -24,12 +24,12 @@
|
|||||||
<div class="watch-layout">
|
<div class="watch-layout">
|
||||||
<div class="board-wrap">
|
<div class="board-wrap">
|
||||||
<div class="clock clock-top" [class.active]="status === 'ongoing' && turn === 'black'">
|
<div class="clock clock-top" [class.active]="status === 'ongoing' && turn === 'black'">
|
||||||
<span class="clock-label">{{ snapshot?.black?.name ?? 'Black' }}</span>
|
<span class="clock-label">{{ blackName ?? 'Black' }}</span>
|
||||||
<span class="clock-time">{{ formatTime(clock?.blackTime) }}</span>
|
<span class="clock-time">{{ formatTime(clock?.blackTime) }}</span>
|
||||||
</div>
|
</div>
|
||||||
<app-chess-board [fen]="fen"></app-chess-board>
|
<app-chess-board [fen]="fen"></app-chess-board>
|
||||||
<div class="clock clock-bot" [class.active]="status === 'ongoing' && turn === 'white'">
|
<div class="clock clock-bot" [class.active]="status === 'ongoing' && turn === 'white'">
|
||||||
<span class="clock-label">{{ snapshot?.white?.name ?? 'White' }}</span>
|
<span class="clock-label">{{ whiteName ?? 'White' }}</span>
|
||||||
<span class="clock-time">{{ formatTime(clock?.whiteTime) }}</span>
|
<span class="clock-time">{{ formatTime(clock?.whiteTime) }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import { Component, DestroyRef, OnInit, inject } from '@angular/core';
|
import { Component, DestroyRef, OnInit, inject } from '@angular/core';
|
||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from '@angular/common';
|
||||||
import { ActivatedRoute, RouterLink } from '@angular/router';
|
import { ActivatedRoute, RouterLink } from '@angular/router';
|
||||||
|
import { from } from 'rxjs';
|
||||||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
||||||
import { ChessBoardComponent } from '../../components/chess-board/chess-board.component';
|
import { ChessBoardComponent } from '../../components/chess-board/chess-board.component';
|
||||||
import { TournamentStreamService } from '../../services/tournament-stream.service';
|
import { TournamentStreamService } from '../../services/tournament-stream.service';
|
||||||
@@ -25,6 +26,9 @@ export class TournamentWatchComponent implements OnInit {
|
|||||||
gameId = '';
|
gameId = '';
|
||||||
serverUrl = '';
|
serverUrl = '';
|
||||||
|
|
||||||
|
whiteName: string | null = null;
|
||||||
|
blackName: string | null = null;
|
||||||
|
|
||||||
fen = INITIAL_FEN;
|
fen = INITIAL_FEN;
|
||||||
turn: 'white' | 'black' = 'white';
|
turn: 'white' | 'black' = 'white';
|
||||||
status: GameStatus = 'pending';
|
status: GameStatus = 'pending';
|
||||||
@@ -51,6 +55,15 @@ export class TournamentWatchComponent implements OnInit {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
from(this.stream.fetchGame(this.serverUrl, this.tournamentId, this.gameId))
|
||||||
|
.pipe(takeUntilDestroyed(this.destroyRef))
|
||||||
|
.subscribe({
|
||||||
|
next: game => {
|
||||||
|
this.whiteName = game.white?.name ?? null;
|
||||||
|
this.blackName = game.black?.name ?? null;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
this.stream.streamGame(this.serverUrl, this.tournamentId, this.gameId)
|
this.stream.streamGame(this.serverUrl, this.tournamentId, this.gameId)
|
||||||
.pipe(takeUntilDestroyed(this.destroyRef))
|
.pipe(takeUntilDestroyed(this.destroyRef))
|
||||||
.subscribe({
|
.subscribe({
|
||||||
|
|||||||
@@ -0,0 +1,55 @@
|
|||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
|
||||||
|
interface RegisterResponse {
|
||||||
|
id: string;
|
||||||
|
token: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
@Injectable({ providedIn: 'root' })
|
||||||
|
export class TournamentAuthService {
|
||||||
|
private readonly inflight = new Map<string, Promise<string>>();
|
||||||
|
|
||||||
|
async getToken(serverUrl: string): Promise<string> {
|
||||||
|
const key = this.cacheKey(serverUrl);
|
||||||
|
const cached = localStorage.getItem(key);
|
||||||
|
if (cached) return cached;
|
||||||
|
|
||||||
|
const existing = this.inflight.get(key);
|
||||||
|
if (existing) return existing;
|
||||||
|
|
||||||
|
const promise = this.register(serverUrl)
|
||||||
|
.then(token => {
|
||||||
|
localStorage.setItem(key, token);
|
||||||
|
this.inflight.delete(key);
|
||||||
|
return token;
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
this.inflight.delete(key);
|
||||||
|
throw err;
|
||||||
|
});
|
||||||
|
|
||||||
|
this.inflight.set(key, promise);
|
||||||
|
return promise;
|
||||||
|
}
|
||||||
|
|
||||||
|
clearToken(serverUrl: string): void {
|
||||||
|
localStorage.removeItem(this.cacheKey(serverUrl));
|
||||||
|
}
|
||||||
|
|
||||||
|
private async register(serverUrl: string): Promise<string> {
|
||||||
|
const base = serverUrl.replace(/\/+$/, '');
|
||||||
|
const localName = localStorage.getItem('username') ?? 'viewer';
|
||||||
|
const res = await fetch(`${base}/api/auth/register`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ name: `${localName}-watch`, isBot: false })
|
||||||
|
});
|
||||||
|
if (!res.ok) throw new Error(`tournament-server register failed: ${res.status}`);
|
||||||
|
const body = (await res.json()) as RegisterResponse;
|
||||||
|
return body.token;
|
||||||
|
}
|
||||||
|
|
||||||
|
private cacheKey(serverUrl: string): string {
|
||||||
|
return `tournament-token:${serverUrl.replace(/\/+$/, '')}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,36 +1,48 @@
|
|||||||
import { Injectable } from '@angular/core';
|
import { Injectable, inject } from '@angular/core';
|
||||||
import { Observable } from 'rxjs';
|
import { Observable } from 'rxjs';
|
||||||
import { GameStreamEvent, TournamentStreamEvent } from '../models/tournament.models';
|
import { GameStateSnapshot, GameStreamEvent, TournamentStreamEvent } from '../models/tournament.models';
|
||||||
|
import { TournamentAuthService } from './tournament-auth.service';
|
||||||
|
|
||||||
@Injectable({ providedIn: 'root' })
|
@Injectable({ providedIn: 'root' })
|
||||||
export class TournamentStreamService {
|
export class TournamentStreamService {
|
||||||
|
private readonly auth = inject(TournamentAuthService);
|
||||||
|
|
||||||
streamTournament(serverUrl: string, tournamentId: string): Observable<TournamentStreamEvent> {
|
streamTournament(serverUrl: string, tournamentId: string): Observable<TournamentStreamEvent> {
|
||||||
return this.ndjson<TournamentStreamEvent>(
|
return this.ndjson<TournamentStreamEvent>(
|
||||||
this.url(serverUrl, `/api/tournament/${tournamentId}/stream`)
|
serverUrl,
|
||||||
|
`/api/tournament/${tournamentId}/stream`
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
streamGame(serverUrl: string, tournamentId: string, gameId: string): Observable<GameStreamEvent> {
|
streamGame(serverUrl: string, tournamentId: string, gameId: string): Observable<GameStreamEvent> {
|
||||||
return this.ndjson<GameStreamEvent>(
|
return this.ndjson<GameStreamEvent>(
|
||||||
this.url(serverUrl, `/api/tournament/${tournamentId}/game/${gameId}/stream`)
|
serverUrl,
|
||||||
|
`/api/tournament/${tournamentId}/game/${gameId}/stream`
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
private url(base: string, path: string): string {
|
async fetchGame(serverUrl: string, tournamentId: string, gameId: string): Promise<GameStateSnapshot> {
|
||||||
|
const base = serverUrl.replace(/\/+$/, '');
|
||||||
|
const token = await this.auth.getToken(serverUrl);
|
||||||
|
const res = await fetch(`${base}/api/tournament/${tournamentId}/game/${gameId}`, {
|
||||||
|
headers: { Authorization: `Bearer ${token}` },
|
||||||
|
});
|
||||||
|
if (!res.ok) throw new Error(`Game fetch failed: ${res.status}`);
|
||||||
|
return res.json() as Promise<GameStateSnapshot>;
|
||||||
|
}
|
||||||
|
|
||||||
|
private fullUrl(base: string, path: string): string {
|
||||||
if (!base) return path;
|
if (!base) return path;
|
||||||
return `${base.replace(/\/+$/, '')}${path}`;
|
return `${base.replace(/\/+$/, '')}${path}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
private ndjson<T>(url: string): Observable<T> {
|
private ndjson<T>(serverUrl: string, path: string): Observable<T> {
|
||||||
return new Observable<T>(subscriber => {
|
return new Observable<T>(subscriber => {
|
||||||
const controller = new AbortController();
|
const controller = new AbortController();
|
||||||
const token = localStorage.getItem('token');
|
|
||||||
const headers: Record<string, string> = { Accept: 'application/x-ndjson' };
|
|
||||||
if (token) headers['Authorization'] = `Bearer ${token}`;
|
|
||||||
|
|
||||||
(async () => {
|
(async () => {
|
||||||
try {
|
try {
|
||||||
const res = await fetch(url, { headers, signal: controller.signal });
|
const res = await this.openWithRetry(serverUrl, path, controller.signal);
|
||||||
if (!res.ok || !res.body) {
|
if (!res.ok || !res.body) {
|
||||||
subscriber.error(new Error(`Stream failed: ${res.status} ${res.statusText}`));
|
subscriber.error(new Error(`Stream failed: ${res.status} ${res.statusText}`));
|
||||||
return;
|
return;
|
||||||
@@ -63,4 +75,20 @@ export class TournamentStreamService {
|
|||||||
return () => controller.abort();
|
return () => controller.abort();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private async openWithRetry(serverUrl: string, path: string, signal: AbortSignal): Promise<Response> {
|
||||||
|
const url = this.fullUrl(serverUrl, path);
|
||||||
|
const token = await this.auth.getToken(serverUrl);
|
||||||
|
const res = await fetch(url, {
|
||||||
|
headers: { Accept: 'application/x-ndjson', Authorization: `Bearer ${token}` },
|
||||||
|
signal,
|
||||||
|
});
|
||||||
|
if (res.status !== 401) return res;
|
||||||
|
this.auth.clearToken(serverUrl);
|
||||||
|
const fresh = await this.auth.getToken(serverUrl);
|
||||||
|
return fetch(url, {
|
||||||
|
headers: { Accept: 'application/x-ndjson', Authorization: `Bearer ${fresh}` },
|
||||||
|
signal,
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,7 +2,6 @@ import { Injectable, inject } from '@angular/core';
|
|||||||
import { HttpClient, HttpHeaders } from '@angular/common/http';
|
import { HttpClient, HttpHeaders } from '@angular/common/http';
|
||||||
import { Observable } from 'rxjs';
|
import { Observable } from 'rxjs';
|
||||||
import { Tournament, TournamentList, RoundPairings } from '../models/tournament.models';
|
import { Tournament, TournamentList, RoundPairings } from '../models/tournament.models';
|
||||||
import { environment } from '../../environments/environment';
|
|
||||||
|
|
||||||
export interface CreateTournamentForm {
|
export interface CreateTournamentForm {
|
||||||
name: string;
|
name: string;
|
||||||
@@ -15,7 +14,7 @@ export interface CreateTournamentForm {
|
|||||||
@Injectable({ providedIn: 'root' })
|
@Injectable({ providedIn: 'root' })
|
||||||
export class TournamentService {
|
export class TournamentService {
|
||||||
private readonly http = inject(HttpClient);
|
private readonly http = inject(HttpClient);
|
||||||
private readonly base = `${(environment.tournamentServerUrl ?? '').replace(/\/+$/, '')}/api/tournament`;
|
private readonly base = '/api/tournament';
|
||||||
|
|
||||||
list(): Observable<TournamentList> {
|
list(): Observable<TournamentList> {
|
||||||
return this.http.get<TournamentList>(this.base);
|
return this.http.get<TournamentList>(this.base);
|
||||||
|
|||||||
+1
-1
@@ -1,3 +1,3 @@
|
|||||||
MAJOR=0
|
MAJOR=0
|
||||||
MINOR=6
|
MINOR=6
|
||||||
PATCH=1
|
PATCH=4
|
||||||
|
|||||||
Reference in New Issue
Block a user