From e964df2fe2298590d1af6925329e1435aaea46b8 Mon Sep 17 00:00:00 2001
From: MathuraMG <mmg9291@gmail.com>
Date: Fri, 12 Aug 2016 10:13:22 -0400
Subject: [PATCH 1/8] make pref visible

---
 client/modules/IDE/components/Preferences.js | 2 +-
 client/styles/abstracts/_placeholders.scss   | 1 +
 client/styles/components/_preferences.scss   | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/modules/IDE/components/Preferences.js b/client/modules/IDE/components/Preferences.js
index c1102629..59f13c0a 100644
--- a/client/modules/IDE/components/Preferences.js
+++ b/client/modules/IDE/components/Preferences.js
@@ -154,7 +154,7 @@ class Preferences extends React.Component {
             >Off</button>
           </div>
         </div>
-        <div className="preference preference--hidden">
+        <div className="preference">
           <h4 className="preference__title">Lint Warning Sound</h4>
           <div className="preference__options">
             <button
diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss
index 8149e3c6..aa8c9f39 100644
--- a/client/styles/abstracts/_placeholders.scss
+++ b/client/styles/abstracts/_placeholders.scss
@@ -71,6 +71,7 @@
 	color: $light-primary-text-color;
 	background-color: $light-modal-button-background-color;
 	padding: 0;
+	margin-bottom: #{28 / $base-font-size}rem;
 	line-height: #{50 / $base-font-size}rem;
 	& g {
 		fill: $light-primary-text-color;
diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss
index 961e906e..1152a26a 100644
--- a/client/styles/components/_preferences.scss
+++ b/client/styles/components/_preferences.scss
@@ -35,7 +35,7 @@
 .preference {
 	display: flex;
 	flex-wrap: wrap;
-	padding-bottom: #{40 / $base-font-size}rem;
+	padding-bottom: #{12 / $base-font-size}rem;
 	& + & {
   	border-top: 2px dashed $light-button-border-color;
 	}

From 43c49e9617b8cb5c017201292f1cb8387548f260 Mon Sep 17 00:00:00 2001
From: catarak <ctarakajian@gmail.com>
Date: Fri, 12 Aug 2016 12:45:26 -0400
Subject: [PATCH 2/8] when clicking new project, don't save new project

---
 client/components/Nav.js                      |  4 ++--
 client/constants.js                           |  1 +
 client/modules/IDE/actions/project.js         |  8 +++++++-
 client/modules/IDE/components/Editor.js       |  2 ++
 client/modules/IDE/pages/IDEView.js           | 14 ++++++++++++--
 client/modules/IDE/reducers/files.js          |  2 ++
 client/modules/IDE/reducers/ide.js            |  2 ++
 client/modules/IDE/reducers/project.js        |  2 ++
 client/modules/Sketch/pages/SketchListView.js |  4 ++--
 client/styles/layout/_ide.scss                |  1 +
 10 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/client/components/Nav.js b/client/components/Nav.js
index 87ef80ec..d7862bec 100644
--- a/client/components/Nav.js
+++ b/client/components/Nav.js
@@ -8,7 +8,7 @@ function Nav(props) {
         <li className="nav__item">
           <a
             className="nav__new"
-            onClick={props.createProject}
+            onClick={props.newProject}
           >
             New
           </a>
@@ -50,7 +50,7 @@ function Nav(props) {
 }
 
 Nav.propTypes = {
-  createProject: PropTypes.func.isRequired,
+  newProject: PropTypes.func.isRequired,
   saveProject: PropTypes.func.isRequired,
   exportProjectAsZip: PropTypes.func.isRequired,
   cloneProject: PropTypes.func.isRequired,
diff --git a/client/constants.js b/client/constants.js
index 00061bf1..29f60645 100644
--- a/client/constants.js
+++ b/client/constants.js
@@ -26,6 +26,7 @@ export const SET_PROJECT_NAME = 'SET_PROJECT_NAME';
 export const PROJECT_SAVE_SUCCESS = 'PROJECT_SAVE_SUCCESS';
 export const PROJECT_SAVE_FAIL = 'PROJECT_SAVE_FAIL';
 export const NEW_PROJECT = 'NEW_PROJECT';
+export const RESET_PROJECT = 'RESET_PROJECT';
 
 export const SET_PROJECT = 'SET_PROJECT';
 export const SET_PROJECTS = 'SET_PROJECTS';
diff --git a/client/modules/IDE/actions/project.js b/client/modules/IDE/actions/project.js
index d44cf12a..3737b968 100644
--- a/client/modules/IDE/actions/project.js
+++ b/client/modules/IDE/actions/project.js
@@ -116,7 +116,6 @@ export function createProject() {
 
 export function exportProjectAsZip() {
   return (dispatch, getState) => {
-    console.log('exporting project!');
     const state = getState();
     const zip = new JSZip();
     async.each(state.files, (file, cb) => {
@@ -139,6 +138,13 @@ export function exportProjectAsZip() {
   };
 }
 
+export function newProject() {
+  browserHistory.push('/');
+  return {
+    type: ActionTypes.RESET_PROJECT
+  };
+}
+
 export function cloneProject() {
   return (dispatch, getState) => {
     const state = getState();
diff --git a/client/modules/IDE/components/Editor.js b/client/modules/IDE/components/Editor.js
index a7f5ab5e..8e734b78 100644
--- a/client/modules/IDE/components/Editor.js
+++ b/client/modules/IDE/components/Editor.js
@@ -70,6 +70,8 @@ class Editor extends React.Component {
         this._cm.setOption('mode', 'htmlmixed');
       }
     }
+
+    console.log('componentDidUpdate in editor');
   }
 
   componentWillUnmount() {
diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js
index a6c4b7c9..5fc80c91 100644
--- a/client/modules/IDE/pages/IDEView.js
+++ b/client/modules/IDE/pages/IDEView.js
@@ -38,6 +38,7 @@ class IDEView extends React.Component {
 
     this.consoleSize = this.props.ide.consoleIsExpanded ? 180 : 29;
     this.sidebarSize = this.props.ide.sidebarIsExpanded ? 180 : 20;
+    this.forceUpdate();
   }
 
   componentWillUpdate(nextProps) {
@@ -65,11 +66,18 @@ class IDEView extends React.Component {
         this.autosaveInterval = null;
       }
     }
+
+    if (this.autosaveInterval && !this.props.project.id) {
+      clearInterval(this.autosaveInterval);
+      this.autosaveInterval = null;
+    }
   }
 
   componentWillUnmount() {
     clearInterval(this.autosaveInterval);
     this.autosaveInterval = null;
+    this.consoleSize = undefined;
+    this.sidebarSize = undefined;
   }
 
   _handleConsolePaneOnDragFinished() {
@@ -81,6 +89,7 @@ class IDEView extends React.Component {
   }
 
   _handleSidebarPaneOnDragFinished() {
+    console.log('setting sidebar size');
     this.sidebarSize = this.refs.sidebarPane.state.draggedSize;
     this.refs.sidebarPane.setState({
       resized: false,
@@ -93,7 +102,7 @@ class IDEView extends React.Component {
       <div className="ide">
         <Nav
           user={this.props.user}
-          createProject={this.props.createProject}
+          newProject={this.props.newProject}
           saveProject={this.props.saveProject}
           exportProjectAsZip={this.props.exportProjectAsZip}
           cloneProject={this.props.cloneProject}
@@ -129,6 +138,7 @@ class IDEView extends React.Component {
             ref="sidebarPane"
             onDragFinished={this._handleSidebarPaneOnDragFinished}
             allowResize={this.props.ide.sidebarIsExpanded}
+            minSize={20}
           >
             <Sidebar
               files={this.props.files}
@@ -220,7 +230,7 @@ IDEView.propTypes = {
     authenticated: PropTypes.bool.isRequired,
     id: PropTypes.string
   }).isRequired,
-  createProject: PropTypes.func.isRequired,
+  newProject: PropTypes.func.isRequired,
   saveProject: PropTypes.func.isRequired,
   ide: PropTypes.shape({
     isPlaying: PropTypes.bool.isRequired,
diff --git a/client/modules/IDE/reducers/files.js b/client/modules/IDE/reducers/files.js
index bd07aebb..150bda18 100644
--- a/client/modules/IDE/reducers/files.js
+++ b/client/modules/IDE/reducers/files.js
@@ -71,6 +71,8 @@ const files = (state = initialState, action) => {
       return [...action.files];
     case ActionTypes.SET_PROJECT:
       return [...action.files];
+    case ActionTypes.RESET_PROJECT:
+      return initialState;
     case ActionTypes.CREATE_FILE:
       return [...state, { name: action.name, id: action.id, content: '', url: action.url }];
     case ActionTypes.SHOW_FILE_OPTIONS:
diff --git a/client/modules/IDE/reducers/ide.js b/client/modules/IDE/reducers/ide.js
index 21dc2828..03a4dc4b 100644
--- a/client/modules/IDE/reducers/ide.js
+++ b/client/modules/IDE/reducers/ide.js
@@ -43,6 +43,8 @@ const ide = (state = initialState, action) => {
       return Object.assign({}, state, { preferencesIsVisible: true });
     case ActionTypes.CLOSE_PREFERENCES:
       return Object.assign({}, state, { preferencesIsVisible: false });
+    case ActionTypes.RESET_PROJECT:
+      return initialState;
     default:
       return state;
   }
diff --git a/client/modules/IDE/reducers/project.js b/client/modules/IDE/reducers/project.js
index 5893863f..d50e1485 100644
--- a/client/modules/IDE/reducers/project.js
+++ b/client/modules/IDE/reducers/project.js
@@ -20,6 +20,8 @@ const project = (state = initialState, action) => {
         name: action.project.name,
         owner: action.owner
       };
+    case ActionTypes.RESET_PROJECT:
+      return initialState;
     default:
       return state;
   }
diff --git a/client/modules/Sketch/pages/SketchListView.js b/client/modules/Sketch/pages/SketchListView.js
index 06f18d0b..e46cab23 100644
--- a/client/modules/Sketch/pages/SketchListView.js
+++ b/client/modules/Sketch/pages/SketchListView.js
@@ -17,7 +17,7 @@ class SketchListView extends React.Component {
       <div className="sketch-list">
         <Nav
           user={this.props.user}
-          createProject={this.props.createProject}
+          newProject={this.props.newProject}
           saveProject={this.props.saveProject}
           exportProjectAsZip={this.props.exportProjectAsZip}
           cloneProject={this.props.cloneProject}
@@ -47,7 +47,7 @@ class SketchListView extends React.Component {
 
 SketchListView.propTypes = {
   user: PropTypes.object.isRequired,
-  createProject: PropTypes.func.isRequired,
+  newProject: PropTypes.func.isRequired,
   saveProject: PropTypes.func.isRequired,
   getProjects: PropTypes.func.isRequired,
   sketches: PropTypes.array.isRequired,
diff --git a/client/styles/layout/_ide.scss b/client/styles/layout/_ide.scss
index a91a5db9..a1517b77 100644
--- a/client/styles/layout/_ide.scss
+++ b/client/styles/layout/_ide.scss
@@ -40,6 +40,7 @@
   width: 100%;
   position: absolute;
   z-index: 10;
+  display: none;
 }
 
 .toolbar {

From 8b13631191c5016976eb3b00ec3ccc1ef8ed7ca8 Mon Sep 17 00:00:00 2001
From: catarak <ctarakajian@gmail.com>
Date: Fri, 12 Aug 2016 13:31:34 -0400
Subject: [PATCH 3/8] fix bug where you could save another user's project

---
 client/modules/IDE/actions/project.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/client/modules/IDE/actions/project.js b/client/modules/IDE/actions/project.js
index 3737b968..d541a49f 100644
--- a/client/modules/IDE/actions/project.js
+++ b/client/modules/IDE/actions/project.js
@@ -52,6 +52,9 @@ export function setProjectName(event) {
 export function saveProject() {
   return (dispatch, getState) => {
     const state = getState();
+    if (state.user.id && state.project.owner && state.project.owner.id !== state.user.id) {
+      return;
+    }
     const formParams = Object.assign({}, state.project);
     formParams.files = [...state.files];
     if (state.project.id) {

From 018a8b970c0bfa355cc5016063de6927ba0124a7 Mon Sep 17 00:00:00 2001
From: MathuraMG <mmg9291@gmail.com>
Date: Fri, 12 Aug 2016 14:23:34 -0400
Subject: [PATCH 4/8] switch lineNo to lineNumber

---
 client/modules/IDE/actions/editorAccessibility.js    | 4 ++--
 client/modules/IDE/components/Editor.js              | 4 ++--
 client/modules/IDE/components/EditorAccessibility.js | 4 ++--
 client/modules/IDE/components/PreviewFrame.js        | 4 ++--
 client/modules/IDE/pages/IDEView.js                  | 4 ++--
 client/modules/IDE/reducers/editorAccessibility.js   | 4 ++--
 6 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/client/modules/IDE/actions/editorAccessibility.js b/client/modules/IDE/actions/editorAccessibility.js
index 28cbe44c..3311d943 100644
--- a/client/modules/IDE/actions/editorAccessibility.js
+++ b/client/modules/IDE/actions/editorAccessibility.js
@@ -15,9 +15,9 @@ export function clearLintMessage() {
   };
 }
 
-export function updateLineNumber(lineNo) {
+export function updateLineNumber(lineNumber) {
   return {
     type: ActionTypes.UPDATE_LINENUMBER,
-    lineNo
+    lineNumber
   };
 }
diff --git a/client/modules/IDE/components/Editor.js b/client/modules/IDE/components/Editor.js
index 640761f8..5ea18126 100644
--- a/client/modules/IDE/components/Editor.js
+++ b/client/modules/IDE/components/Editor.js
@@ -104,7 +104,7 @@ class Editor extends React.Component {
         </div>
         <EditorAccessibility
           lintMessages={this.props.lintMessages}
-          lineNo={this.props.lineNo}
+          lineNumber={this.props.lineNumber}
         />
       </div>
     );
@@ -113,7 +113,7 @@ class Editor extends React.Component {
 
 Editor.propTypes = {
   lintWarning: PropTypes.bool.isRequired,
-  lineNo: PropTypes.string.isRequired,
+  lineNumber: PropTypes.string.isRequired,
   lintMessages: PropTypes.array.isRequired,
   updateLintMessage: PropTypes.func.isRequired,
   clearLintMessage: PropTypes.func.isRequired,
diff --git a/client/modules/IDE/components/EditorAccessibility.js b/client/modules/IDE/components/EditorAccessibility.js
index 73dce536..b2e0cbe3 100644
--- a/client/modules/IDE/components/EditorAccessibility.js
+++ b/client/modules/IDE/components/EditorAccessibility.js
@@ -27,7 +27,7 @@ class EditorAccessibility extends React.Component {
           {messages}
         </ul>
         <p> Current line
-          <span className="editor-linenumber" aria-live="polite" aria-atomic="true" id="current-line"> {this.props.lineNo} </span>
+          <span className="editor-linenumber" aria-live="polite" aria-atomic="true" id="current-line"> {this.props.lineNumber} </span>
         </p>
       </div>
     );
@@ -36,7 +36,7 @@ class EditorAccessibility extends React.Component {
 
 EditorAccessibility.propTypes = {
   lintMessages: PropTypes.array.isRequired,
-  lineNo: PropTypes.string.isRequired,
+  lineNumber: PropTypes.string.isRequired,
 };
 
 export default EditorAccessibility;
diff --git a/client/modules/IDE/components/PreviewFrame.js b/client/modules/IDE/components/PreviewFrame.js
index 1ae55a14..edbfeb0e 100644
--- a/client/modules/IDE/components/PreviewFrame.js
+++ b/client/modules/IDE/components/PreviewFrame.js
@@ -33,7 +33,7 @@ const hijackConsoleScript = `<script>
     });
 
     // catch reference errors, via http://stackoverflow.com/a/12747364/2994108
-    window.onerror = function (msg, url, lineNo, columnNo, error) {
+    window.onerror = function (msg, url, lineNumber, columnNo, error) {
         var string = msg.toLowerCase();
         var substring = "script error";
         var data = {};
@@ -41,7 +41,7 @@ const hijackConsoleScript = `<script>
         if (string.indexOf(substring) > -1){
           data = 'Script Error: See Browser Console for Detail';
         } else {
-          data = msg + ' Line: ' + lineNo + 'column: ' + columnNo;
+          data = msg + ' Line: ' + lineNumber + 'column: ' + columnNo;
         }
         window.parent.postMessage({
           method: 'error',
diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js
index 034863bf..28981a48 100644
--- a/client/modules/IDE/pages/IDEView.js
+++ b/client/modules/IDE/pages/IDEView.js
@@ -175,7 +175,7 @@ class IDEView extends React.Component {
                   isTabIndent={this.props.preferences.isTabIndent}
                   files={this.props.files}
                   lintMessages={this.props.editorAccessibility.lintMessages}
-                  lineNo={this.props.editorAccessibility.lineNo}
+                  lineNumber={this.props.editorAccessibility.lineNumber}
                 />
                 <Console
                   consoleEvent={this.props.ide.consoleEvent}
@@ -254,7 +254,7 @@ IDEView.propTypes = {
   openPreferences: PropTypes.func.isRequired,
   editorAccessibility: PropTypes.shape({
     lintMessages: PropTypes.array.isRequired,
-    lineNo: PropTypes.string.isRequired
+    lineNumber: PropTypes.string.isRequired
   }).isRequired,
   updateLintMessage: PropTypes.func.isRequired,
   clearLintMessage: PropTypes.func.isRequired,
diff --git a/client/modules/IDE/reducers/editorAccessibility.js b/client/modules/IDE/reducers/editorAccessibility.js
index 2e2d478c..03defd11 100644
--- a/client/modules/IDE/reducers/editorAccessibility.js
+++ b/client/modules/IDE/reducers/editorAccessibility.js
@@ -1,7 +1,7 @@
 import * as ActionTypes from '../../../constants';
 
 const initialState = {
-  lineNo: 'line',
+  lineNumber: 'line',
   lintMessages: []
 };
 
@@ -15,7 +15,7 @@ const editorAccessibility = (state = initialState, action) => {
     case ActionTypes.CLEAR_LINT_MESSAGE:
       return Object.assign({}, state, { lintMessages: [] });
     case ActionTypes.UPDATE_LINENUMBER:
-      return Object.assign({}, state, { lineNo: `line ${action.lineNo}` });
+      return Object.assign({}, state, { lineNumber: `line ${action.lineNumber}` });
     default:
       return state;
   }

From cc62ca23a3e111346c1ac392a7bbbdec1353e5f7 Mon Sep 17 00:00:00 2001
From: MathuraMG <mmg9291@gmail.com>
Date: Fri, 12 Aug 2016 15:33:23 -0400
Subject: [PATCH 5/8] add lintWarning to user.js

---
 server/models/user.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/server/models/user.js b/server/models/user.js
index c593159c..0c8f385c 100644
--- a/server/models/user.js
+++ b/server/models/user.js
@@ -13,7 +13,8 @@ const userSchema = new Schema({
     fontSize: { type: Number, default: 18 },
     indentationAmount: { type: Number, default: 2 },
     isTabIndent: { type: Boolean, default: false },
-    autosave: { type: Boolean, default: true }
+    autosave: { type: Boolean, default: true },
+    lintWarning: { type: Boolean, default: false }
   }
 }, { timestamps: true });
 

From eb85e49c5159d04122c09b3a1f8c8acd405bf7cb Mon Sep 17 00:00:00 2001
From: catarak <ctarakajian@gmail.com>
Date: Fri, 12 Aug 2016 15:51:27 -0400
Subject: [PATCH 6/8] change nav bar names

---
 client/components/Nav.js | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/client/components/Nav.js b/client/components/Nav.js
index d7862bec..ad51f760 100644
--- a/client/components/Nav.js
+++ b/client/components/Nav.js
@@ -21,6 +21,16 @@ function Nav(props) {
             Save
           </a>
         </li>
+        <li className="nav__item" onClick={props.cloneProject}>
+          <a className="nav__clone">
+            Duplicate
+          </a>
+        </li>
+        <li className="nav__item">
+          <a className="nav__export" onClick={props.exportProjectAsZip}>
+            Download
+          </a>
+        </li>
         <li className="nav__item">
           <p className="nav__open">
             <Link to="/sketches">
@@ -28,16 +38,6 @@ function Nav(props) {
             </Link>
           </p>
         </li>
-        <li className="nav__item">
-          <a className="nav__export" onClick={props.exportProjectAsZip}>
-            Export (zip)
-          </a>
-        </li>
-        <li className="nav__item" onClick={props.cloneProject}>
-          <a className="nav__clone">
-            Clone
-          </a>
-        </li>
       </ul>
       <ul className="nav__items-right" title="user-menu">
         <li className="nav__item">

From d2f706fd74b4c9ecab7004243c5c3190a89385d2 Mon Sep 17 00:00:00 2001
From: MathuraMG <mmg9291@gmail.com>
Date: Sat, 13 Aug 2016 11:39:53 -0400
Subject: [PATCH 7/8] move onclick for duplicate

---
 client/components/Nav.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/components/Nav.js b/client/components/Nav.js
index ad51f760..975e3ceb 100644
--- a/client/components/Nav.js
+++ b/client/components/Nav.js
@@ -21,8 +21,8 @@ function Nav(props) {
             Save
           </a>
         </li>
-        <li className="nav__item" onClick={props.cloneProject}>
-          <a className="nav__clone">
+        <li className="nav__item">
+          <a className="nav__clone" onClick={props.cloneProject}>
             Duplicate
           </a>
         </li>

From 03d59b159acf5e4d43e9ffa26947780de1d28e5b Mon Sep 17 00:00:00 2001
From: catarak <ctarakajian@gmail.com>
Date: Mon, 15 Aug 2016 11:51:11 -0400
Subject: [PATCH 8/8] add accessibility linting beep to webpack loader and
 remove base64 string

---
 client/modules/IDE/components/Editor.js |   4 ++--
 client/sounds/audioAlert.mp3            | Bin 0 -> 3928 bytes
 webpack.config.dev.js                   |   2 +-
 webpack.config.prod.js                  |   2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)
 create mode 100644 client/sounds/audioAlert.mp3

diff --git a/client/modules/IDE/components/Editor.js b/client/modules/IDE/components/Editor.js
index 4e4d6e5d..d4b6c72e 100644
--- a/client/modules/IDE/components/Editor.js
+++ b/client/modules/IDE/components/Editor.js
@@ -18,14 +18,14 @@ import { CSSLint } from 'csslint';
 window.CSSLint = CSSLint;
 import { HTMLHint } from 'htmlhint';
 window.HTMLHint = HTMLHint;
+const beepUrl = require('../../../sounds/audioAlert.mp3');
 
 import { debounce } from 'throttle-debounce';
 
 class Editor extends React.Component {
 
   componentDidMount() {
-    // TODO: replace with wav file and loader
-    this.beep = new Audio('data:audio/wav;base64,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qJrx4KOQjahZxWbcZgztj2c49nKmkId44S71j0c8eV9yDK6uPRzx5X18eDvjvQ6yKo9ZSS6l//8elePK/Lf//IInrOF/FvDoADYAGBMGb7FtErm5MXMlmPAJQVgWta7Zx2go+8xJ0UiCb8LHHdftWyLJE0QIAIsI+UbXu67dZMjmgDGCGl1H+vpF4NSDckSIkk7Vd+sxEhBQMRU8j/12UIRhzSaUdQ+rQU5kGeFxm+hb1oh6pWWmv3uvmReDl0UnvtapVaIzo1jZbf/pD6ElLqSX+rUmOQNpJFa/r+sa4e/pBlAABoAAAAA3CUgShLdGIxsY7AUABPRrgCABdDuQ5GC7DqPQCgbbJUAoRSUj+NIEig0YfyWUho1VBBBA//uQZB4ABZx5zfMakeAAAAmwAAAAF5F3P0w9GtAAACfAAAAAwLhMDmAYWMgVEG1U0FIGCBgXBXAtfMH10000EEEEEECUBYln03TTTdNBDZopopYvrTTdNa325mImNg3TTPV9q3pmY0xoO6bv3r00y+IDGid/9aaaZTGMuj9mpu9Mpio1dXrr5HERTZSmqU36A3CumzN/9Robv/Xx4v9ijkSRSNLQhAWumap82WRSBUqXStV/YcS+XVLnSS+WLDroqArFkMEsAS+eWmrUzrO0oEmE40RlMZ5+ODIkAyKAGUwZ3mVKmcamcJnMW26MRPgUw6j+LkhyHGVGYjSUUKNpuJUQoOIAyDvEyG8S5yfK6dhZc0Tx1KI/gviKL6qvvFs1+bWtaz58uUNnryq6kt5RzOCkPWlVqVX2a/EEBUdU1KrXLf40GoiiFXK///qpoiDXrOgqDR38JB0bw7SoL+ZB9o1RCkQjQ2CBYZKd/+VJxZRRZlqSkKiws0WFxUyCwsKiMy7hUVFhIaCrNQsKkTIsLivwKKigsj8XYlwt/WKi2N4d//uQRCSAAjURNIHpMZBGYiaQPSYyAAABLAAAAAAAACWAAAAApUF/Mg+0aohSIRobBAsMlO//Kk4soosy1JSFRYWaLC4qZBYWFRGZdwqKiwkNBVmoWFSJkWFxX4FFRQWR+LsS4W/rFRb/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////VEFHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAU291bmRib3kuZGUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMjAwNGh0dHA6Ly93d3cuc291bmRib3kuZGUAAAAAAAAAACU='); // eslint-disable-line
+    this.beep = new Audio(beepUrl);
     this._cm = CodeMirror(this.refs.container, { // eslint-disable-line
       theme: 'p5-widget',
       value: this.props.file.content,
diff --git a/client/sounds/audioAlert.mp3 b/client/sounds/audioAlert.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..3e80538123d95b918ebaf8edfcf5ba04dafbb334
GIT binary patch
literal 3928
zcmeH~XIN87_rPyL*#HqjuR`cZGgJjsN&v~yt28B$(4<9ain=67ks?KEL@5yw5mZnt
z2olOJp@SgG@}g2*kOct|0m=Ns?)rcD@_yTo@9(+KojK>uojG&PnR#Y#<~r;U3mCVH
zgM}8WvJZmToFk&ciGC61HHrR^i@6h)rRHR*wJ{i7$i>~=oh74LG9e-?%s)H|3W|y%
z86G?s8yl+`x%W@3y&bD1@<)egY-lhEa&dOHU}^bSS{vV(06l$8U5us{W_RcxfNh5#
z)&E+$2Zsl;KC-%j5D>)M0SWKHb`QaON#4W5y>#tiZ7*OCyT-6=Ca`SQ$LtC}Q20^d
z?SQc}ehB|xf^8HL;`<Ci@#Md(-L1k{4^!wbKN`1@A$E3r5C@3^!dt*8kO>;W2Be12
z5<I{vlh|{-HVl{^=2TaMf8q35S%megm0TWim76Zh2JLx<w8=;?fPj27MN+}`AW;rt
zD@<nm5{`%D@Q8dm1Ra!?H{G1bW*KAL&U&?gVY#>oAF!#E5U~uv_M`f2WzpR^mPDaK
zyeH=G{XO6BgEt0f;pQVO-$F7-!iN9ydR)soSlF36`FqRajc`^guicgnaT8awr5mn0
z;#~I^-`rpRa8SU_CQ{1oo`<cpB(jb>eG7k1gy>)sG*(Zf7pQurAUVyl{K&q^sW7Ud
zM^*<e$>c5>DW>I-n<=iXDqTb>&r8S=e}H;Ew4R?Lm*CQ;0GHzwRZ_CZ<@pJNLI*h}
zQ?A$N&o{VWT<N4SlH7y1JibfZl!760k(li9COa+UQ8<=kT^&-So8T@|24I40znS12
z@M%bt5Z_NdExB`22woxeV!9amcF2)VtDpM{bLFGc6A0)^G{V#SZp=KHtEXzfzpLgN
z&;CNp&&L}A>ixrmm88%%nYA^PaKP-qhiQMce&-|Rxd<1J@R%wv&YGcWWT?P&%3|yC
znjBxB?Ra@OJKS}-Cs=AaCI(g+GfY$a51td<Gs7GcIz(-_HuU%%cyg#;8k8l0slwbh
zU_p~BK7P780$aF%aJD*O3`%!h3jp(l;(tKdd1b&{jQCpv#%u;atF=!lFxybIeahM2
z#Vd!&hB;Uy*PCIJ2_i_L5n{{}6_g#vyhX5AMt`tfg)wqyr3;lOnaEvlpj>F{Q2+84
z{xOE$u4}Im#-!y4z)GBOV4Es9>1OIs0cxYtWN#!?kxTsJKPh2FQVvrsWSGAWwkRBU
zP0IqQo)cileDFb`Q#`P$Fx>!~_zTux>nG4#I+L_PND*dyVC%csmgqD{A_wWtu-}nN
z(;e)}nG`DsHVE&$e~KZEvsVxP*1lY(>;Kxd`TZ+`<kM1PQXAzePT`ePOGt$!rA_jB
zv&NxyC8EUVCM0)y%Z@)i$<$BlC>VAkvg@vPGp`5fuYPtXx7qXszkENUQyjlT<cR<^
zaq(b5HXd|g0hmozA7;xcL&|HQZO9^0@Dg3A=;Qn?t8*HiB8fqEz7Q7$qM_uX(nWeP
z2n<4@O^tw+=yOuTRH@U!b~dpZ`r=D+0Rd=M^7DQE0Kxd1XYK#=!;x7_hz>#QFbes3
zqREN7v#6j9WVu$H?RCrYNF(0Yyz>{`48BRVN;}lnADBruVhAh+F7jMkWbfj`hg_{4
z)}PQxTY@d^SFfAGCV5Pq@;WVbt&U68OnyA%T>rZD)Qbvj#`)u^7f(dJ)VMdTf90tC
zr?3c*t^WII4j1vA_FugCF6SB6GP@~U@W7(?Ujl{LZWF+kxgQvj)}Y-WPHSK^Bd@{)
z{Hx6BCY=#aRpcDaFSv0qM<fkjdk<7)kR;$%X%+hTpc~y5E>zVnZw;!pxyv!DtHW3|
zmcMJGMl!e_9o3UeoX+uZYTYkx*M3Z5i0VQ>67ed@j_xXW{2;<wD&(dT*#&``AreQ{
zPE|8ANXsq_G*T3*Irp0(J?KEjwB#YFb|*cg3L?FEa`x$J17}ThW8ux{y1drl0)uoo
znFPVV?nA+TvKodXtg_t&pXHaERL9))8g|&n&t7pYslB_BU0kIp&pR~W%`NNdM<*1X
zJI(g>tKO~-wr(Fv+6~Y+`D+l#c{}SUX*WQuja1OK)F`7Of)$*<0@R0|SD5O5L>PVK
z6jdku`$W&p+tlci^Lm-hI?hWToQ+wEOQ)C5Bz#<w8Sz2=k<xRgHnXU>;6P+}%-rzO
z*vt8)ow){Ef_(IdtJ>$$`tq;o{=(=n25^8QAijoUXJocI2aN%98Muzd12Db=zFs)E
z)C|eB^{*~eGrFI=sd{TA2qog}8D>YSE6-BqxM4M2FOs22Xsj4XX`Mx7bCy~1b94##
zZW#vFIe4+FH<bmniWi$S^%TOII@$&?ZxoCa$ydDHR6f_wW}bY?l^~YHW?^e!atOik
zGCU_>sK%(K`NE?%1xv(XMl0Pk?VjPGKlLTUZq0mTD2AggAV;^3<to9f6CS=1JjGFO
zbrb>$LZNG%w%W3sY<Cu{j&A+=J!I8oZB-`EB=a`19=+otf}(V#<=ka(^PWmRHXM0p
z$vv>q+Gu-p(J8QL!B_q3*|$7OwOXDb`std57^U?VW`rtEuXo$&Jun~`??haBqg9%J
z+`TwmOA>59B+fw`dO>!Vg7Jv`bVPC)1S!+x^)@F^P&Jt#3PI4-BkCnsy+gr6b#6;5
zx7rsrc&IE-?!r9Jl==>Q2L6@+IKS|V5tTB3mo$3;Pi94WUS^#6;QmDEX^k!5VgLH1
z{_k6Nm!7LLlWH%$Y3$Qw#BYO{<OOR6XYU_UO()Uz?l2s*#Utl0;qf8J@&<>iz!f2v
zn@=^6h*!cor_g2@vY1yo`?2b5gI>OA1&=E&d+*;OpzF#UMZMRG>uwruwiR(tW4+#Q
zO_(1MGJTmw$tkb<GGy_}YW_>wWVUIjP5nVYiwa=7;TT!Th#xZ7{?H|A6V`Zby_Wy1
zxLg*X`Dv%>#BX&gv=4$$=JB|L;G@s?BBU?GH+$vIMy<y$_l8(I`_3hq9b@1f>tGS^
ze0_EvvYBn<#H<`oB<j5LfaMAye;fSu)^_3>$u5oZ$ifa<z5pkD3ZhBJnC9xl=&p}=
z!xKb`jvUCUnUGh$WaF(0ua4?{zxjJrUMu(IARe(N{MgPa$;JV6eP~J!DK+^ELlJmZ
z&`-lppY))DCyRrBq;}+QU_YICcis)G!S$BGSA}@cqm;>%1jytHFqDhMDhpUh$TR<m
z%9bz{f~c|40%*Cd!<W$*6npEHUNO>osx5-?D;qZ*KCKYden9@L3I7@&JBA+p1P>)6
z+2J|bsG=wdIdc?;ys63{Dz(PY&j#|57t1a;K?skw)L!9g5nFLA|CVX(aIPQaZ19VI
z88qD^D+l*U7f&rhux-tDPFYHrpmtPgRYSe{>?%U^&~C{hcMh;kCT>7^>m<kBJzEqK
ztNZ{#0y#Hv>!}dhg)DcSl{l@n>J?e}mR4k~=ROt>5$aly*yHb}*<!&7Dc%ppqs6QV
z6V+=RjfBw^T+O|=#j;#}PhyQ#e(SJ3XY`_-n}%_F_1ofHE=p#$?X3~Wd?4o{{FTOc
z#Iy6fT5z5BdeVqp`q`&Jg1lPq+xbRSa0QcbBemwWWAB`0#(7=u$4bA@k6({gI{o@h
zYq;wn(0AmY^k&{(y*jqdE$CCaMtbm%E<a>@Lv7~et)>grr_zpQETPwwKSk!0<H|Dv
z){Lluns<4QPxx=-y0gbuu6T`U|M^GJj`3Rc$M^@&1o$U!QmNFTl5x*Ox)?i~$76)V
zeL>DB5pT17y_WP`Ha6`_KP8&wfhvOJW!Z-&A9UgTnXo*G4`Uym$wr0B*L!o!XfRIG
zG_jrZSo;(+<-sw_i`rrd@+Ak&75FluGbq&xy1UE!6Par@X@D6)B<qk7WpoIVdM9qM
zNrjvIbH*$-C+7~sKaU^0#-?DJmaJ@>V`QPIp;(;D;QQE}7#DiGE@2S25d3TvCz@g1
zu_CPFBy!lVC$>ReH4r!LtfS+!a;_sqG{<U8Ps)?4b|`LZ!oK2hKvmTO=UB&JP1C8U
z+wvm)qB&JvK>=JXde~v?XdzgoEE(c1?*sv$^@X=FH7NE<{v}X{+BZYmRD4!{E`sOG
z8JGD~UdLk>dmVV#@S&qtdXUOR^?j6w`XV9*c@meMJ!*0seOUyA#Wc7IyDPkn2>1N<
z<aPAP=KB(o-~3&x0z!aii16XaDTmYhOA3Z-M3{>EQn9DpjW(UjhQYXvsjY>Mrh$Q`
tp6mbk7d-&BO^9=RYo$g%#~<Cj>-}{k+r2$Of8U;1`N#e*4)-s0^?#($%5DGv

literal 0
HcmV?d00001

diff --git a/webpack.config.dev.js b/webpack.config.dev.js
index 6a0a9fe8..0073341a 100644
--- a/webpack.config.dev.js
+++ b/webpack.config.dev.js
@@ -36,7 +36,7 @@ module.exports = {
         loaders: ['style', 'css', 'sass']
       },
       {
-        test: /\.svg$/,
+        test: /\.(svg|mp3)$/,
         loader: 'file'
       }
     ],
diff --git a/webpack.config.prod.js b/webpack.config.prod.js
index 58f477f5..c90f0a5a 100644
--- a/webpack.config.prod.js
+++ b/webpack.config.prod.js
@@ -37,7 +37,7 @@ module.exports = {
         loader: 'babel'
       },
       {
-        test: /\.svg$/,
+        test: /\.(svg|mp3)$/,
         loader: 'file'
       }
     ]