From b55ee5525ef1d493f2df3b71f92203805a85ad9a Mon Sep 17 00:00:00 2001
From: Steve Krouse <skrouse@seas.upenn.edu>
Date: Tue, 23 Jul 2019 20:41:23 +0000
Subject: [PATCH] started importing modules

---
 analytics.html |    2 +-
 create.html    | 1107 +-----------------------------------------------
 create.js      | 1070 ++++++++++++++++++++++++++++++++++++++++++++++
 index.html     |    2 +-
 teach.html     |    2 +-
 team.html      |  520 +----------------------
 team.js        |  478 +++++++++++++++++++++
 user.html      |    2 +-
 utils.js       |   26 ++
 workflow.html  |    4 +-
 10 files changed, 1587 insertions(+), 1626 deletions(-)
 create mode 100644 create.js
 create mode 100644 team.js
 create mode 100644 utils.js

diff --git a/analytics.html b/analytics.html
index 2953c60..c34533f 100644
--- a/analytics.html
+++ b/analytics.html
@@ -1,7 +1,7 @@
 <link rel="shortcut icon" type="image/png" href="./favicon.png"/>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.2/lodash.min.js"></script>
 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
-<script src="https://unpkg.com/vue@2.0.1/dist/vue.js"></script>
+<script src="https://unpkg.com/vue@2.0.1/dist/vue.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 <script src="https://www.gstatic.com/firebasejs/3.4.0/firebase.js"></script>
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
diff --git a/create.html b/create.html
index 4ce25fe..87e162c 100644
--- a/create.html
+++ b/create.html
@@ -11,18 +11,12 @@
   <meta property="og:title" content="WoofJS">
   <meta property="og:description" content="WoofJS is a Scratch-inspired Javascript library for making games.">
 
-  <script src="//load.sumome.com/" data-sumo-site-id="44245233c319d8fe9fb7ce8c7ed64db9381aa56477888a10319261f655cfffe2" async="async"></script>
-
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
-
-
-
+  
   <meta charset="utf-8">
 
   <title>WoofJS</title>
   <link rel="shortcut icon" type="image/png" href="./favicon.png"/>
-
-
   <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
@@ -77,7 +71,7 @@
   <link rel="stylesheet" href="https://codemirror.net/theme/midnight.css">
   <link rel="stylesheet" href="https://codemirror.net/theme/monokai.css">
   <link rel="stylesheet" href="https://codemirror.net/theme/neat.css">
-  <script src="https://unpkg.com/vue@2.0.1/dist/vue.js"></script>
+  <script src="https://unpkg.com/vue@2.0.1/dist/vue.min.js"></script>
   <script data-presets="es2015" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.14.0/babel.min.js"></script>
   <script src="https://rawcdn.githack.com/beautify-web/js-beautify/1b52eb1f90daaefa6ff0fa7736f97fbfc58093c1/js/lib/beautify.js"></script>
   <style>
@@ -652,1102 +646,7 @@ <h4 class="modal-body text-danger" :style="{display: !getID() ? 'block' : 'none'
     
     </div>
   </div>
-  <script>
-
-    var getID = function() {
-      // returns the name of a project, not including the current revision
-      return window.location.hash.substring(1, window.location.hash.length).split("/")[0];
-    }
-    var getIDWithRevision = function() {
-      // returns the name of a project, inlcuding the current revision
-      return window.location.hash.substring(1, window.location.hash.length);
-    }
-    var currentHash = window.location.hash
-
-    var app = new Vue({
-      el: '#page',
-      data: {
-        code: "",
-        status: "NEW",
-        error: undefined,
-        projects: [],
-        codePane: true,
-        outputPane: true,
-        projectsPane: false,
-        docsPane: true,
-        projectbar: true,
-        previewbar: false,
-        docsbar:false,
-        codebar:false,
-        mouseX: 0,
-        mouseY: 0,
-        errorLineNumber: undefined,
-        renameSprite: false,
-        spriteName: '',
-        suggestions: [],
-        errorMessage: '',
-        cursorOnErrorLine: false,
-        selectedTheme:'eclipse',
-        autoRunChecked: true,
-        shortcut: CodeMirror.keyMap["default"] == CodeMirror.keyMap.macDefault ? 'Cmd' : 'Ctrl',     
-        projectNameRequest: "NOT LOADING", // or "LOADING" or "NAME TAKEN"
-        projectNameInputValue: "",
-        projectNameLastKeyIllegal: false,
-        usernameLastKeyIllegal: false,
-        loginSignUpView: "LOGIN", // or SIGNUP or RESETPASSWORD or RESETPASSWORDSUCCESS
-        emailError: false,
-        usernameValid: "EMTPY", // TAKEN or VALID or EMPTY or ILLEGAL
-        emailValid: "EMTPY", // TAKEN or VALID or NOTEMAIL or EMPTY
-        passwordValid: "EMTPY", // VALID or EMPTY or WEAK
-        loginError: "NONE", // NONE or USERNOTFOUND or WRONGPASSWORD or INVALIDEMAIL
-        loginButtonState: "NORMAL", // NORMAL or LOADING
-        signUpButtonState: "DISABLED", // NORMAL or DISABLED or LOADING
-        loginPassword: "",
-        loginEmail: "",
-        resetEmail: "",
-        signUpEmail: '',
-        signUpPassword: '',
-        signUpChecked: true,
-        signUpUsername: '',
-        loginState: "LOGGEDOUT", // or LOGGEDIN
-        userNameForMenu: '',
-        userProjectsLink: '',
-        migrateUsernameValid: "EMTPY", // TAKEN or VALID or EMPTY or ILLEGAL
-        migrateUsernameKeyIllegal: false,
-        migrateUsername: '',
-        migrateChecked: true,
-        migrateButtonState: "DISABLED", // NORMAL or DISABLED or LOADING
-        popoutAfterSave: false,
-        copiedText: "",
-      },
-      computed: {
-        styles : function() { return {
-           // styles for the "Save" button
-          'btn-warning': this.status == 'DIRTY',
-          'btn-success': this.status == 'SAVED',
-          'btn-default': this.status == "NEW"
-        } },
-        canClean: function(){
-          return !this.error 
-        },
-      },
-      methods: {
-        getID: getID,
-        processError: function() {
-          this.suggestions = []
-          this.errorMessage = []
-          this.renameSprite = false
-          // Remove error line highlight
-          if (this.errorLineNumber) {
-            editor.removeLineClass(this.errorLineNumber - 1, 'text', 'error-highlight');
-          }
-          if (this.error.message.includes("Uncaught ReferenceError") || this.error.message.includes("Uncaught TypeError")) {
-            // Remove 'Uncaught..' from error message
-            this.errorMessage = this.error.message.split(" ").slice(2).join(" ");
-            // If error message is 'sprite1 not defined', ask user to rename sprite1
-            this.renameSprite = this.error.message.includes('Uncaught ReferenceError: sprite1 is not defined') ? true : false;
-            // Get alphanumeric user code
-            var userCode = editor.getValue().replace(/(?:https?|ftp?|\.\/)[\n\S]+/g,'').match(/[a-zA-Z0-9]+/g);
-            // Add Woof methods to the user code 
-            userCode.push("onKeyDown", "onMouseDown", "onMouseUp", "onMouseMove", "penDown", "Image", "Rectangle", "Polygon", "Circle", "Line", "Oval", "move", "turnRight", "turnLeft", "angle", "pointTowards", "setRotationStyle", "show", "hide", "sendToFront", "sendToBack", "play", "Audio", "clearPen", "penUp", "penDown", "Text", "remove", "includes", "forEach", "find", "setBackdropURL", "setBackdropStyle", "after", "every", "repeat", "forever", "if", "else", "mouseX", "mouseY", "repeatUntil", "when", "freeze", "defrost", "delete", "remove", "push", "throttle", "mouseOver", "randomX", "randomY", "touching", "distanceTo", "prompt", "alert", "keysDown", "mouseDown", "pMouseX", "pMousecY", "mouseXSpeed", "mouseYSpeed", "hour", "hourMilitary", "minute", "second", "dayOfMonth", "dayOfWeek", "month", "year", "mobile", "random", "randomColor", "between", "substring", "round", "sqrt", "abs", "floor", "ceiling", "importCodeURL", "timer", "resetTimer")
-            // Search user code for suggestions
-            for (var i = 0; i < userCode.length; i++) {
-              // Measure the difference between error and user code
-              var distance = window.Levenshtein.get(this.findMisspelledWord(this.errorMessage), userCode[i]);
-              // Add user code with a distance less than 3 to list of suggestions if it hasn't already been added, it isn't the error, it's longer than a character, and it isn't a numnber
-              if (distance < 3 && distance != 0 && this.suggestions.indexOf(userCode[i]) == -1 && userCode[i].length > 1 && isNaN(userCode[i])) {
-                this.suggestions.push(userCode[i]);
-              }
-            }
-          }
-          else {
-            // Split error message by line break
-            var errorDesc = this.error.message.split("\n");
-            // Display first line of error message
-            // Remove 'unknown' from first line if it exists
-            var t = errorDesc[0].split(" ");
-            this.errorMessage += t[0] == "unknown:" ? t.slice(1, t.length - 1).join(" ") : this.errorMessage += errorDesc[0];
-            // Find error line number if it is undefined
-            if (!this.error.lineno) {
-              var x = errorDesc[0].slice(errorDesc[0].indexOf(":") + 2);
-              this.error.lineno = x.slice(x.indexOf("(") + 1, x.indexOf(":"));
-            }
-          }
-          // Show error line number if it is accurate
-          if (this.error.lineno <= editor.lineCount()) {
-            this.errorLineNumber = this.error.lineno;
-            // Add highlight to error line
-            editor.addLineClass(this.errorLineNumber - 1, 'text', 'error-highlight');
-          } else {
-            this.errorLineNumber = undefined
-          }
-        },
-        // Find misspelling in user code
-        findMisspelledWord: function(typo) {
-          return typo.split(" ")[0].split(".").pop();
-        },
-        // Change user code if user clicks suggestion
-        replaceMisspelledWord: function(x) {
-          editor.setValue(editor.getValue().replace(new RegExp("\\b" + this.findMisspelledWord(this.errorMessage) + "\\b", 'g'), x));
-        },
-        // Rename sprite1 with user input
-        getSpriteName: function() {
-          editor.setValue(editor.getValue().replace(/sprite1/g, this.spriteName));
-          this.spriteName = '';
-          this.renameSprite = false;
-        },
-        // Go to error line
-        goToErrorLine: function() {
-          editor.scrollIntoView({line: this.errorLineNumber, ch:0}, editor.getScrollInfo().clientHeight / 2);
-        },
-        cleanAll: function(){
-          if (!this.error && this.code != js_beautify(this.code, {space_after_anon_function: true, indent_size: 2, indent_with_tabs: false })){
-            var beautiful = js_beautify(editor.getValue(), {space_after_anon_function: true, indent_size: 2, indent_with_tabs: false })
-            editor.setValue(beautiful)
-          }
-        },
-        share: function(){
-          $('#shareModal').modal('show')
-        },
-        link: function(){
-          return "https://woofjs.com/create.html#" + getID()
-        },
-        fullLink: function(){
-          return "https://woofjs.com/full.html#" + getID()
-        },
-        copyStringToClipboard: function(str) {
-          // Create new element
-          this.copiedText = str;
-          var el = document.createElement('textarea');
-          // Set value (string to be copied)
-          el.value = str;
-          // Set non-editable to avoid focus and move outside of view
-          el.setAttribute('readonly', '');
-          el.style = {position: 'absolute', left: '-9999px'};
-          document.body.appendChild(el);
-          // Select text inside element
-          el.select();
-          // Copy text to clipboard
-          document.execCommand('copy');
-          // Remove temporary element
-          document.body.removeChild(el);
-        },
-        embed: function(){
-          return "<iframe src=\"https://woofjs.com/full#" + getID() + "\">\n</iframe>"
-        },
-        selectAll: function(){
-          editor.execCommand("selectAll")
-        },
-        undo: function(){
-          editor.execCommand("undo")
-        },
-        redo: function(){
-          editor.execCommand("redo")
-        },
-        find: function(){
-          editor.execCommand("find")
-        },
-        replace: function(){
-          editor.execCommand("replace")
-        },
-        comment: function(){
-          editor.toggleComment()
-        },
-        copy: function(){
-          this.copyStringToClipboard(editor.getSelection())
-        },
-        cut: function(){
-          this.copyStringToClipboard(editor.getSelection())
-          editor.replaceSelection("")
-        },
-        paste: function(){
-          editor.replaceSelection(this.copiedText)
-        },
-        validate: function($event) {
-          var newName = $event.target.value
-
-          this.projectNameRequest = 'NOT LOADING'  // reset state so that you can hit save after you change the name after you get a NAME TAKEN error
-
-          this.projectNameLastKeyIllegal = false // take off the animation
-          setTimeout(function() {
-            var lastKeyPressIllegal = newName.length > 0 && newName[newName.length - 1].match(/\.|#|\$|\/|\[|\]/)
-            if (lastKeyPressIllegal) {
-              this.projectNameLastKeyIllegal = lastKeyPressIllegal[0]
-            } else {
-              this.projectNameLastKeyIllegal = false
-            }
-          }.bind(this), 10)
-
-
-          this.projectNameInputValue = newName.replace(/ /g, "-")
-          this.projectNameInputValue = this.projectNameInputValue.replace(/\.|#|\$|\/|\[|\]/g, "")
-        },
-        saveName : function() {
-          if (app.projectNameRequest == "NOT LOADING"){
-            app.projectNameRequest = "LOADING"
-            var name = app.projectNameInputValue
-            if (name) {
-              saveProject(name);
-            }
-          }
-        },
-        themeChange: function (event){
-          var newTheme = event.target.value;
-          app.selectedTheme = newTheme;
-          editor.setOption("theme", newTheme);
-          if(firebase.auth().currentUser){
-            firebase.database().ref("/user/" + firebase.auth().currentUser.uid + "/theme").set(newTheme)
-          } 
-        },
-        switchToSignUp: function(){
-          this.loginSignUpView = 'SIGNUP'
-        },
-        switchToLogin: function(){
-          this.loginSignUpView = 'LOGIN'
-        },
-        switchToPasswordReset: function(){
-           this.loginSignUpView = 'RESETPASSWORD'
-        },
-        usernameValidate: function($event){
-          var username = $event.target.value
-          if (username == ''){
-            this.usernameValid = "EMPTY"
-          } else {
-            this.usernameLastKeyIllegal = false
-            setTimeout(function() {
-              var lastKeyPressIllegal = username.length > 0 && username[username.length - 1].match(/\.|#|\$|\/|\[|\]/)
-              if (lastKeyPressIllegal) {
-                this.usernameLastKeyIllegal = lastKeyPressIllegal[0]
-              } else {
-                this.usernameLastKeyIllegal = false
-              }
-            }.bind(this), 10)
-
-            this.signUpUsername= username.replace(" ", "-")
-            this.signUpUsername = this.signUpUsername.replace(/\.|#|\$|\/|\[|\]/g, "")
-            this.usernameValid = "VALID"
-          }
-        },
-        migrateUsernameVaidate: function($event){
-          var username = $event.target.value
-          if (username == ''){
-            this.usernameValid = "EMPTY"
-          } else {
-            this.migrateUsernameKeyIllegal = false
-            setTimeout(function() {
-              var lastKeyPressIllegal = username.length > 0 && username[username.length - 1].match(/\.|#|\$|\/|\[|\]/)
-              if (lastKeyPressIllegal) {
-                this.migrateUsernameKeyIllegal = lastKeyPressIllegal[0]
-              } else {
-                this.migrateUsernameKeyIllegal = false
-              }
-            }.bind(this), 10)
-
-            this.migrateUsername= username.replace(" ", "-")
-            this.migrateUsername = this.migrateUsername.replace(/\.|#|\$|\/|\[|\]/g, "")
-            this.migrateUsernameValid = "VALID"
-          }
-        },
-        // Checks for success or error on blur
-        emailValidate: function($event){
-          var email = $event.target.value
-          if (email == ''){
-            this.emailValid = "EMPTY"
-          } else if (!/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email)){
-            this.emailValid = "NOTEMAIL"
-          } else if (/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email)){
-            this.emailValid = "VALID"
-          }
-        },
-        // Checks for success or error on blur
-        passwordValidate: function($event){
-          var password = $event.target.value
-          if (password == ''){
-            this.passwordValid = "EMPTY"
-          } else if (!/^.{6,}$/.test(password)){
-            this.passwordValid = "WEAK"
-          } else {
-            this.passwordValid = "VALID"
-          }
-        },
-        // Checks for success on every input
-        emailSuccessValidate: function($event){
-          var email = $event.target.value
-          if (/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email)){
-            this.emailValid = "VALID"
-          }
-        },
-        // Checks for success on every input
-        passwordSuccessValidate: function($event){
-          var password = $event.target.value
-          if (/^.{6,}$/.test(password)){
-            this.passwordValid = "VALID"
-          }
-        },
-      }
-    })
-    
-    // Initalizes the popover for the comment code button in the tools menu
-    $(document).ready(function(){
-        $('[data-toggle="popover"]').popover();   
-    });
-
-    var clipboard = new Clipboard('.btn-clipboard');
-    Vue.nextTick(function() {
-        $('[data-toggle="tooltip"]').tooltip({
-            trigger: 'manual'
-        });
-        clipboard.destroy()
-        clipboard = new Clipboard('.btn-clipboard');
-        clipboard.on('success', function(e) {
-            $(e.trigger).tooltip('show')
-            setTimeout(function() {
-                $(e.trigger).tooltip('hide')
-            }, 1000)
-        });
-
-    })
-    
-    var myCode = false
-    scratch.src = scratch.src // the documentation sometimes doesn't load unless you remind it to here, strange VueJS bug
-    projectsIframe.src = projectsIframe.src // ditto for the project's iframe
-
-    var config = {
-      apiKey: "AIzaSyBYHv7dCiD0bWiHRlcp4VIZCIqzoMnB4yY",
-      authDomain: "woofjs-d1b27.firebaseapp.com",
-      databaseURL: "https://woofjs-d1b27.firebaseio.com",
-      storageBucket: "woofjs-d1b27.appspot.com",
-      messagingSenderId: "397293370524"
-    };
-    firebase.initializeApp(config);
-
-    function clearLoginSignupModal() {
-      app.emailError = false;
-      app.usernameValid = "EMTPY";
-      app.emailValid = "EMTPY";
-      app.passwordValid = "EMTPY";
-      app.loginError = "NONE";
-      app.loginButtonState = "NORMAL";
-      app.signUpButtonState = "DISABLED";
-      app.loginPassword = "";
-      app.loginEmail = "";
-      app.resetEmail = "";
-      app.signUpEmail = '';
-      app.signUpPassword = '';
-      app.signUpChecked = true;
-      app.signUpUsername = '';
-    }
-
-    function loginWithEmail(email, pass){
-      firebase.auth().signInWithEmailAndPassword(email, pass)
-        .then(function() {
-          $('#loginModal').modal('hide');
-          clearLoginSignupModal();
-          app.projects = []
-
-        })
-        .catch(function(error) {
-          if (error.code === 'auth/wrong-password') {
-            app.loginError = "WRONGPASSWORD"
-            app.loginButtonState = "NORMAL"
-          } else if (error.code === 'auth/invalid-email') {
-            app.loginError = "INVALIDEMAIL"
-            app.loginButtonState = "NORMAL"
-          } else {
-            app.loginError = "USERNOTFOUND"
-            app.loginButtonState = "NORMAL"
-          }
-        })
-    }
-
-    function migrate(){
-      if (app.migrateUsernameValid == 'VALID' && app.migrateButtonState != 'LOADING') {
-        app.migrateButtonState = "LOADING"
-
-        var exists
-        var ref = firebase.database().ref("uniqueUsername");
-
-        ref.child(app.migrateUsername).once('value', function(snapshot) {
-          exists = (snapshot.val() !== null);
-          if (exists) {
-            app.migrateUsernameValid = 'TAKEN'
-            app.migrateButtonState = "NORMAL"
-          } else {
-
-            var user = firebase.auth().currentUser;
-
-            user.updateProfile({
-              displayName: app.migrateUsername,
-              recieveUpdates: app.migrateChecked,
-              usernameUnique: true
-            })
-
-            firebase.database().ref("uniqueUsername/" + app.migrateUsername).set({
-              username: app.migrateUsername,
-              uid: user.uid
-            })
-
-            app.userNameForMenu = app.migrateUsername
-
-            var ref = firebase.database().ref("user");
-            ref.child(user.uid).once('value', function(snapshot) {
-              var createdDateVar = snapshot.val().createdDate;
-              var emailVar = snapshot.val().email;
-
-              var updates = {};
-
-              updates['/user/' + user.uid] = {
-                createdDate: createdDateVar,
-                displayName: app.migrateUsername,
-                email: emailVar,
-                recieveUpdates: app.migrateChecked,
-                usernameUnique: true
-              }
-
-              $('#migrateModal').modal('hide');
-              app.migrateButtonState = "NORMAL"
-              app.migrateUsername = ''
-              app.migrateUsernameValid = 'EMPTY'
-
-              return firebase.database().ref().update(updates);
-            });
-
-          }
-        });
-
-      } 
-    }
-    
-    function login() {
-      app.loginButtonState = "LOADING"
-
-      if (!/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(app.loginEmail)){
-        var ref = firebase.database().ref("user");
-        ref.orderByChild("displayName").equalTo(app.loginEmail).on("value", function(snapshot) {
-          if (snapshot.numChildren()==1){
-            loginWithEmail(snapshot.val()[Object.keys(snapshot.val())[0]].email, app.loginPassword)
-          } else if (snapshot.numChildren()>1){
-            app.loginError = "USERNAMENOTUNIQUE"
-            app.loginButtonState = "NORMAL"
-          }else{
-            app.loginError = "USERNOTFOUND"
-            app.loginButtonState = "NORMAL"
-          }
-        });
-      } else {
-        loginWithEmail(app.loginEmail, app.loginPassword)
-      }
-    }
-
-    function signUp() {
-      var email = app.signUpEmail;
-      var password = app.signUpPassword;
-      if (email == ''){
-        app.emailValid = "EMPTY"
-      } else if (!/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email)){
-        app.emailValid = "NOTEMAIL"
-      } else if (/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email)){
-        app.emailValid = "VALID"
-      } 
-      if (password == ''){
-        app.passwordValid = "EMPTY"
-      } else if (!/^.{6,}$/.test(password)){
-        app.passwordValid = "WEAK"
-      } else {
-        app.passwordValid = "VALID"
-      }
-
-      if (app.usernameValid == 'VALID' && app.emailValid == 'VALID' && app.passwordValid == 'VALID' && app.signUpButtonState != 'LOADING') {
-        app.signUpButtonState = "LOADING"
-
-        var exists
-        var ref = firebase.database().ref("uniqueUsername");
-        ref.child(app.signUpUsername).once('value', function(snapshot) {
-          exists = (snapshot.val() !== null);
-          if (exists) {
-            app.usernameValid = 'TAKEN'
-            app.signUpButtonState = "NORMAL"
-          } else {
-            firebase.auth().createUserWithEmailAndPassword(app.signUpEmail, app.signUpPassword)
-              .then(function() {
-
-                $('#loginModal').modal('hide');
-
-                var user = firebase.auth().currentUser;
-
-                user.updateProfile({
-                  displayName: app.signUpUsername
-                })
-
-                
-                app.userNameForMenu = app.signUpUsername
-                app.projects = []
-
-                firebase.database().ref("uniqueUsername/" + app.signUpUsername).set({
-                  username: app.signUpUsername,
-                  uid: user.uid
-                })
-
-                firebase.database().ref('/user/' + user.uid).once('value').then(function(snapshot) {
-                  if (!snapshot.val()) {
-                    firebase.database().ref("/user/" + user.uid).set({
-                      displayName: app.signUpUsername,
-                      email: user.email,
-                      createdDate: firebase.database.ServerValue.TIMESTAMP,
-                      recieveUpdates: app.signUpChecked,
-                      usernameUnique: true
-                    })
-                  }
-                });
-
-              }).catch(function(error) {
-                // Handle EMAIL Errors here.
-                var errorCode = error.code;
-                var errorMessage = error.message;
-                if (error.code === 'auth/email-already-in-use') {
-                  app.emailValid = "TAKEN"
-                  app.signUpButtonState = "auth/invalid-email"
-                } else if (error.code === 'auth/invalid-email') {
-                  app.emailValid = "NOTEMAIL"
-                  app.signUpButtonState = "NORMAL"
-                } else if (error.code === 'auth/weak-password') {
-                  app.passwordValid = "WEAK"
-                  app.signUpButtonState = "NORMAL"
-                }
-
-              });
-          }
-        });
-      }
-    }
-
-    function resetPassword(){
-      app.resetButtonState = "LOADING"
-      firebase.auth().sendPasswordResetEmail(app.resetEmail).then(function() {
-        app.loginSignUpView = "RESETPASSWORDSUCCESS"
-        clearLoginSignupModal();
-      }, function(error) {
-        app.loginSignUpView = "RESETPASSWORDSUCCESS"
-        clearLoginSignupModal();
-      })
-    }
-
-    function handleLogin(userName, uid) {
-      app.userNameForMenu = userName
-      app.userProjectsLink  = "./user.html#" + uid
-      app.loginState = "LOGGEDIN"
-    }
-
-    function handleLogout() {
-      app.loginState = "LOGGEDOUT"
-      myCode = false
-      clearLoginSignupModal()
-    }
-
-    var authChanged = false
-    firebase.auth().onAuthStateChanged(function(user) {
-      if (!authChanged){
-        authChanged = true
-        if (user){
-          ga('set', 'userId', user.uid);
-        }
-      }      
-      
-      // if user is logging in
-      if (user){
-        // get and set editor theme
-        firebase.database().ref('/user/' + user.uid + '/theme').once('value').then(function(snapshot) {
-          if (snapshot.val()) {
-            app.selectedTheme = snapshot.val();
-            editor.setOption("theme", snapshot.val());
-          }
-        })
-        
-        if (user.displayName){
-          handleLogin(user.displayName, user.uid)
-
-          var ref = firebase.database().ref("user");
-          ref.child(user.uid).once('value', function(snapshot) {
-            if (!snapshot.val().usernameUnique){
-              app.migrateUsername = ''
-              $('#migrateModal').modal('show')
-            }
-          });
-        } else if (app.signUpUsername){
-          handleLogin(app.signUpUsername, user.uid)
-        }
-        
-        // this puts the user's most recent project under their name
-        firebase.database().ref('/code-meta-data/').orderByChild("uid").equalTo(user.uid).once('value').then(function(snapshot) {
-          if (snapshot.val()){
-            app.projects = []
-            for (var key in snapshot.val()) {
-              var project = snapshot.val()[key]
-              var t = project.currentVersionTime
-              app.projects.push({key: key, time: t, code: project.code})
-            }
-          } 
-          // sort the proejcts by most recently touched
-          app.projects.sort(function(a,b) {
-            if (a.time < b.time)
-              return 1;
-            if (a.time > b.time)
-              return -1;
-            return 0;
-          })
-        });
-      } else {
-        handleLogout()
-      }
-    });
-    
-    var makeClean = function() {
-      app.status = "SAVED"
-      currentHash = window.location.hash
-    }
-
-    var makeDirty = function() {
-      app.status = "DIRTY"
-    }
-
-    var popout = function() {
-      if (app.status == "SAVED"){
-        window.open("./full.html#" + getIDWithRevision(), "_blank")
-      } else {
-        // remember this save was initiated by clicking popout, so we remember to open the popout after saving is completed
-        app.popoutAfterSave = true;
-        save();
-      }
-    }
-
-    // set the text in the editor
-    var editorVal = "setBackdropURL('./images/outerspace.jpg')\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"
-    if (getID() != ''){
-      editorVal = "// Loading..."
-      firebase.database().ref('/code-meta-data/' + getID()).once('value').then(function(snapshot) {
-        if (snapshot.val()){
-          myCode = firebase.auth().currentUser && snapshot.val()["uid"] == firebase.auth().currentUser.uid
-          
-          var revision = parseInt(window.location.hash.substring(1, window.location.hash.length).split("/")[1])
-          var keys = Object.keys(snapshot.val()["version"])
-          if (!isNaN(revision) && (revision !== 0 && revision !== -1 * keys.length) && Math.abs(revision) < keys.length + 1){
-            if (revision < 0){
-              revision = keys.length + revision // -1 gives the previous revision
-            }
-            var key = keys[revision - 1] // 1-indexed, so the first version is 1
-            
-            firebase.database().ref('/code/' + getID() + '/' + key).once('value').then(function(snapshot) {
-              editor.setValue(snapshot.val().code)
-            })
-          } else {
-            myCode = firebase.auth().currentUser && snapshot.val()["uid"] == firebase.auth().currentUser.uid
-            editor.setValue(snapshot.val().currentVersionText)
-          }
-          makeClean()
-        } else {
-          alert("Could not find a project with the name: " + getID())
-          editor.setValue("")
-        }
-      });
-    }
-
-    // we add the project name to the hash on save
-    // this code prevents that from triggering a page reload
-    window.addEventListener("hashchange", function() {
-      if (currentHash != window.location.hash) {
-        window.location.reload()
-      }
-    })
-
-    var saveProject = function(name){
-      firebase.database().ref('/code/' + name).limitToLast(1).once('value').then(function(snapshot) {
-        if (snapshot.val()){
-          if (firebase.auth().currentUser && snapshot.val()[Object.keys(snapshot.val())[0]].uid == firebase.auth().currentUser.uid) {
-            // if the project exists and you own it, push the new code as a revision
-            $('#saveModal').modal('hide');
-            app.projectNameRequest = "NOT LOADING"
-            saveProjectFirebase({name: name, newProject: false})
-          } else {
-            // if the project exists and you don't own it
-            app.projectNameRequest = "NAME TAKEN"
-          }
-        } else {
-          // if the project doesn't exist, save a new project
-          $('#saveModal').modal('hide');
-          app.projectNameRequest = "NOT LOADING"
-          saveProjectFirebase({name: name, newProject: true})
-        }
-      });
-    }
-    
-    function saveProjectFirebase({name, newProject}) {
-      var updates = {}
-
-      var revisionId = firebase.database().ref().child("/code/" + name).push().key
-      updates["/code/" + name + "/" + revisionId] = {
-        code: editor.getValue(),
-        time: firebase.database.ServerValue.TIMESTAMP,
-        uid: firebase.auth().currentUser && firebase.auth().currentUser.uid
-      }
-      
-      if (newProject) {
-        if (firebase.auth().currentUser) {
-          updates["/code/" + name + "/--uid"] = firebase.auth().currentUser.uid
-        }
-        updates["/code-meta-data/"+ name + "/projectCreatedTime"] = firebase.database.ServerValue.TIMESTAMP
-      }
-      updates["/code-meta-data/"+ name + "/currentVersionText"] = editor.getValue()
-      updates["/code-meta-data/"+ name + "/currentVersionTime"] = firebase.database.ServerValue.TIMESTAMP
-      updates["/code-meta-data/"+ name + "/uid"] = firebase.auth().currentUser && firebase.auth().currentUser.uid
-      updates["/code-meta-data/"+ name + "/version/" + revisionId] = firebase.database.ServerValue.TIMESTAMP
-      
-      firebase.database().ref().update(updates).then(function(){
-        window.location.hash = name
-        setUserUploadImageListener() // sync user-uploaded photos for this project name
-        myCode = firebase.auth().currentUser
-        // This save was initiated by the user clicking the popout button
-        // Now that the project is saved, popout the project in a new window
-        if(app.popoutAfterSave){
-          app.popoutAfterSave = false;
-          popout();
-        }
-        makeClean()
-      }).catch(function(error){
-        alert("Unable to save project: " + error)
-      });
-    }
-
-    var save = function(){
-      if (app.status == "SAVED") { return }
-
-      if (editor.getValue().startsWith("// Loading...")){
-        return // don't allow students to save projects that haven't loaded
-      }
-
-      if (myCode && getID()) {
-        saveProject(getID())
-      } else {
-        if (getID()) {
-          app.projectNameInputValue = autoIncrimentedName()
-        }
-        $('#saveModal').modal('show')
-      }
-    }
-
-    $('.modal').on('shown.bs.modal', function () {
-      $('#projectName').focus() // focus on the project name input box when the modal loads
-    })
-
-    var autoIncrimentedName = function() {
-      var projName = getID();
-      var versionNumber = parseInt(projName[projName.length-1])
-      if (!isNaN(versionNumber) && projName[projName.length-2] == "-"){
-        versionNumber += 1;
-        return projName.substring(0, projName.length-1) + versionNumber.toString();
-      } else {
-        return projName + "-1";
-      }
-    }
-
-    // keyboard shortcuts
-    var mac = CodeMirror.keyMap["default"] == CodeMirror.keyMap.macDefault;
-    var ctrl = mac ? "Cmd-" : "Ctrl-";
-    var keymap = {}
-    keymap[ctrl + "B"] = function(cm) {
-       if (cm.getSelection() == ""){
-        cm.execCommand("selectAll");
-       }
-      var beautiful = js_beautify(cm.getSelection(), {space_after_anon_function: true, indent_size: 2, indent_with_tabs: false })
-      cm.replaceSelection(beautiful)
-    }
-    keymap.Tab = function(cm) {
-      var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
-      cm.replaceSelection(spaces, "end", "+input");
-    }
-
-    var editor = CodeMirror(document.getElementById('code'), {
-        mode:  "javascript",
-        value: editorVal,
-        lineNumbers: true,
-        lineWrapping: false,
-        tabSize: 2,
-        indentUnit: 2,
-        indentWithTabs: false,
-        electricChars: true,
-        keyMap: "sublime",
-        autoCloseBrackets: true,
-        matchBrackets: true,
-        autofocus: true,
-        smartIndent: true,
-        foldGutter: true,
-        gutters: ["CodeMirror-lint-markers", "CodeMirror-foldgutter"],
-        extraKeys: keymap,
-        lint: {
-          delay: 800,
-          options: {
-            "esnext": true,
-            "asi": true
-          }
-        },
-        // Added to allow users to see if highlighted error line is selected.
-        styleSelectedText: true
-    });
-    
-    // Track Codemirror cursor activity
-    editor.on('cursorActivity', function(){
-      var activeLine = editor.getCursor().line + 1;
-      // If cursor is on error line, change cursor style
-      if (app.errorLineNumber && app.error) {
-        if (app.errorLineNumber == activeLine) {
-         app.cursorOnErrorLine = true;
-        }
-        else {
-         app.cursorOnErrorLine = false;
-        }
-      } 
-      else {
-        app.cursorOnErrorLine = false;
-      }
-    });
-
-
-
-    onkeydown = function(e){
-      if(e.ctrlKey && e.key == '/'){
-        e.preventDefault();
-      }
-      if((e.metaKey || e.ctrlKey) && e.keyCode == 'S'.charCodeAt(0)){
-        e.preventDefault();
-        save();
-      }
-    }
-
-    function WoofJSLint(){
-      if (app.error) { return }
-      const code = js_beautify(app.code, {space_after_anon_function: true, indent_size: 2, indent_with_tabs: false})
-      const regEx = /  ((\w)*\.)?(ready|onKeyDown|onKeyUp|onMouseDown|onMouseUp|onMouseMove|forever|repeatUntil)/g   // matches any event indented with two spaces
-      var result;
-      while ((result = regEx.exec(code)) !== null) {
-        var lineNumber = code.substring(0, result.index).split('\n').length
-        CodeMirror.commands.markGutter(editor, "warning", lineNumber, "It's usually a bad idea to have " + result[3] + "'s inside loops and other events.")
-      }
-    }
-
-    function autoRunClicked(){
-      if (!app.autoRunChecked){
-        makeDirty()
-        debouncedRunCode()
-        setTimeout(function() {WoofJSLint()}, 1000); 
-      }
-    }
-
-    // run the code (debounced) on every change to the editor 
-    editor.on("change", function(){
-      if (app.autoRunChecked){
-        makeDirty()
-        debouncedRunCode()
-        setTimeout(function() {WoofJSLint()}, 1000); 
-      }
-    });
-    runCode()
-
-    // focus on the preview when refreshed
-     function focusPreview() {
-       document.getElementById('preview').focus();
-     };
-
-    editor.on('inputRead', function(cm, e){
-      if (e.text.length == 1 && e.text[0].length == 1 &&  /^[a-zA-Z\.]/.test(e.text[0])) {
-        // constantly show autocomplete suggestions
-        CodeMirror.commands.autocomplete(editor);
-      }
-    });
-
-    // warns the user when they try to close the page without saving
-    window.onbeforeunload = function(e) {
-       if (app.status == "DIRTY") {
-         var dialogText = 'Make sure to copy and paste your work somewhere safe.';
-         e.returnValue = dialogText;
-         return dialogText;
-       }
-    };
-
-    function tryRunningCode() {
-      app.code = editor.getValue()
-      app.error = undefined
-      for (var i = 0; i < editor.lineCount(); i++) {
-        editor.removeLineClass(i, 'text', 'error-highlight');
-      }
-      try {
-        var result = Babel.transform(editor.getValue(), {
-          presets: [['es2015', {'modules': false}]], // modules: false to remove strict mode
-          retainLines: true
-        })
-        var code = result.code
-        document.getElementById('preview').contentWindow.addEventListener("mousemove", function(event) {
-          app.mouseX = Math.round(document.getElementById('preview').contentWindow.mouseX)
-          if (app.mouseX >= Math.round(document.getElementById('preview').contentWindow.maxX - 2)) {
-            app.mouseX += " (maxX)"
-          }
-          if (app.mouseX <= Math.round(document.getElementById('preview').contentWindow.minX + 1)) {
-            app.mouseX += " (minX)"
-          }
-          app.mouseY = Math.round(document.getElementById('preview').contentWindow.mouseY)
-          if (app.mouseY >= Math.round(document.getElementById('preview').contentWindow.maxY - 1)) {
-            app.mouseY += " (maxY)"
-          }
-          if (app.mouseY <= Math.round(document.getElementById('preview').contentWindow.minY + 3)) {
-            app.mouseY += " (minY)"
-          }
-        })
-        document.getElementById('preview').contentWindow.addEventListener("error", function(event) {
-          var error = event.error
-          if (error.type == "ImageLoadError") {
-            if (error.url === "") {
-                var emptyURLTypes = ["setBackdropURL('')", 'setBackdropURL("")', 'url: ""', "url: ''"]
-                var emptyURLType = emptyURLTypes.find(t => code.includes(t))
-                if (emptyURLType) {
-                  app.error = {message: "You forgot to include an image or background URL.", lineno: code.substring(0, code.indexOf(emptyURLType)).split('\n').length}
-                } else {
-                  // We can't figure out the lineno if it's set to an empty string variable
-                  // https://woofjs.com/create#image-url-issue
-                  app.error = {message: "You forgot to include an image or background URL.", lineno: null}
-                }
-              } else {
-              app.error = {message: "Your image URL (" + error.url +") is misspelled or not correct.", lineno: code.substring(0, code.indexOf(error.url)).split('\n').length}
-              }
-          }
-          else {
-            app.error = event
-          }
-          app.processError()
-          CodeMirror.commands.markGutter(editor, "error", app.error.lineno, app.error.message)
-        });
-        var script = document.createElement("script");
-        script.type = "text/javascript";
-        script.crossorigin = "anonymous"
-        script.text = code
-        document.getElementById('preview').contentDocument.body.appendChild(script)
-      }
-      catch (e) {
-        app.error = e
-        app.processError()
-      }
-    }
-
-    function runCode() {
-        
-        document.getElementById("preview").remove();
-        var iframe = document.createElement("iframe");
-        iframe.id = "preview";
-        document.getElementById("output").appendChild(iframe);
-
-        setTimeout(function() {
-
-            // add doctype to iframe
-            iframe.contentWindow.document.open();
-            iframe.contentWindow.document.write('<!DOCTYPE html>');
-            iframe.contentWindow.document.close();
-
-            // add a base tag to the page so it knows where to pull relative image urls
-            var base = iframe.contentWindow.document.createElement("base");
-            base.href = document.baseURI
-            iframe.contentWindow.document.body.appendChild(base);
-
-            // then we create a script tag with the woof code and add it to the page
-            var script = iframe.contentWindow.document.createElement("script");
-            script.type = "text/javascript";
-            script.src = "./woof.js";
-            iframe.contentWindow.document.body.appendChild(script);
-
-            script.onload = function() {
-                // when the woof.js library loads, run the user's code
-                var evt = document.createEvent('Event');
-                evt.initEvent('load', false, false);
-                iframe.contentWindow.dispatchEvent(evt);
-                tryRunningCode();
-            }
-        }, 10)
-    }
-    
-    window.onmessage = function(e){
-      if (!(e.data instanceof File)){
-        return
-      }
-      if (!firebase.auth().currentUser) {
-        alert('Please login to upload images.')
-        return
-      }
-      if (!getID()) {
-        alert('Please save your project to upload images.')
-        return
-      }
-      if (!myCode) {
-        alert('Please save this project to your account to upload images.')
-      }
-      
-      var uniqueId = Math.random().toString(36).substring(2) 
-               + (new Date()).getTime().toString(36);
-      
-      var ref = firebase.storage().ref()
-        .child('UserImageUpload')
-        .child(firebase.auth().currentUser.uid)
-        .child(getID())
-        .child(uniqueId)
-
-      var file = e.data
-      ref.put(file)
-        .then(function(snapshot){
-          if (getID()) {
-            firebase.database().ref()
-              .child('code-image-uploads')
-              .child(getID())
-              .child(uniqueId)
-              .set(snapshot.downloadURL)
-          }
-        }).catch(function(error){
-          alert('There was an error uploading your image: ' + error.message)
-        })
-    };
-    
-    var ref
-    setUserUploadImageListener = function() {
-      ref && ref.off() 
-      ref = firebase.database().ref()
-        .child('code-image-uploads')
-        .child(getID())
-      ref.on('value', function(snapshot) {
-        var addImagesFunc = () => {
-          var images = snapshot.val() || {}
-          scratch.contentWindow.app.setUserUploadImages(Object.values(images))
-        }
-        if (scratch.contentWindow.app){
-          addImagesFunc()
-        } else {
-          scratch.contentDocument.addEventListener('DOMContentLoaded', addImagesFunc, false);
-        }
-      })  
-    }
-    getID() && setUserUploadImageListener()
-    
-    function debounce(func, wait, immediate) {
-      var timeout;
-      return function() {
-        var context = this, args = arguments;
-        var later = function() {
-          timeout = null;
-          if (!immediate) func.apply(context, args);
-        };
-        var callNow = immediate && !timeout;
-        clearTimeout(timeout);
-        timeout = setTimeout(later, wait);
-        if (callNow) func.apply(context, args);
-      };
-    };
-    // helper function to prevent runCode from running too often
-    var debouncedRunCode = debounce(runCode, 1000, false)
-
-  </script>
+  <script type="module" src="./create.js"></script>
   <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
diff --git a/create.js b/create.js
new file mode 100644
index 0000000..6546edc
--- /dev/null
+++ b/create.js
@@ -0,0 +1,1070 @@
+import * as Utils from "./utils.js"
+
+var app = new Vue({
+  el: '#page',
+  data: {
+    code: "",
+    status: "NEW",
+    error: undefined,
+    projects: [],
+    codePane: true,
+    outputPane: true,
+    projectsPane: false,
+    docsPane: true,
+    projectbar: true,
+    previewbar: false,
+    docsbar:false,
+    codebar:false,
+    mouseX: 0,
+    mouseY: 0,
+    errorLineNumber: undefined,
+    renameSprite: false,
+    spriteName: '',
+    suggestions: [],
+    errorMessage: '',
+    cursorOnErrorLine: false,
+    selectedTheme:'eclipse',
+    autoRunChecked: true,
+    shortcut: CodeMirror.keyMap["default"] == CodeMirror.keyMap.macDefault ? 'Cmd' : 'Ctrl',     
+    projectNameRequest: "NOT LOADING", // or "LOADING" or "NAME TAKEN"
+    projectNameInputValue: "",
+    projectNameLastKeyIllegal: false,
+    usernameLastKeyIllegal: false,
+    loginSignUpView: "LOGIN", // or SIGNUP or RESETPASSWORD or RESETPASSWORDSUCCESS
+    emailError: false,
+    usernameValid: "EMTPY", // TAKEN or VALID or EMPTY or ILLEGAL
+    emailValid: "EMTPY", // TAKEN or VALID or NOTEMAIL or EMPTY
+    passwordValid: "EMTPY", // VALID or EMPTY or WEAK
+    loginError: "NONE", // NONE or USERNOTFOUND or WRONGPASSWORD or INVALIDEMAIL
+    loginButtonState: "NORMAL", // NORMAL or LOADING
+    signUpButtonState: "DISABLED", // NORMAL or DISABLED or LOADING
+    loginPassword: "",
+    loginEmail: "",
+    resetEmail: "",
+    signUpEmail: '',
+    signUpPassword: '',
+    signUpChecked: true,
+    signUpUsername: '',
+    loginState: "LOGGEDOUT", // or LOGGEDIN
+    userNameForMenu: '',
+    userProjectsLink: '',
+    migrateUsernameValid: "EMTPY", // TAKEN or VALID or EMPTY or ILLEGAL
+    migrateUsernameKeyIllegal: false,
+    migrateUsername: '',
+    migrateChecked: true,
+    migrateButtonState: "DISABLED", // NORMAL or DISABLED or LOADING
+    popoutAfterSave: false,
+    copiedText: "",
+  },
+  computed: {
+    styles : function() { return {
+       // styles for the "Save" button
+      'btn-warning': this.status == 'DIRTY',
+      'btn-success': this.status == 'SAVED',
+      'btn-default': this.status == "NEW"
+    } },
+    canClean: function(){
+      return !this.error 
+    },
+  },
+  methods: {
+    getID: Utils.getID,
+    processError: function() {
+      this.suggestions = []
+      this.errorMessage = []
+      this.renameSprite = false
+      // Remove error line highlight
+      if (this.errorLineNumber) {
+        editor.removeLineClass(this.errorLineNumber - 1, 'text', 'error-highlight');
+      }
+      if (this.error.message.includes("Uncaught ReferenceError") || this.error.message.includes("Uncaught TypeError")) {
+        // Remove 'Uncaught..' from error message
+        this.errorMessage = this.error.message.split(" ").slice(2).join(" ");
+        // If error message is 'sprite1 not defined', ask user to rename sprite1
+        this.renameSprite = this.error.message.includes('Uncaught ReferenceError: sprite1 is not defined') ? true : false;
+        // Get alphanumeric user code
+        var userCode = editor.getValue().replace(/(?:https?|ftp?|\.\/)[\n\S]+/g,'').match(/[a-zA-Z0-9]+/g);
+        // Add Woof methods to the user code 
+        userCode.push("onKeyDown", "onMouseDown", "onMouseUp", "onMouseMove", "penDown", "Image", "Rectangle", "Polygon", "Circle", "Line", "Oval", "move", "turnRight", "turnLeft", "angle", "pointTowards", "setRotationStyle", "show", "hide", "sendToFront", "sendToBack", "play", "Audio", "clearPen", "penUp", "penDown", "Text", "remove", "includes", "forEach", "find", "setBackdropURL", "setBackdropStyle", "after", "every", "repeat", "forever", "if", "else", "mouseX", "mouseY", "repeatUntil", "when", "freeze", "defrost", "delete", "remove", "push", "throttle", "mouseOver", "randomX", "randomY", "touching", "distanceTo", "prompt", "alert", "keysDown", "mouseDown", "pMouseX", "pMousecY", "mouseXSpeed", "mouseYSpeed", "hour", "hourMilitary", "minute", "second", "dayOfMonth", "dayOfWeek", "month", "year", "mobile", "random", "randomColor", "between", "substring", "round", "sqrt", "abs", "floor", "ceiling", "importCodeURL", "timer", "resetTimer")
+        // Search user code for suggestions
+        for (var i = 0; i < userCode.length; i++) {
+          // Measure the difference between error and user code
+          var distance = window.Levenshtein.get(this.findMisspelledWord(this.errorMessage), userCode[i]);
+          // Add user code with a distance less than 3 to list of suggestions if it hasn't already been added, it isn't the error, it's longer than a character, and it isn't a numnber
+          if (distance < 3 && distance != 0 && this.suggestions.indexOf(userCode[i]) == -1 && userCode[i].length > 1 && isNaN(userCode[i])) {
+            this.suggestions.push(userCode[i]);
+          }
+        }
+      }
+      else {
+        // Split error message by line break
+        var errorDesc = this.error.message.split("\n");
+        // Display first line of error message
+        // Remove 'unknown' from first line if it exists
+        var t = errorDesc[0].split(" ");
+        this.errorMessage += t[0] == "unknown:" ? t.slice(1, t.length - 1).join(" ") : this.errorMessage += errorDesc[0];
+        // Find error line number if it is undefined
+        if (!this.error.lineno) {
+          var x = errorDesc[0].slice(errorDesc[0].indexOf(":") + 2);
+          this.error.lineno = x.slice(x.indexOf("(") + 1, x.indexOf(":"));
+        }
+      }
+      // Show error line number if it is accurate
+      if (this.error.lineno <= editor.lineCount()) {
+        this.errorLineNumber = this.error.lineno;
+        // Add highlight to error line
+        editor.addLineClass(this.errorLineNumber - 1, 'text', 'error-highlight');
+      } else {
+        this.errorLineNumber = undefined
+      }
+    },
+    // Find misspelling in user code
+    findMisspelledWord: function(typo) {
+      return typo.split(" ")[0].split(".").pop();
+    },
+    // Change user code if user clicks suggestion
+    replaceMisspelledWord: function(x) {
+      editor.setValue(editor.getValue().replace(new RegExp("\\b" + this.findMisspelledWord(this.errorMessage) + "\\b", 'g'), x));
+    },
+    // Rename sprite1 with user input
+    getSpriteName: function() {
+      editor.setValue(editor.getValue().replace(/sprite1/g, this.spriteName));
+      this.spriteName = '';
+      this.renameSprite = false;
+    },
+    // Go to error line
+    goToErrorLine: function() {
+      editor.scrollIntoView({line: this.errorLineNumber, ch:0}, editor.getScrollInfo().clientHeight / 2);
+    },
+    cleanAll: function(){
+      if (!this.error && this.code != js_beautify(this.code, {space_after_anon_function: true, indent_size: 2, indent_with_tabs: false })){
+        var beautiful = js_beautify(editor.getValue(), {space_after_anon_function: true, indent_size: 2, indent_with_tabs: false })
+        editor.setValue(beautiful)
+      }
+    },
+    share: function(){
+      $('#shareModal').modal('show')
+    },
+    link: function(){
+      return "https://woofjs.com/create.html#" + Utils.getID()
+    },
+    fullLink: function(){
+      return "https://woofjs.com/full.html#" + Utils.getID()
+    },
+    copyStringToClipboard: function(str) {
+      // Create new element
+      this.copiedText = str;
+      var el = document.createElement('textarea');
+      // Set value (string to be copied)
+      el.value = str;
+      // Set non-editable to avoid focus and move outside of view
+      el.setAttribute('readonly', '');
+      el.style = {position: 'absolute', left: '-9999px'};
+      document.body.appendChild(el);
+      // Select text inside element
+      el.select();
+      // Copy text to clipboard
+      document.execCommand('copy');
+      // Remove temporary element
+      document.body.removeChild(el);
+    },
+    embed: function(){
+      return "<iframe src=\"https://woofjs.com/full#" + Utils.getID() + "\">\n</iframe>"
+    },
+    selectAll: function(){
+      editor.execCommand("selectAll")
+    },
+    undo: function(){
+      editor.execCommand("undo")
+    },
+    redo: function(){
+      editor.execCommand("redo")
+    },
+    find: function(){
+      editor.execCommand("find")
+    },
+    replace: function(){
+      editor.execCommand("replace")
+    },
+    comment: function(){
+      editor.toggleComment()
+    },
+    copy: function(){
+      this.copyStringToClipboard(editor.getSelection())
+    },
+    cut: function(){
+      this.copyStringToClipboard(editor.getSelection())
+      editor.replaceSelection("")
+    },
+    paste: function(){
+      editor.replaceSelection(this.copiedText)
+    },
+    validate: function($event) {
+      var newName = $event.target.value
+
+      this.projectNameRequest = 'NOT LOADING'  // reset state so that you can hit save after you change the name after you get a NAME TAKEN error
+
+      this.projectNameLastKeyIllegal = false // take off the animation
+      setTimeout(function() {
+        var lastKeyPressIllegal = newName.length > 0 && newName[newName.length - 1].match(/\.|#|\$|\/|\[|\]/)
+        if (lastKeyPressIllegal) {
+          this.projectNameLastKeyIllegal = lastKeyPressIllegal[0]
+        } else {
+          this.projectNameLastKeyIllegal = false
+        }
+      }.bind(this), 10)
+
+
+      this.projectNameInputValue = newName.replace(/ /g, "-")
+      this.projectNameInputValue = this.projectNameInputValue.replace(/\.|#|\$|\/|\[|\]/g, "")
+    },
+    saveName : function() {
+      if (app.projectNameRequest == "NOT LOADING"){
+        app.projectNameRequest = "LOADING"
+        var name = app.projectNameInputValue
+        if (name) {
+          saveProject(name);
+        }
+      }
+    },
+    themeChange: function (event){
+      var newTheme = event.target.value;
+      app.selectedTheme = newTheme;
+      editor.setOption("theme", newTheme);
+      if(firebase.auth().currentUser){
+        firebase.database().ref("/user/" + firebase.auth().currentUser.uid + "/theme").set(newTheme)
+      } 
+    },
+    switchToSignUp: function(){
+      this.loginSignUpView = 'SIGNUP'
+    },
+    switchToLogin: function(){
+      this.loginSignUpView = 'LOGIN'
+    },
+    switchToPasswordReset: function(){
+       this.loginSignUpView = 'RESETPASSWORD'
+    },
+    usernameValidate: function($event){
+      var username = $event.target.value
+      if (username == ''){
+        this.usernameValid = "EMPTY"
+      } else {
+        this.usernameLastKeyIllegal = false
+        setTimeout(function() {
+          var lastKeyPressIllegal = username.length > 0 && username[username.length - 1].match(/\.|#|\$|\/|\[|\]/)
+          if (lastKeyPressIllegal) {
+            this.usernameLastKeyIllegal = lastKeyPressIllegal[0]
+          } else {
+            this.usernameLastKeyIllegal = false
+          }
+        }.bind(this), 10)
+
+        this.signUpUsername= username.replace(" ", "-")
+        this.signUpUsername = this.signUpUsername.replace(/\.|#|\$|\/|\[|\]/g, "")
+        this.usernameValid = "VALID"
+      }
+    },
+    migrateUsernameVaidate: function($event){
+      var username = $event.target.value
+      if (username == ''){
+        this.usernameValid = "EMPTY"
+      } else {
+        this.migrateUsernameKeyIllegal = false
+        setTimeout(function() {
+          var lastKeyPressIllegal = username.length > 0 && username[username.length - 1].match(/\.|#|\$|\/|\[|\]/)
+          if (lastKeyPressIllegal) {
+            this.migrateUsernameKeyIllegal = lastKeyPressIllegal[0]
+          } else {
+            this.migrateUsernameKeyIllegal = false
+          }
+        }.bind(this), 10)
+
+        this.migrateUsername= username.replace(" ", "-")
+        this.migrateUsername = this.migrateUsername.replace(/\.|#|\$|\/|\[|\]/g, "")
+        this.migrateUsernameValid = "VALID"
+      }
+    },
+    // Checks for success or error on blur
+    emailValidate: function($event){
+      var email = $event.target.value
+      if (email == ''){
+        this.emailValid = "EMPTY"
+      } else if (!/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email)){
+        this.emailValid = "NOTEMAIL"
+      } else if (/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email)){
+        this.emailValid = "VALID"
+      }
+    },
+    // Checks for success or error on blur
+    passwordValidate: function($event){
+      var password = $event.target.value
+      if (password == ''){
+        this.passwordValid = "EMPTY"
+      } else if (!/^.{6,}$/.test(password)){
+        this.passwordValid = "WEAK"
+      } else {
+        this.passwordValid = "VALID"
+      }
+    },
+    // Checks for success on every input
+    emailSuccessValidate: function($event){
+      var email = $event.target.value
+      if (/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email)){
+        this.emailValid = "VALID"
+      }
+    },
+    // Checks for success on every input
+    passwordSuccessValidate: function($event){
+      var password = $event.target.value
+      if (/^.{6,}$/.test(password)){
+        this.passwordValid = "VALID"
+      }
+    },
+  }
+})
+
+// Initalizes the popover for the comment code button in the tools menu
+$(document).ready(function(){
+    $('[data-toggle="popover"]').popover();   
+});
+
+var clipboard = new Clipboard('.btn-clipboard');
+Vue.nextTick(function() {
+    $('[data-toggle="tooltip"]').tooltip({
+        trigger: 'manual'
+    });
+    clipboard.destroy()
+    clipboard = new Clipboard('.btn-clipboard');
+    clipboard.on('success', function(e) {
+        $(e.trigger).tooltip('show')
+        setTimeout(function() {
+            $(e.trigger).tooltip('hide')
+        }, 1000)
+    });
+
+})
+
+var myCode = false
+scratch.src = scratch.src // the documentation sometimes doesn't load unless you remind it to here, strange VueJS bug
+projectsIframe.src = projectsIframe.src // ditto for the project's iframe
+
+var config = {
+  apiKey: "AIzaSyBYHv7dCiD0bWiHRlcp4VIZCIqzoMnB4yY",
+  authDomain: "woofjs-d1b27.firebaseapp.com",
+  databaseURL: "https://woofjs-d1b27.firebaseio.com",
+  storageBucket: "woofjs-d1b27.appspot.com",
+  messagingSenderId: "397293370524"
+};
+firebase.initializeApp(config);
+
+function clearLoginSignupModal() {
+  app.emailError = false;
+  app.usernameValid = "EMTPY";
+  app.emailValid = "EMTPY";
+  app.passwordValid = "EMTPY";
+  app.loginError = "NONE";
+  app.loginButtonState = "NORMAL";
+  app.signUpButtonState = "DISABLED";
+  app.loginPassword = "";
+  app.loginEmail = "";
+  app.resetEmail = "";
+  app.signUpEmail = '';
+  app.signUpPassword = '';
+  app.signUpChecked = true;
+  app.signUpUsername = '';
+}
+
+function loginWithEmail(email, pass){
+  firebase.auth().signInWithEmailAndPassword(email, pass)
+    .then(function() {
+      $('#loginModal').modal('hide');
+      clearLoginSignupModal();
+      app.projects = []
+
+    })
+    .catch(function(error) {
+      if (error.code === 'auth/wrong-password') {
+        app.loginError = "WRONGPASSWORD"
+        app.loginButtonState = "NORMAL"
+      } else if (error.code === 'auth/invalid-email') {
+        app.loginError = "INVALIDEMAIL"
+        app.loginButtonState = "NORMAL"
+      } else {
+        app.loginError = "USERNOTFOUND"
+        app.loginButtonState = "NORMAL"
+      }
+    })
+}
+
+function migrate(){
+  if (app.migrateUsernameValid == 'VALID' && app.migrateButtonState != 'LOADING') {
+    app.migrateButtonState = "LOADING"
+
+    var exists
+    var ref = firebase.database().ref("uniqueUsername");
+
+    ref.child(app.migrateUsername).once('value', function(snapshot) {
+      exists = (snapshot.val() !== null);
+      if (exists) {
+        app.migrateUsernameValid = 'TAKEN'
+        app.migrateButtonState = "NORMAL"
+      } else {
+
+        var user = firebase.auth().currentUser;
+
+        user.updateProfile({
+          displayName: app.migrateUsername,
+          recieveUpdates: app.migrateChecked,
+          usernameUnique: true
+        })
+
+        firebase.database().ref("uniqueUsername/" + app.migrateUsername).set({
+          username: app.migrateUsername,
+          uid: user.uid
+        })
+
+        app.userNameForMenu = app.migrateUsername
+
+        var ref = firebase.database().ref("user");
+        ref.child(user.uid).once('value', function(snapshot) {
+          var createdDateVar = snapshot.val().createdDate;
+          var emailVar = snapshot.val().email;
+
+          var updates = {};
+
+          updates['/user/' + user.uid] = {
+            createdDate: createdDateVar,
+            displayName: app.migrateUsername,
+            email: emailVar,
+            recieveUpdates: app.migrateChecked,
+            usernameUnique: true
+          }
+
+          $('#migrateModal').modal('hide');
+          app.migrateButtonState = "NORMAL"
+          app.migrateUsername = ''
+          app.migrateUsernameValid = 'EMPTY'
+
+          return firebase.database().ref().update(updates);
+        });
+
+      }
+    });
+
+  } 
+}
+
+function login() {
+  app.loginButtonState = "LOADING"
+
+  if (!/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(app.loginEmail)){
+    var ref = firebase.database().ref("user");
+    ref.orderByChild("displayName").equalTo(app.loginEmail).on("value", function(snapshot) {
+      if (snapshot.numChildren()==1){
+        loginWithEmail(snapshot.val()[Object.keys(snapshot.val())[0]].email, app.loginPassword)
+      } else if (snapshot.numChildren()>1){
+        app.loginError = "USERNAMENOTUNIQUE"
+        app.loginButtonState = "NORMAL"
+      }else{
+        app.loginError = "USERNOTFOUND"
+        app.loginButtonState = "NORMAL"
+      }
+    });
+  } else {
+    loginWithEmail(app.loginEmail, app.loginPassword)
+  }
+}
+
+function signUp() {
+  var email = app.signUpEmail;
+  var password = app.signUpPassword;
+  if (email == ''){
+    app.emailValid = "EMPTY"
+  } else if (!/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email)){
+    app.emailValid = "NOTEMAIL"
+  } else if (/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email)){
+    app.emailValid = "VALID"
+  } 
+  if (password == ''){
+    app.passwordValid = "EMPTY"
+  } else if (!/^.{6,}$/.test(password)){
+    app.passwordValid = "WEAK"
+  } else {
+    app.passwordValid = "VALID"
+  }
+
+  if (app.usernameValid == 'VALID' && app.emailValid == 'VALID' && app.passwordValid == 'VALID' && app.signUpButtonState != 'LOADING') {
+    app.signUpButtonState = "LOADING"
+
+    var exists
+    var ref = firebase.database().ref("uniqueUsername");
+    ref.child(app.signUpUsername).once('value', function(snapshot) {
+      exists = (snapshot.val() !== null);
+      if (exists) {
+        app.usernameValid = 'TAKEN'
+        app.signUpButtonState = "NORMAL"
+      } else {
+        firebase.auth().createUserWithEmailAndPassword(app.signUpEmail, app.signUpPassword)
+          .then(function() {
+
+            $('#loginModal').modal('hide');
+
+            var user = firebase.auth().currentUser;
+
+            user.updateProfile({
+              displayName: app.signUpUsername
+            })
+
+            
+            app.userNameForMenu = app.signUpUsername
+            app.projects = []
+
+            firebase.database().ref("uniqueUsername/" + app.signUpUsername).set({
+              username: app.signUpUsername,
+              uid: user.uid
+            })
+
+            firebase.database().ref('/user/' + user.uid).once('value').then(function(snapshot) {
+              if (!snapshot.val()) {
+                firebase.database().ref("/user/" + user.uid).set({
+                  displayName: app.signUpUsername,
+                  email: user.email,
+                  createdDate: firebase.database.ServerValue.TIMESTAMP,
+                  recieveUpdates: app.signUpChecked,
+                  usernameUnique: true
+                })
+              }
+            });
+
+          }).catch(function(error) {
+            // Handle EMAIL Errors here.
+            var errorCode = error.code;
+            var errorMessage = error.message;
+            if (error.code === 'auth/email-already-in-use') {
+              app.emailValid = "TAKEN"
+              app.signUpButtonState = "auth/invalid-email"
+            } else if (error.code === 'auth/invalid-email') {
+              app.emailValid = "NOTEMAIL"
+              app.signUpButtonState = "NORMAL"
+            } else if (error.code === 'auth/weak-password') {
+              app.passwordValid = "WEAK"
+              app.signUpButtonState = "NORMAL"
+            }
+
+          });
+      }
+    });
+  }
+}
+
+function resetPassword(){
+  app.resetButtonState = "LOADING"
+  firebase.auth().sendPasswordResetEmail(app.resetEmail).then(function() {
+    app.loginSignUpView = "RESETPASSWORDSUCCESS"
+    clearLoginSignupModal();
+  }, function(error) {
+    app.loginSignUpView = "RESETPASSWORDSUCCESS"
+    clearLoginSignupModal();
+  })
+}
+
+function handleLogin(userName, uid) {
+  app.userNameForMenu = userName
+  app.userProjectsLink  = "./user.html#" + uid
+  app.loginState = "LOGGEDIN"
+}
+
+function handleLogout() {
+  app.loginState = "LOGGEDOUT"
+  myCode = false
+  clearLoginSignupModal()
+}
+
+var authChanged = false
+firebase.auth().onAuthStateChanged(function(user) {
+  if (!authChanged){
+    authChanged = true
+    if (user){
+      ga('set', 'userId', user.uid);
+    }
+  }      
+  
+  // if user is logging in
+  if (user){
+    // get and set editor theme
+    firebase.database().ref('/user/' + user.uid + '/theme').once('value').then(function(snapshot) {
+      if (snapshot.val()) {
+        app.selectedTheme = snapshot.val();
+        editor.setOption("theme", snapshot.val());
+      }
+    })
+    
+    if (user.displayName){
+      handleLogin(user.displayName, user.uid)
+
+      var ref = firebase.database().ref("user");
+      ref.child(user.uid).once('value', function(snapshot) {
+        if (!snapshot.val().usernameUnique){
+          app.migrateUsername = ''
+          $('#migrateModal').modal('show')
+        }
+      });
+    } else if (app.signUpUsername){
+      handleLogin(app.signUpUsername, user.uid)
+    }
+    
+    // this puts the user's most recent project under their name
+    firebase.database().ref('/code-meta-data/').orderByChild("uid").equalTo(user.uid).once('value').then(function(snapshot) {
+      if (snapshot.val()){
+        app.projects = []
+        for (var key in snapshot.val()) {
+          var project = snapshot.val()[key]
+          var t = project.currentVersionTime
+          app.projects.push({key: key, time: t, code: project.code})
+        }
+      } 
+      // sort the proejcts by most recently touched
+      app.projects.sort(function(a,b) {
+        if (a.time < b.time)
+          return 1;
+        if (a.time > b.time)
+          return -1;
+        return 0;
+      })
+    });
+  } else {
+    handleLogout()
+  }
+});
+
+var makeClean = function() {
+  app.status = "SAVED"
+  Utils.currentHash = window.location.hash
+}
+
+var makeDirty = function() {
+  app.status = "DIRTY"
+}
+
+var popout = function() {
+  if (app.status == "SAVED"){
+    window.open("./full.html#" + Utils.getIDWithRevision(), "_blank")
+  } else {
+    // remember this save was initiated by clicking popout, so we remember to open the popout after saving is completed
+    app.popoutAfterSave = true;
+    save();
+  }
+}
+
+// set the text in the editor
+var editorVal = "setBackdropURL('./images/outerspace.jpg')\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"
+if (Utils.getID() != ''){
+  editorVal = "// Loading..."
+  firebase.database().ref('/code-meta-data/' + Utils.getID()).once('value').then(function(snapshot) {
+    if (snapshot.val()){
+      myCode = firebase.auth().currentUser && snapshot.val()["uid"] == firebase.auth().currentUser.uid
+      
+      var revision = parseInt(window.location.hash.substring(1, window.location.hash.length).split("/")[1])
+      var keys = Object.keys(snapshot.val()["version"])
+      if (!isNaN(revision) && (revision !== 0 && revision !== -1 * keys.length) && Math.abs(revision) < keys.length + 1){
+        if (revision < 0){
+          revision = keys.length + revision // -1 gives the previous revision
+        }
+        var key = keys[revision - 1] // 1-indexed, so the first version is 1
+        
+        firebase.database().ref('/code/' + Utils.getID() + '/' + key).once('value').then(function(snapshot) {
+          editor.setValue(snapshot.val().code)
+        })
+      } else {
+        myCode = firebase.auth().currentUser && snapshot.val()["uid"] == firebase.auth().currentUser.uid
+        editor.setValue(snapshot.val().currentVersionText)
+      }
+      makeClean()
+    } else {
+      alert("Could not find a project with the name: " + Utils.getID())
+      editor.setValue("")
+    }
+  });
+}
+
+// we add the project name to the hash on save
+// this code prevents that from triggering a page reload
+window.addEventListener("hashchange", function() {
+  if (Utils.currentHash != window.location.hash) {
+    window.location.reload()
+  }
+})
+
+var saveProject = function(name){
+  firebase.database().ref('/code/' + name).limitToLast(1).once('value').then(function(snapshot) {
+    if (snapshot.val()){
+      if (firebase.auth().currentUser && snapshot.val()[Object.keys(snapshot.val())[0]].uid == firebase.auth().currentUser.uid) {
+        // if the project exists and you own it, push the new code as a revision
+        $('#saveModal').modal('hide');
+        app.projectNameRequest = "NOT LOADING"
+        saveProjectFirebase({name: name, newProject: false})
+      } else {
+        // if the project exists and you don't own it
+        app.projectNameRequest = "NAME TAKEN"
+      }
+    } else {
+      // if the project doesn't exist, save a new project
+      $('#saveModal').modal('hide');
+      app.projectNameRequest = "NOT LOADING"
+      saveProjectFirebase({name: name, newProject: true})
+    }
+  });
+}
+
+function saveProjectFirebase({name, newProject}) {
+  var updates = {}
+
+  var revisionId = firebase.database().ref().child("/code/" + name).push().key
+  updates["/code/" + name + "/" + revisionId] = {
+    code: editor.getValue(),
+    time: firebase.database.ServerValue.TIMESTAMP,
+    uid: firebase.auth().currentUser && firebase.auth().currentUser.uid
+  }
+  
+  if (newProject) {
+    if (firebase.auth().currentUser) {
+      updates["/code/" + name + "/--uid"] = firebase.auth().currentUser.uid
+    }
+    updates["/code-meta-data/"+ name + "/projectCreatedTime"] = firebase.database.ServerValue.TIMESTAMP
+  }
+  updates["/code-meta-data/"+ name + "/currentVersionText"] = editor.getValue()
+  updates["/code-meta-data/"+ name + "/currentVersionTime"] = firebase.database.ServerValue.TIMESTAMP
+  updates["/code-meta-data/"+ name + "/uid"] = firebase.auth().currentUser && firebase.auth().currentUser.uid
+  updates["/code-meta-data/"+ name + "/version/" + revisionId] = firebase.database.ServerValue.TIMESTAMP
+  
+  firebase.database().ref().update(updates).then(function(){
+    window.location.hash = name
+    setUserUploadImageListener() // sync user-uploaded photos for this project name
+    myCode = firebase.auth().currentUser
+    // This save was initiated by the user clicking the popout button
+    // Now that the project is saved, popout the project in a new window
+    if(app.popoutAfterSave){
+      app.popoutAfterSave = false;
+      popout();
+    }
+    makeClean()
+  }).catch(function(error){
+    alert("Unable to save project: " + error)
+  });
+}
+
+var save = function(){
+  if (app.status == "SAVED") { return }
+
+  if (editor.getValue().startsWith("// Loading...")){
+    return // don't allow students to save projects that haven't loaded
+  }
+
+  if (myCode && Utils.getID()) {
+    saveProject(Utils.getID())
+  } else {
+    if (Utils.getID()) {
+      app.projectNameInputValue = autoIncrimentedName()
+    }
+    $('#saveModal').modal('show')
+  }
+}
+
+$('.modal').on('shown.bs.modal', function () {
+  $('#projectName').focus() // focus on the project name input box when the modal loads
+})
+
+var autoIncrimentedName = function() {
+  var projName = Utils.getID();
+  var versionNumber = parseInt(projName[projName.length-1])
+  if (!isNaN(versionNumber) && projName[projName.length-2] == "-"){
+    versionNumber += 1;
+    return projName.substring(0, projName.length-1) + versionNumber.toString();
+  } else {
+    return projName + "-1";
+  }
+}
+
+// keyboard shortcuts
+var mac = CodeMirror.keyMap["default"] == CodeMirror.keyMap.macDefault;
+var ctrl = mac ? "Cmd-" : "Ctrl-";
+var keymap = {}
+keymap[ctrl + "B"] = function(cm) {
+   if (cm.getSelection() == ""){
+    cm.execCommand("selectAll");
+   }
+  var beautiful = js_beautify(cm.getSelection(), {space_after_anon_function: true, indent_size: 2, indent_with_tabs: false })
+  cm.replaceSelection(beautiful)
+}
+keymap.Tab = function(cm) {
+  var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
+  cm.replaceSelection(spaces, "end", "+input");
+}
+
+var editor = CodeMirror(document.getElementById('code'), {
+    mode:  "javascript",
+    value: editorVal,
+    lineNumbers: true,
+    lineWrapping: false,
+    tabSize: 2,
+    indentUnit: 2,
+    indentWithTabs: false,
+    electricChars: true,
+    keyMap: "sublime",
+    autoCloseBrackets: true,
+    matchBrackets: true,
+    autofocus: true,
+    smartIndent: true,
+    foldGutter: true,
+    gutters: ["CodeMirror-lint-markers", "CodeMirror-foldgutter"],
+    extraKeys: keymap,
+    lint: {
+      delay: 800,
+      options: {
+        "esnext": true,
+        "asi": true
+      }
+    },
+    // Added to allow users to see if highlighted error line is selected.
+    styleSelectedText: true
+});
+
+// Track Codemirror cursor activity
+editor.on('cursorActivity', function(){
+  var activeLine = editor.getCursor().line + 1;
+  // If cursor is on error line, change cursor style
+  if (app.errorLineNumber && app.error) {
+    if (app.errorLineNumber == activeLine) {
+     app.cursorOnErrorLine = true;
+    }
+    else {
+     app.cursorOnErrorLine = false;
+    }
+  } 
+  else {
+    app.cursorOnErrorLine = false;
+  }
+});
+
+
+
+onkeydown = function(e){
+  if(e.ctrlKey && e.key == '/'){
+    e.preventDefault();
+  }
+  if((e.metaKey || e.ctrlKey) && e.keyCode == 'S'.charCodeAt(0)){
+    e.preventDefault();
+    save();
+  }
+}
+
+function WoofJSLint(){
+  if (app.error) { return }
+  const code = js_beautify(app.code, {space_after_anon_function: true, indent_size: 2, indent_with_tabs: false})
+  const regEx = /  ((\w)*\.)?(ready|onKeyDown|onKeyUp|onMouseDown|onMouseUp|onMouseMove|forever|repeatUntil)/g   // matches any event indented with two spaces
+  var result;
+  while ((result = regEx.exec(code)) !== null) {
+    var lineNumber = code.substring(0, result.index).split('\n').length
+    CodeMirror.commands.markGutter(editor, "warning", lineNumber, "It's usually a bad idea to have " + result[3] + "'s inside loops and other events.")
+  }
+}
+
+function autoRunClicked(){
+  if (!app.autoRunChecked){
+    makeDirty()
+    debouncedRunCode()
+    setTimeout(function() {WoofJSLint()}, 1000); 
+  }
+}
+
+// run the code (debounced) on every change to the editor 
+editor.on("change", function(){
+  if (app.autoRunChecked){
+    makeDirty()
+    debouncedRunCode()
+    setTimeout(function() {WoofJSLint()}, 1000); 
+  }
+});
+runCode()
+
+// focus on the preview when refreshed
+ function focusPreview() {
+   document.getElementById('preview').focus();
+ };
+
+editor.on('inputRead', function(cm, e){
+  if (e.text.length == 1 && e.text[0].length == 1 &&  /^[a-zA-Z\.]/.test(e.text[0])) {
+    // constantly show autocomplete suggestions
+    CodeMirror.commands.autocomplete(editor);
+  }
+});
+
+// warns the user when they try to close the page without saving
+window.onbeforeunload = function(e) {
+   if (app.status == "DIRTY") {
+     var dialogText = 'Make sure to copy and paste your work somewhere safe.';
+     e.returnValue = dialogText;
+     return dialogText;
+   }
+};
+
+function tryRunningCode() {
+  app.code = editor.getValue()
+  app.error = undefined
+  for (var i = 0; i < editor.lineCount(); i++) {
+    editor.removeLineClass(i, 'text', 'error-highlight');
+  }
+  try {
+    var result = Babel.transform(editor.getValue(), {
+      presets: [['es2015', {'modules': false}]], // modules: false to remove strict mode
+      retainLines: true
+    })
+    var code = result.code
+    document.getElementById('preview').contentWindow.addEventListener("mousemove", function(event) {
+      app.mouseX = Math.round(document.getElementById('preview').contentWindow.mouseX)
+      if (app.mouseX >= Math.round(document.getElementById('preview').contentWindow.maxX - 2)) {
+        app.mouseX += " (maxX)"
+      }
+      if (app.mouseX <= Math.round(document.getElementById('preview').contentWindow.minX + 1)) {
+        app.mouseX += " (minX)"
+      }
+      app.mouseY = Math.round(document.getElementById('preview').contentWindow.mouseY)
+      if (app.mouseY >= Math.round(document.getElementById('preview').contentWindow.maxY - 1)) {
+        app.mouseY += " (maxY)"
+      }
+      if (app.mouseY <= Math.round(document.getElementById('preview').contentWindow.minY + 3)) {
+        app.mouseY += " (minY)"
+      }
+    })
+    document.getElementById('preview').contentWindow.addEventListener("error", function(event) {
+      var error = event.error
+      if (error.type == "ImageLoadError") {
+        if (error.url === "") {
+            var emptyURLTypes = ["setBackdropURL('')", 'setBackdropURL("")', 'url: ""', "url: ''"]
+            var emptyURLType = emptyURLTypes.find(t => code.includes(t))
+            if (emptyURLType) {
+              app.error = {message: "You forgot to include an image or background URL.", lineno: code.substring(0, code.indexOf(emptyURLType)).split('\n').length}
+            } else {
+              // We can't figure out the lineno if it's set to an empty string variable
+              // https://woofjs.com/create#image-url-issue
+              app.error = {message: "You forgot to include an image or background URL.", lineno: null}
+            }
+          } else {
+          app.error = {message: "Your image URL (" + error.url +") is misspelled or not correct.", lineno: code.substring(0, code.indexOf(error.url)).split('\n').length}
+          }
+      }
+      else {
+        app.error = event
+      }
+      app.processError()
+      CodeMirror.commands.markGutter(editor, "error", app.error.lineno, app.error.message)
+    });
+    var script = document.createElement("script");
+    script.type = "text/javascript";
+    script.crossorigin = "anonymous"
+    script.text = code
+    document.getElementById('preview').contentDocument.body.appendChild(script)
+  }
+  catch (e) {
+    app.error = e
+    app.processError()
+  }
+}
+
+function runCode() {
+    
+    document.getElementById("preview").remove();
+    var iframe = document.createElement("iframe");
+    iframe.id = "preview";
+    document.getElementById("output").appendChild(iframe);
+
+    setTimeout(function() {
+
+        // add doctype to iframe
+        iframe.contentWindow.document.open();
+        iframe.contentWindow.document.write('<!DOCTYPE html>');
+        iframe.contentWindow.document.close();
+
+        // add a base tag to the page so it knows where to pull relative image urls
+        var base = iframe.contentWindow.document.createElement("base");
+        base.href = document.baseURI
+        iframe.contentWindow.document.body.appendChild(base);
+
+        // then we create a script tag with the woof code and add it to the page
+        var script = iframe.contentWindow.document.createElement("script");
+        script.type = "text/javascript";
+        script.src = "./woof.js";
+        iframe.contentWindow.document.body.appendChild(script);
+
+        script.onload = function() {
+            // when the woof.js library loads, run the user's code
+            var evt = document.createEvent('Event');
+            evt.initEvent('load', false, false);
+            iframe.contentWindow.dispatchEvent(evt);
+            tryRunningCode();
+        }
+    }, 10)
+}
+
+window.onmessage = function(e){
+  if (!(e.data instanceof File)){
+    return
+  }
+  if (!firebase.auth().currentUser) {
+    alert('Please login to upload images.')
+    return
+  }
+  if (!Utils.getID()) {
+    alert('Please save your project to upload images.')
+    return
+  }
+  if (!myCode) {
+    alert('Please save this project to your account to upload images.')
+  }
+  
+  var uniqueId = Math.random().toString(36).substring(2) 
+           + (new Date()).getTime().toString(36);
+  
+  var ref = firebase.storage().ref()
+    .child('UserImageUpload')
+    .child(firebase.auth().currentUser.uid)
+    .child(Utils.getID())
+    .child(uniqueId)
+
+  var file = e.data
+  ref.put(file)
+    .then(function(snapshot){
+      if (Utils.getID()) {
+        firebase.database().ref()
+          .child('code-image-uploads')
+          .child(Utils.getID())
+          .child(uniqueId)
+          .set(snapshot.downloadURL)
+      }
+    }).catch(function(error){
+      alert('There was an error uploading your image: ' + error.message)
+    })
+};
+
+var ref
+var setUserUploadImageListener = function() {
+  ref && ref.off() 
+  ref = firebase.database().ref()
+    .child('code-image-uploads')
+    .child(Utils.getID())
+  ref.on('value', function(snapshot) {
+    var addImagesFunc = () => {
+      var images = snapshot.val() || {}
+      scratch.contentWindow.app.setUserUploadImages(Object.values(images))
+    }
+    if (scratch.contentWindow.app){
+      addImagesFunc()
+    } else {
+      scratch.contentDocument.addEventListener('DOMContentLoaded', addImagesFunc, false);
+    }
+  })  
+}
+Utils.getID() && setUserUploadImageListener()
+
+// helper function to prevent runCode from running too often
+var debouncedRunCode = Utils.debounce(runCode, 1000, false)
\ No newline at end of file
diff --git a/index.html b/index.html
index c2934ec..5f3593a 100644
--- a/index.html
+++ b/index.html
@@ -20,7 +20,7 @@
 
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="./vendor/codemirror/codemirror.css">
-<script src="//load.sumome.com/" data-sumo-site-id="44245233c319d8fe9fb7ce8c7ed64db9381aa56477888a10319261f655cfffe2" async="async"></script>
+
 <script type="text/javascript" src="./vendor/codemirror/codemirror.js"></script>
 <script type="text/javascript" src="./vendor/codemirror/javascript.js"></script>
 <script type="text/javascript" src="./vendor/codemirror/closebrackets.js"></script>
diff --git a/teach.html b/teach.html
index aa2c030..c3e5b18 100644
--- a/teach.html
+++ b/teach.html
@@ -22,7 +22,7 @@
     </script>
     <script src="https://code.jquery.com/jquery-1.9.1.min.js">
     </script>
-    <script src="//load.sumome.com/" data-sumo-site-id="44245233c319d8fe9fb7ce8c7ed64db9381aa56477888a10319261f655cfffe2" async="async"></script>
+    
     <script>
         $(function() {
             $('a[href*="#"]:not([href="#"])').click(function() {
diff --git a/team.html b/team.html
index bfa866e..ba0c841 100644
--- a/team.html
+++ b/team.html
@@ -11,18 +11,10 @@
   <meta property="og:title" content="WoofJS">
   <meta property="og:description" content="WoofJS is a Scratch-inspired Javascript library for making games.">
 
-  <script src="//load.sumome.com/" data-sumo-site-id="44245233c319d8fe9fb7ce8c7ed64db9381aa56477888a10319261f655cfffe2" async="async"></script>
-  
-
-
-
-
   <meta charset="utf-8">
-  
   <title>WoofJS</title>
   <link rel="shortcut icon" type="image/png" href="./favicon.png"/>
       
-      
   <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
@@ -58,13 +50,13 @@
   <script src="./vendor/codemirror/jshint.min.js"></script>
   <script src="./vendor/codemirror/lint.js"></script>
   <script src="./vendor/codemirror/scrollpastend.js"></script>
-  <script src="https://unpkg.com/vue@2.0.1/dist/vue.js"></script>
+  <script src="https://unpkg.com/vue@2.0.1/dist/vue.min.js"></script>
   <script data-presets="es2015" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.14.0/babel.min.js"></script>
   <script src="https://rawcdn.githack.com/beautify-web/js-beautify/1b52eb1f90daaefa6ff0fa7736f97fbfc58093c1/js/lib/beautify.js"></script>
  
    <!-- Firepad -->
-<link rel="stylesheet" href="https://cdn.firebase.com/libs/firepad/1.4.0/firepad.css" />
-<script src="https://cdn.firebase.com/libs/firepad/1.4.0/firepad.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.firebase.com/libs/firepad/1.4.0/firepad.css" />
+  <script src="https://cdn.firebase.com/libs/firepad/1.4.0/firepad.min.js"></script>
    <style>
      
      html, body {
@@ -327,509 +319,7 @@
     
     </div>
   </div>
-  <script>
-
-  
-  // TODO check if the name exists on creating new project
-
-  // TODO backwards / forwards in edits
-  
-  // TODO blog post
-  
-    
-    var getID = function() {
-      // returns the name of a project, not inlcuding the current revision
-      return window.location.hash.substring(1, window.location.hash.length).split("/")[0];
-    }
-    var getIDWithRevision = function() {
-      // returns the name of a project, not inlcuding the current revision
-      return window.location.hash.substring(1, window.location.hash.length);
-    }
-    var getCurrentRevisionCode = function(revisions) {
-      // returns the code that corresponds to the current project and revision
-      var revision = parseInt(window.location.hash.substring(1, window.location.hash.length).split("/")[1])
-      
-      var keys = Object.keys(revisions)
-      if (keys.length > 1){
-        keys = keys.slice(1, keys.length)
-      }
-      
-      
-      var key
-      if (!isNaN(revision) && (revision !== 0 && revision !== -1 * keys.length) && Math.abs(revision) < keys.length + 1){
-        if (revision < 0){
-          revision = keys.length + revision // -1 gives the previous revision
-        }
-        key = keys[revision - 1]
-      } else {
-        key = keys[keys.length - 1]
-      }
-      return revisions[key].code
-    }
-    var currentHash = window.location.hash
-    
-    var app = new Vue({
-      el: '#page',
-      data: {
-        code: "",
-        status: "NEW",
-        error: undefined,
-        projects: [],
-        codePane: true,
-        outputPane: true,
-        projectsPane: false,
-        docsPane: true,
-        projectbar: true,
-        previewbar: false,
-        docsbar:false,
-        codebar:false,
-        mouseX: 0,
-        mouseY: 0,
-        seenError: true,
-      },
-      computed: {
-        styles : function() { return {
-           // styles for the "Save" icon
-          'glyphicon-floppy-remove': this.status == 'DIRTY', 
-          'glyphicon-floppy-saved': this.status == 'SAVED' || this.status == "NEW"
-        } },
-        canClean: function(){
-          // whether or not the code can be "cleaned" or if its already pristine
-          return !this.error && this.code != js_beautify(this.code, {space_after_anon_function: true, indent_size: 2, indent_with_tabs: false })
-        },
-      },
-      methods: {
-        getID: getID,
-        showError: function(){
-          this.seenError = true
-          if (this.error.message.includes('Uncaught ReferenceError: sprite1 is not defined')) {
-            var spriteName = prompt("Error on line " + this.error.lineno  + "\n\n" + "You need to rename 'sprite1'. What would you like to name it?", "unicornSprite");    
-            if (spriteName !== null) {   
-                editor.setValue(editor.getValue().replace(/sprite1/g, spriteName));
-            }  
-          }
-          else if (this.error.message.includes("Uncaught ReferenceError")) {
-            var message = this.error.message.replace("Uncaught ReferenceError: ", "")
-            alert("Error on line " + this.error.lineno  + "\n\n" + message + ". Check the spelling of your variable definitions.")
-          }
-          else {
-             alert("Error on line " + this.error.lineno  + "\n\n" + this.error.message)
-          }
-        },
-        cleanAll: function(){
-          var beautiful = js_beautify(editor.getValue(), {space_after_anon_function: true, indent_size: 2, indent_with_tabs: false })
-          editor.setValue(beautiful)
-        },
-      },
-      watch: {
-        error: function(newError) {
-          if (newError && newError.lineno) {
-            CodeMirror.commands.markGutter(editor, "error", newError.lineno, newError.message)
-          }
-        }
-      }
-    })
-    var myCode = false
-    scratch.src = scratch.src // the documentation sometimes doesn't load unless you remind it to here, strange VueJS bug
-    projectsIframe.src = projectsIframe.src // ditto for the project's iframe
-    
-    var config = {
-      apiKey: "AIzaSyBYHv7dCiD0bWiHRlcp4VIZCIqzoMnB4yY",
-      authDomain: "woofjs-d1b27.firebaseapp.com",
-      databaseURL: "https://woofjs-d1b27.firebaseio.com",
-      storageBucket: "woofjs-d1b27.appspot.com",
-      messagingSenderId: "397293370524"
-    };
-    firebase.initializeApp(config);
-      
-    function handleLogin(userName, uid) {
-      $('#loggedin-name').html(userName + ' <span class="caret"></span>')
-      $('#login-projects').attr("href", "./user.html#" + uid )
-      $('#logggedin').removeClass("hide")
-      $('#login').addClass('hide')
-    }
-    
-    function handleLogout() {
-      $('#logggedin').addClass("hide")
-      $('#login').removeClass("hide")
-      myCode = false
-    }
-    
-    var authChanged = false
-    firebase.auth().onAuthStateChanged(function(user) {
-      if (!authChanged){
-        authChanged = true
-      }
-      
-      if (user){
-        ga('set', 'userId', user.uid); 
-        firepad.setUserId(user.uid)
-        
-        handleLogin(user.displayName, user.uid)
-        
-        firebase.database().ref('/user/' + user.uid).once('value').then(function(snapshot) {
-          var userVal = snapshot.val()
-          
-          // if the user is logged in, and we don't have their name/email in our database, save it now
-          if (!userVal) {
-            firebase.database().ref("/user/" + user.uid).set({
-              displayName: user.displayName,
-              email: user.email,
-              createdDate: firebase.database.ServerValue.TIMESTAMP
-            })
-          }
-         
-          if (userVal && userVal.team && Object.values(userVal.team).includes(getID())) {
-            // do nothing because we've already added this project to the user
-          } else {
-            firebase.database().ref("/user/" + user.uid + "/team/").push(getID())
-          }
-        })
-        
-        // this puts the user's most recent project under their name
-        firebase.database().ref('/code/').orderByChild("--uid").equalTo(user.uid).once('value').then(function(snapshot) {
-          if (snapshot.val()){
-            app.projects = []
-            for (var key in snapshot.val()) {
-              var project = snapshot.val()[key]
-              var versions = Object.keys(project)
-              var t = project[versions[versions.length-1]].time
-              app.projects.push({key: key, time: t, code: project.code})
-            }
-          }
-          // sort the proejcts by most recently touched
-          app.projects.sort(function(a,b) {
-            if (a.time < b.time)
-              return 1;
-            if (a.time > b.time)
-              return -1;
-            return 0;
-          })
-        });
-      } else {
-        handleLogout()
-      }
-    });
-
-    var makeClean = function() {
-      app.status = "SAVED"
-      currentHash = window.location.hash
-    }
-    
-    var makeDirty = function() {
-      app.status = "DIRTY"
-    }
-    
-    var popout = function() {
-      if (app.status != "DIRTY"){
-        window.open("./team-full.html#" + getIDWithRevision(), "_blank")
-      } else {
-        alert("You must save your project to open it in a new window.")
-      }
-    }
-    
-    // we add the project name to the hash on save
-    // this code prevents that from triggering a page reload
-    window.addEventListener("hashchange", function() {
-      if (currentHash != window.location.hash) {
-        window.location.reload()
-      }
-    })
-    
-    var save = function(){
-      if (app.status == "SAVED") { return }
-      
-      if (editor.getValue().startsWith("// Loading...")){
-        return // don't allow students to save projects that haven't loaded
-      }
-      
-      var name
-      if (myCode) {
-        name = getID()
-      } else {
-        name = window.prompt('Choose a name for your project. You cannot include ".", "#", "$", "[", "]", or spaces in the name of your project.', "my-project") || '';
-      }
-      if (name.includes('.') || name.includes('/') || name.includes('$') || name.includes("#") || name.includes("[") || name.includes("]") || name.includes(" ")){
-        alert('You cannot include ".", "#", "$", "[", "]", or spaces in the name of your project. Try to save again.')
-      } else if (name) { 
-        firebase.database().ref('/code/' + name).limitToLast(1).once('value').then(function(snapshot) {
-          if (snapshot.val()){
-            if (firebase.auth().currentUser && snapshot.val()[Object.keys(snapshot.val())[0]].uid == firebase.auth().currentUser.uid) {
-                // if the project exists and you own it, push the new code as a revision
-                firebase.database().ref().child("/code/" + name).push({
-                  code: editor.getValue(), 
-                  time: firebase.database.ServerValue.TIMESTAMP, 
-                  uid: firebase.auth().currentUser && firebase.auth().currentUser.uid
-                }).then(function(){
-                  window.location.hash = name
-                  makeClean()
-                }).catch(function(error){
-                  alert("Unable to save project: " + error)
-                });
-            } else {
-              alert("That project name has already been taken. Try another one.")
-            }
-          } else {
-            // else create a new project and push this code as the first revision
-            firebase.database().ref().child("/code/" + name + "/--uid").set(firebase.auth().currentUser && firebase.auth().currentUser.uid)
-            firebase.database().ref().child("/code/" + name).push({
-              code: editor.getValue(), 
-              time: firebase.database.ServerValue.TIMESTAMP, 
-              uid: firebase.auth().currentUser && firebase.auth().currentUser.uid
-            }).then(function(){
-              window.location.hash = name
-              myCode = firebase.auth().currentUser
-              makeClean()
-            }).catch(function(error){
-              alert("Unable to save project: " + error)
-            });
-          }
-        });
-      }
-    };
-    
-    // keyboard shortcuts
-    var mac = CodeMirror.keyMap["default"] == CodeMirror.keyMap.macDefault;
-    var ctrl = mac ? "Cmd-" : "Ctrl-";
-    var keymap = {}
-    keymap[ctrl + "B"] = function(cm) {
-      var beautiful = js_beautify(cm.getSelection(), {space_after_anon_function: true, indent_size: 2, indent_with_tabs: false })
-      cm.replaceSelection(beautiful)
-    }
-    keymap.Tab = function(cm) {
-      var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
-      cm.replaceSelection(spaces, "end", "+input");
-    }
-    
-    var editor = CodeMirror(document.getElementById('code'), {
-        mode:  "javascript",
-        //value: editorVal,
-        lineNumbers: true,
-        lineWrapping: false,
-        theme: "eclipse",
-        tabSize: 2,
-        indentUnit: 2,
-        indentWithTabs: false,
-        electricChars: true,
-        keyMap: "sublime",
-        autoCloseBrackets: true,
-        matchBrackets: true,
-        autofocus: true,
-        smartIndent: true,
-        foldGutter: true,
-        gutters: ["CodeMirror-lint-markers", "CodeMirror-foldgutter"],
-        extraKeys: keymap,
-        lint: {
-          delay: 800, 
-          options: {
-            "esnext": true,
-            "asi": true
-          }
-        },
-    });
-    
-    // It's probably a bad idea to have a super large data structure like this in JS
-    // One bad side effect is that it turns off syntax highlighting in the code below it
-    const adjs = ["adorable","beautiful","clean","drab","elegant","fancy","glamorous","handsome","long","magnificent","old-fashioned","plain","quaint","sparkling","ugliest","unsightly","wide-eyed","red","orange","yellow","green","blue","purple","gray","black","white","alive","better","careful","clever","dead","easy","famous","gifted","helpful","important","inexpensive","mushy","odd","powerful","rich","shy","tender","uninterested","vast","wrong","angry","clumsy","defeated","embarrassed","fierce","grumpy","helpless","jealous","lazy","mysterious","nervous","obnoxious","panicky","repulsive","scary","thoughtless","uptight","worried","agreeable","brave","calm","delightful","eager","faithful","gentle","happy","jolly","kind","lively","nice","obedient","proud","relieved","silly","thankful","victorious","witty","zealous","broad","chubby","crooked","curved","deep","flat","high","hollow","low","narrow","round","shallow","skinny","square","steep","straight","wide","big","colossal","fat","gigantic","great","huge","immense","large","little","mammoth","massive","miniature","petite","puny","scrawny","short","small","tall","teeny","teeny-tiny","tiny","cooing","deafening","faint","hissing","loud","melodic","noisy","purring","quiet","raspy","screeching","thundering","voiceless","whispering","ancient","brief","early","fast","late","long","modern","old","old-fashioned","quick","rapid","short","slow","swift","young","bitter","delicious","fresh","greasy","juicy","hot","icy","loose","melted","nutritious","prickly","rainy","rotten","salty","sticky","strong","sweet","tart","tasteless","uneven","weak","wet","wooden","yummy","boiling","breeze","broken","bumpy","chilly","cold","cool","creepy","crooked","cuddly","curly","damaged","damp","dirty","dry","dusty","filthy","flaky","fluffy","freezing","hot","warm","wet","abundant","empty","few","full","heavy","light","many","numerous","sparse","substantial"]
-    const  nouns = ["aardvark","air","airplane","airport","alarm","alligator","almond","alphabet","ambulance","animal","ankle","ant","anteater","antelope","ape","apple","arm","armchair","arrow","asparagus","baby","back","backbone","bacon","badge","badger","bag","bagpipe","bait","bakery","ball","balloon","bamboo","banana","band","bandana","banjo","bank","baseball","basket","basketball","bat","bath","bathroom","bathtub","battery","battle","bay","beach","bead","bean","bear","beard","beast","beat","beauty","beaver","bed","bedroom","bee","beef","beetle","bell","belt","bench","beret","berry","bicycle","bike","bird","birthday","bite","blade","blanket","blob","block","blood","blouse","boar","board","bus","bush","butter","button","cabbage","cactus","cafe","cake","calculator","calendar","calf","camel","camera","camp","candle","canoe","canvas","cap","captain","car","card","cardboard","cardigan","carpenter","carrot","carton","cartoon","cat","caterpillar","cathedral","cattle","cauliflower","cave","CD","ceiling","celery","cello","cement","cemetery","cereal","boat","bobcat","body","bone","bonsai","book","bookcase","booklet","boot","border","bottle","bottom","boundary","bow","bowling","box","boy","brain","brake","branch","brass","bread","break","breakfast","breath","brick","bridge","broccoli","brochure","brother","brush","bubble","bucket","bug","building","bulb","bull","bulldozer","bun","butter","chain","chair","chalk","channel","character","cheek","cheese","cheetah","cherry","chess","chest","chick","chicken","children","chimpanzee","chin","chip","chive","chocolate","church","cicada","cinema","circle","city","clam","clarinet","click","clip","clock","closet","cloth","cloud","coach","coal","coast","coat","cobweb","cockroach","cocoa","coffee","coil","coin","coke","collar","college","colt","comb","comics","comma","computer","cone","copy","corn","cotton","couch","cougar","country","course","court","cousin","cow","crab","crack","cracker","crate","crayfish","crayon","cream","creek","cricket","crocodile","crop","crow","crowd","crown","crumb","cucumber","cup","cupboard","curtain","curve","cushion","cyclone","dad","daffodil","daisy","dance","daughter","deer","denim","dentist","desert","desk","dessert","detective","dew","diamond","dictionary","dinghy","dinosaur","dirt","dish","dock","dog","doll","dollar","door","dragon","dragonfly","drain","drawer","drawing","dress","dresser","drill","drink","drum","dryer","duck","duckling","dungeon","dust","eagle","ear","earth","earthquake","eel","egg","eggplant","elbow","elephant","energy","engine","equipment","eye","eyebrow","face","fact","factory","fairies","family","fan","fang","farm","fat","fear","feast","feather","feet","ferryboat","field","finger","fire","fireplace","fish","fist","flag","flame","flood","floor","flower","flute","fly","foam","fog","food","foot","football","forehead","forest","fork","fountain","fox","frame","freckle","freezer","frog","frost","fruit","fuel","fur","furniture","game","garage","garden","garlic","gas","gate","gear","ghost","giraffe","girl","glass","glove","glue","goal","goat","gold","goldfish","golf","gorilla","government","grape","grass","grasshopper","grater","grease","grill","grin","group","guitar","gum","gym","gymnast","hail","hair","haircut","hall","ham","hamburger","hammer","hamster","hand","handball","handle","hardware","harmonica","harmony","hat","hawk","head","headlight","heart","heat","hedge","height","helicopter","helmet","hem","hen","hill","hip","hippopotamus","hockey","hog","hole","home","honey","hood","hook","horn","horse","hose","hospital","house","hurricane","hyena","ice","icicle","ink","insect","instrument","iron","island","jacket","jade","jaguar","jail","jam","jar","jaw","jeans","jeep","jelly","jellyfish","jet","jewel","joke","journey","judge","judo","juice","jump","jumper","kangaroo","karate","kayak","kettle","key","keyboard","kick","kiss","kitchen","kite","kitten","knee","knife","knight","knot","lace","ladybug","lake","lamb","lamp","land","lasagna","laugh","laundry","leaf","leather","leek","leg","lemonade","leopard","letter","lettuce","library","lift","light","lightning","lily","line","lion","lip","lipstick","liquid","list","litter","lizard","loaf","lobster","lock","locket","locust","look","lotion","love","lunch","lynx","macaroni","machine","magazine","magic","magician","mail","mailbox","mailman","makeup","map","marble","mark","market","mascara","mask","match","meal","meat","mechanic","medicine","memory","men","menu","message","metal","mice","middle","milk","milkshake","mint","minute","mirror","mist","mistake","mitten","Monday","money","monkey","month","moon","morning","mosquito","motorboat","motorcycle","mountain","mouse","moustache","mouth","music","mustard","nail","name","napkin","neck","needle","nest","net","news","night","noise","noodle","nose","note","notebook","number","nut","oak","oatmeal","ocean","octopus","office","oil","olive","onion","orange","orchestra","ostrich","otter","oven","owl","ox","oxygen","oyster","packet","page","pail","pain","paint","pair","pajama","pamphlet","pan","pancake","panda","pansy","panther","pants","paper","parcel","parent","park","parrot","party","pasta","paste","pastry","patch","path","pea","peace","peanut","pear","pedestrian","pelican","pen","pencil","pepper","perfume","person","pest","pet","phone","piano","pickle","picture","pie","pig","pigeon","pillow","pilot","pimple","pin","pipe","pizza","plane","plant","plantation","plastic","plate","playground","plot","pocket","poison","police","policeman","pollution","pond","popcorn","poppy","porcupine","postage","postbox","pot","potato","poultry","powder","power","price","printer","prison","pumpkin","puppy","pyramid","queen","question","quicksand","quill","quilt","rabbit","radio","radish","raft","rail","railway","rain","rainbow","raincoat","rainstorm","rake","rat","ravioli","ray","recorder","rectangle","refrigerator","reindeer","relatives","restaurant","reward","rhinoceros","rice","riddle","ring","river","road","roast","rock","roll","roof","room","rooster","rose","rowboat","rubber","sack","sail","sailboat","sailor","salad","salmon","salt","sand","sandwich","sardine","sauce","sausage","saw","saxophone","scarecrow","scarf","school","scissors","scooter","scorpion","screw","screwdriver","sea","seagull","seal","seaplane","seashore","season","seat","second","seed","sentence","servant","shade","shadow","shallot","shampoo","shark","shears","sheep","sheet","shelf","shell","shield","ship","shirt","shoe","shoemaker","shop","shorts","shoulder","shovel","show","side","sidewalk","sign","signature","silk","silver","singer","sink","sister","skin","skirt","sky","sled","slippers","slope","smoke","snail","snake","sneeze","snow","snowflake","snowman","soap","soccer","sock","sofa","softball","soldier","son","song","sound","soup","soybean","space","spade","spaghetti","spark","sparrow","spear","speedboat","spider","spike","spinach","sponge","spoon","spot","sprout","spy","square","squash","squid","squirrel","stage","staircase","stamp","star","station","steam","steel","stem","step","stew","stick","stitch","stinger","stomach","stone","stool","stopsign","stopwatch","store","storm","story","stove","stranger","straw","stream","string","submarine","sugar","suit","summer","sun","sunshine","sunflower","supermarket","surfboard","surname","surprise","sushi","swallow","swamp","swan","sweater","sweatshirt","sweets","swing","switch","sword","swordfish","syrup","table","tabletop","tadpole","tail","target","tax","taxi","tea","teacher","team","teeth","television","tennis","tent","textbook","theater","thistle","thought","thread","throat","throne","thumb","thunder","thunderstorm","ticket","tie","tiger","tile","time","tire","toad","toast","toe","toilet","tomato","tongue","tooth","toothbrush","toothpaste","top","tornado","tortoise","tower","town","toy","tractor","traffic","trail","train","transport","tray","tree","triangle","trick","trip","trombone","trouble","trousers","truck","trumpet","trunk","t-shirt","tub","tuba","tugboat","tulip","tuna","tune","turkey","turnip","turtle","tv","twig","twilight","twine","umbrella","valley","van","vase","vegetable","veil","vein","vessel","vest","violin","volcano","volleyball","vulture","wagon","wall","wallaby","walnut","walrus","washer","wasp","waste","watch","watchmaker","water","wave","wax","weasel","weather","web","wedge","well","whale","wheat","wheel","wheelchair","whip","whisk","whistle","wilderness","willow","wind","wind chime","window","windscreen","wing","winter","wire","wish","wolf","woman","wood","wool","word","workshop","worm","wound","wren","wrench","wrinkles","wrist","xylophone","yacht","yak","yard"]
-    const adjLength = adjs.length
-    const nounLength = nouns.length
-    function randomName(){
-      const randomAdj = adjs[Math.floor(Math.random()*adjLength)]
-      const randomNoun = nouns[Math.floor(Math.random()*nounLength)]
-      
-      return randomAdj + "-" + randomNoun
-    }
-
-    var editorVal = ""
-    if (getID() == '') {
-      const name = randomName()
-      window.location.hash = name
-      makeClean() // prevents page reload
-      
-      editorVal += "// Welcome to team " + name + "!\n//\n"
-      editorVal += "// Share this link to collaborate:\n//\n"
-      editorVal += "// woofjs.com/team#" + name + "\n\n"
-      // editorVal += "// Press the Publish button to create a private project that nobody else can edit"
-      editorVal += "setBackdropURL('./docs/images/nyc.jpg')\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"
-    } 
-    
-    var firepadRef = firebase.database().ref('/team/' + getID()); 
-    var firepad = Firepad.fromCodeMirror(firepadRef, editor, {
-      defaultText: editorVal,
-    });
-    
-    onkeydown = function(e){
-      if(e.ctrlKey && e.key == '/'){
-        e.preventDefault();
-      }
-      if((e.metaKey || e.ctrlKey) && e.keyCode == 'S'.charCodeAt(0)){
-        e.preventDefault();
-        save();
-      }
-    }
-    
-    function WoofJSLint(){
-      if (app.error) { return }
-      const code = js_beautify(app.code, {space_after_anon_function: true, indent_size: 2, indent_with_tabs: false})
-      const regEx = /  ((\w)*\.)?(ready|onKeyDown|onKeyUp|onMouseDown|onMouseUp|onMouseMove)/g   // matches any event indented with two spaces 
-      var result;
-      while ((result = regEx.exec(code)) !== null) {
-        var lineNumber = code.substring(0, result.index).split('\n').length
-        CodeMirror.commands.markGutter(editor, "warning", lineNumber, "We reccomend moving this " + result[3] + " event outside all loops and other events.")
-      }
-    }
-    
-    firepad.on('synced', function(isSynced) {
-      // isSynced will be false immediately after the user edits the pad,
-      // and true when their edit has been saved to Firebase.
-      if (isSynced) {
-        makeClean()
-      }
-      else {
-        makeDirty() 
-      }
-    });
-
-    // run the code (debounced) on every change to the editor 
-    editor.on("change", function(){
-      debouncedRunCode()
-      setTimeout(function() {WoofJSLint()}, 1000); 
-    });
-    runCode()
-    
-    // focus on the preview when refreshed
-     function focusPreview() {
-       document.getElementById('preview').focus();
-     };
-
-
-    editor.on('inputRead', function(cm, e){
-      if (e.text.length == 1 && e.text[0].length == 1 &&  /^[a-zA-Z\.]/.test(e.text[0])) {
-        // constantly show autocomplete suggestions
-        CodeMirror.commands.autocomplete(editor);
-      }
-    });
-
-    // warns the user when they try to close the page without saving
-    window.onbeforeunload = function(e) {		
-       if (app.status == "DIRTY") {		
-         var dialogText = 'Make sure to copy and paste your work somewhere safe.';		
-         e.returnValue = dialogText;		
-         return dialogText; 		
-       }		
-    };
-    
-    
-    
-    function tryRunningCode() {
-      app.code = editor.getValue()
-      app.error = undefined
-    
-      try {
-        var result = Babel.transform(editor.getValue(), {
-          presets: [['es2015', {'modules': false}]], // modules: false to remove strict mode
-          retainLines: true
-        })
-        var code = result.code
-        try {
-          document.getElementById('preview').contentWindow.addEventListener("mousemove", function(event) {
-            app.mouseX = Math.round(document.getElementById('preview').contentWindow.mouseX)
-            if (app.mouseX >= Math.round(document.getElementById('preview').contentWindow.maxX - 2)) {
-              app.mouseX += " (maxX)"
-            }
-            if (app.mouseX <= Math.round(document.getElementById('preview').contentWindow.minX + 1)) {
-              app.mouseX += " (minX)"
-            }
-            
-            app.mouseY = Math.round(document.getElementById('preview').contentWindow.mouseY)
-            if (app.mouseY >= Math.round(document.getElementById('preview').contentWindow.maxY - 1)) {
-              app.mouseY += " (maxY)"
-            }
-            if (app.mouseY <= Math.round(document.getElementById('preview').contentWindow.minY + 3)) {
-              app.mouseY += " (minY)"
-            }
-          })
-          document.getElementById('preview').contentWindow.addEventListener("error", function(event) {
-            var error = event.error
-            app.seenError = false
-            if (error.type == "ImageLoadError") {
-              app.error = {message: "There is a problem with your image URL: " + error.url, lineno: code.substring(0, code.indexOf(error.url)).split('\n').length}
-            } else {
-              app.error = event
-            }
-            
-          });
-          var script = document.createElement("script");
-          script.type = "text/javascript";
-          script.crossorigin = "anonymous"
-          script.text = code
-          document.getElementById('preview').contentDocument.body.appendChild(script)
-        }
-        catch (e) {
-          app.seenError = false
-          app.error = e;
-        }
-      }
-      catch (e) {
-        app.seenError = false
-        app.error = e
-      }
-    }
-    
-    function runCode() {
-        
-        document.getElementById("preview").remove();
-        var iframe = document.createElement("iframe");
-        iframe.id = "preview";
-        document.getElementById("output").appendChild(iframe);
-        
-        setTimeout(function() {
-        
-            // add doctype to iframe
-            iframe.contentWindow.document.open();
-            iframe.contentWindow.document.write('<!DOCTYPE html>');
-            iframe.contentWindow.document.close();
-            
-            // add a base tag to the page so it knows where to pull relative image urls
-            var base = iframe.contentWindow.document.createElement("base");
-            base.href = document.baseURI
-            iframe.contentWindow.document.body.appendChild(base);
-          
-            // then we create a script tag with the woof code and add it to the page
-            var script = iframe.contentWindow.document.createElement("script");
-            script.type = "text/javascript";
-            script.src = "./woof.js";
-            iframe.contentWindow.document.body.appendChild(script);
-            
-            script.onload = function() {
-                // when the woof.js library loads, run the user's code
-                var evt = document.createEvent('Event');  
-                evt.initEvent('load', false, false);  
-                iframe.contentWindow.dispatchEvent(evt);
-                tryRunningCode();
-            }
-        }, 10)
-    }
-    
-    function debounce(func, wait, immediate) {
-    	var timeout;
-    	return function() {
-    		var context = this, args = arguments;
-    		var later = function() {
-    			timeout = null;
-    			if (!immediate) func.apply(context, args);
-    		};
-    		var callNow = immediate && !timeout;
-    		clearTimeout(timeout);
-    		timeout = setTimeout(later, wait);
-    		if (callNow) func.apply(context, args);
-    	};
-    };
-    // helper function to prevent runCode from running too often
-    var debouncedRunCode = debounce(runCode, 1000, false)
-
-  </script>
+  <script type="module" src="./team.js"></script>
   <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
@@ -840,7 +330,5 @@
     ga('send', 'pageview');
   
   </script>
-
-
 </body>
 </html>
diff --git a/team.js b/team.js
new file mode 100644
index 0000000..94626b2
--- /dev/null
+++ b/team.js
@@ -0,0 +1,478 @@
+import * as Utils from "./utils.js"
+
+var getID = function() {
+  // returns the name of a project, not inlcuding the current revision
+  return window.location.hash.substring(1, window.location.hash.length).split("/")[0];
+}
+var getIDWithRevision = function() {
+  // returns the name of a project, not inlcuding the current revision
+  return window.location.hash.substring(1, window.location.hash.length);
+}
+var getCurrentRevisionCode = function(revisions) {
+  // returns the code that corresponds to the current project and revision
+  var revision = parseInt(window.location.hash.substring(1, window.location.hash.length).split("/")[1])
+  
+  var keys = Object.keys(revisions)
+  if (keys.length > 1){
+    keys = keys.slice(1, keys.length)
+  }
+  
+  
+  var key
+  if (!isNaN(revision) && (revision !== 0 && revision !== -1 * keys.length) && Math.abs(revision) < keys.length + 1){
+    if (revision < 0){
+      revision = keys.length + revision // -1 gives the previous revision
+    }
+    key = keys[revision - 1]
+  } else {
+    key = keys[keys.length - 1]
+  }
+  return revisions[key].code
+}
+var currentHash = window.location.hash
+
+var app = new Vue({
+  el: '#page',
+  data: {
+    code: "",
+    status: "NEW",
+    error: undefined,
+    projects: [],
+    codePane: true,
+    outputPane: true,
+    projectsPane: false,
+    docsPane: true,
+    projectbar: true,
+    previewbar: false,
+    docsbar:false,
+    codebar:false,
+    mouseX: 0,
+    mouseY: 0,
+    seenError: true,
+  },
+  computed: {
+    styles : function() { return {
+       // styles for the "Save" icon
+      'glyphicon-floppy-remove': this.status == 'DIRTY', 
+      'glyphicon-floppy-saved': this.status == 'SAVED' || this.status == "NEW"
+    } },
+    canClean: function(){
+      // whether or not the code can be "cleaned" or if its already pristine
+      return !this.error && this.code != js_beautify(this.code, {space_after_anon_function: true, indent_size: 2, indent_with_tabs: false })
+    },
+  },
+  methods: {
+    getID: getID,
+    showError: function(){
+      this.seenError = true
+      if (this.error.message.includes('Uncaught ReferenceError: sprite1 is not defined')) {
+        var spriteName = prompt("Error on line " + this.error.lineno  + "\n\n" + "You need to rename 'sprite1'. What would you like to name it?", "unicornSprite");    
+        if (spriteName !== null) {   
+            editor.setValue(editor.getValue().replace(/sprite1/g, spriteName));
+        }  
+      }
+      else if (this.error.message.includes("Uncaught ReferenceError")) {
+        var message = this.error.message.replace("Uncaught ReferenceError: ", "")
+        alert("Error on line " + this.error.lineno  + "\n\n" + message + ". Check the spelling of your variable definitions.")
+      }
+      else {
+         alert("Error on line " + this.error.lineno  + "\n\n" + this.error.message)
+      }
+    },
+    cleanAll: function(){
+      var beautiful = js_beautify(editor.getValue(), {space_after_anon_function: true, indent_size: 2, indent_with_tabs: false })
+      editor.setValue(beautiful)
+    },
+  },
+  watch: {
+    error: function(newError) {
+      if (newError && newError.lineno) {
+        CodeMirror.commands.markGutter(editor, "error", newError.lineno, newError.message)
+      }
+    }
+  }
+})
+var myCode = false
+scratch.src = scratch.src // the documentation sometimes doesn't load unless you remind it to here, strange VueJS bug
+projectsIframe.src = projectsIframe.src // ditto for the project's iframe
+
+var config = {
+  apiKey: "AIzaSyBYHv7dCiD0bWiHRlcp4VIZCIqzoMnB4yY",
+  authDomain: "woofjs-d1b27.firebaseapp.com",
+  databaseURL: "https://woofjs-d1b27.firebaseio.com",
+  storageBucket: "woofjs-d1b27.appspot.com",
+  messagingSenderId: "397293370524"
+};
+firebase.initializeApp(config);
+  
+function handleLogin(userName, uid) {
+  $('#loggedin-name').html(userName + ' <span class="caret"></span>')
+  $('#login-projects').attr("href", "./user.html#" + uid )
+  $('#logggedin').removeClass("hide")
+  $('#login').addClass('hide')
+}
+
+function handleLogout() {
+  $('#logggedin').addClass("hide")
+  $('#login').removeClass("hide")
+  myCode = false
+}
+
+var authChanged = false
+firebase.auth().onAuthStateChanged(function(user) {
+  if (!authChanged){
+    authChanged = true
+  }
+  
+  if (user){
+    ga('set', 'userId', user.uid); 
+    firepad.setUserId(user.uid)
+    
+    handleLogin(user.displayName, user.uid)
+    
+    firebase.database().ref('/user/' + user.uid).once('value').then(function(snapshot) {
+      var userVal = snapshot.val()
+      
+      // if the user is logged in, and we don't have their name/email in our database, save it now
+      if (!userVal) {
+        firebase.database().ref("/user/" + user.uid).set({
+          displayName: user.displayName,
+          email: user.email,
+          createdDate: firebase.database.ServerValue.TIMESTAMP
+        })
+      }
+     
+      if (userVal && userVal.team && Object.values(userVal.team).includes(getID())) {
+        // do nothing because we've already added this project to the user
+      } else {
+        firebase.database().ref("/user/" + user.uid + "/team/").push(getID())
+      }
+    })
+    
+    // this puts the user's most recent project under their name
+    firebase.database().ref('/code/').orderByChild("--uid").equalTo(user.uid).once('value').then(function(snapshot) {
+      if (snapshot.val()){
+        app.projects = []
+        for (var key in snapshot.val()) {
+          var project = snapshot.val()[key]
+          var versions = Object.keys(project)
+          var t = project[versions[versions.length-1]].time
+          app.projects.push({key: key, time: t, code: project.code})
+        }
+      }
+      // sort the proejcts by most recently touched
+      app.projects.sort(function(a,b) {
+        if (a.time < b.time)
+          return 1;
+        if (a.time > b.time)
+          return -1;
+        return 0;
+      })
+    });
+  } else {
+    handleLogout()
+  }
+});
+
+var makeClean = function() {
+  app.status = "SAVED"
+  currentHash = window.location.hash
+}
+
+var makeDirty = function() {
+  app.status = "DIRTY"
+}
+
+var popout = function() {
+  if (app.status != "DIRTY"){
+    window.open("./team-full.html#" + getIDWithRevision(), "_blank")
+  } else {
+    alert("You must save your project to open it in a new window.")
+  }
+}
+
+// we add the project name to the hash on save
+// this code prevents that from triggering a page reload
+window.addEventListener("hashchange", function() {
+  if (currentHash != window.location.hash) {
+    window.location.reload()
+  }
+})
+
+var save = function(){
+  if (app.status == "SAVED") { return }
+  
+  if (editor.getValue().startsWith("// Loading...")){
+    return // don't allow students to save projects that haven't loaded
+  }
+  
+  var name
+  if (myCode) {
+    name = getID()
+  } else {
+    name = window.prompt('Choose a name for your project. You cannot include ".", "#", "$", "[", "]", or spaces in the name of your project.', "my-project") || '';
+  }
+  if (name.includes('.') || name.includes('/') || name.includes('$') || name.includes("#") || name.includes("[") || name.includes("]") || name.includes(" ")){
+    alert('You cannot include ".", "#", "$", "[", "]", or spaces in the name of your project. Try to save again.')
+  } else if (name) { 
+    firebase.database().ref('/code/' + name).limitToLast(1).once('value').then(function(snapshot) {
+      if (snapshot.val()){
+        if (firebase.auth().currentUser && snapshot.val()[Object.keys(snapshot.val())[0]].uid == firebase.auth().currentUser.uid) {
+            // if the project exists and you own it, push the new code as a revision
+            firebase.database().ref().child("/code/" + name).push({
+              code: editor.getValue(), 
+              time: firebase.database.ServerValue.TIMESTAMP, 
+              uid: firebase.auth().currentUser && firebase.auth().currentUser.uid
+            }).then(function(){
+              window.location.hash = name
+              makeClean()
+            }).catch(function(error){
+              alert("Unable to save project: " + error)
+            });
+        } else {
+          alert("That project name has already been taken. Try another one.")
+        }
+      } else {
+        // else create a new project and push this code as the first revision
+        firebase.database().ref().child("/code/" + name + "/--uid").set(firebase.auth().currentUser && firebase.auth().currentUser.uid)
+        firebase.database().ref().child("/code/" + name).push({
+          code: editor.getValue(), 
+          time: firebase.database.ServerValue.TIMESTAMP, 
+          uid: firebase.auth().currentUser && firebase.auth().currentUser.uid
+        }).then(function(){
+          window.location.hash = name
+          myCode = firebase.auth().currentUser
+          makeClean()
+        }).catch(function(error){
+          alert("Unable to save project: " + error)
+        });
+      }
+    });
+  }
+};
+
+// keyboard shortcuts
+var mac = CodeMirror.keyMap["default"] == CodeMirror.keyMap.macDefault;
+var ctrl = mac ? "Cmd-" : "Ctrl-";
+var keymap = {}
+keymap[ctrl + "B"] = function(cm) {
+  var beautiful = js_beautify(cm.getSelection(), {space_after_anon_function: true, indent_size: 2, indent_with_tabs: false })
+  cm.replaceSelection(beautiful)
+}
+keymap.Tab = function(cm) {
+  var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
+  cm.replaceSelection(spaces, "end", "+input");
+}
+
+var editor = CodeMirror(document.getElementById('code'), {
+    mode:  "javascript",
+    //value: editorVal,
+    lineNumbers: true,
+    lineWrapping: false,
+    theme: "eclipse",
+    tabSize: 2,
+    indentUnit: 2,
+    indentWithTabs: false,
+    electricChars: true,
+    keyMap: "sublime",
+    autoCloseBrackets: true,
+    matchBrackets: true,
+    autofocus: true,
+    smartIndent: true,
+    foldGutter: true,
+    gutters: ["CodeMirror-lint-markers", "CodeMirror-foldgutter"],
+    extraKeys: keymap,
+    lint: {
+      delay: 800, 
+      options: {
+        "esnext": true,
+        "asi": true
+      }
+    },
+});
+
+// It's probably a bad idea to have a super large data structure like this in JS
+// One bad side effect is that it turns off syntax highlighting in the code below it
+const adjs = ["adorable","beautiful","clean","drab","elegant","fancy","glamorous","handsome","long","magnificent","old-fashioned","plain","quaint","sparkling","ugliest","unsightly","wide-eyed","red","orange","yellow","green","blue","purple","gray","black","white","alive","better","careful","clever","dead","easy","famous","gifted","helpful","important","inexpensive","mushy","odd","powerful","rich","shy","tender","uninterested","vast","wrong","angry","clumsy","defeated","embarrassed","fierce","grumpy","helpless","jealous","lazy","mysterious","nervous","obnoxious","panicky","repulsive","scary","thoughtless","uptight","worried","agreeable","brave","calm","delightful","eager","faithful","gentle","happy","jolly","kind","lively","nice","obedient","proud","relieved","silly","thankful","victorious","witty","zealous","broad","chubby","crooked","curved","deep","flat","high","hollow","low","narrow","round","shallow","skinny","square","steep","straight","wide","big","colossal","fat","gigantic","great","huge","immense","large","little","mammoth","massive","miniature","petite","puny","scrawny","short","small","tall","teeny","teeny-tiny","tiny","cooing","deafening","faint","hissing","loud","melodic","noisy","purring","quiet","raspy","screeching","thundering","voiceless","whispering","ancient","brief","early","fast","late","long","modern","old","old-fashioned","quick","rapid","short","slow","swift","young","bitter","delicious","fresh","greasy","juicy","hot","icy","loose","melted","nutritious","prickly","rainy","rotten","salty","sticky","strong","sweet","tart","tasteless","uneven","weak","wet","wooden","yummy","boiling","breeze","broken","bumpy","chilly","cold","cool","creepy","crooked","cuddly","curly","damaged","damp","dirty","dry","dusty","filthy","flaky","fluffy","freezing","hot","warm","wet","abundant","empty","few","full","heavy","light","many","numerous","sparse","substantial"]
+const  nouns = ["aardvark","air","airplane","airport","alarm","alligator","almond","alphabet","ambulance","animal","ankle","ant","anteater","antelope","ape","apple","arm","armchair","arrow","asparagus","baby","back","backbone","bacon","badge","badger","bag","bagpipe","bait","bakery","ball","balloon","bamboo","banana","band","bandana","banjo","bank","baseball","basket","basketball","bat","bath","bathroom","bathtub","battery","battle","bay","beach","bead","bean","bear","beard","beast","beat","beauty","beaver","bed","bedroom","bee","beef","beetle","bell","belt","bench","beret","berry","bicycle","bike","bird","birthday","bite","blade","blanket","blob","block","blood","blouse","boar","board","bus","bush","butter","button","cabbage","cactus","cafe","cake","calculator","calendar","calf","camel","camera","camp","candle","canoe","canvas","cap","captain","car","card","cardboard","cardigan","carpenter","carrot","carton","cartoon","cat","caterpillar","cathedral","cattle","cauliflower","cave","CD","ceiling","celery","cello","cement","cemetery","cereal","boat","bobcat","body","bone","bonsai","book","bookcase","booklet","boot","border","bottle","bottom","boundary","bow","bowling","box","boy","brain","brake","branch","brass","bread","break","breakfast","breath","brick","bridge","broccoli","brochure","brother","brush","bubble","bucket","bug","building","bulb","bull","bulldozer","bun","butter","chain","chair","chalk","channel","character","cheek","cheese","cheetah","cherry","chess","chest","chick","chicken","children","chimpanzee","chin","chip","chive","chocolate","church","cicada","cinema","circle","city","clam","clarinet","click","clip","clock","closet","cloth","cloud","coach","coal","coast","coat","cobweb","cockroach","cocoa","coffee","coil","coin","coke","collar","college","colt","comb","comics","comma","computer","cone","copy","corn","cotton","couch","cougar","country","course","court","cousin","cow","crab","crack","cracker","crate","crayfish","crayon","cream","creek","cricket","crocodile","crop","crow","crowd","crown","crumb","cucumber","cup","cupboard","curtain","curve","cushion","cyclone","dad","daffodil","daisy","dance","daughter","deer","denim","dentist","desert","desk","dessert","detective","dew","diamond","dictionary","dinghy","dinosaur","dirt","dish","dock","dog","doll","dollar","door","dragon","dragonfly","drain","drawer","drawing","dress","dresser","drill","drink","drum","dryer","duck","duckling","dungeon","dust","eagle","ear","earth","earthquake","eel","egg","eggplant","elbow","elephant","energy","engine","equipment","eye","eyebrow","face","fact","factory","fairies","family","fan","fang","farm","fat","fear","feast","feather","feet","ferryboat","field","finger","fire","fireplace","fish","fist","flag","flame","flood","floor","flower","flute","fly","foam","fog","food","foot","football","forehead","forest","fork","fountain","fox","frame","freckle","freezer","frog","frost","fruit","fuel","fur","furniture","game","garage","garden","garlic","gas","gate","gear","ghost","giraffe","girl","glass","glove","glue","goal","goat","gold","goldfish","golf","gorilla","government","grape","grass","grasshopper","grater","grease","grill","grin","group","guitar","gum","gym","gymnast","hail","hair","haircut","hall","ham","hamburger","hammer","hamster","hand","handball","handle","hardware","harmonica","harmony","hat","hawk","head","headlight","heart","heat","hedge","height","helicopter","helmet","hem","hen","hill","hip","hippopotamus","hockey","hog","hole","home","honey","hood","hook","horn","horse","hose","hospital","house","hurricane","hyena","ice","icicle","ink","insect","instrument","iron","island","jacket","jade","jaguar","jail","jam","jar","jaw","jeans","jeep","jelly","jellyfish","jet","jewel","joke","journey","judge","judo","juice","jump","jumper","kangaroo","karate","kayak","kettle","key","keyboard","kick","kiss","kitchen","kite","kitten","knee","knife","knight","knot","lace","ladybug","lake","lamb","lamp","land","lasagna","laugh","laundry","leaf","leather","leek","leg","lemonade","leopard","letter","lettuce","library","lift","light","lightning","lily","line","lion","lip","lipstick","liquid","list","litter","lizard","loaf","lobster","lock","locket","locust","look","lotion","love","lunch","lynx","macaroni","machine","magazine","magic","magician","mail","mailbox","mailman","makeup","map","marble","mark","market","mascara","mask","match","meal","meat","mechanic","medicine","memory","men","menu","message","metal","mice","middle","milk","milkshake","mint","minute","mirror","mist","mistake","mitten","Monday","money","monkey","month","moon","morning","mosquito","motorboat","motorcycle","mountain","mouse","moustache","mouth","music","mustard","nail","name","napkin","neck","needle","nest","net","news","night","noise","noodle","nose","note","notebook","number","nut","oak","oatmeal","ocean","octopus","office","oil","olive","onion","orange","orchestra","ostrich","otter","oven","owl","ox","oxygen","oyster","packet","page","pail","pain","paint","pair","pajama","pamphlet","pan","pancake","panda","pansy","panther","pants","paper","parcel","parent","park","parrot","party","pasta","paste","pastry","patch","path","pea","peace","peanut","pear","pedestrian","pelican","pen","pencil","pepper","perfume","person","pest","pet","phone","piano","pickle","picture","pie","pig","pigeon","pillow","pilot","pimple","pin","pipe","pizza","plane","plant","plantation","plastic","plate","playground","plot","pocket","poison","police","policeman","pollution","pond","popcorn","poppy","porcupine","postage","postbox","pot","potato","poultry","powder","power","price","printer","prison","pumpkin","puppy","pyramid","queen","question","quicksand","quill","quilt","rabbit","radio","radish","raft","rail","railway","rain","rainbow","raincoat","rainstorm","rake","rat","ravioli","ray","recorder","rectangle","refrigerator","reindeer","relatives","restaurant","reward","rhinoceros","rice","riddle","ring","river","road","roast","rock","roll","roof","room","rooster","rose","rowboat","rubber","sack","sail","sailboat","sailor","salad","salmon","salt","sand","sandwich","sardine","sauce","sausage","saw","saxophone","scarecrow","scarf","school","scissors","scooter","scorpion","screw","screwdriver","sea","seagull","seal","seaplane","seashore","season","seat","second","seed","sentence","servant","shade","shadow","shallot","shampoo","shark","shears","sheep","sheet","shelf","shell","shield","ship","shirt","shoe","shoemaker","shop","shorts","shoulder","shovel","show","side","sidewalk","sign","signature","silk","silver","singer","sink","sister","skin","skirt","sky","sled","slippers","slope","smoke","snail","snake","sneeze","snow","snowflake","snowman","soap","soccer","sock","sofa","softball","soldier","son","song","sound","soup","soybean","space","spade","spaghetti","spark","sparrow","spear","speedboat","spider","spike","spinach","sponge","spoon","spot","sprout","spy","square","squash","squid","squirrel","stage","staircase","stamp","star","station","steam","steel","stem","step","stew","stick","stitch","stinger","stomach","stone","stool","stopsign","stopwatch","store","storm","story","stove","stranger","straw","stream","string","submarine","sugar","suit","summer","sun","sunshine","sunflower","supermarket","surfboard","surname","surprise","sushi","swallow","swamp","swan","sweater","sweatshirt","sweets","swing","switch","sword","swordfish","syrup","table","tabletop","tadpole","tail","target","tax","taxi","tea","teacher","team","teeth","television","tennis","tent","textbook","theater","thistle","thought","thread","throat","throne","thumb","thunder","thunderstorm","ticket","tie","tiger","tile","time","tire","toad","toast","toe","toilet","tomato","tongue","tooth","toothbrush","toothpaste","top","tornado","tortoise","tower","town","toy","tractor","traffic","trail","train","transport","tray","tree","triangle","trick","trip","trombone","trouble","trousers","truck","trumpet","trunk","t-shirt","tub","tuba","tugboat","tulip","tuna","tune","turkey","turnip","turtle","tv","twig","twilight","twine","umbrella","valley","van","vase","vegetable","veil","vein","vessel","vest","violin","volcano","volleyball","vulture","wagon","wall","wallaby","walnut","walrus","washer","wasp","waste","watch","watchmaker","water","wave","wax","weasel","weather","web","wedge","well","whale","wheat","wheel","wheelchair","whip","whisk","whistle","wilderness","willow","wind","wind chime","window","windscreen","wing","winter","wire","wish","wolf","woman","wood","wool","word","workshop","worm","wound","wren","wrench","wrinkles","wrist","xylophone","yacht","yak","yard"]
+const adjLength = adjs.length
+const nounLength = nouns.length
+function randomName(){
+  const randomAdj = adjs[Math.floor(Math.random()*adjLength)]
+  const randomNoun = nouns[Math.floor(Math.random()*nounLength)]
+  
+  return randomAdj + "-" + randomNoun
+}
+
+var editorVal = ""
+if (getID() == '') {
+  const name = randomName()
+  window.location.hash = name
+  makeClean() // prevents page reload
+  
+  editorVal += "// Welcome to team " + name + "!\n//\n"
+  editorVal += "// Share this link to collaborate:\n//\n"
+  editorVal += "// woofjs.com/team#" + name + "\n\n"
+  // editorVal += "// Press the Publish button to create a private project that nobody else can edit"
+  editorVal += "setBackdropURL('./docs/images/nyc.jpg')\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"
+} 
+
+var firepadRef = firebase.database().ref('/team/' + getID()); 
+var firepad = Firepad.fromCodeMirror(firepadRef, editor, {
+  defaultText: editorVal,
+});
+
+onkeydown = function(e){
+  if(e.ctrlKey && e.key == '/'){
+    e.preventDefault();
+  }
+  if((e.metaKey || e.ctrlKey) && e.keyCode == 'S'.charCodeAt(0)){
+    e.preventDefault();
+    save();
+  }
+}
+
+function WoofJSLint(){
+  if (app.error) { return }
+  const code = js_beautify(app.code, {space_after_anon_function: true, indent_size: 2, indent_with_tabs: false})
+  const regEx = /  ((\w)*\.)?(ready|onKeyDown|onKeyUp|onMouseDown|onMouseUp|onMouseMove)/g   // matches any event indented with two spaces 
+  var result;
+  while ((result = regEx.exec(code)) !== null) {
+    var lineNumber = code.substring(0, result.index).split('\n').length
+    CodeMirror.commands.markGutter(editor, "warning", lineNumber, "We reccomend moving this " + result[3] + " event outside all loops and other events.")
+  }
+}
+
+firepad.on('synced', function(isSynced) {
+  // isSynced will be false immediately after the user edits the pad,
+  // and true when their edit has been saved to Firebase.
+  if (isSynced) {
+    makeClean()
+  }
+  else {
+    makeDirty() 
+  }
+});
+
+// run the code (debounced) on every change to the editor 
+editor.on("change", function(){
+  debouncedRunCode()
+  setTimeout(function() {WoofJSLint()}, 1000); 
+});
+runCode()
+
+// focus on the preview when refreshed
+ function focusPreview() {
+   document.getElementById('preview').focus();
+ };
+
+
+editor.on('inputRead', function(cm, e){
+  if (e.text.length == 1 && e.text[0].length == 1 &&  /^[a-zA-Z\.]/.test(e.text[0])) {
+    // constantly show autocomplete suggestions
+    CodeMirror.commands.autocomplete(editor);
+  }
+});
+
+// warns the user when they try to close the page without saving
+window.onbeforeunload = function(e) {		
+   if (app.status == "DIRTY") {		
+     var dialogText = 'Make sure to copy and paste your work somewhere safe.';		
+     e.returnValue = dialogText;		
+     return dialogText; 		
+   }		
+};
+
+
+
+function tryRunningCode() {
+  app.code = editor.getValue()
+  app.error = undefined
+
+  try {
+    var result = Babel.transform(editor.getValue(), {
+      presets: [['es2015', {'modules': false}]], // modules: false to remove strict mode
+      retainLines: true
+    })
+    var code = result.code
+    try {
+      document.getElementById('preview').contentWindow.addEventListener("mousemove", function(event) {
+        app.mouseX = Math.round(document.getElementById('preview').contentWindow.mouseX)
+        if (app.mouseX >= Math.round(document.getElementById('preview').contentWindow.maxX - 2)) {
+          app.mouseX += " (maxX)"
+        }
+        if (app.mouseX <= Math.round(document.getElementById('preview').contentWindow.minX + 1)) {
+          app.mouseX += " (minX)"
+        }
+        
+        app.mouseY = Math.round(document.getElementById('preview').contentWindow.mouseY)
+        if (app.mouseY >= Math.round(document.getElementById('preview').contentWindow.maxY - 1)) {
+          app.mouseY += " (maxY)"
+        }
+        if (app.mouseY <= Math.round(document.getElementById('preview').contentWindow.minY + 3)) {
+          app.mouseY += " (minY)"
+        }
+      })
+      document.getElementById('preview').contentWindow.addEventListener("error", function(event) {
+        var error = event.error
+        app.seenError = false
+        if (error.type == "ImageLoadError") {
+          app.error = {message: "There is a problem with your image URL: " + error.url, lineno: code.substring(0, code.indexOf(error.url)).split('\n').length}
+        } else {
+          app.error = event
+        }
+        
+      });
+      var script = document.createElement("script");
+      script.type = "text/javascript";
+      script.crossorigin = "anonymous"
+      script.text = code
+      document.getElementById('preview').contentDocument.body.appendChild(script)
+    }
+    catch (e) {
+      app.seenError = false
+      app.error = e;
+    }
+  }
+  catch (e) {
+    app.seenError = false
+    app.error = e
+  }
+}
+
+function runCode() {
+    
+    document.getElementById("preview").remove();
+    var iframe = document.createElement("iframe");
+    iframe.id = "preview";
+    document.getElementById("output").appendChild(iframe);
+    
+    setTimeout(function() {
+    
+        // add doctype to iframe
+        iframe.contentWindow.document.open();
+        iframe.contentWindow.document.write('<!DOCTYPE html>');
+        iframe.contentWindow.document.close();
+        
+        // add a base tag to the page so it knows where to pull relative image urls
+        var base = iframe.contentWindow.document.createElement("base");
+        base.href = document.baseURI
+        iframe.contentWindow.document.body.appendChild(base);
+      
+        // then we create a script tag with the woof code and add it to the page
+        var script = iframe.contentWindow.document.createElement("script");
+        script.type = "text/javascript";
+        script.src = "./woof.js";
+        iframe.contentWindow.document.body.appendChild(script);
+        
+        script.onload = function() {
+            // when the woof.js library loads, run the user's code
+            var evt = document.createEvent('Event');  
+            evt.initEvent('load', false, false);  
+            iframe.contentWindow.dispatchEvent(evt);
+            tryRunningCode();
+        }
+    }, 10)
+}
+
+var debouncedRunCode = Utils.debounce(runCode, 1000, false)
\ No newline at end of file
diff --git a/user.html b/user.html
index ed9c04f..aad796c 100644
--- a/user.html
+++ b/user.html
@@ -17,7 +17,7 @@
   }
 </style>
 
-<script src="https://unpkg.com/vue@2.0.1/dist/vue.js"></script>
+<script src="https://unpkg.com/vue@2.0.1/dist/vue.min.js"></script>
 <script src="https://www.gstatic.com/firebasejs/3.4.0/firebase.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
diff --git a/utils.js b/utils.js
new file mode 100644
index 0000000..8057d99
--- /dev/null
+++ b/utils.js
@@ -0,0 +1,26 @@
+export function debounce(func, wait, immediate) {
+  var timeout;
+  return function() {
+    var context = this, args = arguments;
+    var later = function() {
+      timeout = null;
+      if (!immediate) func.apply(context, args);
+    };
+    var callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) func.apply(context, args);
+  };
+};
+
+export function getID() {
+  // returns the name of a project, not including the current revision
+  return window.location.hash.substring(1, window.location.hash.length).split("/")[0];
+}
+
+export function getIDWithRevision() {
+  // returns the name of a project, inlcuding the current revision
+  return window.location.hash.substring(1, window.location.hash.length);
+}
+
+export var currentHash =  window.location.hash
\ No newline at end of file
diff --git a/workflow.html b/workflow.html
index 1599291..ce9339a 100644
--- a/workflow.html
+++ b/workflow.html
@@ -11,7 +11,7 @@
   <meta property="og:title" content="WoofJS">
   <meta property="og:description" content="WoofJS is a Scratch-inspired Javascript library for making games.">
 
-  <script src="//load.sumome.com/" data-sumo-site-id="44245233c319d8fe9fb7ce8c7ed64db9381aa56477888a10319261f655cfffe2" async="async"></script>
+  
 
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
 
@@ -61,7 +61,7 @@
   <script src="./vendor/codemirror/jshint.min.js"></script>
   <script src="./vendor/codemirror/lint.js"></script>
   <script src="./vendor/codemirror/scrollpastend.js"></script>
-  <script src="https://unpkg.com/vue@2.0.1/dist/vue.js"></script>
+  <script src="https://unpkg.com/vue@2.0.1/dist/vue.min.js"></script>
   <script data-presets="es2015" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.14.0/babel.min.js"></script>
   <script src="https://rawcdn.githack.com/beautify-web/js-beautify/1b52eb1f90daaefa6ff0fa7736f97fbfc58093c1/js/lib/beautify.js"></script>