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

Commit9f5d3cb

Browse files
committed
hint state progress
Signed-off-by: shmck <shawn.j.mckay@gmail.com>
1 parent5e6d187 commit9f5d3cb

File tree

5 files changed

+80
-50
lines changed

5 files changed

+80
-50
lines changed

‎web-app/src/containers/Tutorial/ContentMenu.tsx‎renamed to ‎web-app/src/containers/Tutorial/components/ContentMenu.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as React from 'react'
22
import*asTfrom'typings'
33
import*asTTfrom'typings/tutorial'
44
import{Menu}from'@alifd/next'
5-
importIconfrom'../../components/Icon'
5+
importIconfrom'../../../components/Icon'
66

77
interfaceProps{
88
tutorial:TT.Tutorial

‎web-app/src/containers/Tutorial/components/Hints.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,22 +19,26 @@ const styles = {
1919

2020
interfaceProps{
2121
hints:string[]
22+
hintIndex:number
23+
setHintIndex(value:number):void
2224
}
2325

2426
constHints=(props:Props)=>{
25-
const[hintIndex,setHintIndex]=React.useState(-1)
26-
constisFinalHint=props.hints.length-1===hintIndex
27+
constisFinalHint=props.hints.length-1===props.hintIndex
2728
constnextHint=()=>{
28-
if(!isFinalHint){
29-
setHintIndex((currentHintIndex)=>currentHintIndex+1)
29+
console.log('hintIndex')
30+
console.log(props.hintIndex)
31+
if(isFinalHint){
32+
return
3033
}
34+
props.setHintIndex(props.hintIndex+1)
3135
}
3236
return(
3337
<divstyle={styles.hints}>
3438
<divstyle={styles.hintList}>
3539
{/* only show revealed hints */}
3640
{props.hints.map((h,i)=>{
37-
returni<=hintIndex ?(
41+
returni<=props.hintIndex ?(
3842
<divkey={i}style={styles.hint}>
3943
<Markdown>{h}</Markdown>
4044
</div>

‎web-app/src/containers/Tutorial/components/Level.tsx‎

Lines changed: 45 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import Button from '../../../components/Button'
88
importMarkdownfrom'../../../components/Markdown'
99
importProcessMessagesfrom'../../../components/ProcessMessages'
1010
importNuxTutorialfrom'../../../components/NewUserExperience/NuxTutorial'
11+
importContentMenufrom'./ContentMenu'
1112
importStepfrom'./Step'
1213
import{DISPLAY_RUN_TEST_BUTTON}from'../../../environment'
1314

@@ -87,42 +88,69 @@ const styles = {
8788
}
8889

8990
interfaceProps{
90-
menu:any
91-
steps:Array<TT.Step&{status:T.ProgressStatus}>
92-
title:string
91+
tutorial:TT.Tutorial
9392
index:number
94-
content:string
9593
status:'COMPLETE'|'ACTIVE'|'INCOMPLETE'
94+
progress:T.Progress
95+
position:T.Position
9696
processes:T.ProcessEvent[]
9797
testStatus:T.TestStatus|null
9898
onContinue():void
9999
onRunTest():void
100100
onLoadSolution():void
101101
onOpenLogs(channel:string):void
102+
displayHintsIndex:number[]
103+
setHintsIndex(index:number,value:number):void
102104
}
103105

104106
constLevel=({
105-
menu,
106-
steps,
107-
title,
108-
content,
107+
tutorial,
109108
index,
110109
status,
110+
progress,
111+
position,
111112
onContinue,
112113
onRunTest,
113114
onLoadSolution,
114115
onOpenLogs,
115116
processes,
116117
testStatus,
118+
displayHintsIndex,
119+
setHintsIndex,
117120
}:Props)=>{
118-
//@ts-ignore
121+
constlevel=tutorial.levels[index]
122+
123+
const[title,setTitle]=React.useState<string>(level.title)
124+
const[content,setContent]=React.useState<string>(level.content)
125+
126+
constmenu=(
127+
<ContentMenu
128+
tutorial={tutorial}
129+
position={position}
130+
progress={progress}
131+
setTitle={setTitle}
132+
setContent={setContent}
133+
/>
134+
)
135+
136+
conststeps:Array<TT.Step&{status:T.ProgressStatus}>=level.steps.map((step:TT.Step)=>{
137+
// label step status for step component
138+
letstatus:T.ProgressStatus='INCOMPLETE'
139+
if(progress.steps[step.id]){
140+
status='COMPLETE'
141+
}elseif(step.id===position.stepId){
142+
status='ACTIVE'
143+
}
144+
return{ ...step, status}
145+
})
146+
147+
// current
119148
letcurrentStep=steps.findIndex((s)=>s.status==='ACTIVE')
120149
if(currentStep===-1){
121150
currentStep=steps.length
122151
}
123152

124153
constpageBottomRef=React.useRef(null)
125-
126154
constscrollToBottom=()=>{
127155
//@ts-ignore
128156
pageBottomRef.current.scrollIntoView({behavior:'smooth'})
@@ -144,6 +172,7 @@ const Level = ({
144172
{menu}
145173
</Dropdown>
146174
</div>
175+
147176
<divcss={styles.text}>
148177
<h2css={styles.title}>{title}</h2>
149178
<Markdown>{content||''}</Markdown>
@@ -153,27 +182,30 @@ const Level = ({
153182
<divcss={styles.tasks}>
154183
<divcss={styles.header}>Tasks</div>
155184
<divcss={styles.steps}>
156-
{steps.map((step:(TT.Step&{status:T.ProgressStatus})|null,index:number)=>{
185+
{steps.map((step:(TT.Step&{status:T.ProgressStatus})|null,stepIndex:number)=>{
157186
if(!step){
158187
returnnull
159188
}
160189
letsubtasks=null
161-
if(step.setup.subtasks&&testStatus?.summary){
190+
if(step?.setup?.subtasks&&testStatus?.summary){
162191
subtasks=Object.keys(testStatus.summary).map((testName:string)=>({
163192
name:testName,
164193
//@ts-ignore typescript is wrong here
165194
pass:testStatus.summary[testName],
166195
}))
167196
}
197+
consthints=step.hints
168198
return(
169199
<Step
170200
key={step.id}
171-
order={index+1}
201+
index={index}
172202
status={step.status}
173203
content={step.content}
174204
onLoadSolution={onLoadSolution}
175205
subtasks={subtasks}
176206
hints={step.hints}
207+
hintIndex={displayHintsIndex[stepIndex]}
208+
setHintIndex={(value)=>setHintsIndex(stepIndex,value)}
177209
/>
178210
)
179211
})}

‎web-app/src/containers/Tutorial/components/Step.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,13 @@ import Hints from './Hints'
66
importMarkdownfrom'../../../components/Markdown'
77

88
interfaceProps{
9-
order:number
9+
index:number
1010
content:string
1111
status:T.ProgressStatus
1212
subtasks:{name:string;pass:boolean}[]|null
1313
hints?:string[]
14+
hintIndex:number
15+
setHintIndex(value:number):void
1416
onLoadSolution():void
1517
}
1618

@@ -73,7 +75,9 @@ const Step = (props: Props) => {
7375
</ul>
7476
) :null}
7577
{/* hints */}
76-
{props.hints&&props.hints.length ?<Hintshints={props.hints}/> :null}
78+
{props.hints&&props.hints.length ?(
79+
<Hintshints={props.hints}hintIndex={props.hintIndex}setHintIndex={props.setHintIndex}/>
80+
) :null}
7781
</div>
7882
</div>
7983
</div>

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

Lines changed: 19 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import * as React from 'react'
22
import*asTfrom'typings'
33
import*asTTfrom'typings/tutorial'
44
import*asselectorsfrom'../../services/selectors'
5-
importContentMenufrom'./ContentMenu'
65
importLevelfrom'./components/Level'
76

87
interfacePageProps{
@@ -14,10 +13,6 @@ const TutorialPage = (props: PageProps) => {
1413
const{ position, progress, processes, testStatus}=props.context
1514

1615
consttutorial=selectors.currentTutorial(props.context)
17-
constlevelData:TT.Level=selectors.currentLevel(props.context)
18-
19-
const[title,setTitle]=React.useState<string>(levelData.title)
20-
const[content,setContent]=React.useState<string>(levelData.content)
2116

2217
constonContinue=():void=>{
2318
props.send({
@@ -40,39 +35,34 @@ const TutorialPage = (props: PageProps) => {
4035
props.send({type:'OPEN_LOGS',payload:{ channel}})
4136
}
4237

43-
conststeps=levelData.steps.map((step:TT.Step)=>{
44-
// label step status for step component
45-
letstatus:T.ProgressStatus='INCOMPLETE'
46-
if(progress.steps[step.id]){
47-
status='COMPLETE'
48-
}elseif(step.id===position.stepId){
49-
status='ACTIVE'
50-
}
51-
return{ ...step, status}
52-
})
38+
constlevelIndex=tutorial.levels.findIndex((l:TT.Level)=>l.id===position.levelId)
39+
constlevelStatus=progress.levels[position.levelId] ?'COMPLETE' :'ACTIVE'
40+
const{ steps}=tutorial.levels[levelIndex]
41+
const[displayHintsIndex,setDisplayHintsIndex]=React.useState<number[]>(steps.map((s)=>-1))
42+
43+
constsetHintsIndex=(index:number,value:number)=>{
44+
returnsetDisplayHintsIndex((displayHintsIndex)=>{
45+
constnext=[...displayHintsIndex]
46+
next[index]=value
47+
returnnext
48+
})
49+
}
5350

5451
return(
5552
<Level
56-
title={title}
57-
content={content}
58-
menu={
59-
<ContentMenu
60-
tutorial={tutorial}
61-
position={position}
62-
progress={progress}
63-
setTitle={setTitle}
64-
setContent={setContent}
65-
/>
66-
}
67-
index={tutorial.levels.findIndex((l:TT.Level)=>l.id===position.levelId)}
68-
steps={steps}
69-
status={progress.levels[position.levelId] ?'COMPLETE' :'ACTIVE'}
53+
tutorial={tutorial}
54+
index={levelIndex}
55+
status={levelStatus}
56+
progress={progress}
57+
position={position}
7058
onContinue={onContinue}
7159
onRunTest={onRunTest}
7260
onLoadSolution={onLoadSolution}
7361
onOpenLogs={onOpenLogs}
7462
processes={processes}
7563
testStatus={testStatus}
64+
displayHintsIndex={displayHintsIndex}
65+
setHintsIndex={setHintsIndex}
7666
/>
7767
)
7868
}

0 commit comments

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