improve broadcast UI

modules/relay/src/main/JsonView.scala

@@ -61,6 +61,7 @@ object JsonView {
       )
       .add("finished" -> rt.round.finished)
       .add("ongoing" -> (rt.round.hasStarted && !rt.round.finished))
+      .add("startsAt" -> rt.round.startedAt.orElse(rt.round.startsAt))
   }
 
   implicit val tourIdWrites: Writes[RelayTour.Id] = Writes[RelayTour.Id] { id =>

ui/analyse/css/study/relay/_rounds.scss

@@ -11,6 +11,7 @@ $span-width: 1.7em;
     color: $c-font;
     margin-left: 1em;
     align-self: center;
+    line-height: 2;
   }
 
   > div.active .link {

ui/analyse/css/study/relay/_tour.scss

@@ -1,4 +1,15 @@
-.relay-tour__text {
+.relay-tour {
+  &__round {
+    @extend %box-radius, %flex-between-nowrap;
+    background: mix($c-primary, $c-bg-box, 10%);
+    margin-bottom: 3em;
+    padding: 1em 2em;
+    strong {
+      @extend %roboto;
+      font-size: 1.2em;
+    }
+  }
+  &__text {
     @extend %box-neat;
 
     background: $c-bg-box;
@@ -57,6 +68,7 @@
       }
     }
   }
+}
 
 main.has-relay-tour .mchat {
   max-height: 48vh;

ui/analyse/src/study/relay/interfaces.ts

@@ -10,6 +10,7 @@ export interface RelayRound {
   path: string;
   finished?: boolean;
   ongoing?: boolean;
+  startsAt?: number;
 }
 
 export interface RelayTour {

ui/analyse/src/study/relay/relayCtrl.ts

@@ -42,6 +42,8 @@ export default class RelayCtrl {
     }
   };
 
+  currentRound = () => this.data.rounds.find(r => this.id == r.id)!;
+
   private convertDate = (r: StudyChapterRelay): StudyChapterRelay => {
     if (typeof r.secondsSinceLastMove !== 'undefined' && !r.lastMoveAt) {
       r.lastMoveAt = Date.now() - r.secondsSinceLastMove * 1000;

ui/analyse/src/study/relay/relayTourView.ts

@@ -7,10 +7,30 @@ import { StudyCtrl } from '../interfaces';
 export default function (ctrl: AnalyseCtrl): VNode | undefined {
   const study = ctrl.study;
   const relay = study?.relay;
-  if (study && relay?.tourShow.active)
+  if (study && relay?.tourShow.active) {
+    const round = relay?.currentRound();
     return h('div.relay-tour', [
       h('div.relay-tour__text', [
         h('h1', relay.data.tour.name),
+        h('div.relay-tour__round', [
+          h('strong', round.name),
+          ' ',
+          round.ongoing
+            ? ctrl.trans.noarg('playingRightNow')
+            : round.startsAt
+            ? h(
+                'time.timeago',
+                {
+                  hook: {
+                    insert(vnode) {
+                      (vnode.elm as HTMLElement).setAttribute('datetime', '' + round.startsAt);
+                    },
+                  },
+                },
+                lichess.timeago(round.startsAt)
+              )
+            : null,
+        ]),
         relay.data.tour.markup
           ? h('div', {
               hook: innerHTML(relay.data.tour.markup, () => relay.data.tour.markup!),
@@ -19,6 +39,7 @@ export default function (ctrl: AnalyseCtrl): VNode | undefined {
       ]),
       multiBoardView(study.multiBoard, study),
     ]);
+  }
   return undefined;
 }