diff --git a/web-app/src/containers/Tutorial/LevelPage/Level.tsx b/web-app/src/containers/Tutorial/LevelPage/Level.tsx index f2a1a115..623a0323 100644 --- a/web-app/src/containers/Tutorial/LevelPage/Level.tsx +++ b/web-app/src/containers/Tutorial/LevelPage/Level.tsx @@ -78,6 +78,9 @@ const Level = ({ level, onContinue, onLoadSolution, processes, testStatus }: Pro throw new Error('No Stage steps found') } + // @ts-ignore + const currentStep = level.steps.indexOf(s => s.status === 'ACTIVE') + 1 + return ( <div css={styles.page}> <div css={styles.header}> @@ -120,10 +123,14 @@ const Level = ({ level, onContinue, onLoadSolution, processes, testStatus }: Pro {level.title} </span> <span> - {level.status === 'COMPLETE' && ( + {level.status === 'COMPLETE' ? ( <Button type="primary" onClick={onContinue}> Continue </Button> + ) : ( + <span> + {currentStep} of {level.steps.length} tasks + </span> )} </span> </div> diff --git a/web-app/stories/Level.stories.tsx b/web-app/stories/Level.stories.tsx index b6058336..b5b1d5b1 100644 --- a/web-app/stories/Level.stories.tsx +++ b/web-app/stories/Level.stories.tsx @@ -71,7 +71,13 @@ storiesOf('Level', module) ], } return ( - <Level level={level} onContinue={action('onContinue')} onLoadSolution={action('onLoadSolution')} processes={[]} /> + <Level + level={level} + onContinue={action('onContinue')} + onLoadSolution={action('onLoadSolution')} + processes={[]} + testStatus={null} + /> ) }) .add('Level 2', () => { @@ -129,6 +135,7 @@ storiesOf('Level', module) description: 'Installing dependencies', }, ]} + testStatus={null} /> ) }) @@ -201,7 +208,13 @@ storiesOf('Level', module) ], } return ( - <Level level={level} onContinue={action('onContinue')} onLoadSolution={action('onLoadSolution')} processes={[]} /> + <Level + level={level} + onContinue={action('onContinue')} + onLoadSolution={action('onLoadSolution')} + processes={[]} + testStatus={null} + /> ) }) .add('FakeBook API L2', () => { @@ -267,6 +280,12 @@ storiesOf('Level', module) ], } return ( - <Level level={level} onContinue={action('onContinue')} onLoadSolution={action('onLoadSolution')} processes={[]} /> + <Level + level={level} + onContinue={action('onContinue')} + onLoadSolution={action('onLoadSolution')} + processes={[]} + testStatus={null} + /> ) })