Movatterモバイル変換

[0]ホーム
URL:

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

 Sign up
Appearance settings

Commit295a61a

Browse files
committed
setup summary/levels/stage
1 parentec12c62 commit295a61a

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
returnposition
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*asCRfrom'typings'
33

44
importactionsfrom'./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
<Condstate={state}path="Tutorial">
27-
<TutorialPage/>
27+
<TutorialPagestate={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
interfaceProps{
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-
constLevel=({ level, stages,onStageSelect, onBack}:Props)=>{
23+
constLevel=({ level, stages,onNext, onBack}:Props)=>{
2424
const{ title, text}=level.content
2525
return(
2626
<Cardstyle={styles.card}title={title}showTitleBullet={false}contentHeight="auto">
@@ -33,7 +33,7 @@ const Level = ({ level, stages, onStageSelect, onBack }: Props) => {
3333
<divkey={stageId}style={unavailable ?styles.disabled :{}}>
3434
<h3>{stage.content.title}</h3>
3535
<p>{stage.content.text}</p>
36-
{stage.status.active&&<ButtononClick={()=>onStageSelect(stageId)}>Continue</Button>}
36+
{stage.status.active&&<ButtononClick={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
interfaceProps{
1212
data:CR.TutorialData
13-
onLevelSelect(levelId:string):void
13+
onNext():void
1414
}
1515

16-
constSummary=({ data,onLevelSelect}:Props)=>{
17-
const{ summary, levels}=data
16+
constSummary=({ data,onNext}:Props)=>{
17+
const{ summary}=data
1818
return(
1919
<Cardstyle={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-
constlevel=levels[levelId]
24-
return(
25-
<divkey={levelId}>
26-
<h3>
27-
{index+1}.{level.content.title}
28-
</h3>
29-
<p>{level.content.text}</p>
30-
<ButtononClick={()=>onLevelSelect('level1Id')}>Continue</Button>
31-
</div>
32-
)
33-
})}
34-
</div>
21+
<ButtononClick={()=>onNext()}>Continue</Button>
3522
</Card>
3623
)
3724
}
Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import*asReactfrom'react'
2+
importDataContextfrom'../../utils/DataContext'
3+
importLevelfrom'../../components/Level'
4+
5+
interfaceLevelProps{
6+
send(action:string):void
7+
state:any
8+
}
9+
10+
constLevelPage=(props:LevelProps)=>{
11+
const{ position, data, progress}=React.useContext(DataContext)
12+
const{ levelId}=position
13+
constlevel=data.levels[levelId]
14+
constonNext=():void=>{
15+
props.send('NEXT')
16+
}
17+
constonBack=():void=>{
18+
props.send('BACK')
19+
}
20+
21+
conststages:{[stageId:string]:any}={}
22+
for(conststageIdoflevel.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<Levellevel={level}stages={stages}onNext={onNext}onBack={onBack}/>
33+
}
34+
35+
exportdefaultLevelPage
Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import*asReactfrom'react'
2+
importDataContextfrom'../../utils/DataContext'
3+
importStagefrom'../../components/Stage'
4+
5+
interfacePageProps{
6+
send(action:string):void
7+
state:any
8+
}
9+
10+
constStagePage=(props:PageProps)=>{
11+
const{ position, data, progress}=React.useContext(DataContext)
12+
const{ stageId}=position
13+
conststage=data.stages[stageId]
14+
15+
conststageComplete=progress.stages[stageId]||false
16+
17+
constonNextStage=():void=>{
18+
props.send('STAGE_NEXT')
19+
}
20+
21+
// create step subset
22+
conststeps:{[stepId:string]:any}={}
23+
for(conststepIdofstage.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<Stagestage={stage}steps={steps}onNextStage={onNextStage}complete={stageComplete}/>
35+
}
36+
37+
exportdefaultStagePage
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import*asReactfrom'react'
2+
importDataContextfrom'../../utils/DataContext'
3+
importSummaryfrom'../../components/Summary'
4+
5+
interfacePageProps{
6+
send(action:string):void
7+
state:any
8+
}
9+
10+
constSummaryPage=(props:PageProps)=>{
11+
const{ data}=React.useContext(DataContext)
12+
return<Summarydata={data}onNext={()=>props.send('LOAD_NEXT')}/>
13+
}
14+
15+
exportdefaultSummaryPage
Lines changed: 26 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,33 @@
11
import*asReactfrom'react'
2+
import{send}from'../../utils/vscode'
23

3-
interfaceProps{}
4+
importCondfrom'../../components/Cond'
5+
importLoadingfrom'../../components/Loading'
6+
importSummaryPagefrom'./SummaryPage'
7+
importLevelPagefrom'./LevelPage'
8+
importStagePagefrom'./StagePage'
9+
10+
interfaceProps{
11+
state:any
12+
}
413

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

1433
exportdefaultTutorial

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp