hide broadcast game list when empty

lichess-org · Mar 15, 2024 · c1f33d4 · c1f33d4
1 parent 1b3e96a
commit c1f33d4
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 15 deletions.
diff --git a/ui/analyse/css/study/relay/_tour.scss b/ui/analyse/css/study/relay/_tour.scss
@@ -21,6 +21,23 @@
         }
       }
     }
+    &__empty {
+      @extend %box-neat;
+      align-items: center;
+      justify-content: center;
+      background: $c-bg-box;
+      gap: 1em;
+      &::before {
+        font-size: 6em;
+        color: $c-font-dimmer;
+      }
+      padding: 1rem 0 2rem 0;
+      display: flex;
+      flex-flow: column;
+      @include breakpoint($mq-col2) {
+        display: flex;
+      }
+    }
     &__search {
       flex: 0 0 auto;
       border-left: $border !important;

diff --git a/ui/analyse/src/study/relay/relayTourView.ts b/ui/analyse/src/study/relay/relayTourView.ts
@@ -32,27 +32,37 @@ export default function (ctrl: AnalyseCtrl): VNode | undefined {
   return h('div.box.relay-tour', content);
 }
 
-export const tourSide = (ctrl: AnalyseCtrl, study: StudyCtrl, relay: RelayCtrl) =>
-  h('aside.relay-tour__side', [
-    h('div.relay-tour__side__header', [
-      h(
-        'button.relay-tour__side__name',
-        { hook: bind('click', relay.tourShow.toggle, relay.redraw) },
-        study.data.name,
-      ),
-      h('button.relay-tour__side__search', {
-        attrs: { 'data-icon': licon.Search, title: 'Search' },
-        hook: bind('click', study.search.open.toggle),
-      }),
-    ]),
-    gamesList(study, relay),
+export const tourSide = (ctrl: AnalyseCtrl, study: StudyCtrl, relay: RelayCtrl) => {
+  const empty = study.chapters.list.looksNew();
+  return h('aside.relay-tour__side', [
+    ...(empty
+      ? [
+          h('div.relay-tour__side__empty', { attrs: dataIcon(licon.RadioTower) }, [
+            'The broadcast will start soon.',
+          ]),
+        ]
+      : [
+          h('div.relay-tour__side__header', [
+            h(
+              'button.relay-tour__side__name',
+              { hook: bind('click', relay.tourShow.toggle, relay.redraw) },
+              study.data.name,
+            ),
+            h('button.relay-tour__side__search', {
+              attrs: { 'data-icon': licon.Search, title: 'Search' },
+              hook: bind('click', study.search.open.toggle),
+            }),
+          ]),
+        ]),
+    !empty && gamesList(study, relay),
     h('div.chat__members', {
       hook: onInsert(el => {
         makeChat(ctrl, chat => el.parentNode!.insertBefore(chat, el));
         site.watchers(el);
       }),
     }),
   ]);
+};
 
 const leaderboard = (relay: RelayCtrl, ctrl: AnalyseCtrl) => [
   ...header(relay, ctrl),

diff --git a/ui/analyse/src/study/studyChapters.ts b/ui/analyse/src/study/studyChapters.ts
@@ -30,7 +30,7 @@ export class StudyChapters {
   first = () => this.list()[0];
   looksNew = () => {
     const cs = this.all();
-    return cs.length == 1 && cs[0].name == 'Chapter 1';
+    return cs.length === 1 && cs[0].name == 'Chapter 1';
   };
 }