8000 Merge pull request #22 from ShMcK/feature/completed · coderoad/coderoad-vscode@e7e77bc · GitHub
[go: up one dir, main page]
Skip to content

Commit e7e77bc

Browse files
ShMcKShMcK
authored
Merge pull request #22 from ShMcK/feature/completed
Feature/completed
2 parents fc2c217 + 52eca55 commit e7e77bc

File tree

7 files changed

+62
-36
lines changed
  • src/state
    • < 8000 svg aria-hidden="true" focusable="false" class="octicon octicon-chevron-down" viewBox="0 0 12 12" width="12" height="12" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom">
      guards
    • index.ts
    • machine.ts
  • typings
  • web-app/src

7 files changed

+62
-36
lines changed

‎src/state/guards/index.ts

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,27 @@ export default {
44
hasNextStep: (context: CR.MachineContext): boolean => {
55
const { data, position, progress } = context
66
const steps = data.stages[position.stageId].stepList
7-
// isn't final step yet
8-
const hasNext = !!position.stepId && (steps[steps.length - 1] !== position.stepId) || !progress.stages[position.stageId]
7+
const stageIncomplete = !progress.stages[position.stageId]
8+
const isNotFinalStep = (!!position.stepId && (steps[steps.length - 1] !== position.stepId))
9+
const hasNext = stageIncomplete || isNotFinalStep
910
console.log('GUARD: hasNextStep', hasNext)
1011
return hasNext
1112
},
1213
hasNextStage: (context: CR.MachineContext): boolean => {
13-
const { data, position } = context
14+
const { data, position, progress } = context
1415
const stages = data.levels[position.levelId].stageList
15-
const hasNext = !!position.stageId && stages[stages.length - 1] !== position.stageId
16+
const stageComplete = progress.stages[position.stageId]
17+
const isNotFinalStage = !!position.stageId && stages[stages.length - 1] !== position.stageId
18+
const hasNext = stageComplete && isNotFinalStage
1619
console.log('GUARD: hasNextStage', hasNext)
1720
return hasNext
1821
},
1922
hasNextLevel: (context: CR.MachineContext): boolean => {
20-
const { data, position } = context
23+
const { data, position, progress } = context
2124
const levels = data.summary.levelList
22-
const hasNext = !!position.levelId && levels[levels.length - 1] !== position.levelId
25+
const levelComplete = progress.levels[position.levelId]
26+
const isNotFinalLevel = !!position.levelId && levels[levels.length - 1] !== position.levelId
27+
const hasNext = levelComplete && isNotFinalLevel
2328
console.log('GUARD: hasNextLevel', hasNext)
2429
return hasNext
2530
},

‎src/state/index.ts

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,21 @@ import createMachine from './machine'
55
// machine interpreter
66
// https://xstate.js.org/docs/guides/interpretation.html
77

8+
// convert state into a readable string
9+
const stateToString = (state: string | object, str: string = ''): string => {
10+
if (typeof state === 'object') {
11+
const keys = Object.keys(state)
12+
if (keys && keys.length) {
13+
const key = keys[0]
14+
return stateToString(state[key], str.length ? `${str}.${key}` : key)
15+
}
16+
return str
17+
} else if (typeof state === 'string') {
18+
return state
19+
}
20+
return ''
21+
}
22+
823
interface Props {
924
dispatch: CR.EditorDispatch
1025
}
@@ -23,10 +38,8 @@ class StateMachine {
2338
this.service = interpret(machine, this.machineOptions)
2439
// logging
2540
.onTransition(state => {
26-
// console.log('onTransition', state)
2741
if (state.changed) {
28-
// console.log('next state')
29-
// console.log(state.value)
42+
console.log(`STATE: ${stateToString(state.value)}`)
3043
dispatch('coderoad.send_state', { state: state.value, data: state.context })
3144
} else {
3245
dispatch('coderoad.send_data', { data: state.context })

‎src/state/machine.ts

Lines changed: 19 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export const machine = (dispatch: CR.EditorDispatch) =>
4747
ContinueTutorial: {
4848
onEntry: ['tutorialContinue'],
4949
on: {
50-
TUTORIAL_START: '#tutorial-load-current',
50+
TUTORIAL_START: '#tutorial-load-next',
5151
},
5252
},
5353
},
@@ -57,7 +57,7 @@ export const machine = (dispatch: CR.EditorDispatch) =>
5757
initial: 'Initialize',
5858
onEntry: ['tutorialSetup'],
5959
on: {
60-
WEBVIEW_INITIALIZED: '#tutorial-load-current'
60+
WEBVIEW_INITIALIZED: '#tutorial-load-next'
6161
},
6262
states: {
6363
Initialize: {
@@ -66,28 +66,24 @@ export const machine = (dispatch: CR.EditorDispatch) =>
6666
0: 'Summary',
6767
},
6868
},
69-
LoadCurrent: {
70-
id: 'tutorial-load-current',
71-
// TODO: verify current is not complete
72-
after: {
73-
0: 'Stage',
74-
},
75-
},
7669
LoadNext: {
7770
id: 'tutorial-load-next',
7871
after: {
79-
0: [
80-
{
81-
target: 'Stage',
82-
cond: 'hasNextStage',
83-
},
84-
{
85-
target: 'Level',
86-
cond: 'hasNextLevel',
87-
},
88-
{
89-
target: '#end-tutorial',
90-
},
72+
0: [{
73+
target: 'Stage',
74+
cond: 'hasNextStep',
75+
},
76+
{
77+
target: 'Stage',
78+
cond: 'hasNextStage',
79+
},
80+
{
81+
target: 'Level',
82+
cond: 'hasNextLevel',
83+
},
84+
{
85+
target: '#completed-tutorial',
86+
},
9187
],
9288
},
9389
},
@@ -157,8 +153,8 @@ export const machine = (dispatch: CR.EditorDispatch) =>
157153
},
158154
},
159155
},
160-
EndTutorial: {
161-
id: 'end-tutorial',
156+
Completed: {
157+
id: 'completed-tutorial',
162158
type: 'final',
163159
},
164160
},

‎typings/index.d.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,6 @@ export interface MachineStateSchema {
148148
states: {
149149
Initialize: {}
150150
Summary: {}
151-
LoadCurrent: {}
152151
LoadNext: {}
153152
Level: {}
154153
Stage: {
@@ -161,7 +160,7 @@ export interface MachineStateSchema {
161160
StageComplete: {}
162161
}
163162
}
164-
EndTutorial: {}
163+
Completed: {}
165164
}
166165
}
167166
}

‎web-app/src/App.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react'
22
import * as CR from 'typings'
33

4-
// import Debugger from './components/Debugger'
4+
import Debugger from './components/Debugger'
55
import Routes from './Routes'
66
import DataContext, { initialData, initialState } from './utils/DataContext'
77
import { send } from './utils/vscode'
@@ -10,6 +10,8 @@ interface ReceivedEvent {
1010
data: CR.Action
1111
}
1212

13+
const debug = false
14+
1315
const App = () => {
1416
const [state, setState] = React.useState(initialState)
1517
const [data, setData]: [CR.MachineContext, (data: CR.MachineContext) => void] = React.useState(initialData)
@@ -51,7 +53,7 @@ const App = () => {
5153
return (
5254
<DataContext.Provider value={value}>
5355
<div>
54-
{/* <Debugger value={value} /> */}
56+
{debug && <Debugger value={value} />}
5557
<Routes state={state} />
5658
</div>
5759
</DataContext.Provider>

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import * as React from 'react'
2+
3+
const CompletedPage = () => {
4+
return <div>Tutorial Complete</div>
5+
}
6+
7+
export default CompletedPage

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import LoadingPage from '../LoadingPage'
66
import SummaryPage from './SummaryPage'
77
import LevelPage from './LevelPage'
88
import StagePage from './StagePage'
9+
import CompletedPage from './CompletedPage'
910

1011
const { Route } = Router
1112

@@ -28,6 +29,9 @@ const Tutorial = (props: Props) => {
2829
<Route path="Tutorial.Stage">
2930
<StagePage send={send} />
3031
</Route>
32+
<Route path="Tutorial.Completed">
33+
<CompletedPage />
34+
</Route>
3135
</Router>
3236
)
3337
}

0 commit comments

Comments
 (0)
0