tell users about conditional premoves - closes #970

https://i.imgur.com/zQW7HEk.png

public/stylesheets/common.css

@@ -348,7 +348,7 @@ div.content_box .loader:after {
   border: 1px solid #c0c0c0;
   display: none;
   position: absolute;
-  z-index: 2147483647;
+  z-index: 900000;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
 }
 #powerTip > .title {
@@ -414,6 +414,17 @@ div.content_box .loader:after {
   border-bottom: 1px solid #c0c0c0;
   padding: 3px 0;
 }
+#powerTip > .info .title {
+  display: block;
+  padding: 10px 15px;
+  border-bottom: 1px solid #c0c0c0;
+  text-align: center;
+  text-transform: uppercase;
+}
+#powerTip > .info .content {
+  display: block;
+  padding: 15px 15px;
+}
 .clearfix::after {
   content: ".";
   display: block;
@@ -2225,7 +2236,7 @@ textarea.copyable {
   transform: translate3d(0, 0, 0);
   visibility: hidden;
   opacity: 0;
-  z-index: 1000000;
+  z-index: 900005;
   pointer-events: none;
   transition: 0.2s ease;
   transition-delay: 0ms;
@@ -2240,7 +2251,7 @@ textarea.copyable {
   position: absolute;
   background: transparent;
   border: 6px solid transparent;
-  z-index: 1000001;
+  z-index: 900006;
 }
 [data-hint]:after {
   content: attr(data-hint);

ui/game/src/game.js

@@ -38,7 +38,7 @@ function drawable(data) {
   return playable(data) &&
     data.game.turns >= 2 &&
     !data.player.offeringDraw &&
-    !data.opponent.ai;
+    !hasAi(data);
 }
 
 function resignable(data) {
@@ -75,6 +75,10 @@ function userAnalysable(data) {
   return playable(data) && (!data.clock || !isPlayerPlaying(data));
 }
 
+function forecastable(data) {
+  return playable(data) && data.correspondence && !hasAi(data) && !isPlayerTurn(data);
+}
+
 function setOnGame(data, color, onGame) {
   var player = getPlayer(data, color);
   onGame = onGame || player.ai;
@@ -109,5 +113,6 @@ module.exports = {
   getPlayer: getPlayer,
   nbMoves: nbMoves,
   setOnGame: setOnGame,
-  setIsGone: setIsGone
+  setIsGone: setIsGone,
+  forecastable: forecastable
 };

ui/round/src/ctrl.js

@@ -325,6 +325,15 @@ module.exports = function(opts) {
     }.bind(this), 500);
   }.bind(this);
 
+  this.forecastInfo = function() {
+    var key = 'forecast-info-seen5';
+    if (game.forecastable(this.data) && !this.replaying() && this.data.game.turns > 1 && !lichess.storage.get(key)) {
+      lichess.storage.set(key, 1);
+      return true;
+    }
+    return false;
+  }.bind(this);
+
   this.router = opts.routes;
 
   this.trans = function(key) {

ui/round/src/view/replay.js

@@ -81,6 +81,36 @@ function renderTable(ctrl) {
       trs));
 }
 
+function analyseButton(ctrl) {
+  var showInfo = ctrl.forecastInfo();
+  return [
+    m('a', {
+      class: classSet({
+        'button analysis': true,
+        'hint--top': !showInfo,
+        'hint--bottom': showInfo,
+        'active': showInfo
+      }),
+      'data-hint': ctrl.trans('analysis'),
+      href: ctrl.router.UserAnalysis.game(ctrl.data.game.id, ctrl.data.player.color).url + '#' + ctrl.vm.ply,
+      config: showInfo ? function(el) {
+        setTimeout(function() {
+          $(el).powerTip({
+            manual: true,
+            fadeInTime: 300,
+            fadeOutTime: 300,
+            placement: 'n'
+          }).data('powertipjq', $(el).siblings('.forecast-info').clone().show()).powerTip('show');
+        }, 1000);
+      } : null
+    }, m('span[data-icon="A"]')),
+    showInfo ? m('div.forecast-info.info.none', [
+      m('strong.title.text[data-icon=]', 'New feature'),
+      m('span.content', 'Use the analysis board to create conditional premoves!')
+    ]) : null
+  ];
+}
+
 function renderButtons(ctrl) {
   var firstPly = ctrl.firstPly();
   var lastPly = ctrl.lastPly();
@@ -107,11 +137,7 @@ function renderButtons(ctrl) {
         'data-icon': b[1],
         onclick: enabled ? partial(ctrl.jump, b[2]) : null
       });
-    }), (game.userAnalysable(ctrl.data) ? m('a', {
-      class: 'button hint--top analysis',
-      'data-hint': ctrl.trans('analysis'),
-      href: ctrl.router.UserAnalysis.game(ctrl.data.game.id, ctrl.data.player.color).url + '#' + ctrl.vm.ply,
-    }, m('span[data-icon="A"]')) : null)
+    }), game.userAnalysable(ctrl.data) ? analyseButton(ctrl) : null
   ]);
 }