display practice goal

public/stylesheets/practice.css

@@ -59,32 +59,47 @@ div.game_control {
   margin-right: 5px;
   font-size: 1.2em;
 }
-.underboard .complete {
+.underboard .feedback {
   position: absolute;
   top: -10px;
   left: 0;
   width: 100%;
-  height: 53px;
+  padding: 15px 20px;
   box-sizing: border-box;
   display: flex;
   justify-content: center;
   align-items: center;
+  font-size: 1.4em;
+  background: #fff;
+  box-shadow: 0 0 3px rgba(0,0,0,0.3);
+}
+.underboard .feedback.complete {
   background: #759900;
   color: #fff;
-  font-size: 1.4em;
   animation: 1.7s soft-bright ease-in-out infinite;
   opacity: 0.8;
   transition: 0.13s;
 }
-.underboard .complete:hover {
+.underboard .feedback:hover {
   opacity: 1;
 }
-.underboard .complete span {
+.underboard .feedback span {
   margin-right: 10px;
 }
-.underboard .complete strong {
+.underboard .feedback strong {
   margin-left: 3px;
 }
+.underboard .feedback.ongoing {
+  align-items: flex-start;
+  flex-flow: column;
+  text-align: left;
+}
+.underboard .feedback .goal {
+  margin-bottom: 10px;
+}
+.underboard .feedback .comment {
+  display: block;
+}
 
 #practice_app .section {
   width: 742px;

ui/analyse/src/study/studyPractice.js

@@ -41,7 +41,7 @@ module.exports = {
     root.vm.showGauge = readOnlyProp(true);
     root.vm.showComputer = readOnlyProp(true);
 
-    var completeFeedback = m.prop();
+    var feedback = m.prop();
 
     var victoryType = function() {
       return root.study.data.chapter.tags.filter(function(tag) {
@@ -55,27 +55,33 @@ module.exports = {
         data.completion[chapterId] = nbMoves;
         xhr.practiceComplete(chapterId, nbMoves);
       }
-      completeFeedback({
+      feedback({
         success: true,
         nbMoves: nbMoves,
         next: findNextOngoingChapter() || findNextChapter()
       });
     };
 
-    var isVictory = function() {
-      switch (victoryType()) {
-        case 'checkmate':
-          return root.gameOver() === 'checkmate' && root.turnColor() !== root.bottomColor();
-        case 'draw':
-          if (root.gameOver() === 'draw') return true;
-          var n = root.vm.node;
-          if (n.ply >= 20 && n.ceval && n.ceval.depth === 16 && Math.abs(n.ceval.cp) < 100) return true;
-      }
-    };
-
     var checkVictory = function() {
-      if (isVictory()) complete(root.study.currentChapter().id, root.vm.node.ply);
-      else completeFeedback(null);
+      var n = root.vm.node,
+        vt = victoryType(),
+        nbMoves = Math.ceil(n.ply / 2),
+        isVictory;
+      switch (vt) {
+        case 'checkmate':
+          isVictory = root.gameOver() === 'checkmate' && root.turnColor() !== root.bottomColor();
+          break;
+        case 'draw':
+          isVictory = root.gameOver() === 'draw' || (
+            nbMoves >= 15 && n.ceval && n.ceval.depth === 16 && Math.abs(n.ceval.cp) < 100
+          );
+      }
+      if (isVictory) complete(root.study.currentChapter().id, nbMoves);
+      else feedback({
+        goal: vt,
+        nbMoves: nbMoves,
+        comment: root.tree.root.comments[0]
+      });
     };
 
     var findNextOngoingChapter = function() {
@@ -95,14 +101,15 @@ module.exports = {
       onJump: checkVictory,
       onCeval: checkVictory,
       data: data,
-      completeFeedback: completeFeedback
+      feedback: feedback
     };
   },
 
   view: {
     underboard: function(ctrl) {
-      var fb = ctrl.practice.completeFeedback();
-      if (fb) return m('a.complete', {
+      var fb = ctrl.practice.feedback();
+      if (!fb) return;
+      if (fb.success) return m('a.feedback.complete', {
         onclick: function() {
           ctrl.setChapter(fb.next.id);
         }
@@ -111,6 +118,15 @@ module.exports = {
         'Next: ',
         m('strong', fb.next.name)
       ]);
+      return m('div.feedback.ongoing', [
+        m('div.goal', [
+          'Your goal: ',
+          m('strong',
+            fb.goal === 'checkmate' ? 'Checkmate the opponent' :
+            'Hold the draw for ' + (16 - fb.nbMoves) + ' more moves.')
+        ]),
+        fb.comment ? m('div.comment', fb.comment.text) : null
+      ]);
     },
     main: function(ctrl) {