display analysis clocks

ui/analyse/css/_analyse.round.scss

@@ -3,3 +3,4 @@
 @import 'retro';
 @import 'acpl';
 @import 'round-underboard';
+@import 'player-clock';

ui/analyse/css/_player-clock.scss

@@ -0,0 +1,25 @@
+.analyse__clock {
+  @extend %flex-between-nowrap, %metal, %box-shadow;
+
+  position: absolute;
+  right: 0;
+  padding: 0 .5em;
+
+  font-weight: bold;
+  text-align: center;
+
+  &.top {
+    @extend %box-radius-top;
+    top: -20px;
+  }
+  &.bottom {
+    @extend %box-radius-bottom;
+    bottom: -20px;
+  }
+  &.active {
+    background: mix($c-primary, $c-bg-box, 30%);
+  }
+  tenths {
+    font-size: 80%;
+  }
+}

ui/analyse/css/_side-clock.scss

@@ -1,30 +0,0 @@
-.side-clocks {
-  @extend %roboto;
-  position: absolute;
-  right: -62px;
-  width: 62px;
-  top: calc(50% - 32px);
-  line-height: 20px;
-}
-.side-clock {
-  height: 20px;
-  line-height: 20px;
-  padding: 5px 0;
-  text-align: center;
-  border: 1px solid #ccc;
-  &:first-child {
-    border-width: 1px 1px 1px 0;
-    border-radius: 0 4px 0 0;
-  }
-  &:last-child {
-    border-width: 0 1px 1px 0;
-    border-radius: 0 0 4px 0;
-  }
-  &.active {
-    background: #fafafa;
-    font-weight: bold;
-  }
-  tenths {
-    font-size: 80%;
-  }
-}

ui/analyse/src/clocks.ts

@@ -7,11 +7,11 @@ interface ClockOpts {
   tenths: boolean;
 }
 
-export default function(ctrl: AnalyseCtrl): VNode | undefined {
+export default function(ctrl: AnalyseCtrl): [VNode, VNode] | undefined {
   const clocks = renderClocks(ctrl);
   if (!clocks) return;
   if (ctrl.bottomIsWhite()) clocks.reverse();
-  return h('div.analyse__clocks', clocks);
+  return clocks;
 }
 
 export function renderClocks(ctrl: AnalyseCtrl): [VNode, VNode] | undefined {
@@ -35,13 +35,13 @@ export function renderClocks(ctrl: AnalyseCtrl): [VNode, VNode] | undefined {
   };
 
   return [
-    renderClock(centis[0], isWhiteTurn, opts),
-    renderClock(centis[1], !isWhiteTurn, opts)
+    renderClock(centis[0], isWhiteTurn, ctrl.bottomIsWhite() ? 'top' : 'bottom', opts),
+    renderClock(centis[1], !isWhiteTurn,  ctrl.bottomIsWhite() ? 'bottom' : 'top', opts)
   ];
 }
 
-function renderClock(centis: number | undefined, active: boolean, opts: ClockOpts): VNode {
-  return h('div.analyse__clock', {
+function renderClock(centis: number | undefined, active: boolean, cls: string, opts: ClockOpts): VNode {
+  return h('div.analyse__clock.' + cls, {
     class: { active },
   }, clockContent(centis, opts));
 }

ui/analyse/src/view.ts

@@ -11,7 +11,7 @@ import { render as renderTreeView } from './treeView/treeView';
 import * as control from './control';
 import { view as actionMenu } from './actionMenu';
 import { view as renderPromotion } from './promotion';
-// import renderClocks from './clocks';
+import renderClocks from './clocks';
 import * as pgnExport from './pgnExport';
 import forecastView from './forecast/forecastView';
 import { view as cevalView } from 'ceval';
@@ -275,6 +275,7 @@ export default function(ctrl: AnalyseCtrl): VNode {
     gamebookPlayView = gamebookPlay && gbPlay.render(gamebookPlay),
     gamebookEditView = gbEdit.running(ctrl) ? gbEdit.render(ctrl) : undefined,
     playerBars = renderPlayerBars(ctrl),
+    clocks = renderClocks(ctrl),
     gaugeOn = ctrl.showEvalGauge(),
     needsInnerCoords = !!gaugeOn || !!playerBars;
   return h('main.analyse' + (chapter ? '.' + chapter.id : ''), {
@@ -314,6 +315,7 @@ export default function(ctrl: AnalyseCtrl): VNode {
     h('div.analyse__board.main-board.variant-' + ctrl.data.game.variant.key + '.' + ctrl.bottomColor(), {
       hook: (window.lichess.hasTouchEvents || ctrl.gamebookPlay()) ? undefined : bind('wheel', (e: WheelEvent) => wheel(ctrl, e))
     }, [
+      ...(clocks || []),
       playerBars ? playerBars[ctrl.bottomIsWhite() ? 1 : 0] : null,
       chessground.render(ctrl),
       playerBars ? playerBars[ctrl.bottomIsWhite() ? 0 : 1] : null,
@@ -324,7 +326,6 @@ export default function(ctrl: AnalyseCtrl): VNode {
     ]),
     menuIsOpen ? null : crazyView(ctrl, ctrl.topColor(), 'top'),
     gamebookPlayView || h('div.analyse__tools', [
-      // menuIsOpen || playerBars ? null : renderClocks(ctrl),
       ...(menuIsOpen ? [actionMenu(ctrl)] : [
         cevalView.renderCeval(ctrl),
         showCevalPvs ? cevalView.renderPvs(ctrl) : null,