From bc3787fdfc9e2f75c64b289051d78c8addfbbe12 Mon Sep 17 00:00:00 2001
From: Berkeley Martinez <Berkeley@robotie.com>
Date: Tue, 21 Jul 2015 23:00:44 -0700
Subject: [PATCH] Add transition between questions

---
 .../app/routes/Hikes/components/Question.jsx  | 32 +++++++++++++++----
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/common/app/routes/Hikes/components/Question.jsx b/common/app/routes/Hikes/components/Question.jsx
index 0a92be42d80..72378a4447a 100644
--- a/common/app/routes/Hikes/components/Question.jsx
+++ b/common/app/routes/Hikes/components/Question.jsx
@@ -30,6 +30,7 @@ export default React.createClass({
 
   getInitialState: () => ({
     mouse: [0, 0],
+    correct: false,
     delta: [0, 0],
     isPressed: false,
     showInfo: false,
@@ -56,6 +57,13 @@ export default React.createClass({
   },
 
   handleMouseUp() {
+    const { correct } = this.state;
+    if (correct) {
+      return this.setState({
+        isPressed: false,
+        delta: [0, 0]
+      });
+    }
     this.setState({
       isPressed: false,
       mouse: [0, 0],
@@ -90,20 +98,30 @@ export default React.createClass({
       if (e && e.preventDefault) {
         e.preventDefault();
       }
+
+      if (this.disposeTimeout) {
+        clearTimeout(this.disposeTimeout);
+        this.disposeTimeout = null;
+      }
+
       if (answer === userAnswer) {
         debug('correct answer!');
-        return this.onCorrectAnswer();
+        this.setState({
+          correct: true,
+          mouse: [ userAnswer ? 1000 : -1000, 0]
+        });
+        this.disposeTimeout = setTimeout(() => {
+          this.onCorrectAnswer();
+        }, 1000);
+        return;
       }
+
       debug('incorrect');
       this.setState({
         showInfo: true,
         shake: true
       });
 
-      if (this.disposeTimeout) {
-        clearTimeout(this.disposeTimeout);
-        this.disposeTimeout = null;
-      }
       this.disposeTimeout = setTimeout(
         () => this.setState({ shake: false }),
         500
@@ -145,7 +163,9 @@ export default React.createClass({
   routerWillLeave(nextState, router, cb) {
     // TODO(berks): do animated transitions here stuff here
     this.setState({
-      showInfo: false
+      showInfo: false,
+      correct: false,
+      mouse: [0, 0]
     }, cb);
   },