Resolves #306 speed up animation and then stop showing

src/js/level/index.js

@@ -34,6 +34,8 @@ var regexMap = {
   'objective': /^(objective|assignment)$/
 };
 
+var MAX_TIMES_SHOW_ANIMATION = 5;
+
 var parse = util.genParseCommand(regexMap, 'processLevelCommand');
 
 var Level = Sandbox.extend({
@@ -437,6 +439,8 @@ var Level = Sandbox.extend({
     }
 
     this.hideGoal();
+    window.numLevelsSolved = window.numLevelsSolved || 0;
+    window.numLevelsSolved++;
 
     var nextLevel = LevelStore.getNextLevel(this.level.id);
     var numCommands = this.gitCommandsIssued.length;
@@ -444,7 +448,24 @@ var Level = Sandbox.extend({
 
     var skipFinishDialog = this.testOption('noFinishDialog') ||
       this.wasResetAfterSolved;
-    var skipFinishAnimation = this.wasResetAfterSolved;
+    var skipFinishAnimation = this.wasResetAfterSolved ||
+      window.numLevelsSolved > MAX_TIMES_SHOW_ANIMATION;
+
+    var speed = 1.0;
+    switch (window.numLevelsSolved) {
+      case 2:
+        speed = 1.5;
+        break;
+      case 3:
+        speed = 1.8;
+        break;
+      case 4:
+        speed = 2.1;
+        break;
+      case 5:
+        speed = 2.4;
+        break;
+    }
 
     var finishAnimationChain = null;
     if (skipFinishAnimation) {
@@ -457,10 +478,10 @@ var Level = Sandbox.extend({
       );
     } else {
       GlobalStateActions.changeIsAnimating(true);
-      finishAnimationChain = this.mainVis.gitVisuals.finishAnimation();
+      finishAnimationChain = this.mainVis.gitVisuals.finishAnimation(speed);
       if (this.mainVis.originVis) {
         finishAnimationChain = finishAnimationChain.then(
-          this.mainVis.originVis.gitVisuals.finishAnimation()
+          this.mainVis.originVis.gitVisuals.finishAnimation(speed)
         );
       }
     }

src/js/visuals/index.js

@@ -208,7 +208,12 @@ GitVisuals.prototype.animateAllAttrKeys = function(keys, attr, speed, easing) {
   return deferred.promise;
 };
 
-GitVisuals.prototype.finishAnimation = function() {
+GitVisuals.prototype.finishAnimation = function(speed) {
+  speed = speed || 1.0;
+  if (!speed) {
+    throw new Error('need speed by time i finish animation' + speed);
+  }
+
   var _this = this;
   var deferred = Q.defer();
   var animationDone = Q.defer();
@@ -247,7 +252,7 @@ GitVisuals.prototype.finishAnimation = function() {
     return this.animateAllAttrKeys(
       { exclude: ['circle'] },
       { opacity: 0 },
-      defaultTime * 1.1
+      defaultTime * 1.1 / speed
     );
   }.bind(this))
   // then make circle radii bigger
@@ -255,7 +260,7 @@ GitVisuals.prototype.finishAnimation = function() {
     return this.animateAllAttrKeys(
       { exclude: ['arrow', 'rect', 'path', 'text'] },
       { r: nodeRadius * 2 },
-      defaultTime * 1.5
+      defaultTime * 1.5 / speed
     );
   }.bind(this))
   // then shrink em super fast
@@ -263,16 +268,16 @@ GitVisuals.prototype.finishAnimation = function() {
     return this.animateAllAttrKeys(
       { exclude: ['arrow', 'rect', 'path', 'text'] },
       { r: nodeRadius * 0.75 },
-      defaultTime * 0.5
+      defaultTime * 0.5 / speed
     );
   }.bind(this))
   // then explode them and display text
   .then(function() {
     makeText();
-    return this.explodeNodes();
+    return this.explodeNodes(speed);
   }.bind(this))
   .then(function() {
-    return this.explodeNodes();
+    return this.explodeNodes(speed);
   }.bind(this))
   // then fade circles (aka everything) in and back
   .then(function() {
@@ -305,11 +310,11 @@ GitVisuals.prototype.finishAnimation = function() {
   return animationDone.promise;
 };
 
-GitVisuals.prototype.explodeNodes = function() {
+GitVisuals.prototype.explodeNodes = function(speed) {
   var deferred = Q.defer();
   var funcs = [];
   _.each(this.visNodeMap, function(visNode) {
-    funcs.push(visNode.getExplodeStepFunc());
+    funcs.push(visNode.getExplodeStepFunc(speed));
   });
 
   var interval = setInterval(function() {

src/js/visuals/visNode.js

@@ -376,15 +376,18 @@ var VisNode = VisBase.extend({
     }, this);
   },
 
-  getExplodeStepFunc: function() {
+  getExplodeStepFunc: function(speed) {
+    if (!speed) {
+      throw new Error('need speed by now');
+    }
     var circle = this.get('circle');
 
     // decide on a speed
-    var speedMag = 20;
+    var speedMag = 20 / speed;
     // aim upwards
     var angle = Math.PI + Math.random() * 1 * Math.PI;
-    var gravity = 1 / 5;
-    var drag = 1 / 100;
+    var gravity = (1 / 5) * speed;
+    var drag = (1 / 100) * speed;
 
     var vx = speedMag * Math.cos(angle);
     var vy = speedMag * Math.sin(angle);
@@ -393,7 +396,7 @@ var VisNode = VisBase.extend({
 
     var maxWidth = this.gitVisuals.paper.width;
     var maxHeight = this.gitVisuals.paper.height;
-    var elasticity = 0.8;
+    var elasticity = 0.8 / speed;
     var dt = 1.0;
 
     var stepFunc = function() {
@@ -417,7 +420,8 @@ var VisNode = VisBase.extend({
         cy: y
       });
       // continuation calculation
-      if ((vx * vx + vy * vy) < 0.01 && Math.abs(y - maxHeight) === 0) {
+      console.log('our speed', (vx * vx + vy * vy), 'height', Math.abs(y- maxHeight));
+      if ((vx * vx + vy * vy) < 0.1 && Math.abs(y - maxHeight) <= 0.1) {
         // dont need to animate anymore, we are on ground
         return false;
       }