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

Commit6cdcc6a

Browse files
committed
refactor level
Signed-off-by: shmck <shawn.j.mckay@gmail.com>
1 parentef4e4aa commit6cdcc6a

File tree

8 files changed

+193
-191
lines changed

8 files changed

+193
-191
lines changed

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

Lines changed: 7 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,8 @@ import * as React from 'react'
22
import*asTfrom'typings'
33
import*asTTfrom'typings/tutorial'
44
import{css,jsx}from'@emotion/core'
5-
importButtonfrom'../../../components/Button'
65
importMarkdownfrom'../../../components/Markdown'
7-
importProcessMessagesfrom'../../../components/ProcessMessages'
8-
importTestMessagefrom'../../../components/TestMessage'
96
importStepfrom'./Step'
10-
import{DISPLAY_RUN_TEST_BUTTON}from'../../../environment'
117

128
conststyles={
139
page:{
@@ -40,46 +36,11 @@ const styles = {
4036
fontWeight:'bold'as'bold',
4137
lineHeight:'1.2rem',
4238
},
43-
processes:{
44-
padding:'0 1rem',
45-
position:'fixed'as'fixed',
46-
bottom:'2rem',
47-
left:0,
48-
right:0,
49-
top:'auto',
50-
},
51-
testMessage:{
52-
position:'absolute'as'absolute',
53-
top:'auto',
54-
bottom:'2rem',
55-
left:'5px',
56-
right:'5px',
57-
},
58-
footer:{
59-
display:'flex'as'flex',
60-
flexDirection:'row'as'row',
61-
justifyContent:'space-between',
62-
alignItems:'center',
63-
height:'2rem',
64-
backgroundColor:'black',
65-
fontSize:'1rem',
66-
lineHeight:'1rem',
67-
padding:'10px 1rem',
68-
position:'fixed'as'fixed',
69-
bottom:0,
70-
left:0,
71-
right:0,
72-
color:'white',
73-
},
74-
taskCount:{
75-
fontSize:'0.8rem',
76-
opacity:0.9,
77-
},
7839
}
7940

8041
interfaceProps{
81-
tutorial:Exclude<TT.Tutorial,'config'>
82-
index:number
42+
level:TT.Level
43+
currentStep:number
8344
status:'COMPLETE'|'ACTIVE'|'INCOMPLETE'
8445
progress:T.Progress
8546
position:T.Position
@@ -91,21 +52,7 @@ interface Props {
9152
onOpenLogs(channel:string):void
9253
}
9354

94-
constLevel=({
95-
tutorial,
96-
index,
97-
status,
98-
progress,
99-
position,
100-
onContinue,
101-
onRunTest,
102-
onLoadSolution,
103-
onOpenLogs,
104-
processes,
105-
testStatus,
106-
}:Props)=>{
107-
constlevel:TT.Level=tutorial.levels[index]
108-
55+
constLevel=({ level, progress, position, onLoadSolution, currentStep, testStatus}:Props)=>{
10956
// hold state for hints for the level
11057
const[displayHintsIndex,setDisplayHintsIndex]=React.useState<number[]>([])
11158
constsetHintsIndex=(index:number,value:number)=>{
@@ -117,10 +64,10 @@ const Level = ({
11764
}
11865
React.useEffect(()=>{
11966
// set the hints to empty on level starts
120-
setDisplayHintsIndex(steps.map((s)=>-1))
67+
setDisplayHintsIndex(level.steps.map((s:TT.Step)=>-1))
12168
},[position.levelId])
12269

123-
conststeps:Array<TT.Step&{status:T.ProgressStatus}>=level.steps.map((step:TT.Step)=>{
70+
conststeps:TT.Step[]=level.steps.map((step:TT.Step)=>{
12471
// label step status for step component
12572
letstatus:T.ProgressStatus='INCOMPLETE'
12673
if(progress.steps[step.id]){
@@ -132,10 +79,6 @@ const Level = ({
13279
})
13380

13481
// current
135-
letcurrentStep=steps.findIndex((s)=>s.status==='ACTIVE')
136-
if(currentStep===-1){
137-
currentStep=steps.length
138-
}
13982

14083
constpageBottomRef=React.useRef(null)
14184
constscrollToBottom=()=>{
@@ -159,7 +102,7 @@ const Level = ({
159102
{steps.length ?(
160103
<divcss={styles.tasks}>
161104
<divcss={styles.steps}>
162-
{steps.map((step:(TT.Step&{status:T.ProgressStatus})|null,stepIndex:number)=>{
105+
{steps.map((step:TT.Step|null,stepIndex:number)=>{
163106
if(!step){
164107
returnnull
165108
}
@@ -173,8 +116,7 @@ const Level = ({
173116
return(
174117
<Step
175118
key={step.id}
176-
index={index}
177-
status={step.status}
119+
status={step.status||'INCOMPLETE'}
178120
content={step.content}
179121
onLoadSolution={onLoadSolution}
180122
subtasks={subtasks}
@@ -189,38 +131,6 @@ const Level = ({
189131
) :null}
190132

191133
<divref={pageBottomRef}/>
192-
193-
<divcss={styles.footer}>
194-
{/* Process Modal */}
195-
{processes.length>0&&(
196-
<divcss={styles.processes}>
197-
<ProcessMessagesprocesses={processes}/>
198-
</div>
199-
)}
200-
{/* Test Fail Modal */}
201-
{testStatus&&testStatus.type==='warning'&&(
202-
<divcss={styles.testMessage}>
203-
<TestMessagemessage={testStatus.title}/>
204-
</div>
205-
)}
206-
207-
{DISPLAY_RUN_TEST_BUTTON&&status!=='COMPLETE' ?(
208-
<Buttontype="primary"onClick={onRunTest}disabled={processes.length>0}>
209-
Run
210-
</Button>
211-
) :null}
212-
<span>
213-
{status==='COMPLETE'||!steps.length ?(
214-
<Buttontype="primary"onClick={onContinue}>
215-
Continue
216-
</Button>
217-
) :(
218-
<spancss={styles.taskCount}>
219-
{currentStep} of{steps.length} tasks
220-
</span>
221-
)}
222-
</span>
223-
</div>
224134
</div>
225135
</div>
226136
)

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

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ const styles = {
1919
interfaceProps{
2020
visible:boolean
2121
toggleVisible(visible:boolean):void
22+
page:'level'|'settings'|'review'
23+
setPage(page:'level'|'settings'|'review'):void
2224
}
2325

2426
constSideMenu=(props:Props)=>{
@@ -35,17 +37,16 @@ const SideMenu = (props: Props) => {
3537
onClose={onMenuClose}
3638
>
3739
<Menustyle={styles.menu}defaultOpenKeys="sub-menu">
38-
<Itemdisabledkey="1">
40+
<Itemkey="level"disabled={props.page==='level'}onClick={()=>props.setPage('level')}>
41+
<Icontype="detail"size="small"color="#EBEBEB"/>
42+
<spanstyle={styles.itemText}>Level</span>
43+
</Item>
44+
<Itemkey="review"disabled={props.page==='review'}onClick={()=>props.setPage('review')}>
3945
<Icontype="list"size="small"color="#EBEBEB"/>
4046
<spanstyle={styles.itemText}>Review</span>
4147
</Item>
42-
{/* <Divider key="divider" />
43-
<Item disabled key="2">
44-
<Icon type="help" size="small" color="#EBEBEB" />
45-
<span style={styles.itemText}>Help</span>
46-
</Item> */}
4748
<Dividerkey="divider"/>
48-
<Itemdisabledkey="3">
49+
<Itemkey="settings"disabled={props.page==='settings'}onClick={()=>props.setPage('review')}>
4950
<Icontype="set"size="small"color="#EBEBEB"/>
5051
<spanstyle={styles.itemText}>Settings</span>
5152
</Item>

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

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,10 @@ import * as React from 'react'
22
import*asTfrom'typings'
33
import{css,jsx}from'@emotion/core'
44
importTestStatusIconfrom'./TestStatusIcon'
5-
importIconfrom'../../../components/Icon'
65
importHintsfrom'./Hints'
76
importMarkdownfrom'../../../components/Markdown'
87

98
interfaceProps{
10-
index:number
119
content:string
1210
status:T.ProgressStatus
1311
subtasks:{name:string;pass:boolean}[]|null
@@ -76,7 +74,6 @@ const Step = (props: Props) => {
7674
return(
7775
<likey={subtask.name}css={styles.subtask}>
7876
<TestStatusIconsize="xs"status={subtaskStatus}/>
79-
8077
<spanstyle={{marginLeft:'0.5rem'}}>{subtask.name}</span>
8178
</li>
8279
)
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import*asReactfrom'react'
2+
3+
conststyles={
4+
container:{
5+
padding:'1rem',
6+
},
7+
}
8+
9+
constReviewPage=()=>{
10+
return<divcss={styles.container}>Review Coming soon...</div>
11+
}
12+
13+
exportdefaultReviewPage
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import*asReactfrom'react'
2+
3+
conststyles={
4+
container:{
5+
padding:'1rem',
6+
},
7+
}
8+
9+
constSettingsPage=()=>{
10+
return<divcss={styles.container}>Settings coming soon...</div>
11+
}
12+
13+
exportdefaultSettingsPage

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

Lines changed: 106 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,12 @@ import * as selectors from '../../services/selectors'
55
importSideMenufrom'./components/SideMenu'
66
importLevelfrom'./components/Level'
77
importIconfrom'../../components/Icon'
8+
importSettingsPagefrom'./containers/Settings'
9+
importReviewPagefrom'./containers/Review'
10+
importButtonfrom'../../components/Button'
11+
importProcessMessagesfrom'../../components/ProcessMessages'
12+
importTestMessagefrom'../../components/TestMessage'
13+
import{DISPLAY_RUN_TEST_BUTTON}from'../../environment'
814

915
conststyles={
1016
header:{
@@ -24,6 +30,41 @@ const styles = {
2430
textDecoration:'none',
2531
color:'inherit',
2632
},
33+
footer:{
34+
display:'flex'as'flex',
35+
flexDirection:'row'as'row',
36+
justifyContent:'space-between',
37+
alignItems:'center',
38+
height:'2rem',
39+
backgroundColor:'black',
40+
fontSize:'1rem',
41+
lineHeight:'1rem',
42+
padding:'10px 1rem',
43+
position:'fixed'as'fixed',
44+
bottom:0,
45+
left:0,
46+
right:0,
47+
color:'white',
48+
},
49+
taskCount:{
50+
fontSize:'0.8rem',
51+
opacity:0.9,
52+
},
53+
processes:{
54+
padding:'0 1rem',
55+
position:'fixed'as'fixed',
56+
bottom:'2rem',
57+
left:0,
58+
right:0,
59+
top:'auto',
60+
},
61+
testMessage:{
62+
position:'absolute'as'absolute',
63+
top:'auto',
64+
bottom:'2rem',
65+
left:'5px',
66+
right:'5px',
67+
},
2768
}
2869

2970
interfacePageProps{
@@ -59,30 +100,76 @@ const TutorialPage = (props: PageProps) => {
59100

60101
constlevelIndex=tutorial.levels.findIndex((l:TT.Level)=>l.id===position.levelId)
61102
constlevelStatus=progress.levels[position.levelId] ?'COMPLETE' :'ACTIVE'
103+
constlevel:TT.Level=tutorial.levels[levelIndex]
62104
const[menuVisible,setMenuVisible]=React.useState(false)
63105

106+
const[page,setPage]=React.useState<'level'|'settings'|'review'>('level')
107+
108+
letcurrentStep=level.steps.findIndex((s:TT.Step)=>s.status==='ACTIVE')
109+
if(currentStep===-1){
110+
currentStep=level.steps.length
111+
}
112+
64113
return(
65114
<div>
66-
<divcss={styles.header}>
67-
<aonClick={()=>setMenuVisible(!menuVisible)}>
68-
<Icontype="toggle-left"size="small"/>
69-
</a>
70-
<spancss={styles.title}>{tutorial.summary.title}</span>
115+
<div>
116+
<divcss={styles.header}>
117+
<aonClick={()=>setMenuVisible(!menuVisible)}>
118+
<Icontype="toggle-left"size="small"/>
119+
</a>
120+
<spancss={styles.title}>{tutorial.summary.title}</span>
121+
</div>
122+
123+
{page==='level'&&(
124+
<Level
125+
level={level}
126+
currentStep={currentStep}
127+
status={levelStatus}
128+
progress={progress}
129+
position={position}
130+
onContinue={onContinue}
131+
onRunTest={onRunTest}
132+
onLoadSolution={onLoadSolution}
133+
onOpenLogs={onOpenLogs}
134+
processes={processes}
135+
testStatus={testStatus}
136+
/>
137+
)}
138+
{page==='settings'&&<SettingsPage/>}
139+
{page==='review'&&<ReviewPage/>}
140+
</div>
141+
<divcss={styles.footer}>
142+
{/* Process Modal */}
143+
{processes.length>0&&(
144+
<divcss={styles.processes}>
145+
<ProcessMessagesprocesses={processes}/>
146+
</div>
147+
)}
148+
{/* Test Fail Modal */}
149+
{testStatus&&testStatus.type==='warning'&&(
150+
<divcss={styles.testMessage}>
151+
<TestMessagemessage={testStatus.title}/>
152+
</div>
153+
)}
154+
155+
{DISPLAY_RUN_TEST_BUTTON&&levelStatus!=='COMPLETE' ?(
156+
<Buttontype="primary"onClick={onRunTest}disabled={processes.length>0}>
157+
Run
158+
</Button>
159+
) :null}
160+
<span>
161+
{levelStatus==='COMPLETE'||!level.steps.length ?(
162+
<Buttontype="primary"onClick={onContinue}>
163+
Continue
164+
</Button>
165+
) :(
166+
<spancss={styles.taskCount}>
167+
{currentStep} of{level.steps.length} tasks
168+
</span>
169+
)}
170+
</span>
71171
</div>
72-
<Level
73-
tutorial={tutorial}
74-
index={levelIndex}
75-
status={levelStatus}
76-
progress={progress}
77-
position={position}
78-
onContinue={onContinue}
79-
onRunTest={onRunTest}
80-
onLoadSolution={onLoadSolution}
81-
onOpenLogs={onOpenLogs}
82-
processes={processes}
83-
testStatus={testStatus}
84-
/>
85-
<SideMenuvisible={menuVisible}toggleVisible={setMenuVisible}/>
172+
<SideMenuvisible={menuVisible}toggleVisible={setMenuVisible}page={page}setPage={setPage}/>
86173
</div>
87174
)
88175
}

0 commit comments

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