Merge changes from master onto Sound_Improvements

.gitignore

@@ -22,5 +22,3 @@ terraform*
 .env.production.local
 
 npm-debug.log*
-yarn-debug.log*
-yarn-error.log*

.travis.yml

@@ -1,12 +1,11 @@
 language: node_js
 node_js:
   - 9
-cache: yarn
 branches:
   except:
     - /^no-ci.*$/
 script:
-  - yarn format:ci
-  - yarn build-css
-  - yarn tslint -p .
-  - yarn test-coveralls
+  - npm run format:ci
+  - npm run build
+  - npm run tslint
+  - npm run test-coveralls

README.md

@@ -5,23 +5,21 @@
 
 ## Development Setup
 
-1. Install a stable version of Yarn and NodeJS (use node version 4-9 with nvm).
-2. Run `yarn` to install dependencies.
+1. Install a stable version of NodeJS (tested: Node 10.15.0).
+2. Run `npm install` to install dependencies.
 3. Copy the `.env.example` file as `.env` and set the variable `REACT_APP_IVLE_KEY`
    to contain your IVLE Lapi key.
-4. Run `yarn start` to start the server at `localhost:80`. Admin permissions may
+4. Run `npm start` to start the server at `localhost:80`. Admin permissions may
    be required for your OS to serve at port 80.
+5. If running cadet without ngix, `npm run cors-proxy` to solve CORS problems.
 
 ## IVLE LAPI Key
 For NUS students, you can access your IVLE LAPI key [here](https://ivle.nus.edu.sg/LAPI/default.aspx).
 
 ## For Windows Users
 
 ### Running cadet-frontend
-In package.json, change line 19:\
-"start-js": "rm -r coverage; BROWSER=none PORT=80 react-scripts-ts start",\
-to:\
-"start-js": "set PORT=80 & react-scripts-ts start",\
+Run `npm run win-start`
 
 ### Dealing with hooks
 In package.json, change line 28:\
@@ -43,18 +41,35 @@ to toggle native (default is native enabled).
 ### To run local copy of js-slang
 
 1. Follow the instructions on the js-slang repository to transpile your own copy
-2. Edit line 41 of package.json in this project to link to the directory of your js-slang and then run `yarn`:
+2. Edit line 41 of package.json in this project to link to the directory of your js-slang and then run `npm install`:
 
 `"js-slang": "file:path/to/js-slang",`
 
 Note that this copies your files over, any future changes will not be reflected. 
 
 You may try [this](https://medium.com/@alexishevia/the-magic-behind-npm-link-d94dcb3a81af) for a smoother experience.
 
+## Inspector
+This requires the use of the `debugger` branch of js-slang to work. Clone both the frontend and the `debugger` slang to the same directory. You would want to `yarn build` the slang you just obtained and then `yarn && sudo yarn start` in the frontend and it should just work. The merge over there is still ongoing. Meanwhile, please try to break this.
+
+The mental model we are using is: A breakpoint means that the interpreter will stop right before it. Whatever is highlighted is going to be evaluated next. If you meet any inconsistencies with this, also please raise it up for discussion.
+
+### What you can do
+- Set breakpoints by clicking on the gutter
+- `debugger;` just like ECMAScript
+- Inspect!
+- Run stuff in the context of the paused program!
+
+### Usage
+Here's what happens: After you click run, if there the interpreter meets a breakpoint, the first thing you're going to notice is that the REPL feedbacks to you it hit a breakpoint, the line is highlighted, and one of the icons on the right pane is going to start blinking. If you click on the icon, it reveals the inspector. All the variables in every frame is exposed here. The REPL is also now in the context of where ever you are. So you can evaluate anything you would normally be able to in the REPL. It is all quite simple really.
+
+### Note
+Because we use a local version of `js-slang`, the CI just breaks all the time.
+
 ## For Editing And Creating New Local XML Missions
 
 1. Use the branch 'mission-editing' in cadet-frontend
-2. Run in browser with yarn start
+2. Run in browser with npm start
 2. Go to Incubator tab.
 
 ## Application Structure

README.md.orig

@@ -0,0 +1,93 @@
+# Cadet Frontend 
+
+[![Build Status](https://travis-ci.org/source-academy/cadet-frontend.svg?branch=master)](https://travis-ci.org/source-academy/cadet-frontend)
+[![Coverage Status](https://coveralls.io/repos/github/source-academy/cadet-frontend/badge.svg?branch=travis)](https://coveralls.io/github/source-academy/cadet-frontend?branch=travis)
+
+## Development Setup
+
+1. Install a stable version of NodeJS (tested: Node 10.15.0).
+2. Run `npm install` to install dependencies.
+3. Copy the `.env.example` file as `.env` and set the variable `REACT_APP_IVLE_KEY`
+   to contain your IVLE Lapi key.
+4. Run `npm start` to start the server at `localhost:80`. Admin permissions may
+   be required for your OS to serve at port 80.
+5. If running cadet without ngix, `npm run cors-proxy` to solve CORS problems.
+
+## IVLE LAPI Key
+For NUS students, you can access your IVLE LAPI key [here](https://ivle.nus.edu.sg/LAPI/default.aspx).
+
+## For Windows Users
+
+### Running cadet-frontend
+Run `npm run win-start`
+
+### Dealing with hooks
+In package.json, change line 28:\
+"pre-push": "bash scripts/test.sh",\
+to an empty line.
+
+Please note that doing this will disable the test suite, so you will need to run the tests manually instead. Using Git Bash (or any other UNIX-based command line), run the following:\
+cd scripts\
+bash test.sh
+
+## js-slang
+
+Currently using a version of js-slang with native and verbose errors.
+
+Edit https://github.com/source-academy/cadet-frontend/blob/57ba44f6b55c214d0f20339cd45bece57f24f48c/src/sagas/index.ts#L260
+
+to toggle native (default is native enabled). 
+
+### To run local copy of js-slang
+
+1. Follow the instructions on the js-slang repository to transpile your own copy
+2. Edit line 41 of package.json in this project to link to the directory of your js-slang and then run `npm install`:
+
+`"js-slang": "file:path/to/js-slang",`
+
+Note that this copies your files over, any future changes will not be reflected. 
+
+You may try [this](https://medium.com/@alexishevia/the-magic-behind-npm-link-d94dcb3a81af) for a smoother experience.
+
+<<<<<<< HEAD
+## Inspector
+This requires the use of the `debugger` branch of js-slang to work. Clone both the frontend and the `debugger` slang to the same directory. You would want to `yarn build` the slang you just obtained and then `yarn && sudo yarn start` in the frontend and it should just work. The merge over there is still ongoing. Meanwhile, please try to break this.
+
+The mental model we are using is: A breakpoint means that the interpreter will stop right before it. Whatever is highlighted is going to be evaluated next. If you meet any inconsistencies with this, also please raise it up for discussion.
+
+### What you can do
+- Set breakpoints by clicking on the gutter
+- `debugger;` just like ECMAScript
+- Inspect!
+- Run stuff in the context of the paused program!
+
+### Usage
+Here's what happens: After you click run, if there the interpreter meets a breakpoint, the first thing you're going to notice is that the REPL feedbacks to you it hit a breakpoint, the line is highlighted, and one of the icons on the right pane is going to start blinking. If you click on the icon, it reveals the inspector. All the variables in every frame is exposed here. The REPL is also now in the context of where ever you are. So you can evaluate anything you would normally be able to in the REPL. It is all quite simple really.
+
+### Note
+Because we use a local version of `js-slang`, the CI just breaks all the time.
+
+## For Editing And Creating New Local XML Missions
+
+1. Use the branch 'mission-editing' in cadet-frontend
+2. Run in browser with npm start
+2. Go to Incubator tab.
+
+=======
+>>>>>>> master
+## Application Structure
+
+1. `actions` contains action creators, one file per reducer, combined in index.
+2. `assets` contains static assets.
+3. `components` contains all react components.
+4. `containers` contains HOC that inject react components with Redux state.
+5. `mocks` contains mock data structures for testing
+6. `reducers` contains all Redux reducers and their state, combined in index.
+7. `sagas` contains all Redux sagas, combined in index.
+8. `slang` contains the source interpreter.
+9. `styles` contains all SCSS styles.
+10. `utils` contains utility modules.
+
+## TypeScript Coding Conventions
+
+We reference [this guide](https://github.com/piotrwitek/react-redux-typescript-guide).