new opening trainer UI

ui/opening/src/ctrl.js

@@ -13,7 +13,8 @@ module.exports = function(cfg, router, i18n) {
     }).length,
     figuredOut: [],
     messedUp: [],
-    flash: null
+    flash: {},
+    flashFound: null,
   };
 
   var chess = new Chess(this.data.opening.fen);
@@ -58,24 +59,49 @@ module.exports = function(cfg, router, i18n) {
     },
   });
 
-  var submitMove = function(move) {
-    var found = this.data.opening.moves.filter(function(m) {
-      return m.first === move;
+  var submitMove = function(uci) {
+    var chessMove = chess.move({
+      from: uci.substr(0, 2),
+      to: uci.substr(2, 2)
+    });
+    if (!chessMove) return;
+    chess = new Chess(this.data.opening.fen);
+    var move = {
+      uci: uci,
+      san: chessMove.san
+    };
+    var known = this.data.opening.moves.filter(function(m) {
+      return m.first === move.uci;
     })[0];
-    if (found && found.quality === 'good') {
-      if (this.vm.figuredOut.indexOf(move) === -1) this.vm.figuredOut.push(move);
-    } else if (found && found.quality === 'dubious') {
-      flash('dubious');
-    } else if (!found || found.quality === 'bad') {
-      if (this.vm.messedUp.indexOf(move) === -1) this.vm.messedUp.push(move);
-      flash('bad');
+    if (known && known.quality === 'good') {
+      var alreadyFound = this.vm.figuredOut.filter(function(f) {
+        return f.uci === move.uci;
+      }).length > 0;
+      if (alreadyFound) flashFound(move);
+      else {
+        flash(move, 'good');
+        this.vm.figuredOut.push(move);
+      }
+    } else if (known && known.quality === 'dubious') {
+      flash(move, 'dubious');
+    } else {
+      if (this.vm.messedUp.indexOf(move.uci) === -1) this.vm.messedUp.push(move);
+      flash(move, 'bad');
     }
   }.bind(this);
 
-  var flash = function(f) {
-    this.vm.flash = f;
+  var flash = function(move, quality) {
+    this.vm.flash[quality] = move;
     setTimeout(function() {
-      this.vm.flash = null;
+      delete this.vm.flash[quality];
+      m.redraw();
+    }.bind(this), 1000);
+  }.bind(this);
+
+  var flashFound = function(move) {
+    this.vm.flashFound = move;
+    setTimeout(function() {
+      this.vm.flashFound = null;
       m.redraw();
     }.bind(this), 1000);
   }.bind(this);

ui/opening/src/view.js

@@ -71,19 +71,46 @@ function renderSide(ctrl) {
   ]);
 }
 
+function progress(ctrl) {
+  var steps = [];
+  var nbFiguredOut = ctrl.vm.figuredOut.length;
+  var lastI = nbFiguredOut - 1;
+  var nextI = nbFiguredOut;
+  for (var i = 0; i < ctrl.vm.nbGood; i++) {
+    steps.push({
+      found: ctrl.vm.figuredOut[i],
+      last: lastI === i,
+      next: nextI === i
+    });
+  }
+  var liWidth = Math.round(100 / ctrl.vm.nbGood) + '%';
+  return m('div.meter', [
+    m('ul',
+      steps.map(function(step) {
+        var badSan = (step.next && ctrl.vm.flash.bad) ? ctrl.vm.flash.bad.san : null;
+        return m('li', {
+          class: chessground.util.classSet({
+            found: step.found,
+            next: step.next,
+            bad: badSan,
+            good: step.last && ctrl.vm.flash.good,
+            already: step.found && ctrl.vm.flashFound && ctrl.vm.flashFound.uci === step.found.uci
+          }),
+          style: {
+            width: liWidth
+          }
+        }, [
+          m('span.step', step.found ? step.found.san : (
+            badSan || '?'
+          )),
+          m('span.stage')
+        ]);
+      }))
+  ]);
+}
+
 module.exports = function(ctrl) {
   var percent = Math.ceil(ctrl.vm.figuredOut.length * 100 / ctrl.vm.nbGood) + '%';
-  var color;
-  switch (ctrl.vm.flash) {
-    case 'dubious':
-      color = 'yellow';
-      break;
-    case 'bad':
-      color = 'red';
-      break;
-    default:
-      color = 'green';
-  }
   return m('div#opening.training', [
     renderSide(ctrl),
     m('div.board_and_ground', [
@@ -91,21 +118,7 @@ module.exports = function(ctrl) {
       m('div.right', renderTable(ctrl))
     ]),
     m('div.center', [
-      m('div.lulzbar', [
-        m('div.bar.' + color, {
-          style: {
-            width: percent
-          }
-        }, m('span')),
-        m('div.label', {
-          style: {
-            left: percent
-          }
-        }, [
-          m('span'),
-          m('div.perc', percent)
-        ])
-      ])
+      progress(ctrl)
     ])
   ]);
 };