Jul 24, 2019 · Jul 23, 2019 · Jul 23, 2019 · Jul 23, 2019 · Jul 23, 2019 · Jul 24, 2019
diff --git a/TODO.md b/TODO.md
diff --git a/src/state/actions/index.ts b/src/state/actions/index.ts
  complete: false,
 }

 const calculatePosition = ({ data, progress }: { data: CR.TutorialData, progress: CR.Progress }): CR.Position => {
  const { levelList } = data.summary
  // take next incomplete level or the final step
  const levelId = levelList.find((id: string) => !progress.levels[id]) || levelList[levelList.length - 1]
  const { stageList } = data.levels[levelId]
  const stageId = stageList.find((id: string) => !progress.stages[id]) || stageList[stageList.length - 1]
  const { stepList } = data.stages[stageId]
  const stepId = stepList.find((id: string) => !progress.steps[id]) || stepList[stepList.length - 1]

  const nextPosition: CR.Position = {
    levelId,
    stageId,
    stepId,
  }

  return nextPosition
 }

 export default (dispatch: CR.EditorDispatch) => ({
  createWebview() {
    dispatch('coderoad.open_webview')
      if (!currentTutorial) {
        throw new Error('No Tutorial loaded')
      }

      const { data } = currentTutorial
      const position = calculatePosition({ data, progress: currentProgress })

      const { levelList } = data.summary
      // take next incomplete level or the final step
      const levelId = levelList.find((id: string) => !currentProgress.levels[id]) || levelList[levelList.length - 1]
      const { stageList } = data.levels[levelId]
      const stageId = stageList.find((id: string) => !currentProgress.stages[id]) || stageList[stageList.length - 1]
      console.log('position stepList')
      console.log(data.stages[stageId])
      const { stepList } = data.stages[stageId]
      const stepId = stepList.find((id: string) => !currentProgress.steps[id]) || stepList[stepList.length - 1]

      const position = {
        levelId,
        stageId,
        stepId,
      }
      console.log('position', position)
      return position
    },
  // @ts-ignore
  progressUpdate: assign({
    progress: (context: CR.MachineContext): CR.Progress => {
      console.log('progress update')
      const { progress, position, data } = context
      const nextProgress = progress

  loadLevel() {
    console.log('loadLevel')
  },
  loadStage() {
  stageLoadNext(context: CR.MachineContext) {
    console.log('stageLoadNext')
    const { position } = context
    console.log(position)
  },
  loadStage(context: CR.MachineContext): void {
    console.log('loadStage')
    const { position } = context
    console.log(position)
  },
  // @ts-ignore
  updatePosition: assign({
    position: (context: CR.MachineContext) => calculatePosition({
      data: context.data,
      progress: context.progress,
    }),
  }),
  stepLoadCommits(context: CR.MachineContext): void {
    const { data, position } = context
    const { setup } = data.steps[position.stepId].actions
diff --git a/src/state/machine.ts b/src/state/machine.ts
              },
            },
            Stage: {
              onEntry: ['loadStage'],
              onEntry: ['loadStage', 'stepLoadCommits'],
              initial: 'Normal',
              states: {
                Normal: {
                },
                StageComplete: {
                  on: {
                    STAGE_NEXT: '#tutorial-load-next',
                    STAGE_NEXT: {
                      target: '#tutorial-load-next',
                      actions: ['updatePosition'],
                    },
                  },
                },
              },
diff --git a/src/tutorials/basic.ts b/src/tutorials/basic.ts
    },
    levels: {
      level1Id: {
        stageList: ['stage1Id'],
        stageList: ['stage1Id', 'stage2Id'],
        content: {
          title: 'Sum Level',
          text: 'A description of this stage',
          text: 'A description of this stage',
        },
      },
      stage2Id: {
        stepList: ['1', '2'],
        content: {
          title: 'Second Stage',
          text: 'Going into round 2'
        }
      }
    },
    steps: {
      step1Id: {
        content: {
          title: 'Sum',
          text: 'Write a function that adds two numbers together',
          text: 'Write a function`add`that adds two numbers together',
        },
        actions: {
          setup: {
      step2Id: {
        content: {
          title: 'Multiply',
          text: 'Write a function that multiplies two numbers together',
          text: 'Write a function`multiply`that multiplies two numbers together',
        },
        actions: {
          setup: {
      step3Id: {
        content: {
          title: 'Divide',
          text: 'Write a function that divides',
          text: 'Write a function`divide`that divides',
        },
        actions: {
          setup: {
        },
        hints: [],
      },
      1: {
        content: {
          title: 'Modulo',
          text: 'Modulo `%` it up'
        },
        actions: {
          setup: {
            commits: ['16d9699'],
            files: ['src/modulo.js'],
          },
          solution: {
            commits: ['bbf8aa5']
          }
        }
      },
      2: {
        content: {
          title: 'Power',
          text: 'Power up with `**` powers'
        },
        actions: {
          setup: {
            commits: ['683c8db'],
            files: ['src/power.js'],
          },
          solution: {
            commits: ['deaf3a8']
          }
        }
      },
    },
  },
 }
diff --git a/vsc-extension-quickstart.md b/vsc-extension-quickstart.md
diff --git a/web-app/src/components/Stage/index.tsx b/web-app/src/components/Stage/index.tsx
    [stepId: string]: any // CC.Step
  }
  complete: boolean
 onNextStage(): void
 onContinue(): void
 }

 const Stage = ({ stage, steps,onNextStage, complete }: Props) => {
 const Stage = ({ stage, steps,onContinue, complete }: Props) => {
  const { stepList, content } = stage
  const { title, text } = content
  // grab the active step

      {complete && (
        <div style={styles.options}>
          <Button onClick={onNextStage}>Continue</Button>
          <Button onClick={onContinue}>Continue</Button>
        </div>
      )}
    </div>
diff --git a/web-app/src/containers/Tutorial/StagePage.tsx b/web-app/src/containers/Tutorial/StagePage.tsx

  const stageComplete = progress.stages[stageId] || false

  constonNextStage = (): void => {
  constonContinue = (): void => {
    props.send('STAGE_NEXT')
  }

      },
    }
  }
  return <Stage stage={stage} steps={steps}onNextStage={onNextStage} complete={stageComplete} />
  return <Stage stage={stage} steps={steps}onContinue={onContinue} complete={stageComplete} />
 }

 export default StagePage
diff --git a/web-app/src/containers/Tutorial/index.tsx b/web-app/src/containers/Tutorial/index.tsx
  return (
    <Router state={props.state}>
      <Route path="Tutorial.LoadNext">
        <LoadingPage text="Loading Tutorial..." />
        <LoadingPage text="Loading..." />
      </Route>
      <Route path="Tutorial.Summary">
        <SummaryPage send={send} />
diff --git a/web-app/src/tutorials/basic.ts b/web-app/src/tutorials/basic.ts
          text: 'A description of this stage',
        },
      },
      stage2Id: {
        stepList: ['1', '2'],
        content: {
          title: 'Second Stage',
          text: 'Going into round 2'
        }
      }
    },
    steps: {
      step1Id: {
        },
        hints: [],
      },
      1: {
        content: {
          title: 'Modulo',
          text: 'Modulo `%` it up'
        },
        actions: {
          setup: {
            commits: ['16d9699'],
            files: [],
          },
          solution: {
            commits: ['bbf8aa5']
          }
        }
      },
      2: {
        content: {
          title: 'Power',
          text: 'Power up with `**` powers'
        },
        actions: {
          setup: {
            commits: ['683c8db'],
            files: [],
          },
          solution: {
            commits: ['deaf3a8']
          }
        }
      },
    },
  },
 }
diff --git a/web-app/stories/Stage.stories.tsx b/web-app/stories/Stage.stories.tsx
      })}
      stage={object('stage', demo.data.stages.stage1Id)}
      complete={boolean('complete', false)}
 onNextStage={action('onNextStage')}
 onContinue={action('onContinue')}
    />
  ))
Original file line number	Diff line number	Diff line change
Expand Up		@@ -14,6 +14,24 @@ let currentProgress: CR.Progress = {
		complete: false,
		}

		const calculatePosition = ({ data, progress }: { data: CR.TutorialData, progress: CR.Progress }): CR.Position => {
		const { levelList } = data.summary
		// take next incomplete level or the final step
		const levelId = levelList.find((id: string) => !progress.levels[id]) \|\| levelList[levelList.length - 1]
		const { stageList } = data.levels[levelId]
		const stageId = stageList.find((id: string) => !progress.stages[id]) \|\| stageList[stageList.length - 1]
		const { stepList } = data.stages[stageId]
		const stepId = stepList.find((id: string) => !progress.steps[id]) \|\| stepList[stepList.length - 1]

		const nextPosition: CR.Position = {
		levelId,
		stageId,
		stepId,
		}

		return nextPosition
		}

		export default (dispatch: CR.EditorDispatch) => ({
		createWebview() {
		dispatch('coderoad.open_webview')
Expand DownExpand Up		@@ -79,24 +97,9 @@ export default (dispatch: CR.EditorDispatch) => ({
		if (!currentTutorial) {
		throw new Error('No Tutorial loaded')
		}

		const { data } = currentTutorial
		const position = calculatePosition({ data, progress: currentProgress })

		const { levelList } = data.summary
		// take next incomplete level or the final step
		const levelId = levelList.find((id: string) => !currentProgress.levels[id]) \|\| levelList[levelList.length - 1]
		const { stageList } = data.levels[levelId]
		const stageId = stageList.find((id: string) => !currentProgress.stages[id]) \|\| stageList[stageList.length - 1]
		console.log('position stepList')
		console.log(data.stages[stageId])
		const { stepList } = data.stages[stageId]
		const stepId = stepList.find((id: string) => !currentProgress.steps[id]) \|\| stepList[stepList.length - 1]

		const position = {
		levelId,
		stageId,
		stepId,
		}
		console.log('position', position)
		return position
		},
Expand All		@@ -113,6 +116,7 @@ export default (dispatch: CR.EditorDispatch) => ({
		// @ts-ignore
		progressUpdate: assign({
		progress: (context: CR.MachineContext): CR.Progress => {
		console.log('progress update')
		const { progress, position, data } = context
		const nextProgress = progress

Expand DownExpand Up		@@ -156,9 +160,23 @@ export default (dispatch: CR.EditorDispatch) => ({
		loadLevel() {
		console.log('loadLevel')
		},
		loadStage() {
		stageLoadNext(context: CR.MachineContext) {
		console.log('stageLoadNext')
		const { position } = context
		console.log(position)
		},
		loadStage(context: CR.MachineContext): void {
		console.log('loadStage')
		const { position } = context
		console.log(position)
		},
		// @ts-ignore
		updatePosition: assign({
		position: (context: CR.MachineContext) => calculatePosition({
		data: context.data,
		progress: context.progress,
		}),
		}),
		stepLoadCommits(context: CR.MachineContext): void {
		const { data, position } = context
		const { setup } = data.steps[position.stepId].actions
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -101,7 +101,7 @@ export const machine = (dispatch: CR.EditorDispatch) =>
		},
		},
		Stage: {
		onEntry: ['loadStage'],
		onEntry: ['loadStage', 'stepLoadCommits'],
		initial: 'Normal',
		states: {
		Normal: {
Expand DownExpand Up		@@ -148,7 +148,10 @@ export const machine = (dispatch: CR.EditorDispatch) =>
		},
		StageComplete: {
		on: {
		STAGE_NEXT: '#tutorial-load-next',
		STAGE_NEXT: {
		target: '#tutorial-load-next',
		actions: ['updatePosition'],
		},
		},
		},
		},
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -21,7 +21,7 @@ const basic: CR.Tutorial = {
		},
		levels: {
		level1Id: {
		stageList: ['stage1Id'],
		stageList: ['stage1Id', 'stage2Id'],
		content: {
		title: 'Sum Level',
		text: 'A description of this stage',
Expand All		@@ -36,12 +36,19 @@ const basic: CR.Tutorial = {
		text: 'A description of this stage',
		},
		},
		stage2Id: {
		stepList: ['1', '2'],
		content: {
		title: 'Second Stage',
		text: 'Going into round 2'
		}
		}
		},
		steps: {
		step1Id: {
		content: {
		title: 'Sum',
		text: 'Write a function that adds two numbers together',
		text: 'Write a function`add`that adds two numbers together',
		},
		actions: {
		setup: {
Expand All		@@ -58,7 +65,7 @@ const basic: CR.Tutorial = {
		step2Id: {
		content: {
		title: 'Multiply',
		text: 'Write a function that multiplies two numbers together',
		text: 'Write a function`multiply`that multiplies two numbers together',
		},
		actions: {
		setup: {
Expand All		@@ -74,7 +81,7 @@ const basic: CR.Tutorial = {
		step3Id: {
		content: {
		title: 'Divide',
		text: 'Write a function that divides',
		text: 'Write a function`divide`that divides',
		},
		actions: {
		setup: {
Expand All		@@ -87,6 +94,36 @@ const basic: CR.Tutorial = {
		},
		hints: [],
		},
		1: {
		content: {
		title: 'Modulo',
		text: 'Modulo `%` it up'
		},
		actions: {
		setup: {
		commits: ['16d9699'],
		files: ['src/modulo.js'],
		},
		solution: {
		commits: ['bbf8aa5']
		}
		}
		},
		2: {
		content: {
		title: 'Power',
		text: 'Power up with `**` powers'
		},
		actions: {
		setup: {
		commits: ['683c8db'],
		files: ['src/power.js'],
		},
		solution: {
		commits: ['deaf3a8']
		}
		}
		},
		},
		},
		}
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -28,10 +28,10 @@ interface Props {
		[stepId: string]: any // CC.Step
		}
		complete: boolean
		onNextStage(): void
		onContinue(): void
		}

		const Stage = ({ stage, steps,onNextStage, complete }: Props) => {
		const Stage = ({ stage, steps,onContinue, complete }: Props) => {
		const { stepList, content } = stage
		const { title, text } = content
		// grab the active step
Expand DownExpand Up		@@ -61,7 +61,7 @@ const Stage = ({ stage, steps, onNextStage, complete }: Props) => {

		{complete && (
		<div style={styles.options}>
		<Button onClick={onNextStage}>Continue</Button>
		<Button onClick={onContinue}>Continue</Button>
		</div>
		)}
		</div>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -18,7 +18,7 @@ const StagePage = (props: PageProps) => {

		const stageComplete = progress.stages[stageId] \|\| false

		constonNextStage = (): void => {
		constonContinue = (): void => {
		props.send('STAGE_NEXT')
		}

Expand All		@@ -35,7 +35,7 @@ const StagePage = (props: PageProps) => {
		},
		}
		}
		return <Stage stage={stage} steps={steps}onNextStage={onNextStage} complete={stageComplete} />
		return <Stage stage={stage} steps={steps}onContinue={onContinue} complete={stageComplete} />
		}

		export default StagePage
Original file line number	Diff line number	Diff line change
Expand Up		@@ -18,7 +18,7 @@ const Tutorial = (props: Props) => {
		return (
		<Router state={props.state}>
		<Route path="Tutorial.LoadNext">
		<LoadingPage text="Loading Tutorial..." />
		<LoadingPage text="Loading..." />
		</Route>
		<Route path="Tutorial.Summary">
		<SummaryPage send={send} />
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -36,6 +36,13 @@ const basic: CR.Tutorial = {
		text: 'A description of this stage',
		},
		},
		stage2Id: {
		stepList: ['1', '2'],
		content: {
		title: 'Second Stage',
		text: 'Going into round 2'
		}
		}
		},
		steps: {
		step1Id: {
Expand DownExpand Up		@@ -87,6 +94,36 @@ const basic: CR.Tutorial = {
		},
		hints: [],
		},
		1: {
		content: {
		title: 'Modulo',
		text: 'Modulo `%` it up'
		},
		actions: {
		setup: {
		commits: ['16d9699'],
		files: [],
		},
		solution: {
		commits: ['bbf8aa5']
		}
		}
		},
		2: {
		content: {
		title: 'Power',
		text: 'Power up with `**` powers'
		},
		actions: {
		setup: {
		commits: ['683c8db'],
		files: [],
		},
		solution: {
		commits: ['deaf3a8']
		}
		}
		},
		},
		},
		}
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -51,6 +51,6 @@ function someExample(a) {
		})}
		stage={object('stage', demo.data.stages.stage1Id)}
		complete={boolean('complete', false)}
		onNextStage={action('onNextStage')}
		onContinue={action('onContinue')}
		/>
		))