broadcast: always show move clock, add pause icon

lichess-org · Dec 28, 2024 · 10b9967 · 10b9967
1 parent e1b699a
commit 10b9967
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 20 deletions.
diff --git a/ui/analyse/css/_player-clock.scss b/ui/analyse/css/_player-clock.scss
@@ -59,6 +59,12 @@ $clock-height: 20px;
   tenths {
     font-size: 80%;
   }
+
+  i {
+    font-size: 0.7em;
+    margin-inline-end: 0.4em;
+    color: $c-accent;
+  }
 }
 
 .material {

diff --git a/ui/analyse/css/study/_player.scss b/ui/analyse/css/study/_player.scss
@@ -66,7 +66,7 @@ $player-height: 1.6rem;
 
     height: 100%;
     font-size: 1.2em;
-    @include padding-direction(0, 0.8em, 0, 0.4em);
+    @include padding-direction(0, 0.8em, 0, 0.6em);
 
     border-radius: 0 4px 0 0;
     box-shadow: none;

diff --git a/ui/analyse/css/study/relay/_layout.scss b/ui/analyse/css/study/relay/_layout.scss
@@ -131,7 +131,7 @@ main.analyse.is-relay:not(.has-relay-tour) {
   }
   &.relay-in-variation {
     .main-board cg-board {
-      filter: saturate(0.65) brightness(0.9);
+      filter: saturate(0.7) brightness(0.9);
     }
   }
 }
diff --git a/ui/analyse/src/study/playerBars.ts b/ui/analyse/src/study/playerBars.ts
@@ -4,7 +4,7 @@ import renderClocks from '../view/clocks';
 import type AnalyseCtrl from '../ctrl';
 import { renderMaterialDiffs } from '../view/components';
 import type { StudyPlayers, Federation, TagArray } from './interfaces';
-import { findTag, isFinished, looksLikeLichessGame, resultOf } from './studyChapters';
+import { findTag, looksLikeLichessGame, resultOf } from './studyChapters';
 import { userTitle } from 'common/userLink';
 import RelayPlayers, { fidePageLinkAttrs } from './relay/relayPlayers';
 import { StudyCtrl } from './studyDeps';
@@ -41,13 +41,7 @@ export default function (ctrl: AnalyseCtrl): VNode[] | undefined {
 // Ongoing game: the last mainline node, no matter what
 function selectClockPath(ctrl: AnalyseCtrl, study: StudyCtrl): Tree.Path {
   const gamePath = ctrl.gamePath || study.data.chapter.relayPath;
-  return isFinished(study.data.chapter)
-    ? ctrl.node.clock
-      ? ctrl.path
-      : gamePath
-        ? intersection(ctrl.path, gamePath)
-        : ctrl.path
-    : gamePath || ctrl.path;
+  return ctrl.node.clock ? ctrl.path : gamePath ? intersection(ctrl.path, gamePath) : ctrl.path;
 }
 
 function renderPlayer(

diff --git a/ui/analyse/src/study/relay/relayView.ts b/ui/analyse/src/study/relay/relayView.ts
@@ -39,7 +39,7 @@ export const backToLiveView = (ctrl: AnalyseCtrl) =>
     ? h(
         'button.fbt.relay-back-to-live.text',
         {
-          attrs: dataIcon(licon.RadioTower),
+          attrs: dataIcon(licon.PlayTriangle),
           hook: bind(
             'click',
             () => {

diff --git a/ui/analyse/src/view/clocks.ts b/ui/analyse/src/view/clocks.ts
@@ -1,6 +1,16 @@
 import { h, type VNode } from 'snabbdom';
 import type AnalyseCtrl from '../ctrl';
 import { notNull } from 'common';
+import * as licon from 'common/licon';
+import { iconTag } from 'common/snabbdom';
+
+interface ClockOpts {
+  centis: number | undefined;
+  active: boolean;
+  cls: string;
+  showTenths: boolean;
+  pause: boolean;
+}
 
 export default function renderClocks(ctrl: AnalyseCtrl, path: Tree.Path): [VNode, VNode] | undefined {
   const node = ctrl.tree.nodeAtPath(path),
@@ -26,24 +36,43 @@ export default function renderClocks(ctrl: AnalyseCtrl, path: Tree.Path): [VNode
   }
 
   const showTenths = !study?.relay;
+  const pause = !!ctrl.study?.isRelayAwayFromLive();
 
   return [
-    renderClock(centis[0], isWhiteTurn, whitePov ? 'bottom' : 'top', showTenths),
-    renderClock(centis[1], !isWhiteTurn, whitePov ? 'top' : 'bottom', showTenths),
+    renderClock({
+      centis: centis[0],
+      active: isWhiteTurn,
+      cls: whitePov ? 'bottom' : 'top',
+      showTenths,
+      pause,
+    }),
+    renderClock({
+      centis: centis[1],
+      active: !isWhiteTurn,
+      cls: whitePov ? 'top' : 'bottom',
+      showTenths,
+      pause,
+    }),
   ];
 }
 
-const renderClock = (centis: number | undefined, active: boolean, cls: string, showTenths: boolean): VNode =>
-  h('div.analyse__clock.' + cls, { class: { active } }, clockContent(centis, showTenths));
+const renderClock = (opts: ClockOpts): VNode =>
+  h('div.analyse__clock.' + opts.cls, { class: { active: opts.active } }, clockContent(opts));
 
-function clockContent(centis: number | undefined, showTenths: boolean): Array<string | VNode> {
-  if (!centis && centis !== 0) return ['-'];
-  const date = new Date(centis * 10),
+function clockContent(opts: ClockOpts): Array<string | VNode> {
+  if (!opts.centis && opts.centis !== 0) return ['-'];
+  const date = new Date(opts.centis * 10),
     millis = date.getUTCMilliseconds(),
     sep = ':',
     baseStr = pad2(date.getUTCMinutes()) + sep + pad2(date.getUTCSeconds());
-  if (!showTenths || centis >= 360000) return [Math.floor(centis / 360000) + sep + baseStr];
-  return centis >= 6000 ? [baseStr] : [baseStr, h('tenths', '.' + Math.floor(millis / 100).toString())];
+  const timeNodes =
+    !opts.showTenths || opts.centis >= 360000
+      ? [Math.floor(opts.centis / 360000) + sep + baseStr]
+      : opts.centis >= 6000
+        ? [baseStr]
+        : [baseStr, h('tenths', '.' + Math.floor(millis / 100).toString())];
+  const pauseNodes = opts.pause ? [iconTag(licon.Pause)] : [];
+  return [...pauseNodes, ...timeNodes];
 }
 
 const pad2 = (num: number): string => (num < 10 ? '0' : '') + num;