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

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

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