From 10e035557677d6dc80010240a14a801342f6a458 Mon Sep 17 00:00:00 2001 From: Peter Cottle Date: Sat, 29 Aug 2015 08:37:55 -0700 Subject: [PATCH 1/5] Resolves #306 speed up animation and then stop showing --- src/js/level/index.js | 27 ++++++++++++++++++++++++--- src/js/visuals/index.js | 21 +++++++++++++-------- src/js/visuals/visNode.js | 16 ++++++++++------ 3 files changed, 47 insertions(+), 17 deletions(-) diff --git a/src/js/level/index.js b/src/js/level/index.js index 2682e2ce..934aa68b 100644 --- a/src/js/level/index.js +++ b/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) ); } } diff --git a/src/js/visuals/index.js b/src/js/visuals/index.js index 5ade50f6..3897fbd9 100644 --- a/src/js/visuals/index.js +++ b/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() { diff --git a/src/js/visuals/visNode.js b/src/js/visuals/visNode.js index ca87f30a..ac3c198a 100644 --- a/src/js/visuals/visNode.js +++ b/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; } From 78b87b3c473943f2f1b23586a75bb6e90c8141a5 Mon Sep 17 00:00:00 2001 From: Peter Cottle Date: Sat, 29 Aug 2015 08:39:29 -0700 Subject: [PATCH 2/5] remove console.log --- src/js/visuals/visNode.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/js/visuals/visNode.js b/src/js/visuals/visNode.js index ac3c198a..1cb08d86 100644 --- a/src/js/visuals/visNode.js +++ b/src/js/visuals/visNode.js @@ -420,7 +420,6 @@ var VisNode = VisBase.extend({ cy: y }); // continuation calculation - 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; From de8d8221f5703a65a7a0bfa1a0f391ed265019ed Mon Sep 17 00:00:00 2001 From: Peter Cottle Date: Sat, 29 Aug 2015 08:45:53 -0700 Subject: [PATCH 3/5] fluxify it --- src/js/actions/GlobalStateActions.js | 6 ++++++ src/js/constants/AppConstants.js | 8 +++++++- src/js/level/index.js | 19 ++++++++++++------- src/js/stores/GlobalStateStore.js | 9 +++++++++ 4 files changed, 34 insertions(+), 8 deletions(-) diff --git a/src/js/actions/GlobalStateActions.js b/src/js/actions/GlobalStateActions.js index 58f3f121..f04a747e 100644 --- a/src/js/actions/GlobalStateActions.js +++ b/src/js/actions/GlobalStateActions.js @@ -14,6 +14,12 @@ var GlobalStateActions = { }); }, + levelSolved: function() { + AppDispatcher.handleViewAction({ + type: ActionTypes.LEVEL_SOLVED, + }); + }, + changeFlipTreeY: function(flipTreeY) { AppDispatcher.handleViewAction({ type: ActionTypes.CHANGE_FLIP_TREE_Y, diff --git a/src/js/constants/AppConstants.js b/src/js/constants/AppConstants.js index 393dc556..b738fbfa 100644 --- a/src/js/constants/AppConstants.js +++ b/src/js/constants/AppConstants.js @@ -25,7 +25,13 @@ module.exports = { CHANGE_FLIP_TREE_Y: null, SUBMIT_COMMAND: null, CHANGE_LOCALE: null, - CHANGE_LOCALE_FROM_HEADER: null + CHANGE_LOCALE_FROM_HEADER: null, + /** + * only dispatched when you actually + * solve the level, not ask for solution + * or solve it again. + */ + SOLVE_LEVEL: null }), PayloadSources: keyMirror({ diff --git a/src/js/level/index.js b/src/js/level/index.js index 934aa68b..0ec93a1c 100644 --- a/src/js/level/index.js +++ b/src/js/level/index.js @@ -34,8 +34,6 @@ var regexMap = { 'objective': /^(objective|assignment)$/ }; -var MAX_TIMES_SHOW_ANIMATION = 5; - var parse = util.genParseCommand(regexMap, 'processLevelCommand'); var Level = Sandbox.extend({ @@ -439,8 +437,6 @@ 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; @@ -448,11 +444,17 @@ var Level = Sandbox.extend({ var skipFinishDialog = this.testOption('noFinishDialog') || this.wasResetAfterSolved; - var skipFinishAnimation = this.wasResetAfterSolved || - window.numLevelsSolved > MAX_TIMES_SHOW_ANIMATION; + var skipFinishAnimation = this.wasResetAfterSolved; + if (!skipFinishAnimation) { + GlobalStateActions.levelSolved(); + } + + /** + * Speed up the animation each time we see it. + */ var speed = 1.0; - switch (window.numLevelsSolved) { + switch (GlobalStateStore.getNumLevelsSolved()) { case 2: speed = 1.5; break; @@ -466,6 +468,9 @@ var Level = Sandbox.extend({ speed = 2.4; break; } + if (GlobalStateStore.getNumLevelsSolved() > 5) { + speed = 2.5; + } var finishAnimationChain = null; if (skipFinishAnimation) { diff --git a/src/js/stores/GlobalStateStore.js b/src/js/stores/GlobalStateStore.js index 03215072..35897d2d 100644 --- a/src/js/stores/GlobalStateStore.js +++ b/src/js/stores/GlobalStateStore.js @@ -10,6 +10,7 @@ var ActionTypes = AppConstants.ActionTypes; var _isAnimating = false; var _flipTreeY = false; +var _numLevelsSolved = 0; var GlobalStateStore = assign( {}, @@ -24,6 +25,10 @@ AppConstants.StoreSubscribePrototype, return _flipTreeY; }, + getNumLevelsSolved: function() { + return _numLevelsSolved; + }, + dispatchToken: AppDispatcher.register(function(payload) { var action = payload.action; var shouldInform = false; @@ -37,6 +42,10 @@ AppConstants.StoreSubscribePrototype, _flipTreeY = action.flipTreeY; shouldInform = true; break; + case ActionTypes.LEVEL_SOLVED: + _numLevelsSolved++; + shouldInform = true; + break; } if (shouldInform) { From 10730292c870c8a74eef6be7974ee4f75a127780 Mon Sep 17 00:00:00 2001 From: Peter Cottle Date: Sat, 29 Aug 2015 08:46:35 -0700 Subject: [PATCH 4/5] fluxify it --- src/js/level/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/js/level/index.js b/src/js/level/index.js index 0ec93a1c..9a5a057d 100644 --- a/src/js/level/index.js +++ b/src/js/level/index.js @@ -10,6 +10,7 @@ var React = require('react'); var Errors = require('../util/errors'); var Sandbox = require('../sandbox/').Sandbox; var GlobalStateActions = require('../actions/GlobalStateActions'); +var GlobalStateStore = require('../stores/GlobalStateStore'); var LevelActions = require('../actions/LevelActions'); var LevelStore = require('../stores/LevelStore'); var Visualization = require('../visuals/visualization').Visualization; From 10f948737e00058e4aa8e9d7f8137ed56c3030b4 Mon Sep 17 00:00:00 2001 From: Peter Cottle Date: Sat, 29 Aug 2015 08:50:21 -0700 Subject: [PATCH 5/5] and debug --- src/js/util/debug.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/js/util/debug.js b/src/js/util/debug.js index f70b6dfb..a9359f1d 100644 --- a/src/js/util/debug.js +++ b/src/js/util/debug.js @@ -9,6 +9,8 @@ var toGlobalize = { LevelActions: require('../actions/LevelActions'), LevelStore: require('../stores/LevelStore'), LocaleActions: require('../actions/LocaleActions'), + GlobalStateActions: require('../actions/GlobalStateActions'), + GlobalStateStore: require('../stores/GlobalStateStore'), LocaleStore: require('../stores/LocaleStore'), Levels: require('../graph/treeCompare'), Constants: require('../util/constants'),