8000 setup summary/levels/stage · benjaminthedev/coderoad-vscode@295a61a · GitHub
[go: up one dir, main page]
Skip to content

Commit 295a61a

Browse files
ShMcKShMcK
committed
setup summary/levels/stage
1 parent ec12c62 commit 295a61a

File tree

9 files changed

+126
-30
lines changed

9 files changed

+126
-30
lines changed

‎src/state/actions/index.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,4 +77,7 @@ export default {
7777
return position
7878
}
7979
}),
80+
tutorialLoadNext() {
81+
machine.send('LOAD_NEXT')
82+
}
8083
}

‎src/state/machine.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Machine, send } from 'xstate'
1+
import { Machine } from 'xstate'
22
import * as CR from 'typings'
33

44
import actions from './actions'
@@ -61,7 +61,7 @@ export const machine = Machine<
6161
states: {
6262
LoadNext: {
6363
id: 'tutorial-load-next',
64-
// onEntry: [() => send('LOAD_NEXT')],
64+
onEntry: ['tutorialLoadNext'],
6565
on: {
6666
LOAD_NEXT: [
6767
{

‎web-app/src/Routes.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const Routes = ({ state }: Props) => {
2424
<ContinuePage />
2525
</Cond>
2626
<Cond state={state} path="Tutorial">
27-
<TutorialPage />
27+
<TutorialPage state={state} />
2828
</Cond>
2929
</div>
3030
)

‎web-app/src/components/Level/index.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,14 @@ const styles = {
1313

1414
interface Props {
1515
level: CR.TutorialLevel
16-
onStageSelect(stageId: string): void
16+
onNext(): void
1717
onBack(): void
1818
stages: {
1919
[stageId: string]: any // CC.StageWithStatus
2020
}
2121
}
2222

23-
const Level = ({ level, stages, onStageSelect, onBack }: Props) => {
23+
const Level = ({ level, stages, onNext, onBack }: Props) => {
2424
const { title, text } = level.content
2525
return (
2626
<Card style={styles.card} title={title} showTitleBullet={false} contentHeight="auto">
@@ -33,7 +33,7 @@ const Level = ({ level, stages, onStageSelect, onBack }: Props) => {
3333
<div key={stageId} style={unavailable ? styles.disabled : {}}>
3434
<h3>{stage.content.title}</h3>
3535
<p>{stage.content.text}</p>
36-
{stage.status.active && <Button onClick={() => onStageSelect(stageId)}>Continue</Button>}
36+
{stage.status.active && <Button onClick={onNext}>Continue</Button>}
3737
{stage.status.complete && <div>Complete</div>}
3838
</div>
3939
)

‎web-app/src/components/Summary/index.tsx

Lines changed: 4 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -10,28 +10,15 @@ const styles = {
1010

1111
interface Props {
1212
data: CR.TutorialData
13-
onLevelSelect(levelId: string): void
13+
onNext(): void
1414
}
1515

16-
const Summary = ({ data, onLevelSelect }: Props) => {
17-
const { summary, levels } = data
16+
const Summary = ({ data, onNext }: Props) => {
17+
const { summary } = data
1818
return (
1919
<Card style={styles.card} title={summary.title} showTitleBullet={false} contentHeight="auto">
2020
<p>{summary.description}</p>
21-
<div>
22-
{data.summary.levelList.map((levelId: string, index: number) => {
23-
const level = levels[levelId]
24-
return (
25-
<div key={levelId}>
26-
<h3>
27-
{index + 1}. {level.content.title}
28-
</h3>
29-
<p>{level.content.text}</p>
30-
<Button onClick={() => onLevelSelect('level1Id')}>Continue</Button>
31-
</div>
32-
)
33-
})}
34-
</div>
21+
<Button onClick={() => onNext()}>Continue</Button>
3522
</Card>
3623
)
3724
}

‎web-app/src/containers/Tutorial/LevelPage.tsx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import * as React from 'react'
2+
import DataContext from '../../utils/DataContext'
3+
import Level from '../../components/Level'
4+
5+
interface LevelProps {
6+
send(action: string): void
7+
state: any
8+
}
9+
10+
const LevelPage = (props: LevelProps) => {
11+
const { position, data, progress } = React.useContext(DataContext)
12+
const { levelId } = position
13+
const level = data.levels[levelId]
14+
const onNext = (): void => {
15+
props.send('NEXT')
16+
}
17+
const onBack = (): void => {
18+
props.send('BACK')
19+
}
20+
21+
const stages: { [stageId: string]: any } = {}
22+
for (const stageId of level.stageList) {
23+
stages[stageId] = {
24+
...data.stages[stageId],
25+
status: {
26+
complete: progress.stages[stageId] || false,
27+
active: position.stageId === stageId,
28+
},
29+
}
30+
}
31+
32+
return <Level level={level} stages={stages} onNext={onNext} onBack={onBack} />
33+
}
34+
35+
export default LevelPage

‎web-app/src/containers/Tutorial/StagePage.tsx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import * as React from 'react'
2+
import DataContext from '../../utils/DataContext'
3+
import Stage from '../../components/Stage'
4+
5+
interface PageProps {
6+
send(action: string): void
7+
state: any
8+
}
9+
10+
const StagePage = (props: PageProps) => {
11+
const { position, data, progress } = React.useContext(DataContext)
12+
const { stageId } = position
13+
const stage = data.stages[stageId]
14+
15+
const stageComplete = progress.stages[stageId] || false
16+
17+
const onNextStage = (): void => {
18+
props.send('STAGE_NEXT')
19+
}
20+
21+
// create step subset
22+
const steps: { [stepId: string]: any } = {}
23+
for (const stepId of stage.stepList) {
24+
steps[stepId] = {
25+
...data.steps[stepId],
26+
status: {
27+
// flag progressed steps as complete
28+
complete: progress.steps[stepId] || false,
29+
// set active step to active
30+
active: position.stepId === stepId,
31+
},
32+
}
33+
}
34+
return <Stage stage={stage} steps={steps} onNextStage={onNextStage} complete={stageComplete} />
35+
}
36+
37+
export default StagePage

‎web-app/src/containers/Tutorial/SummaryPage.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import * as React from 'react'
2+
import DataContext from '../../utils/DataContext'
3+
import Summary from '../../components/Summary'
4+
5+
interface PageProps {
6+
send(action: string): void
7+
state: any
8+
}
9+
10+
const SummaryPage = (props: PageProps) => {
11+
const { data } = React.useContext(DataContext)
12+
return <Summary data={data} onNext={() => props.send('LOAD_NEXT')} />
13+
}
14+
15+
export default SummaryPage

‎web-app/src/containers/Tutorial/index.tsx

Lines changed: 26 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,33 @@
11
import * as React from 'react'
2+
import { send } from '../../utils/vscode'
23

3-
interface Props {}
4+
import Cond from '../../components/Cond'
5+
import Loading from '../../components/Loading'
6+
import SummaryPage from './SummaryPage'
7+
import LevelPage from './LevelPage'
8+
import StagePage from './StagePage'
9+
10+
interface Props {
11+
state: any
12+
}
413

514
const Tutorial = (props: Props) => {
6-
// useContext
7-
return (
8-
<div>
9-
<h3>Tutorial</h3>
10-
</div>
11-
)
15+
return (
16+
<div>
17+
<Cond state={props.state} path="Tutorial.LoadNext">
18+
<Loading />
19+
</Cond>
20+
<Cond state={props.state} path="Tutorial.Summary">
21+
<SummaryPage state={props.state} send={send} />
22+
</Cond>
23+
<Cond state={props.state} path="Tutorial.Level">
24+
<LevelPage state={props.state} send={send} />
25+
</Cond>
26+
<Cond state={props.state} path="Tutorial.Stage">
27+
<StagePage state={props.state} send={send} />
28+
</Cond>
29+
</div>
30+
)
1231
}
1332

1433
export default Tutorial

0 commit comments

Comments
 (0)
0