source-academy
diff --git a/‎.gitignore‎
Lines changed: 1 addition & 0 deletions b/‎.gitignore‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎package.json‎
Lines changed: 11 additions & 4 deletions b/‎package.json‎
Lines changed: 11 additions & 4 deletions
diff --git a/‎src/actions/actionTypes.ts‎
Lines changed: 1 addition & 0 deletions b/‎src/actions/actionTypes.ts‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎src/actions/playground.ts‎
Lines changed: 5 additions & 0 deletions b/‎src/actions/playground.ts‎
Lines changed: 5 additions & 0 deletions
diff --git a/‎src/components/Application.tsx‎
Lines changed: 1 addition & 1 deletion b/‎src/components/Application.tsx‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎src/components/Editor.tsx‎
Lines changed: 0 additions & 31 deletions b/‎src/components/Editor.tsx‎
Lines changed: 0 additions & 31 deletions
diff --git a/‎src/components/IDE/Control.tsx‎
Lines changed: 0 additions & 76 deletions b/‎src/components/IDE/Control.tsx‎
Lines changed: 0 additions & 76 deletions
diff --git a/‎src/components/IDE/Editor.tsx‎
Lines changed: 52 additions & 10 deletions b/‎src/components/IDE/Editor.tsx‎
Lines changed: 52 additions & 10 deletions
diff --git a/‎src/components/IDE/Repl.tsx‎
Lines changed: 35 additions & 10 deletions b/‎src/components/IDE/Repl.tsx‎
Lines changed: 35 additions & 10 deletions
@@ -8,6 +8,7 @@
 
 # production
 /build
+src/styles/*.css
 
 # misc
 .DS_Store
 
@@ -10,13 +10,17 @@
     "update-ui-snapshots": "Update UI test snapshots"
   },
   "scripts": {
+    "build": "build-css && build-js",
+    "build-css": "node-sass-chokidar src/ -o src/",
+    "build-js": "react-scripts-ts build",
+    "coverage": "./scripts/coverage-fix.sh do && react-scripts-ts test --env=jsdom --coverage && ./scripts/coverage-fix.sh undo",
     "format": "prettier --write 'src/**/*.{ts,tsx}'",
     "format:ci": "prettier --list-different 'src/**/*.{ts,tsx}'",
-    "start": "react-scripts-ts start",
-    "build": "react-scripts-ts build",
+    "start-js": "react-scripts-ts start",
+    "start": "npm-run-all -p watch-css start-js",
     "test": "react-scripts-ts test --env=jsdom",
-    "coverage": "./scripts/coverage-fix.sh do && react-scripts-ts test --env=jsdom --coverage && ./scripts/coverage-fix.sh undo",
-    "update-ui-snapshots": "jest --updateSnapshot"
+    "update-ui-snapshots": "jest --updateSnapshot",
+    "watch-css": "node-sass-chokidar src/ -o src/ --watch --recursive"
   },
   "husky": {
     "hooks": {
@@ -30,7 +34,9 @@
     "astring": "^1.3.0",
     "common-tags": "^1.7.2",
     "flexboxgrid": "^6.3.1",
+    "node-sass-chokidar": "^1.3.0",
     "normalize.css": "^8.0.0",
+    "npm-run-all": "^4.1.3",
     "react": "^16.3.1",
     "react-ace": "^6.1.1",
     "react-dom": "^16.3.1",
@@ -66,6 +72,7 @@
     "enzyme-adapter-react-16": "^1.1.1",
     "husky": "^1.0.0-rc.6",
     "prettier": "^1.12.0",
+    "re-resizable": "^4.4.8",
     "react-scripts-ts": "^2.15.1",
     "react-test-renderer": "^16.3.1",
     "typescript": "^2.8.1"
 
@@ -7,6 +7,7 @@ export interface IAction extends ReduxAction {
 /** Playground */
 export const UPDATE_EDITOR_VALUE = 'UPDATE_EDITOR_VALUE'
 export const UPDATE_REPL_VALUE = 'UPDATE_REPL_VALUE'
+export const CHANGE_EDITOR_WIDTH = 'CHANGE_EDITOR_WIDTH'
 export const EVAL_EDITOR = 'EVAL_EDITOR'
 export const EVAL_REPL = 'EVAL_REPL'
 export const CLEAR_REPL_INPUT = 'CLEAR_REPL_INPUT'
 
@@ -7,6 +7,11 @@ export const updateEditorValue: ActionCreator<actionTypes.IAction> = (newEditorV
   payload: newEditorValue
 })
 
+export const changeEditorWidth: ActionCreator<actionTypes.IAction> = (widthChange: string) => ({
+  type: actionTypes.CHANGE_EDITOR_WIDTH,
+  payload: widthChange
+})
+
 export const updateReplValue: ActionCreator<actionTypes.IAction> = (newReplValue: string) => ({
   type: actionTypes.UPDATE_REPL_VALUE,
   payload: newReplValue
 
@@ -16,7 +16,7 @@ const Application: React.SFC<IApplicationProps> = props => {
   const redirectToDashboard = () => <Redirect to="/dashboard" />
 
   return (
-    <div className="Application">
+    <div className="Application pt-dark">
       <NavigationBar title={props.title} />
       <div className="Application__main">
         <Switch>
 
@@ -2,30 +2,72 @@ import * as React from 'react'
 
 import AceEditor from 'react-ace'
 
+import { Button, IconName, Intent } from '@blueprintjs/core'
+
 import 'brace/mode/javascript'
-import 'brace/theme/terminal'
+import 'brace/theme/cobalt'
 
 /**
  * @property editorValue - The string content of the react-ace editor
  * @property handleEditorChange  - A callback function
  *           for the react-ace editor's `onChange`
+ * @property handleEvalEditor  - A callback function for evaluation
+ *           of the editor's content, using `slang`
  */
 export interface IEditorProps {
   editorValue: string
-  handleEditorChange: (newCode: string) => void
+  isRunning: boolean
+  handleEditorValueChange: (newCode: string) => void
+  handleEvalEditor: () => void
+  handleInterruptEval: () => void
 }
 
 class Editor extends React.Component<IEditorProps, {}> {
   public render() {
+    const genericButton = (
+      label: string,
+      icon: IconName,
+      handleClick = () => {},
+      intent = Intent.NONE,
+      notMinimal = false
+    ) => (
+      <Button
+        onClick={handleClick}
+        className={(notMinimal ? '' : 'pt-minimal') + ' col-xs-12'}
+        intent={intent}
+        icon={icon}
+      >
+        {label}
+      </Button>
+    )
+    const runButton = this.props.isRunning
+      ? null
+      : genericButton('', 'play', this.props.handleEvalEditor)
+    const stopButton = this.props.isRunning
+      ? genericButton('', 'stop', this.props.handleInterruptEval)
+      : null
     return (
-      <AceEditor
-        className="Editor col-xs-6"
-        mode="javascript"
-        theme="terminal"
-        value={this.props.editorValue}
-        onChange={this.props.handleEditorChange}
-        width="100%"
-      />
+      <div className="Editor">
+        <div className="row editor-control start-xs">
+          <div className="col-xs-1">
+            {runButton}
+            {stopButton}
+          </div>
+        </div>
+        <div className="row editor-react-ace">
+          <AceEditor
+            className="react-ace"
+            mode="javascript"
+            theme="cobalt"
+            value={this.props.editorValue}
+            onChange={this.props.handleEditorValueChange}
+            width="100%"
+            height="100%"
+            fontSize={14}
+            highlightActiveLine={false}
+          />
+        </div>
+      </div>
     )
   }
 }
 
@@ -1,6 +1,7 @@
 import * as React from 'react'
 
 import { Card } from '@blueprintjs/core'
+import ReplControlContainer from '../../containers/IDE/ReplControlContainer'
 import ReplInputContainer from '../../containers/IDE/ReplInputContainer'
 import { InterpreterOutput } from '../../reducers/states'
 import { parseError, toString } from '../../slang'
@@ -16,10 +17,15 @@ export interface IOutputProps {
 const Repl: React.SFC<IReplProps> = props => {
   const cards = props.output.map((slice, index) => <Output output={slice} key={index} />)
   return (
-    <div className="Repl col-xs-6">
-      {cards}
-      <div className="row">
-        <ReplInputContainer />
+    <div className="Repl">
+      <div className="repl-control-parent">
+        <ReplControlContainer />
+      </div>
+      <div className="repl-output-parent">
+        {cards}
+        <div className="repl-input-parent row">
+          <ReplInputContainer />
+        </div>
       </div>
     </div>
   )
@@ -28,26 +34,45 @@ const Repl: React.SFC<IReplProps> = props => {
 export const Output: React.SFC<IOutputProps> = props => {
   switch (props.output.type) {
     case 'code':
-      return <Card>{props.output.value}</Card>
+      return (
+        <Card>
+          <pre className="codeOutput">{props.output.value}</pre>
+        </Card>
+      )
     case 'running':
-      return <Card>{props.output.consoleLogs.join('\n')}</Card>
+      return (
+        <Card>
+          <pre className="logOutput">{props.output.consoleLogs.join('\n')}</pre>
+        </Card>
+      )
     case 'result':
       if (props.output.consoleLogs.length === 0) {
-        return <Card>{toString(props.output.value)}</Card>
+        return (
+          <Card>
+            <pre className="resultOutput">{toString(props.output.value)}</pre>
+          </Card>
+        )
       } else {
         return (
           <Card>
-            {[props.output.consoleLogs.join('\n'), toString(props.output.value)].join('\n')}
+            <pre className="logOutput">{props.output.consoleLogs.join('\n')}</pre>
+            <pre className="resultOutput">{toString(props.output.value)}</pre>
           </Card>
         )
       }
     case 'errors':
       if (props.output.consoleLogs.length === 0) {
-        return <Card>{parseError(props.output.errors)}</Card>
+        return (
+          <Card>
+            <pre className="errorOutput">{parseError(props.output.errors)}</pre>
+          </Card>
+        )
       } else {
         return (
           <Card>
-            {[props.output.consoleLogs.join('\n'), parseError(props.output.errors)].join('\n')}
+            <pre className="logOutput">{props.output.consoleLogs.join('\n')}</pre>
+            <br />
+            <pre className="errorOutput">{parseError(props.output.errors)}</pre>
           </Card>
         )
       }