var AppUI;

AppUI = (function() {
  function AppUI(app1) {
    var advanced, fn, fn1, j, k, len, len1, ref, ref1, s;
    this.app = app1;
    this.sections = ["code", "sprites", "maps", "assets", "sounds", "music", "doc", "options", "publish"];
    this.menuoptions = ["home", "explore", "projects", "help", "tutorials", "about", "usersettings"];
    this.allowed_sections = {
      "code": true,
      "sprites": true,
      "maps": true,
      "doc": true,
      "options": true,
      "publish": true
    };
    ref = this.sections;
    fn = (function(_this) {
      return function(s) {
        if (document.getElementById("menuitem-" + s) != null) {
          return document.getElementById("menuitem-" + s).addEventListener("click", function(event) {
            return _this.setSection(s, true);
          });
        }
      };
    })(this);
    for (j = 0, len = ref.length; j < len; j++) {
      s = ref[j];
      fn(s);
    }
    this.warning_messages = [];
    this.updateAllowedSections();
    document.addEventListener("keydown", (function(_this) {
      return function(e) {
        if ((window.navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey) && e.keyCode === 83) {
          e.preventDefault();
          switch (_this.current_section) {
            case "code":
              return _this.app.editor.checkSave(true);
            case "sprites":
              return _this.app.sprite_editor.checkSave(true);
            case "maps":
              return _this.app.map_editor.checkSave(true);
            case "doc":
              return _this.app.doc_editor.checkSave(true);
          }
        }
      };
    })(this));
    ref1 = this.menuoptions;
    fn1 = (function(_this) {
      return function(s) {
        var e;
        e = document.getElementById("menu-" + s);
        if (e != null) {
          return e.addEventListener("click", function(event) {
            if (window.ms_standalone && s === "explore") {
              return window.open("https://microstudio.dev/explore/", "_blank");
            } else if (window.ms_standalone && s === "home") {
              return window.open("https://microstudio.dev", "_blank");
            } else {
              return _this.setMainSection(s, true);
            }
          });
        }
      };
    })(this);
    for (k = 0, len1 = ref1.length; k < len1; k++) {
      s = ref1[k];
      fn1(s);
    }
    this.setAction("logo", (function(_this) {
      return function() {
        if (window.ms_standalone) {
          return window.open("https://microstudio.dev", "_blank");
        } else {
          return _this.setMainSection("home", true);
        }
      };
    })(this));
    if (window.ms_standalone) {
      document.getElementById("menu-community").parentNode.href = "https://microstudio.dev/community/";
      document.getElementById("projectoptions-users-content").style.display = "none";
      document.getElementById("publish-box-online").style.display = "none";
      document.getElementById("usersetting-block-nickname").style.display = "none";
      document.getElementById("usersetting-block-email").style.display = "none";
      document.getElementById("usersetting-block-newsletter").style.display = "none";
      document.getElementById("usersetting-block-account-type").style.display = "none";
    }
    this.createLoginFunctions();
    advanced = document.getElementById("advanced-create-project-options-button");
    this.setAction("create-project-button", (function(_this) {
      return function() {
        _this.show("create-project-overlay");
        _this.focus("create-project-title");
        document.getElementById("createprojectoption-type").value = "app";
        document.getElementById("createprojectoption-language").value = "microscript_v1_i";
        document.getElementById("createprojectoption-graphics").value = "M1";
        document.getElementById("create-project-option-lib-matterjs").checked = false;
        document.getElementById("create-project-option-lib-cannonjs").checked = false;
        return _this.hideAdvanced();
      };
    })(this));
    this.hideAdvanced = (function(_this) {
      return function() {
        advanced.classList.remove("open");
        document.getElementById("advanced-create-project-options").style.display = "none";
        return advanced.childNodes[1].innerText = _this.app.translator.get("Advanced");
      };
    })(this);
    advanced.addEventListener("click", (function(_this) {
      return function() {
        if (advanced.classList.contains("open")) {
          return _this.hideAdvanced();
        } else {
          advanced.classList.add("open");
          document.getElementById("advanced-create-project-options").style.display = "block";
          return advanced.childNodes[1].innerText = _this.app.translator.get("Hide advanced options");
        }
      };
    })(this));
    this.setAction("import-project-button", (function(_this) {
      return function() {
        var input;
        input = document.createElement("input");
        input.type = "file";
        input.accept = "application/zip";
        input.addEventListener("change", function(event) {
          var f, files;
          files = event.target.files;
          if (files.length >= 1) {
            f = files[0];
            return _this.app.importProject(f);
          }
        });
        return input.click();
      };
    })(this));
    this.setAction("home-action-explore", (function(_this) {
      return function() {
        return _this.setMainSection("explore");
      };
    })(this));
    this.setAction("home-action-create", (function(_this) {
      return function() {
        return _this.setMainSection("projects");
      };
    })(this));
    document.getElementById("create-project-overlay").addEventListener("mousedown", (function(_this) {
      return function(event) {
        var b;
        b = document.getElementById("create-project-window").getBoundingClientRect();
        if (event.clientX < b.x || event.clientX > b.x + b.width || event.clientY < b.y || event.clientY > b.y + b.height) {
          _this.hide("create-project-overlay");
        }
        return true;
      };
    })(this));
    this.setAction("create-project-submit", (function(_this) {
      return function() {
        var libs, slug, title;
        title = _this.get("create-project-title").value;
        slug = RegexLib.slugify(title);
        if (title.length > 0 && slug.length > 0) {
          libs = [];
          if (document.getElementById("create-project-option-lib-matterjs").checked) {
            libs.push("matterjs");
          }
          if (document.getElementById("create-project-option-lib-cannonjs").checked) {
            libs.push("cannonjs");
          }
          _this.app.createProject(title, slug, {
            type: document.getElementById("createprojectoption-type").value,
            language: document.getElementById("createprojectoption-language").value,
            graphics: document.getElementById("createprojectoption-graphics").value,
            libs: libs
          });
          _this.hide("create-project-overlay");
          return _this.get("create-project-title").value = "";
        }
      };
    })(this));
    this.doc_splitbar = new SplitBar("doc-section", "horizontal");
    this.code_splitbar = new SplitBar("code-section", "horizontal");
    this.runtime_splitbar = new SplitBar("runtime-container", "vertical");
    this.runtime_splitbar.setPosition(67);
    this.sprites_splitbar = new SplitBar("sprites-section", "horizontal");
    this.sprites_splitbar.setPosition(20);
    this.maps_splitbar = new SplitBar("maps-section", "horizontal");
    this.maps_splitbar.setPosition(20);
    this.mapeditor_splitbar = new SplitBar("mapeditor-container", "horizontal");
    this.mapeditor_splitbar.setPosition(80);
    this.createSideMenuAutoScroll();
    this.setAction("backtoprojects", (function(_this) {
      return function() {
        if (_this.app.project != null) {
          return _this.app.project.savePendingChanges(function() {
            return _this.backToProjectList(true);
          });
        } else {
          return _this.backToProjectList(true);
        }
      };
    })(this));
    this.get("create_nick").addEventListener("input", (function(_this) {
      return function() {
        var value;
        value = _this.get("create_nick").value;
        if (value !== RegexLib.fixNick(value)) {
          return _this.get("create_nick").value = RegexLib.fixNick(value);
        }
      };
    })(this));
    this.startSaveStatus();
    this.last_activity = Date.now();
    document.addEventListener("mousemove", (function(_this) {
      return function() {
        return _this.last_activity = Date.now();
      };
    })(this));
    document.addEventListener("keydown", (function(_this) {
      return function() {
        return _this.last_activity = Date.now();
      };
    })(this));
    document.querySelector("#projects-search input").addEventListener("input", (function(_this) {
      return function() {
        var l, len2, len3, list, m, ok, p, results, results1, search;
        search = document.querySelector("#projects-search input").value.toLowerCase();
        list = document.getElementById("project-list").childNodes;
        if (search.trim().length > 0) {
          results = [];
          for (l = 0, len2 = list.length; l < len2; l++) {
            p = list[l];
            if (p.dataset.title == null) {
              continue;
            }
            ok = p.dataset.title.toLowerCase().indexOf(search) >= 0;
            ok |= p.dataset.description.toLowerCase().indexOf(search) >= 0;
            ok |= p.dataset.tags.toLowerCase().indexOf(search) >= 0;
            if (ok) {
              results.push(p.style.display = "inline-block");
            } else {
              results.push(p.style.display = "none");
            }
          }
          return results;
        } else {
          results1 = [];
          for (m = 0, len3 = list.length; m < len3; m++) {
            p = list[m];
            results1.push(p.style.display = "inline-block");
          }
          return results1;
        }
      };
    })(this));
    document.querySelector("#home-section").addEventListener("scroll", (function(_this) {
      return function() {
        var scroll;
        scroll = Math.min(60, document.querySelector("#home-section").scrollTop);
        return document.querySelector("#home-header-background").style.height = scroll + "px";
      };
    })(this));
    document.getElementById("myprojects").addEventListener("dragover", (function(_this) {
      return function(event) {
        return event.preventDefault();
      };
    })(this));
    document.getElementById("myprojects").addEventListener("drop", (function(_this) {
      return function(event) {
        event.preventDefault();
        if (event.dataTransfer.items && (event.dataTransfer.items[0] != null)) {
          return _this.app.importProject(event.dataTransfer.items[0].getAsFile());
        }
      };
    })(this));
    setInterval(((function(_this) {
      return function() {
        return _this.checkActivity();
      };
    })(this)), 10000);
    this.reboot_date = 1622710800000;
    this.checkRebootMessage();
  }

  AppUI.prototype.checkRebootMessage = function() {
    var div, funk;
    if (this.reboot_date && Date.now() < this.reboot_date + 1000 * 60 * 2) {
      document.querySelector(".main-container").style.top = "100px";
      div = document.createElement("div");
      div.classList.add("meta-message");
      funk = (function(_this) {
        return function() {
          var hours, minutes;
          minutes = Math.max(0, _this.reboot_date - Date.now()) / 60000;
          if (minutes >= 120) {
            hours = Math.floor(minutes / 60);
            return div.innerHTML = "<i class='fas fa-info-circle'></i> " + _this.app.translator.get("microStudio is getting a new server! Migration planned on %DATE% at %TIME%. Downtime will last 1 hour.").replace("%DATE%", new Date(_this.reboot_date).toLocaleDateString()).replace("%TIME%", new Date(_this.reboot_date).toLocaleTimeString());
          } else if (minutes >= 2) {
            minutes = Math.floor(minutes);
            return div.innerHTML = "<i class='fas fa-exclamation-circle'></i> " + _this.app.translator.get("Downtime will start in %MINUTES% minutes").replace("%MINUTES%", minutes);
          } else {
            return div.innerHTML = "<i class='fas fa-exclamation-circle'></i> " + _this.app.translator.get("Downtime will start immediately");
          }
        };
      })(this);
      funk();
      setInterval(((function(_this) {
        return function() {
          return funk();
        };
      })(this)), 30000);
      return document.body.appendChild(div);
    }
  };

  AppUI.prototype.addWarningMessage = function(text, icon, id, dismissable) {
    var close, div, span;
    if (icon == null) {
      icon = "fa-exclamation-circle";
    }
    if (dismissable && (id != null)) {
      if (localStorage.getItem(id)) {
        return;
      }
    }
    div = document.createElement("div");
    div.classList.add("meta-message");
    span = document.createElement("span");
    span.innerHTML = "<i class='fas " + icon + "'></i> " + text;
    if (dismissable) {
      close = document.createElement("i");
      close.classList.add("fa");
      close.classList.add("fa-times");
      close.addEventListener("click", (function(_this) {
        return function() {
          _this.removeWarningMessage(div);
          return localStorage.setItem(id, true);
        };
      })(this));
      div.appendChild(close);
    }
    div.appendChild(span);
    this.warning_messages.push(div);
    document.querySelector(".main-container").style.top = (60 + 40 * this.warning_messages.length) + "px";
    document.body.appendChild(div);
    return this.layoutWarningMessages();
  };

  AppUI.prototype.layoutWarningMessages = function() {
    var i, j, len, ref, results, w;
    ref = this.warning_messages;
    results = [];
    for (i = j = 0, len = ref.length; j < len; i = ++j) {
      w = ref[i];
      results.push(w.style.top = (60 + i * 40) + "px");
    }
    return results;
  };

  AppUI.prototype.removeWarningMessage = function(div) {
    var index;
    if (document.body.contains(div)) {
      document.body.removeChild(div);
      index = this.warning_messages.indexOf(div);
      if (index >= 0) {
        this.warning_messages.splice(index, 1);
        document.querySelector(".main-container").style.top = (60 + 40 * this.warning_messages.length) + "px";
        return this.layoutWarningMessages();
      }
    }
  };

  AppUI.prototype.checkActivity = function() {
    var t;
    t = Date.now() - this.last_activity;
    if (this.app.project != null) {
      if (t > 60 * 60 * 1000) {
        return this.backToProjectList(true);
      } else {
        return this.app.client.sendRequest({
          name: "ping"
        });
      }
    }
  };

  AppUI.prototype.backToProjectList = function(useraction) {
    this.hide("projectview");
    this.show("myprojects");
    this.app.runwindow.projectClosed();
    this.app.project = null;
    this.project = null;
    this.app.updateProjectList();
    if (useraction) {
      return this.app.app_state.pushState("projects", "/projects/");
    }
  };

  AppUI.prototype.setSection = function(section, useraction) {
    var fn, j, len, ref, s;
    this.current_section = section;
    ref = this.sections;
    fn = (function(_this) {
      return function(s) {
        var element, menuitem;
        element = document.getElementById(s + "-section");
        menuitem = document.getElementById("menuitem-" + s);
        if ((element == null) || (menuitem == null)) {
          return;
        }
        if (s === section) {
          element.style.display = "block";
          menuitem.classList.add("selected");
        } else {
          element.style.display = "none";
          menuitem.classList.remove("selected");
        }
      };
    })(this);
    for (j = 0, len = ref.length; j < len; j++) {
      s = ref[j];
      fn(s);
    }
    if (section === "sprites") {
      this.app.sprite_editor.spriteview.windowResized();
    }
    if (section === "code") {
      this.code_splitbar.update();
      this.runtime_splitbar.update();
      this.app.runwindow.windowResized();
      this.app.editor.editor.resize();
    }
    if (section === "sprites") {
      this.sprites_splitbar.update();
      if (this.sprites_splitbar.position / 100 * this.sprites_splitbar.total_width < 64) {
        this.sprites_splitbar.setPosition(100 * 150 / this.sprites_splitbar.total_width);
      } else if (this.sprites_splitbar.position > 90) {
        this.sprites_splitbar.setPosition(50);
      }
    }
    if (section === "maps") {
      if (this.mapeditor_splitbar.position > 90) {
        this.mapeditor_splitbar.setPosition(80);
      }
      if (this.maps_splitbar.position / 100 * this.maps_splitbar.total_width < 90) {
        this.maps_splitbar.setPosition(100 * 210 / this.maps_splitbar.total_width);
      } else if (this.maps_splitbar.position > 90) {
        this.maps_splitbar.setPosition(50);
      }
      this.maps_splitbar.update();
      this.mapeditor_splitbar.update();
    }
    if (section === "doc") {
      this.doc_splitbar.update();
      this.app.doc_editor.editor.resize();
      this.app.doc_editor.checkTutorial();
    }
    if (section === "sounds") {
      this.app.sound_editor.update();
    }
    if (section === "music") {
      this.app.music_editor.update();
    }
    if (section === "assets") {
      this.app.assets_manager.update();
    }
    if (section === "options") {
      this.app.options.update();
    }
    app.editor.editor.setReadOnly(section !== "code");
    app.doc_editor.editor.setReadOnly(section !== "doc");
    if (useraction && (this.app.project != null)) {
      this.app.app_state.pushState("project." + this.app.project.slug + "." + section, "/projects/" + this.app.project.slug + "/" + section + "/");
    }
    return this.app.runwindow.hideAll();
  };

  AppUI.prototype.accountRequired = function(callback) {
    this.logged_callback = callback;
    this.setDisplay("login-overlay", "block");
    this.hide("login-panel");
    this.hide("create-account-panel");
    this.hide("forgot-password-panel");
    return this.show("guest-panel");
  };

  AppUI.prototype.setMainSection = function(section, useraction) {
    var fn, j, len, name, p, ref, s;
    if (useraction == null) {
      useraction = false;
    }
    if (section === "projects" && (this.app.user == null)) {
      this.accountRequired();
      return;
    }
    if (useraction) {
      if (section === "home") {
        this.app.app_state.pushState("home", this.app.translator.lang === "fr" ? "/fr" : "/");
      } else if (section === "projects" && (this.project != null) && (this.current_section != null)) {
        this.app.app_state.pushState("project." + this.project.slug + "." + this.current_section, "/projects/" + this.project.slug + "/" + this.current_section + "/");
      } else if (section === "explore" && this.app.explore.project) {
        p = this.app.explore.project;
        this.app.app_state.pushState("project_details", "/i/" + p.owner + "/" + p.slug + "/", {
          project: p
        });
      } else {
        name = {
          "help": "documentation"
        }[section] || section;
        this.app.app_state.pushState(name, "/" + name + "/");
      }
    }
    ref = this.menuoptions;
    fn = (function(_this) {
      return function(s) {
        var element, menuitem;
        element = document.getElementById(s + "-section");
        menuitem = document.getElementById("menu-" + s);
        if (s === section) {
          element.style.display = "block";
          if (menuitem != null) {
            return menuitem.classList.add("selected");
          }
        } else {
          element.style.display = "none";
          if (menuitem != null) {
            return menuitem.classList.remove("selected");
          }
        }
      };
    })(this);
    for (j = 0, len = ref.length; j < len; j++) {
      s = ref[j];
      fn(s);
    }
    if (section === "projects" && (this.app.project == null)) {
      this.hide("projectview");
      this.show("myprojects");
    }
    if (section === "projects") {
      this.code_splitbar.update();
      this.runtime_splitbar.update();
      this.app.runwindow.windowResized();
    }
    if (section === "explore") {
      this.app.explore.update();
    } else {
      this.app.explore.closed();
    }
    if (section === "help") {
      this.app.documentation.updateViewPos();
    }
    if (section === "about") {
      this.app.about.setSection("about");
    }
    if (section === "tutorials") {
      this.app.tutorials.load();
    }
    this.app.runwindow.hideAll();
  };

  AppUI.prototype.setDisplay = function(element, value) {
    return document.getElementById(element).style.display = value;
  };

  AppUI.prototype.focus = function(element) {
    return document.getElementById(element).focus();
  };

  AppUI.prototype.get = function(id) {
    return document.getElementById(id);
  };

  AppUI.prototype.setAction = function(id, callback) {
    return this.get(id).addEventListener("click", (function(_this) {
      return function(event) {
        event.preventDefault();
        return callback(event);
      };
    })(this));
  };

  AppUI.prototype.show = function(element) {
    return this.setDisplay(element, "block");
  };

  AppUI.prototype.hide = function(element) {
    return this.setDisplay(element, "none");
  };

  AppUI.prototype.createLoginFunctions = function() {
    var fn, j, lang, len, ref, s1, s2, s3, s4;
    s1 = document.getElementById("switch_to_create_account");
    s2 = document.getElementById("switch_to_log_in");
    s3 = document.getElementById("switch_from_forgot_to_login");
    s4 = document.getElementById("forgot-password-link");
    s1.addEventListener("click", (function(_this) {
      return function() {
        _this.setDisplay("create-account-panel", "block");
        return document.getElementById("login-panel").style.display = "none";
      };
    })(this));
    s2.addEventListener("click", (function(_this) {
      return function() {
        document.getElementById("create-account-panel").style.display = "none";
        return document.getElementById("login-panel").style.display = "block";
      };
    })(this));
    s3.addEventListener("click", (function(_this) {
      return function() {
        document.getElementById("forgot-password-panel").style.display = "none";
        return document.getElementById("login-panel").style.display = "block";
      };
    })(this));
    s4.addEventListener("click", (function(_this) {
      return function() {
        document.getElementById("forgot-password-panel").style.display = "block";
        return document.getElementById("login-panel").style.display = "none";
      };
    })(this));
    document.getElementById("login-window").addEventListener("click", (function(_this) {
      return function(event) {
        return event.stopPropagation();
      };
    })(this));
    document.getElementById("login-overlay").addEventListener("mousedown", (function(_this) {
      return function(event) {
        return document.getElementById("login-overlay").style.display = "none";
      };
    })(this));
    document.getElementById("login-window").addEventListener("mousedown", (function(_this) {
      return function(event) {
        return event.stopPropagation();
      };
    })(this));
    this.setAction("login-button", (function(_this) {
      return function() {
        return _this.showLoginPanel();
      };
    })(this));
    this.setAction("guest-action-login", (function(_this) {
      return function() {
        return _this.showLoginPanel();
      };
    })(this));
    this.setAction("guest-action-create", (function(_this) {
      return function() {
        return _this.showCreateAccountPanel();
      };
    })(this));
    this.setAction("create-account-button", (function(_this) {
      return function() {
        return _this.showCreateAccountPanel();
      };
    })(this));
    this.setAction("create-account-toggle-terms", (function(_this) {
      return function() {
        return _this.toggleTerms();
      };
    })(this));
    this.setAction("guest-action-guest", (function(_this) {
      return function() {
        _this.app.createGuest();
        return document.getElementById("login-overlay").style.display = "none";
      };
    })(this));
    document.querySelector(".username").addEventListener("mouseup", (function(_this) {
      return function(event) {
        return event.stopPropagation();
      };
    })(this));
    document.querySelector(".username").addEventListener("click", (function(_this) {
      return function(event) {
        var c, e, j, len, num, ref;
        e = document.querySelector(".usermenu");
        if (window.ms_standalone) {
          e.classList.add("standalone");
          e.classList.remove("regular");
        } else if (_this.app.user.flags.guest || (_this.app.user.email == null)) {
          e.classList.add("guest");
          e.classList.remove("regular");
        } else {
          e.classList.add("regular");
          e.classList.remove("guest");
        }
        if (e.style.height === "0px") {
          num = 0;
          ref = e.childNodes;
          for (j = 0, len = ref.length; j < len; j++) {
            c = ref[j];
            if (c.offsetParent != null) {
              num += 1;
            }
          }
          e.style.height = (42 * num) + "px";
          if (!_this.usermenuclose) {
            return _this.usermenuclose = document.body.addEventListener("mouseup", function(event) {
              return e.style.height = "0px";
            });
          }
        } else {
          return e.style.height = "0px";
        }
      };
    })(this));
    document.querySelector(".usermenu .logout").addEventListener("click", (function(_this) {
      return function(event) {
        return _this.app.disconnect();
      };
    })(this));
    document.querySelector(".usermenu .settings").addEventListener("click", (function(_this) {
      return function(event) {
        return _this.app.openUserSettings();
      };
    })(this));
    document.querySelector(".usermenu .profile").addEventListener("click", (function(_this) {
      return function(event) {
        return _this.app.openUserProfile();
      };
    })(this));
    document.querySelector(".usermenu .progress").addEventListener("click", (function(_this) {
      return function(event) {
        return _this.app.openUserProgress();
      };
    })(this));
    document.querySelector("#header-progress-summary").addEventListener("click", (function(_this) {
      return function(event) {
        return _this.app.openUserProgress();
      };
    })(this));
    document.querySelector(".usermenu .create-account").addEventListener("click", (function(_this) {
      return function(event) {
        return _this.showCreateAccountPanel();
      };
    })(this));
    document.querySelector(".usermenu .discard-account").addEventListener("click", (function(_this) {
      return function(event) {
        return _this.app.disconnect();
      };
    })(this));
    document.querySelector("#language-setting").addEventListener("mouseup", (function(_this) {
      return function(event) {
        return event.stopPropagation();
      };
    })(this));
    document.querySelector("#language-setting").addEventListener("click", (function(_this) {
      return function(event) {
        var e;
        e = document.querySelector("#language-menu");
        if (!e.classList.contains("language-menu-open")) {
          e.classList.add("language-menu-open");
          document.querySelector("#language-setting").style.width = "0px";
          if (!_this.languagemenuclose) {
            return _this.languagemenuclose = document.body.addEventListener("mouseup", function(event) {
              e.classList.remove("language-menu-open");
              return document.querySelector("#language-setting").style.width = "32px";
            });
          }
        } else {
          e.classList.remove("language-menu-open");
          return document.querySelector("#language-setting").style.width = "32px";
        }
      };
    })(this));
    ref = window.ms_languages;
    fn = (function(_this) {
      return function(lang) {
        if (document.querySelector("#language-choice-" + lang) != null) {
          document.querySelector("#language-choice-" + lang).addEventListener("click", function(event) {
            return _this.setLanguage(lang);
          });
        }
        if (document.querySelector("#switch-to-" + lang) != null) {
          return document.querySelector("#switch-to-" + lang).addEventListener("click", function(event) {
            event.preventDefault();
            return _this.setLanguage(lang);
          });
        }
      };
    })(this);
    for (j = 0, len = ref.length; j < len; j++) {
      lang = ref[j];
      fn(lang);
    }
    this.setAction("login-submit", (function(_this) {
      return function() {
        return _this.app.login(_this.get("login_nick").value, _this.get("login_password").value);
      };
    })(this));
    this.setAction("create-account-submit", (function(_this) {
      return function() {
        if (!_this.get("create-account-tos").checked) {
          return alert(_this.app.translator.get("You must accept the terms of use in order to create an account."));
        }
        return _this.app.createAccount(_this.get("create_nick").value, _this.get("create_email").value, _this.get("create_password").value, _this.get("create-account-newsletter").checked);
      };
    })(this));
    return this.setAction("forgot-submit", (function(_this) {
      return function() {
        return _this.app.sendPasswordRecovery(document.getElementById("forgot_email").value);
      };
    })(this));
  };

  AppUI.prototype.showLoginPanel = function() {
    this.setDisplay("login-overlay", "block");
    this.show("login-panel");
    this.hide("create-account-panel");
    this.hide("forgot-password-panel");
    return this.hide("guest-panel");
  };

  AppUI.prototype.showCreateAccountPanel = function() {
    this.setDisplay("login-overlay", "block");
    this.hide("login-panel");
    this.show("create-account-panel");
    this.hide("forgot-password-panel");
    return this.hide("guest-panel");
  };

  AppUI.prototype.userConnected = function(nick) {
    var text;
    if (this.nick === nick) {
      return;
    }
    this.hide("login-button");
    this.hide("create-account-button");
    this.nick = nick;
    if (this.app.user.flags.guest || (this.app.user.email == null)) {
      this.get("user-nick").innerHTML = this.app.translator.get("Guest");
      document.querySelector(".username i").classList.remove("fa-user");
      document.querySelector(".username i").classList.add("fa-user-clock");
      document.querySelector(".username").classList.add("guest");
    } else {
      document.querySelector(".username i").classList.add("fa-user");
      document.querySelector(".username i").classList.remove("fa-user-clock");
      document.querySelector(".username").classList.remove("guest");
      this.get("user-nick").innerHTML = nick;
      if (this.project != null) {
        this.get("project-name").innerHTML = this.project.title;
        this.get("project-icon").src = location.origin + ("/" + this.project.owner.nick + "/" + this.project.slug + "/" + this.project.code + "/icon.png");
      }
    }
    this.get("user-nick").style.display = "inline-block";
    this.show("login-info");
    this.hide("login-overlay");
    this.updateAllowedSections();
    this.setMainSection("projects", location.pathname.length < 4);
    if (this.app.user.info.size > this.app.user.info.max_storage) {
      text = this.app.translator.get("Your account is out of space!");
      text += " " + this.app.translator.get("You are using %USED% of the %ALLOWED% you are allowed.").replace("%USED%", this.displayByteSize(this.app.user.info.size)).replace("%ALLOWED%", this.displayByteSize(this.app.user.info.max_storage));
      text += " <a href='https://microstudio.dev/community/tips/your-account-is-out-of-space/109/' target='_blank'>" + (this.app.translator.get("More info...")) + "</a>";
      return this.addWarningMessage(text, void 0, "out_of_storage", false);
    }
  };

  AppUI.prototype.updateAllowedSections = function() {
    var e, j, len, ref, s;
    if (this.app.user != null) {
      this.allowed_sections.sounds = true;
      this.allowed_sections.music = true;
    }
    ref = this.sections;
    for (j = 0, len = ref.length; j < len; j++) {
      s = ref[j];
      e = document.getElementById("menuitem-" + s);
      if (e != null) {
        if (this.allowed_sections[s]) {
          e.style.display = "block";
        } else {
          e.style.display = "none";
        }
      }
    }
  };

  AppUI.prototype.userDisconnected = function() {
    this.get("login-button").style.display = "block";
    this.get("user-nick").innerHTML = "nick";
    this.hide("login-info");
    this.nick = null;
    return this.project = null;
  };

  AppUI.prototype.showLoginButton = function() {
    this.get("login-button").style.display = "block";
    return this.get("create-account-button").style.display = "block";
  };

  AppUI.prototype.popMenu = function() {
    return document.querySelector("header").style.transform = "translateY(0%)";
  };

  AppUI.prototype.createProjectBox = function(p) {
    var buttons, clone_button, delete_button, element, export_button, export_href, icon, title;
    element = document.createElement("div");
    element.classList.add("project-box");
    element.id = "project-box-" + p.slug;
    element.dataset.title = p.title;
    element.dataset.description = p.description;
    element.dataset.tags = p.tags.join(",");
    buttons = document.createElement("div");
    buttons.classList.add("buttons");
    element.appendChild(buttons);
    export_href = "/" + p.owner.nick + "/" + p.slug + "/" + p.code + "/export/project/";
    export_button = document.createElement("div");
    export_button.classList.add("export");
    export_button.innerHTML = "<a href='" + export_href + "' download='" + p.slug + "_files.zip'><i class='fa fa-download'></i> " + (this.app.translator.get("Export")) + "</a>";
    buttons.appendChild(export_button);
    export_button.addEventListener("click", (function(_this) {
      return function(event) {
        event.stopPropagation();
        return event.stopImmediatePropagation();
      };
    })(this));
    clone_button = document.createElement("div");
    clone_button.classList.add("clone");
    clone_button.innerHTML = "<i class='fa fa-copy'></i> " + (this.app.translator.get("Clone"));
    buttons.appendChild(clone_button);
    clone_button.addEventListener("click", (function(_this) {
      return function(event) {
        event.stopPropagation();
        event.stopImmediatePropagation();
        return ConfirmDialog.confirm(_this.app.translator.get("Do you want to clone this project?"), _this.app.translator.get("Clone"), _this.app.translator.get("Cancel"), function() {
          return _this.app.cloneProject(p);
        });
      };
    })(this));
    delete_button = document.createElement("div");
    delete_button.classList.add("delete");
    if (p.owner.nick === this.app.nick) {
      delete_button.innerHTML = "<i class='fa fa-trash-alt'></i> " + (this.app.translator.get("Delete"));
    } else {
      delete_button.innerHTML = "<i class='fa fa-times'></i> " + (this.app.translator.get("Quit"));
    }
    buttons.appendChild(delete_button);
    delete_button.addEventListener("click", (function(_this) {
      return function(event) {
        var msg, ok;
        event.stopPropagation();
        event.stopImmediatePropagation();
        msg = p.owner.nick === _this.app.nick ? _this.app.translator.get("Really delete this project?") : _this.app.translator.get("Really quit this project?");
        ok = p.owner.nick === _this.app.nick ? _this.app.translator.get("Delete") : _this.app.translator.get("Quit");
        return ConfirmDialog.confirm(msg, ok, _this.app.translator.get("Cancel"), function() {
          return _this.app.deleteProject(p);
        });
      };
    })(this));
    title = document.createElement("div");
    title.classList.add("project-title");
    title.innerText = p.title;
    element.appendChild(title);
    element.appendChild(document.createElement("br"));
    icon = new Image;
    icon.src = location.origin + ("/" + p.owner.nick + "/" + p.slug + "/" + p.code + "/icon.png");
    icon.classList.add("pixelated");
    element.appendChild(icon);
    if (p.poster) {
      element.style.background = "linear-gradient(to bottom, hsla(200,20%,20%,0.6), hsla(200,20%,20%,0.9)),url(/" + p.owner.nick + "/" + p.slug + "/" + p.code + "/poster.png)";
      element.style["background-size"] = "cover";
      element.style["background-opacity"] = .5;
      icon.style.width = "104px";
      icon.style.height = "104px";
      icon.style["margin-top"] = "40px";
      icon.style["box-shadow"] = "0 0 10px 1px #000";
    }
    element.addEventListener("click", (function(_this) {
      return function() {
        return _this.app.openProject(p);
      };
    })(this));
    return element;
  };

  AppUI.prototype.updateProjects = function() {
    var c, count, div, e, element, h2, j, k, len, len1, list, p, pending, ref;
    list = this.get("project-list");
    list.innerHTML = "";
    if (this.app.projects == null) {
      return;
    }
    document.querySelector("#projects-search input").value = "";
    this.app.projects.sort(function(a, b) {
      return b.last_modified - a.last_modified;
    });
    pending = [];
    count = 0;
    ref = this.app.projects;
    for (j = 0, len = ref.length; j < len; j++) {
      p = ref[j];
      if (p.owner.nick === this.app.nick || p.accepted) {
        element = this.createProjectBox(p);
        list.appendChild(element);
        count++;
      } else {
        pending.push(p);
      }
    }
    if (count === 0) {
      h2 = document.createElement("h2");
      h2.innerHTML = this.app.translator.get("Your projects will be displayed here.") + "<br />" + this.app.translator.get("Time to create your first project!");
      list.appendChild(h2);
    }
    if (pending.length > 0) {
      div = document.createElement("div");
      div.classList.add("project-invites-list");
      div.innerHTML = "<h2><i class='fa fa-users'></i> Pending invitations</h2>";
      for (k = 0, len1 = pending.length; k < len1; k++) {
        p = pending[k];
        e = document.createElement("div");
        e.classList.add("invite");
        e.innerHTML = "<div class=\"buttons\">\n   <div class=\"accept\" title=\"Accept\" onclick=\"app.appui.acceptInvite(" + p.id + ")\"><i class=\"fa fa-check\"></i></div><div class=\"reject\" title=\"Reject\" onclick=\"app.appui.rejectInvite(" + p.id + ")\"><i class=\"fa fa-times\"></i></div>\n</div>\n<img src=\"/" + p.owner.nick + "/" + p.slug + "/" + p.code + "/icon.png\"/> " + p.title + " by " + p.owner.nick;
        div.appendChild(e);
      }
      list.insertBefore(div, list.firstChild);
    }
    if (this.logged_callback != null) {
      c = this.logged_callback;
      this.logged_callback = null;
      c();
    } else {
      this.app.app_state.projectsFetched();
    }
  };

  AppUI.prototype.acceptInvite = function(projectid) {
    var j, len, p, ref;
    ref = this.app.projects;
    for (j = 0, len = ref.length; j < len; j++) {
      p = ref[j];
      if (p.id === projectid && p.owner.nick !== this.app.nick && !p.accepted) {
        this.app.client.sendRequest({
          name: "accept_invite",
          project: projectid
        });
      }
    }
  };

  AppUI.prototype.rejectInvite = function(projectid) {
    var j, len, p, ref;
    ref = this.app.projects;
    for (j = 0, len = ref.length; j < len; j++) {
      p = ref[j];
      if (p.id === projectid && p.owner.nick !== this.app.nick) {
        this.app.client.sendRequest({
          name: "remove_project_user",
          user: this.app.nick,
          project: projectid
        });
      }
    }
  };

  AppUI.prototype.setProject = function(project, useraction) {
    this.project = project;
    if (useraction == null) {
      useraction = true;
    }
    this.get("project-name").innerHTML = this.project.title;
    this.get("project-icon").src = location.origin + ("/" + this.project.owner.nick + "/" + this.project.slug + "/" + this.project.code + "/icon.png");
    this.setSection("code", useraction);
    this.show("projectview");
    this.hide("myprojects");
    this.project.addListener(this);
    this.code_splitbar.setPosition(50);
    this.runtime_splitbar.setPosition(50);
    this.app.runwindow.terminal.start();
    this.updateActiveUsers();
    return this.updateAllowedSections();
  };

  AppUI.prototype.projectUpdate = function(change) {
    var icon, img;
    if (change === "spritelist") {
      icon = this.project.getSprite("icon");
      if (icon != null) {
        icon.addImage(this.get("project-icon"), 32);
        img = document.querySelector("#project-box-" + this.project.slug + " img");
        if (img != null) {
          return icon.addImage(img, 144);
        }
      }
    } else if (change === "title") {
      return this.get("project-name").innerHTML = this.project.title;
    } else if (change === "locks") {
      return this.updateActiveUsers();
    }
  };

  AppUI.prototype.updateActiveUsers = function() {
    var div, e, element, i, j, key, list, name, names, ref, span;
    element = document.querySelector(".projectheader #active-project-users");
    list = element.childNodes;
    names = {};
    for (i = j = ref = list.length - 1; j >= 0; i = j += -1) {
      e = list[i];
      name = e.id.split("-")[2];
      if (this.project.friends[name] == null) {
        element.removeChild(e);
      } else {
        names[name] = true;
      }
    }
    for (key in this.project.friends) {
      if (!names[key]) {
        div = document.createElement("div");
        div.style = "background:" + (this.createFriendColor(key));
        div.id = "active-user-" + key;
        i = document.createElement("i");
        i.classList.add("fa");
        i.classList.add("fa-user");
        div.appendChild(i);
        span = document.createElement("span");
        span.innerText = key;
        div.appendChild(span);
        element.appendChild(div);
      }
    }
  };

  AppUI.prototype.createFriendColor = function(friend) {
    var i, j, ref, seed;
    seed = 137;
    for (i = j = 0, ref = friend.length - 1; j <= ref; i = j += 1) {
      seed = (seed + friend.charCodeAt(i) * 31 + 97) % 360;
    }
    return "hsl(" + seed + ",50%,50%)";
  };

  AppUI.prototype.startSaveStatus = function() {
    this.savetick = 0;
    return setInterval(((function(_this) {
      return function() {
        return _this.checkSaveStatus();
      };
    })(this)), 500);
  };

  AppUI.prototype.checkSaveStatus = function() {
    var e, t;
    if (this.project == null) {
      return;
    }
    e = document.getElementById("save-status");
    switch (this.save_status) {
      case "saving":
        if (this.project.pending_changes.length === 0) {
          this.save_status = "saved";
          e.classList.remove("fa-ellipsis-h");
          e.classList.add("fa-check");
          e.style.color = "hsl(160,50%,70%)";
          e.style.opacity = 1;
          return e.style.transform = "scale(1.1)";
        } else {
          this.savetick = (this.savetick + 1) % 2;
          t = .9 + this.savetick * .2;
          return e.style.transform = "scale(" + t + ")";
        }
        break;
      case "saved":
        e.style.opacity = 0;
        e.style.transform = "scale(.9)";
        return this.save_status = "";
      default:
        if (this.project.pending_changes.length > 0) {
          this.save_status = "saving";
          e.classList.add("fa-ellipsis-h");
          e.classList.remove("fa-check");
          e.style.color = "hsl(0,50%,70%)";
          e.style.opacity = 1;
          return e.style.transform = "scale(1)";
        }
    }
  };

  AppUI.prototype.toggleTerms = function() {
    if (this.terms_shown) {
      this.terms_shown = false;
      return this.get("create-account-terms").style.display = "none";
    } else {
      this.terms_shown = true;
      this.get("create-account-terms").style.display = "block";
      return this.app.about.load("terms", (function(_this) {
        return function(text) {
          return _this.get("create-account-terms").innerHTML = DOMPurify.sanitize(marked(text));
        };
      })(this));
    }
  };

  AppUI.prototype.showNotification = function(text) {
    document.querySelector("#notification-bubble span").innerText = text;
    document.getElementById("notification-container").style.transform = "translateY(0px)";
    return setTimeout(((function(_this) {
      return function() {
        return document.getElementById("notification-container").style.transform = "translateY(-150px)";
      };
    })(this)), 5000);
  };

  AppUI.prototype.setLanguage = function(lang) {
    var date;
    if ((document.cookie != null) && document.cookie.indexOf("language=" + lang) >= 0) {
      return;
    }
    date = new Date();
    date.setTime(date.getTime() + 1000 * 3600 * 24 * 60);
    document.cookie = "language=" + lang + ";expires=" + (date.toUTCString()) + ";path=/";
    return window.location = location.origin + (lang !== "en" ? "/" + lang + "/" : "");
  };

  AppUI.prototype.displayByteSize = function(size) {
    if (size < 1000) {
      return size + " " + (this.app.translator.get("Bytes"));
    } else if (size < 10000) {
      return ((size / 1000).toFixed(1)) + " " + (this.app.translator.get("Kb"));
    } else if (size < 1000000) {
      return (Math.floor(size / 1000)) + " " + (this.app.translator.get("Kb"));
    } else if (size < 10000000) {
      return ((size / 1000000).toFixed(1)) + " " + (this.app.translator.get("Mb"));
    } else if (size < 1000000000) {
      return (Math.floor(size / 1000000)) + " " + (this.app.translator.get("Mb"));
    } else {
      return ((size / 1000000000).toFixed(1)) + " " + (this.app.translator.get("Gb"));
    }
  };

  AppUI.prototype.createUserTag = function(nick, tier, pic, picmargin) {
    var div, i, icon, span;
    if (pic == null) {
      pic = false;
    }
    div = document.createElement("a");
    div.classList.add("usertag");
    if (tier) {
      div.classList.add(tier);
    }
    i = document.createElement("i");
    i.classList.add("fa");
    i.classList.add("fa-user");
    div.appendChild(i);
    span = document.createElement("span");
    span.innerText = nick;
    div.appendChild(span);
    if (tier) {
      icon = new Image;
      icon.src = location.origin + ("/microstudio/patreon/badges/sprites/" + tier + ".png");
      icon.classList.add("pixelated");
      icon.style = "width: 32px; height: 32px;";
      icon.alt = icon.title = this.app.getTierName(tier);
      div.appendChild(icon);
    }
    div.href = "/" + nick + "/";
    div.target = "_blank";
    div.addEventListener("click", function(event) {
      return event.stopPropagation();
    });
    if (pic) {
      pic = document.createElement("img");
      pic.src = "/" + nick + ".png";
      pic.classList.add("profile");
      div.appendChild(pic);
      if (picmargin) {
        div.style["margin-left"] = picmargin + "px";
      }
    }
    return div;
  };

  AppUI.prototype.setImportProgress = function(progress) {
    document.getElementById("import-project-button").innerHTML = "<i class=\"fa fa-upload\"></i> Uploading... ";
    progress = Math.round(progress);
    return document.getElementById("import-project-button").style.background = "linear-gradient(90deg,hsl(200,50%,40%) 0%,hsl(200,50%,40%) " + progress + "%,hsl(200,20%,20%) " + progress + "%)";
  };

  AppUI.prototype.resetImportButton = function() {
    document.getElementById("import-project-button").innerHTML = "<i class=\"fa fa-upload\"></i> " + (this.app.translator.get("Import Project"));
    return document.getElementById("import-project-button").style.removeProperty("background");
  };

  AppUI.prototype.createSideMenuAutoScroll = function() {
    var inner, sidemenu;
    sidemenu = document.getElementById("sidemenu");
    inner = sidemenu.querySelector("ul");
    return sidemenu.addEventListener("mousemove", function(event) {
      var h1, h2, ratio;
      h1 = sidemenu.getBoundingClientRect().height;
      h2 = inner.getBoundingClientRect().height;
      ratio = (event.clientY - sidemenu.getBoundingClientRect().y) / h1;
      ratio = Math.max(0, Math.min(1, ratio * 1.5 - .25));
      if (h2 > h1) {
        return inner.style.top = (Math.round((h1 - h2) * ratio)) + "px";
      } else {
        return inner.style.top = "0px";
      }
    });
  };

  return AppUI;

})();
