Finish migrating to next

packages/playground/components/Editor.js

@@ -0,0 +1,44 @@
+import { Component } from 'react'
+import { findDOMNode } from 'react-dom'
+import PropTypes from 'prop-types'
+
+class Editor extends Component {
+  componentDidMount() {
+    const ace = require('brace')
+    require('brace/mode/javascript')
+    require('ayu-ace')
+    window.Range = ace.acequire('ace/range').Range
+    const editor = ace.edit(this.editorContainer)
+    editor.getSession().setUseWorker(false)
+    editor.getSession().setMode('ace/mode/javascript')
+    editor.setTheme('ace/theme/ayu-mirage')
+    editor.$blockScrolling = Infinity
+    editor.setOptions({
+      fontSize: '14px'
+    })
+    editor.setValue(this.props.initialValue)
+    editor.clearSelection()
+    editor.on('change', () => {
+      this.props.onChange()
+    })
+    this.props.onReady(editor)
+  }
+
+  render() {
+    const height = this.props.height || '300px'
+    return (
+      <div>
+        <div style={{height}} ref={(ref) => this.editorContainer = ref } />
+      </div>
+    )
+  }
+}
+
+Editor.propTypes = {
+  initialValue: PropTypes.string,
+  height: PropTypes.string,
+  onReady: PropTypes.func,
+  onChange: PropTypes.func
+}
+
+export default Editor

packages/playground/components/Footer.js

@@ -0,0 +1,40 @@
+export default () => (
+  <footer className="Footer">
+    <style jsx>{`
+      footer {
+        margin: 0 auto;
+        background-color: black;
+        padding: 75px 50px 50px;
+        color: #cccccc;
+      }
+
+      ul {
+        list-style: none;
+        padding: 0;
+        margin: 0 0 10px;
+      }
+
+      li {
+        display: inline;
+        font-weight: 700;
+        margin-right: 5px;
+      }
+
+      li:after {
+        content: '.'
+      }
+
+      li a {
+        color: white;
+      }
+    `}</style>
+    <div className="container">
+      <ul> 
+        <li><a href="https://source-academy.comp.nus.edu.sg/">Source Academy</a></li>
+        <li><a href="https://comp.nus.edu.sg">NUS School of Computing</a></li>
+      </ul>
+      <div>&copy; 2017 - Source Academy Team</div>
+      <div>Illustrations by Ng Tse Pei</div>
+    </div>
+  </footer>
+)

packages/playground/components/Head.js

@@ -11,7 +11,7 @@ const Head = ({ title }) => (
     <link rel="stylesheet" href="/static/css/spectre.min.css" />
     <link rel="stylesheet" href="/static/css/spectre-exp.min.css" />
     <title>{title}</title>
-    <style global>{`
+    <style>{`
       @import url('https://fonts.googleapis.com/css?family=Noto+Sans');
 
       body {
@@ -30,6 +30,21 @@ const Head = ({ title }) => (
         margin: 0 auto;
         max-width: 960px;
       }
+
+      .Editor-highlight {
+        position: absolute;
+        z-index: 20;
+        background: #5764c6;
+        opacity: 0.5;
+        border-radius: 0 !important;
+      }
+
+      .Editor-highlight-error {
+        position: absolute;
+        z-index: 20;
+        border-bottom: 3px dotted #FF5B92;
+        border-radius: 0 !important;
+      }
     `}</style>
   </NextHead>
 )

packages/playground/components/Header.js

@@ -34,6 +34,17 @@ export default () => (
         font-weight: 700;
         margin-bottom: 2em;
       }
+
+      .btn {
+        margin-right: 10px;
+        padding: 10px 20px;
+        font-weight: 700;
+        text-shadow:
+        -1px -1px 0 #272134,  
+         1px -1px 0 #272134,
+        -1px 1px 0 #272134,
+         1px 1px 0 #272134
+      }
     `}</style>
     <div className="container columns">
       <div className="column col-2 col-sm-12">
@@ -46,6 +57,10 @@ export default () => (
         <h6 className="subheading">
           Toolkit for Learning Programming Using JavaScript
         </h6>
+        <a href="https://github.com/evansb/source-toolchain"
+           className="btn btn-primary btn-lg">
+          Try It
+        </a>
         <a href="https://github.com/evansb/source-toolchain"
            className="btn btn-primary btn-lg">
           View on GitHub

packages/playground/components/Interpreter.js

@@ -1,22 +1,17 @@
 import { createSession, Closure } from 'source-toolchain'
-import { generate } from 'escodegen'
+import { generate } from 'astring'
 import React, { Component } from 'react'
-
-class Editor extends Component {
-
-  async componentDidMount() {
-    await this.props.setupEditor(this.editor)
-  }
-
-  render() {
-    return <div className="Section-editor" ref={(e) => this.editor = e} />
-  }
-}
+import Editor from './Editor'
 
 const Controls = ({ isNextDisabled, isPreviousDisabled,
     isStartOverDisabled, isUntilEndDisabled, isStopDisabled,
     handleNext, handlePrevious, handleStartOver, handleStop, handleUntilEnd }) => (
   <div className="Section-control btn-group columns">
+    <style jsx>{`
+      div {
+        padding: 0px 10px;
+      }
+    `}</style>
     <button onClick={handleStartOver} disabled={isStartOverDisabled}
       className="btn btn-primary">Start</button>
     <button onClick={handleStop} disabled={isStopDisabled}
@@ -30,7 +25,19 @@ const Controls = ({ isNextDisabled, isPreviousDisabled,
 
 const Visualizer = ({ visualizer }) => (
   <div className="Section-visualizer-expression">
-    <h6>Current Expression</h6>
+    <style jsx>{`
+      pre {
+        color: white;
+        width: 100%;
+        font-weight: 500;
+        margin: 0px 10px;
+        padding: 5px 10px;
+        background: #5764c6;
+        font-weight: 700;
+        font-family: 'Menlo', 'Monaco', 'Consolas', monospace;
+      }
+    `}
+    </style>
     <div className="columns">
       { visualizer && visualizer.root && <pre>{generate(visualizer.root)}</pre> }
     </div>
@@ -56,8 +63,16 @@ const EnvironmentTable = ({ scopes, frames }) => {
       for (const [key, value] of scope.environment.entries()) {
         tableContent.push(
           <tr className="columns" key={key}>
-            <td className="col-3">{key}</td>
-            <td className="col-9">{valueToString(value)}</td>
+            <style jsx>{`
+              td {
+                background: #454d5d;
+                padding: 5px 10px;
+                border-bottom: none;
+                border-right: 3px solid black;
+              }
+            `}</style>
+            <td className="col-5">{key}</td>
+            <td className="col-7">{valueToString(value)}</td>
           </tr>
         )
       }
@@ -74,6 +89,24 @@ const EnvironmentTable = ({ scopes, frames }) => {
     const id = "accordion-" + idx
     content.push(
       <div key={idx} className="accordion-item">
+        <style jsx>{`
+          div {
+            color: white;
+          }
+          .accordion-header {
+            font-family: 'Menlo', 'Consolas', monospace;
+            background: #222436 !important;
+            color: white;
+            border-left: 5px solid #5764c6;
+            border-top: 1px solid #5764c6;
+          }
+          .accordion-body {
+            font-family: 'Menlo', 'Consolas', monospace;
+            color: white !important;
+            padding: 0 10px;
+            background: #454d5d;
+          }
+        `}</style>
         <input type="radio" id={id} name="accordion-radio" readOnly hidden
                checked={idx === frames.size - 1} />
         <label className="accordion-header hand">{scope.name}</label>
@@ -82,11 +115,8 @@ const EnvironmentTable = ({ scopes, frames }) => {
     )
   })
   return (
-    <div className="Section-visualizer-frame">
-      <h6>Environments</h6>
-      <div className="accordion">
-        {content}
-      </div>
+    <div className="accordion">
+      {content}
     </div>
   )
 }
@@ -107,39 +137,6 @@ class Interpreter extends Component {
     }
   }
 
-  setupEditor = async (editorRef) => {
-    const ace = await import('brace')
-    this.Range = ace.acequire('ace/range').Range
-    await import('brace/mode/javascript')
-    await import('ayu-ace')
-
-    const editor = ace.edit(editorRef)
-    editor.getSession().setUseWorker(false)
-    editor.getSession().setMode('ace/mode/javascript')
-    editor.setTheme('ace/theme/ayu-mirage')
-    editor.$blockScrolling = Infinity
-    editor.setOptions({
-      fontSize: '14px'
-    })
-    editor.setValue(`
-function arithmetic(n) {
-  if (n <= 1) {
-    return n;
-  } else {
-    return n + arithmetic(n - 1); 
-  }
-}
-
-arithmetic(3); 
-`)
-    editor.clearSelection()
-    editor.on('change', () => {
-      this.removeMarkers()
-    })
-
-    this.setState({ editor, session: this.resetSession() })
-  }
-
   handleNext = () => {
     const { session, interpreter, interpreters, visualizers } = this.state
     const index = interpreters.indexOf(interpreter)
@@ -228,7 +225,7 @@ arithmetic(3);
     }
 
     if (editor && interpreter && prevState.interpreter !== interpreter && interpreter.node) {
-      const range = new this.Range(
+      const range = new Range(
         interpreter.node.loc.start.line - 1,
         interpreter.node.loc.start.column,
         interpreter.node.loc.end.line - 1,
@@ -239,7 +236,7 @@ arithmetic(3);
     } else if (errors.length !== 0) {
       this.removeMarkers()
       errors.forEach(e => {
-        const range = new this.Range(
+        const range = new Range(
           e.node.loc.start.line - 1,
           e.node.loc.start.column,
           e.node.loc.end.line - 1,
@@ -298,21 +295,54 @@ arithmetic(3);
           frames={interpreter && interpreter.frames} />
       </div>
     )
+
+    const editorOnChange = () => {
+      this.removeMarkers()
+    }
+
+    const editorOnReady = (editor) => {
+      this.setState({ editor, session: this.resetSession() })
+    }
+
+    const editorInitialValue = `
+function arithmetic(n) {
+  if (n <= 1) {
+    return n;
+  } else {
+    return n + arithmetic(n - 1); 
+  }
+}
+
+arithmetic(3); 
+`
+
+    const editor = (
+      <Editor
+        initialValue={editorInitialValue}
+        onChange={editorOnChange}
+        onReady={editorOnReady}
+      />
+    )
+
+    const controls = (
+      <Controls
+        isNextDisabled={!session || !isRunning}
+        isPreviousDisabled={!session || !isRunning || !index || index <= 0}
+        isStartOverDisabled={!session}
+        isUntilEndDisabled={!session}
+        isStopDisabled={!session || !isRunning}
+        handleStop={this.handleStop}
+        handleNext={this.handleNext}
+        handlePrevious={this.handlePrevious}
+        handleStartOver={this.handleStartOver}
+      />
+    )
+
     return (
       <div className="columns">
         <div className="column col-6 col-sm-12">
-          <Controls
-            isNextDisabled={!session || !isRunning}
-            isPreviousDisabled={!session || !isRunning || !index || index <= 0}
-            isStartOverDisabled={!session}
-            isUntilEndDisabled={!session}
-            isStopDisabled={!session || !isRunning}
-            handleStop={this.handleStop}
-            handleNext={this.handleNext}
-            handlePrevious={this.handlePrevious}
-            handleStartOver={this.handleStartOver}
-          />
-          <Editor setupEditor={this.setupEditor} />
+          {controls}
+          {editor}
         </div>
         {errorsSection}
         {visualizerSection}

packages/playground/components/Section.js

@@ -6,6 +6,7 @@ const Section = ({ title, subtitle, children }) => (
       .Section {
         margin-top: 50px;
         margin-bottom: 50px;
+        padding: 0px 25px;
       }
 
       .Section-control {