feat: NCWF-10 streaming endpoint (#14)

Co-authored-by: shahdlala66 <shahd.lala66@gmail.com> Reviewed-on: #14
2026-06-23 09:38:08 +02:00
parent ab2c641130
commit 1dabd88c62
11 changed files with 455 additions and 4 deletions
@@ -0,0 +1,63 @@
+<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>