Merge pull request #365 from coderoad/feature/hints

Feature/hints

Author: ShMcK

Diff for: typings/tutorial.d.ts

@@ -28,6 +28,7 @@ export type Step = {
   setup: StepActions
   solution: Maybe<StepActions>
   subtasks?: { [testName: string]: boolean }
+  hints?: string[]
 }
 
 /** A tutorial for use in VSCode CodeRoad */
@@ -61,7 +62,7 @@ export interface TestRunnerArgs {
 
 export interface TestRunnerConfig {
   command: string
-  args?: TestRunnerArgs
+  args: TestRunnerArgs
   path?: string // deprecated
   directory?: string
   actions?: StepActions // deprecated

Diff for: web-app/src/containers/Tutorial/components/Hints.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react'
+import Markdown from '../../../components/Markdown'
+import Button from '../../../components/Button'
+
+const styles = {
+  hints: {
+    marginTop: '1rem',
+  },
+  hintList: {
+    marginBottom: '0.5rem',
+  },
+  hint: {
+    margin: '0.5rem 0',
+    backgroundColor: 'rgba(255,229,100,0.3)',
+    borderLeft: '#ffe564',
+    padding: '0.5rem',
+  },
+}
+
+interface Props {
+  hints: string[]
+}
+
+const Hints = (props: Props) => {
+  const [hintIndex, setHintIndex] = React.useState(-1)
+  const isFinalHint = props.hints.length - 1 === hintIndex
+  const nextHint = () => {
+    if (!isFinalHint) {
+      setHintIndex((currentHintIndex) => currentHintIndex + 1)
+    }
+  }
+  return (
+    <div style={styles.hints}>
+      <div style={styles.hintList}>
+        {props.hints.map((h, i) => {
+          return i <= hintIndex ? (
+            <div key={i} style={styles.hint}>
+              <Markdown>{h}</Markdown>
+            </div>
+          ) : null
+        })}
+      </div>
+      <Button onClick={nextHint} disabled={isFinalHint}>
+        Get A Hint
+      </Button>
+    </div>
+  )
+}
+
+export default Hints

Diff for: web-app/src/containers/Tutorial/components/Level.tsx

@@ -173,6 +173,7 @@ const Level = ({
                     content={step.content}
                     onLoadSolution={onLoadSolution}
                     subtasks={subtasks}
+                    hints={step.hints}
                   />
                 )
               })}

Diff for: web-app/src/containers/Tutorial/components/Step.tsx

@@ -2,13 +2,15 @@ import * as React from 'react'
 import * as T from 'typings'
 import { css, jsx } from '@emotion/core'
 import TestStatusIcon from './TestStatusIcon'
+import Hints from './Hints'
 import Markdown from '../../../components/Markdown'
 
 interface Props {
   order: number
   content: string
   status: T.ProgressStatus
   subtasks: { name: string; pass: boolean }[] | null
+  hints?: string[]
   onLoadSolution(): void
 }
 
@@ -54,9 +56,11 @@ const Step = (props: Props) => {
           {props.status === 'COMPLETE' && <TestStatusIcon size="small" checked />}
         </div>
         <div>
+          {/* content */}
           <div css={styles.content}>
             <Markdown>{props.content || ''}</Markdown>
           </div>
+          {/* subtasks */}
           {props.subtasks ? (
             <ul css={styles.subtasks}>
               {props.subtasks.map((subtask) => (
@@ -68,6 +72,8 @@ const Step = (props: Props) => {
               ))}
             </ul>
           ) : null}
+          {/* hints */}
+          {props.hints && props.hints.length ? <Hints hints={props.hints} /> : null}
         </div>
       </div>
     </div>

Diff for: web-app/stories/Step.stories.tsx

@@ -98,3 +98,13 @@ storiesOf('Step', module)
       ]}
     />
   ))
+  .add('Hints', () => (
+    <Step
+      order={1}
+      content={text('text', stepText)}
+      status="ACTIVE"
+      onLoadSolution={action('onLoadSolution')}
+      subtasks={null}
+      hints={['First hint!', 'Second hint!']}
+    />
+  ))