Merge pull request #391 from coderoad/feature/key-bindings

Feature/key bindings

Author: ShMcK

package.json

@@ -78,6 +78,13 @@
         "title": "Start",
         "category": "CodeRoad"
       }
+    ],
+    "keybindings": [
+      {
+        "key": "ctrl+enter",
+        "mac": "ctrl+enter",
+        "command": "coderoad.enter"
+      }
     ]
   },
   "displayName": "CodeRoad",

src/editor/commands.ts

@@ -12,6 +12,7 @@ export const COMMANDS = {
   CONFIG_TEST_RUNNER: 'coderoad.config_test_runner',
   RUN_TEST: 'coderoad.run_test',
   SET_CURRENT_POSITION: 'coderoad.set_current_position',
+  ENTER: 'coderoad.enter',
 }
 
 interface CreateCommandProps {
@@ -103,5 +104,8 @@ export const createCommands = ({ extensionPath, workspaceState }: CreateCommandP
       logger('currentPosition', currentPosition)
       testRunner({ position: currentPosition, onSuccess: callbacks?.onSuccess, subtasks })
     },
+    [COMMANDS.ENTER]: () => {
+      webview.send({ type: 'KEY_PRESS_ENTER' })
+    },
   }
 }

web-app/src/Routes.tsx

@@ -40,7 +40,7 @@ const Routes = () => {
         <LoadingPage text="Loading Level..." processes={context.processes} />
       </Route>
       <Route paths={{ Tutorial: { Level: true } }}>
-        <TutorialPage send={send} context={context} />
+        <TutorialPage send={send} context={context} state={route.replace('Tutorial.Level.', '')} />
       </Route>
       {/* Completed */}
       <Route paths={{ Tutorial: { Completed: true } }}>

web-app/src/containers/Tutorial/components/Continue.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Dialog } from '@alifd/next'
+import { Dialog, Icon } from '@alifd/next'
 import { css, jsx } from '@emotion/core'
 import Button from '../../../components/Button'
 import ProgressPie from './ProgressPie'
@@ -14,17 +14,21 @@ const styles = {
   message: {
     textAlign: 'center' as 'center',
   },
+  buttonSubtext: {
+    padding: '0.5rem',
+  },
 }
 
 interface Props {
   title: string
   current: number // level index
   max: number // level count
+  defaultOpen: boolean
   onContinue(): void
 }
 
 const Continue = (props: Props) => {
-  const [modalState, setModalState] = React.useState<'closed' | 'open'>('closed')
+  const [modalState, setModalState] = React.useState<'closed' | 'open'>(props.defaultOpen ? 'open' : 'closed')
 
   const onClose = () => {
     setModalState('closed')
@@ -57,8 +61,10 @@ const Continue = (props: Props) => {
             <h3>{props.title}</h3>
             <br />
             <Button type="primary" size="large" onClick={onContinue}>
-              Continue
+              Continue&nbsp;&nbsp;
+              <Icon type="arrow-right" />
             </Button>
+            <div css={styles.buttonSubtext}>(ctrl + enter)</div>
           </div>
         </div>
       </Dialog>

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

@@ -11,7 +11,6 @@ import TestMessage from '../../components/TestMessage'
 import StepProgress from './components/StepProgress'
 import { DISPLAY_RUN_TEST_BUTTON } from '../../environment'
 import formatLevels from './formatLevels'
-// import SettingsPage from './containers/Settings'
 import Reset from './components/Reset'
 import Continue from './components/Continue'
 
@@ -69,6 +68,7 @@ const styles = {
 interface PageProps {
   context: T.MachineContext
   send(action: T.Action): void
+  state: string // 'Normal' | 'TestRunning' | 'TestFail' | 'TestPass' | 'LevelComplete'
 }
 
 /**
@@ -85,9 +85,6 @@ const TutorialPage = (props: PageProps) => {
   const onContinue = (): void => {
     props.send({
       type: 'NEXT_LEVEL',
-      payload: {
-        levelId: position.levelId,
-      },
     })
   }
 
@@ -111,6 +108,8 @@ const TutorialPage = (props: PageProps) => {
     testStatus,
   })
 
+  const disableOptions = processes.length > 0 || props.state === 'TestRunning'
+
   return (
     <div>
       <div>
@@ -141,26 +140,37 @@ const TutorialPage = (props: PageProps) => {
         {/* Left */}
         <div css={{ flex: 1 }}>
           {DISPLAY_RUN_TEST_BUTTON && level.status !== 'COMPLETE' ? (
-            <Button style={{ marginLeft: '1rem' }} type="primary" onClick={onRunTest} disabled={processes.length > 0}>
+            <Button style={{ marginLeft: '1rem' }} type="primary" onClick={onRunTest} disabled={disableOptions}>
               Run
             </Button>
           ) : null}
         </div>
 
         {/* Center */}
         <div css={{ flex: 1, display: 'flex', justifyContent: 'center' }}>
-          <Reset onReset={onReset} disabled={processes.length > 0} />
+          <Reset onReset={onReset} disabled={disableOptions || props.state === 'LevelComplete'} />
         </div>
 
         {/* Right */}
         <div css={{ flex: 1, display: 'flex', justifyContent: 'flex-end' }}>
-          {level.status === 'COMPLETE' || !level.steps.length ? (
+          {!level.steps.length ? (
+            <div css={{ marginRight: '0.5rem' }}>
+              <Continue
+                onContinue={onContinue}
+                current={levelIndex + 1}
+                max={levels.length}
+                title={tutorial.summary.title}
+                defaultOpen={false}
+              />
+            </div>
+          ) : props.state === 'LevelComplete' ? (
             <div css={{ marginRight: '0.5rem' }}>
               <Continue
                 onContinue={onContinue}
                 current={levelIndex + 1}
                 max={levels.length}
                 title={tutorial.summary.title}
+                defaultOpen={true}
               />
             </div>
           ) : level.steps.length > 1 ? (

web-app/src/environment.ts

@@ -14,4 +14,4 @@ export const TUTORIAL_LIST_URL: string = process.env.REACT_APP_TUTORIAL_LIST_URL
 export const SENTRY_DSN: string | null = process.env.REACT_APP_SENTRY_DSN || null
 
 // config variables
-export const DISPLAY_RUN_TEST_BUTTON = (process.env.CODEROAD_DISPLAY_RUN_TEST_BUTTON || '').toLowerCase() === 'true'
+export const DISPLAY_RUN_TEST_BUTTON = (process.env.CODEROAD_DISPLAY_RUN_TEST_BUTTON || 'true').toLowerCase() === 'true'

web-app/src/services/state/actions/context.ts

@@ -118,6 +118,13 @@ const contextActions: ActionFunctionMap<T.MachineContext, T.MachineEvent> = {
       return event.payload
     },
   }),
+  // @ts-ignore
+  updateLevel: assign({
+    position: (context: T.MachineContext, event: T.MachineEvent): any => {
+      const levelId = context.position.levelId
+      return { levelId }
+    },
+  }),
   loadNext: send(
     (context: T.MachineContext): T.Action => {
       const { position, progress } = context

web-app/src/services/state/machine.ts

@@ -171,6 +171,9 @@ export const createMachine = (options: any) => {
                     RUN_RESET: {
                       actions: ['runReset'],
                     },
+                    KEY_PRESS_ENTER: {
+                      actions: ['runTest'],
+                    },
                   },
                 },
                 TestRunning: {
@@ -217,7 +220,11 @@ export const createMachine = (options: any) => {
                   on: {
                     NEXT_LEVEL: {
                       target: 'LoadNext',
-                      actions: ['testClear', 'updatePosition'],
+                      actions: ['testClear', 'updateLevel'],
+                    },
+                    KEY_PRESS_ENTER: {
+                      target: 'LoadNext',
+                      actions: ['testClear', 'updateLevel'],
                     },
                   },
                 },