lq64
76e0e3db78
The gameState stream event does not carry player names, so snapshot.white/black
were always undefined and the UI fell back to the literal strings "Black" and
"White". Fix by fetching the full game object (GET /api/tournament/{id}/game/{gameId})
on page load, which includes BotRef with real names, and storing them in
dedicated whiteName/blackName fields.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---------
Co-authored-by: LQ63 <lkhermann@web.de>
Reviewed-on: #15
64 lines
2.2 KiB
HTML
64 lines
2.2 KiB
HTML
<div class="watch-page">
|
|
<header class="watch-head">
|
|
<a class="back-link" routerLink="/tournaments">← Tournaments</a>
|
|
<div class="watch-title">
|
|
@if (whiteName && blackName) {
|
|
<span class="player">{{ whiteName }}</span>
|
|
<span class="vs">vs</span>
|
|
<span class="player">{{ blackName }}</span>
|
|
@if (snapshot?.round) {
|
|
<span class="round-tag">Round {{ snapshot!.round }}</span>
|
|
}
|
|
} @else {
|
|
<span class="player">Game {{ gameId }}</span>
|
|
}
|
|
</div>
|
|
</header>
|
|
|
|
@if (error) {
|
|
<div class="watch-error">{{ error }}</div>
|
|
} @else if (connecting) {
|
|
<div class="watch-loading"><span class="pulse"></span>Connecting to stream…</div>
|
|
}
|
|
|
|
<div class="watch-layout">
|
|
<div class="board-wrap">
|
|
<div class="clock clock-top" [class.active]="status === 'ongoing' && turn === 'black'">
|
|
<span class="clock-label">{{ blackName ?? 'Black' }}</span>
|
|
<span class="clock-time">{{ formatTime(clock?.blackTime) }}</span>
|
|
</div>
|
|
<app-chess-board [fen]="fen"></app-chess-board>
|
|
<div class="clock clock-bot" [class.active]="status === 'ongoing' && turn === 'white'">
|
|
<span class="clock-label">{{ whiteName ?? 'White' }}</span>
|
|
<span class="clock-time">{{ formatTime(clock?.whiteTime) }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="watch-side">
|
|
<div class="status-card" [attr.data-status]="status">
|
|
<div class="status-line">{{ statusLabel() }}</div>
|
|
@if (clock?.increment) {
|
|
<div class="status-sub">+{{ clock!.increment }}s increment</div>
|
|
}
|
|
</div>
|
|
|
|
<div class="moves-card">
|
|
<h3 class="moves-heading">Moves <span class="ply-count">{{ moves.length }}</span></h3>
|
|
@if (moves.length === 0) {
|
|
<p class="moves-empty">No moves yet.</p>
|
|
} @else {
|
|
<ol class="moves-list">
|
|
@for (p of movePairs(); track p.n) {
|
|
<li>
|
|
<span class="move-no">{{ p.n }}.</span>
|
|
<span class="move-uci">{{ p.white }}</span>
|
|
<span class="move-uci">{{ p.black ?? '' }}</span>
|
|
</li>
|
|
}
|
|
</ol>
|
|
}
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</div>
|