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,59 +1,71 @@
-.relay-tour__text {
-  @extend %box-neat;
-
-  background: $c-bg-box;
-  padding: 3vmin;
-  max-height: 50vh;
-  overflow-y: auto;
-
-  .slist {
-    margin-bottom: 1em;
+.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;
 
-  h1 {
-    @include fluid-size('font-size', 15px, 27px);
+    background: $c-bg-box;
+    padding: 3vmin;
+    max-height: 50vh;
+    overflow-y: auto;
 
-    margin-bottom: 3vh;
-  }
+    .slist {
+      margin-bottom: 1em;
+    }
 
-  h2,
-  h3,
-  h4 {
-    line-height: 2em;
-  }
+    h1 {
+      @include fluid-size('font-size', 15px, 27px);
 
-  h2 {
-    font-size: 1.8em;
-  }
+      margin-bottom: 3vh;
+    }
 
-  h3 {
-    font-size: 1.5em;
-    line-height: 2em;
-  }
+    h2,
+    h3,
+    h4 {
+      line-height: 2em;
+    }
 
-  h4 {
-    font-size: 1.3em;
-  }
+    h2 {
+      font-size: 1.8em;
+    }
 
-  em {
-    font-style: italic;
-  }
+    h3 {
+      font-size: 1.5em;
+      line-height: 2em;
+    }
 
-  ul li {
-    list-style: disc outside;
-    margin: 0.5em 0 0 1.5em;
-  }
+    h4 {
+      font-size: 1.3em;
+    }
 
-  ol li {
-    list-style: decimal inside;
-    margin: 0.5em 0;
-  }
+    em {
+      font-style: italic;
+    }
 
-  li {
-    margin-left: 2em;
+    ul li {
+      list-style: disc outside;
+      margin: 0.5em 0 0 1.5em;
+    }
 
-    p {
-      display: inline;
+    ol li {
+      list-style: decimal inside;
+      margin: 0.5em 0;
+    }
+
+    li {
+      margin-left: 2em;
+
+      p {
+        display: inline;
+      }
     }
   }
 }

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;
 }