64 lines
2.3 KiB
HTML
64 lines
2.3 KiB
HTML
<div class="watch-page">
|
|
<header class="watch-head">
|
|
<a class="back-link" routerLink="/tournaments">← Tournaments</a>
|
|
<div class="watch-title">
|
|
@if (snapshot?.white && snapshot?.black) {
|
|
<span class="player">{{ snapshot!.white!.name }}</span>
|
|
<span class="vs">vs</span>
|
|
<span class="player">{{ snapshot!.black!.name }}</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">{{ snapshot?.black?.name ?? '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">{{ snapshot?.white?.name ?? '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>
|