always diff mithril learn to reduce memory leaks, remove score

public/stylesheets/learn.css

@@ -156,17 +156,19 @@
     transform: scale(1.08);
   }
 }
+@keyframes apple-appear {
+  0% {
+    opacity: 0.5; transform: scale(0) rotate(-360deg);
+  }
+  100% {
+    opacity: 1; transform: scale(1) rotate(0);
+  }
+}
 #learn_app .apple {
   background-image: url(../images/learn/star.png);
-  opacity: 0.2;
-  transform: rotate(180deg) scale(0.1);
-  transition: all 0.6s;
-}
-#learn_app .initialized .apple {
-  opacity: 1;
-  transform: rotate(360deg) translateY(0) scale(1);
-  animation: 1.7s soft-grow ease-in-out infinite, 0.7s soft-hue ease-in-out infinite;
-  animation-delay: 0.6s;
+  animation: 0.6s ease-in-out 0s 1 forwards apple-appear,
+  1.7s ease-in-out 0.7s infinite none soft-grow,
+  0.7s ease-in-out 0.7s infinite none soft-hue;
 }
 #learn_app .is2d item {
   width: 100%;
@@ -479,7 +481,7 @@ body.dark #learn_app .progress  {
   line-height: 11px;
   border-left: 1px solid #ccc;
   opacity: 0.8;
-  transition: 0.13s;
+  transition: all 0.13s;
 }
 #learn_app .progress a:first-child {
   border-left: 0;

ui/learn/src/level.js

@@ -16,7 +16,6 @@ module.exports = function(blueprint, opts) {
   });
 
   var vm = {
-    initialized: false,
     lastStep: false,
     completed: false,
     failed: false,

ui/learn/src/map/mapSide.js

@@ -73,6 +73,7 @@ module.exports = function(opts) {
   return {
     controller: function() {
       var categId = m.prop(0);
+      m.redraw.strategy("diff");
       return {
         data: opts.storage.data,
         categId: categId,

ui/learn/src/run/runCtrl.js

@@ -13,7 +13,8 @@ module.exports = function(opts) {
   var levelId = m.route.param('level') || (function() {
     var result = opts.storage.data.stages[stage.key];
     var it = 0;
-    if (result) while(result.scores[it]) it++;
+    if (result)
+      while (result.scores[it]) it++;
     if (it >= stage.levels.length) it = 0;
     return it + 1;
   })();
@@ -53,6 +54,14 @@ module.exports = function(opts) {
   if (vm.stageStarting()) sound.stageStart();
   else level.start();
 
+  // setTimeout(function() {
+  //   if (level.blueprint.id < stage.levels.length)
+  //     m.route('/' + stage.id + '/' + (level.blueprint.id + 1));
+  //   else if (getNext()) m.route('/' + (getNext().id));
+  // }, 1500);
+
+  m.redraw.strategy("diff");
+
   return {
     stage: stage,
     level: level,

ui/learn/src/run/runView.js

@@ -7,7 +7,6 @@ var congrats = require('../congrats');
 var stageStarting = require('./stageStarting');
 var stageComplete = require('./stageComplete');
 var renderPromotion = require('../promotion').view;
-var renderScore = require('./scoreView');
 var renderProgress = require('../progress').view;
 
 function renderFailed(ctrl) {
@@ -36,18 +35,11 @@ module.exports = function(ctrl) {
   return m('div', {
     class: classSet({
       'lichess_game': true,
-      'initialized': level.vm.initialized,
       'starting': level.vm.starting,
       'completed': level.vm.completed && !level.blueprint.nextButton,
       'last-step': level.vm.lastStep,
       'piece-values': level.blueprint.showPieceValues
-    }) + ' ' + stage.cssClass + ' ' + level.blueprint.cssClass,
-    config: function(el, isUpdate) {
-      if (!isUpdate) setTimeout(function() {
-        level.vm.initialized = true;
-        m.redraw();
-      }, 50);
-    }
+    }) + ' ' + stage.cssClass + ' ' + level.blueprint.cssClass
   }, [
     ctrl.vm.stageStarting() ? stageStarting(ctrl) : null,
     ctrl.vm.stageCompleted() ? stageComplete(ctrl) : null,
@@ -68,10 +60,7 @@ module.exports = function(ctrl) {
       level.vm.failed ? renderFailed(ctrl) : (
         level.vm.completed ? renderCompleted(level) : m('div.goal', m.trust(level.blueprint.goal))
       ),
-      // renderCompleted(level),
-      // renderFailed(ctrl),
-      renderProgress(ctrl.progress),
-      renderScore(level)
+      renderProgress(ctrl.progress)
     ])
   ]);
 };

ui/learn/src/run/scoreView.js

@@ -1,41 +0,0 @@
-var m = require('mithril');
-
-module.exports = function(level) {
-  return m('div.score', [
-    m('span.plus', {
-      config: function(el, isUpdate, ctx) {
-        var score = level.vm.score;
-        if (isUpdate) {
-          var diff = score - (ctx.prev || 0);
-          if (diff > 0) {
-            clearTimeout(ctx.timeout);
-            var $el = $('#learn_app .score .plus');
-            var $parent = $el.parent();
-            var $clone = $el.clone().removeClass('show').text('+' + diff);
-            $el.remove();
-            $parent.append($clone);
-            $clone.addClass('show');
-            ctx.timeout = setTimeout(function() {
-              $clone.removeClass('show');
-            }, 1000);
-          }
-        }
-        ctx.prev = score;
-      }
-    }),
-    m('span.legend', 'SCORE'),
-    m('span.value', {
-      config: function(el, isUpdate, ctx) {
-        var score = level.vm.score;
-        if (!ctx.spread) {
-          el.textContent = lichess.numberFormat(score);
-          ctx.spread = $.spreadNumber(el, 50, function() {
-            var diff = level.vm.score - ctx.prev;
-            return Math.min(1000, 5 * diff);
-          }, score);
-        } else if (score !== ctx.prev) ctx.spread(score, (score - ctx.prev) / 5);
-        ctx.prev = score;
-      }
-    })
-  ]);
-};