Also show confetti on the new FinishDialog component

Modeled after https://github.com/code-dot-org/code-dot-org/blob/353abf5ba3082b1ed0ae56ebb8323f57a9b63783/apps/src/templates/ChallengeDialog.jsx#L139.
code-dot-org · Mar 3, 2018 · b240c11 · b240c11
1 parent 4384aa0
commit b240c11
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 2 deletions.
diff --git a/apps/src/StudioApp.js b/apps/src/StudioApp.js
@@ -1454,6 +1454,7 @@ StudioApp.prototype.displayFeedback = function (options) {
         code: generatedCodeProperties.code,
       };
       store.dispatch(setFeedbackData({
+        isChallenge: this.config.isChallengeLevel,
         isPerfect: feedbackType >= TestResults.MINIMUM_OPTIMAL_RESULT,
         blocksUsed: this.feedback_.getNumCountableBlocks(),
         displayFunometer: response && response.puzzle_ratings_enabled,

diff --git a/apps/src/redux/feedback.js b/apps/src/redux/feedback.js
@@ -11,7 +11,7 @@ const initialState = {
   displayingCode: false,
   displayingShareControls: false,
 
-
+  isChallenge: false,
   isPerfect: true,
   blocksUsed: 0,
   blockLimit: undefined,
@@ -48,6 +48,7 @@ export default function reducer(state = initialState, action) {
   }
   if (action.type === SET_FEEDBACK_DATA) {
     const {
+      isChallenge,
       isPerfect,
       blocksUsed,
       displayFunometer,
@@ -56,6 +57,7 @@ export default function reducer(state = initialState, action) {
     } = action;
     return {
       ...state,
+      isChallenge,
       isPerfect,
       blocksUsed,
       displayFunometer,

diff --git a/apps/src/templates/FinishDialog.jsx b/apps/src/templates/FinishDialog.jsx
@@ -6,6 +6,7 @@ import BaseDialog from './BaseDialog';
 import GeneratedCode from './feedback/GeneratedCode';
 import Odometer from './Odometer';
 import PuzzleRatingButtons from  './PuzzleRatingButtons';
+import Confetti from 'react-dom-confetti';
 import React, { Component, PropTypes } from 'react';
 import color from '../util/color';
 import msg from '@cdo/locale';
@@ -37,6 +38,11 @@ const styles = {
   content: {
     padding: '42px 56px 5px',
   },
+  confetti: {
+    position: 'relative',
+    left: '50%',
+    top: 150,
+  },
   bubbleContainer: {
     width: 74,
     height: 74,
@@ -167,6 +173,7 @@ export class UnconnectedFinishDialog extends Component {
     onContinue: PropTypes.func,
     onReplay: PropTypes.func,
 
+    isChallenge: PropTypes.bool,
     isPerfect: PropTypes.bool,
     blocksUsed: PropTypes.number,
     blockLimit: PropTypes.number,
@@ -409,6 +416,8 @@ export class UnconnectedFinishDialog extends Component {
       return null;
     }
 
+    const confetti = this.props.isChallenge && this.props.isPerfect && this.state.blocksCounted;
+
     return (
       <BaseDialog
         isOpen={this.props.isOpen}
@@ -422,6 +431,9 @@ export class UnconnectedFinishDialog extends Component {
             <div
               style={styles.modal}
             >
+              <div style={styles.confetti}>
+                <Confetti active={confetti} />
+              </div>
               <div style={styles.header}>
                 {this.getBubble()}
               </div>
@@ -451,6 +463,7 @@ export class UnconnectedFinishDialog extends Component {
 
 export default connect(state => ({
   isOpen: state.feedback.displayingFeedback,
+  isChallenge: state.feedback.isChallenge,
   isPerfect:  state.feedback.isPerfect,
   blocksUsed: state.feedback.blocksUsed,
   blockLimit: state.feedback.blockLimit,

diff --git a/apps/src/templates/FinishDialog.story.jsx b/apps/src/templates/FinishDialog.story.jsx
@@ -162,4 +162,24 @@ export default storybook =>
           </div>
         ),
       },
+      {
+        name: 'Perfect Finish of challenge level',
+        description: 'Perfectly finished a challenge level',
+        story: () => (
+          <div style={dialogWrapper}>
+            <FinishDialog
+              hideBackdrop
+
+              isChallenge
+              isPerfect
+              blockLimit={98}
+              blocksUsed={98}
+              achievements={achievements}
+              studentCode={studentCode}
+              showFunometer
+              canShare
+            />
+          </div>
+        ),
+      },
     ]);
diff --git a/apps/test/unit/redux/feedbackTest.js b/apps/test/unit/redux/feedbackTest.js
@@ -8,7 +8,7 @@ describe('feedback redux module', () => {
       displayingCode: false,
       displayingShareControls: false,
 
-
+      isChallenge: false,
       isPerfect: true,
       blocksUsed: 0,
       blockLimit: undefined,
@@ -77,13 +77,15 @@ describe('feedback redux module', () => {
     it('sets all the properties', () => {
       const state = {};
       const newState = reducer(state, feedback.setFeedbackData({
+        isChallenge: true,
         isPerfect: true,
         blocksUsed: 19,
         displayFunometer: false,
         studentCode: 'console.log("hello world!");',
         canShare: true,
       }));
       expect(newState).to.deep.equal({
+        isChallenge: true,
         isPerfect: true,
         blocksUsed: 19,
         displayFunometer: false,