analysis clock states UI - first draft

public/stylesheets/analyse.css

@@ -1144,6 +1144,24 @@ body.dark .action_menu input[type=range]::-ms-fill-upper {
   padding-bottom: 3px;
 }
 
+.lichess_ground .clock {
+  position: absolute;
+  right: -40px;
+  width: 40px;
+  padding: 8px;
+  box-sizing: border-box;
+  font-family: 'Roboto Mono', 'Roboto';
+}
+.lichess_ground .clock.top {
+  top: 40px;
+}
+.lichess_ground .clock.bottom {
+  bottom: 37px;
+}
+.lichess_ground .clock.active {
+  font-weight: bold;
+}
+
 .tview2 {
   display: flex;
   flex-flow: row wrap;

ui/analyse/src/clocks.js

@@ -0,0 +1,40 @@
+var m = require('mithril');
+var opposite = require('chessground/util').opposite;
+
+module.exports = function(ctrl) {
+  var states = ctrl.data.game.clockStates;
+  var bottomColor = ctrl.bottomColor();
+  if (!states) return;
+  return [
+    renderClock(ctrl, states, bottomColor === 'black', 'top'),
+    renderClock(ctrl, states, bottomColor === 'white', 'bottom')
+  ];
+}
+
+function renderClock(ctrl, states, isWhite, position) {
+  var ply = ctrl.vm.node.ply;
+  var i = Math.max(0, ply - ctrl.tree.root.ply - 2);
+  i = Math.floor(i / 2) * 2;
+  if (!isWhite) i++;
+  var tenths = states[i];
+  return m('div', {
+    class: 'clock ' + position + (ply % 2 === (isWhite ? 0 : 1) ? ' active' : '')
+  }, clockContent(tenths));
+}
+
+function clockContent(tenths) {
+  var date = new Date(tenths * 100);
+  var millis = date.getUTCMilliseconds();
+  var sep = ':';
+  var baseStr = pad2(date.getUTCMinutes()) + sep + pad2(date.getUTCSeconds());
+  if (tenths >= 36000) {
+    var hours = pad2(Math.floor(tenths / 36000));
+    return hours + sep + baseStr;
+  }
+  var tenthsStr = Math.floor(millis / 100).toString();
+  return baseStr + '.' + tenthsStr;
+}
+
+function pad2(num) {
+  return (num < 10 ? '0' : '') + num;
+}

ui/analyse/src/view.js

@@ -11,6 +11,7 @@ var treeView = require('./treeView');
 var control = require('./control');
 var actionMenu = require('./actionMenu').view;
 var renderPromotion = require('./promotion').view;
+var renderClocks = require('./clocks');
 var pgnExport = require('./pgnExport');
 var forecastView = require('./forecast/forecastView');
 var cevalView = require('ceval').view;
@@ -264,6 +265,7 @@ module.exports = function(ctrl) {
       }, [
         ctrl.data.blind ? blindBoard(ctrl) : visualBoard(ctrl),
         m('div.lichess_ground', [
+          renderClocks(ctrl),
           ctrl.actionMenu.open ? null : crazyView.pocket(ctrl, ctrl.topColor(), 'top'),
           ctrl.actionMenu.open ? actionMenu(ctrl) : [
             cevalView.renderCeval(ctrl),

ui/round/src/clock/view.js

@@ -32,7 +32,7 @@ function renderClock(ctrl, player, position) {
   ];
 }
 
-function _pad2(num) {
+function pad2(num) {
   return (num < 10 ? '0' : '') + num;
 }
 
@@ -43,9 +43,9 @@ function formatClockTime(data, time, running) {
   var date = new Date(time);
   var millis = date.getUTCMilliseconds();
   var sep = (running && millis < 500) ? sepLow : sepHigh;
-  var baseStr = _pad2(date.getUTCMinutes()) + sep + _pad2(date.getUTCSeconds());
+  var baseStr = pad2(date.getUTCMinutes()) + sep + pad2(date.getUTCSeconds());
   if (time >= 3600000) {
-    var hours = _pad2(Math.floor(time / 3600000));
+    var hours = pad2(Math.floor(time / 3600000));
     return hours + sepHigh + baseStr;
   } else if (time >= 10000 && data.showTenths != 2 || data.showTenths == 0) {
     return baseStr;