Don't crash when certain UI elements are missing

src/js/HuesCore.js

@@ -25,8 +25,21 @@
 (function(window, document) {
 "use strict";
 
+// Gets an element by ID. If it doesn't exist, return an empty div so you
+// don't litter your code with null checks
+window.getElemWithFallback = function(elemName) {
+    let elem = document.getElementById(elemName);
+    if(!elem) {
+        console.log("Couldn't find element '" + elemName + "'. Ignoring.");
+        elem = document.createElement("div");
+    }
+    return elem;
+};
+
 function HuesCore(defaults) {
     // Yes, we do indeed have Javascript
+    this.preloadMsg = getElemWithFallback("preMain");
+    this.preloadSubMsg = getElemWithFallback("preSub");
     this.clearMessage();
     // Bunch-o-initialisers
     this.version = "0x16";
@@ -145,6 +158,8 @@ function HuesCore(defaults) {
     this.visualiser.height = "64";
     this.vCtx = this.visualiser.getContext("2d");
 
+    let preloadHelper = getElemWithFallback("preloadHelper");
+    
     this.soundManager = new SoundManager(this);
     
     this.soundManager.init().then(() => {
@@ -188,20 +203,18 @@ function HuesCore(defaults) {
         this.animationLoop();
         
         if(defaults.load) {
-            return this.resourceManager.addAll(defaults.respacks, function(progress) {
-                let prog = document.getElementById("preMain");
-                let helper = document.getElementById("preloadHelper");
-                helper.style.backgroundPosition = (100 - progress*100) + "% 0%";
+            return this.resourceManager.addAll(defaults.respacks, progress => {
+                preloadHelper.style.backgroundPosition = (100 - progress*100) + "% 0%";
                 let scale = Math.floor(progress * defaults.preloadMax);
                 let padding = defaults.preloadMax.toString(defaults.preloadBase).length;
-                prog.textContent = defaults.preloadPrefix + (Array(padding).join("0")+scale.toString(defaults.preloadBase)).slice(-padding);
+                this.preloadMsg.textContent = defaults.preloadPrefix + (Array(padding).join("0")+scale.toString(defaults.preloadBase)).slice(-padding);
             });
         } else {
-            document.getElementById("preloadHelper").style.display = "none";
+            preloadHelper.style.display = "none";
             return;
         }
     }).then(() => {
-        document.getElementById("preloadHelper").classList.add("loaded");
+        preloadHelper.classList.add("loaded");
         if(defaults.firstImage) {
             this.setImageByName(defaults.firstImage);
         } else {
@@ -966,19 +979,19 @@ HuesCore.prototype.keyHandler = function(key) {
 
 HuesCore.prototype.error = function(message) {
     console.log(message);
-    document.getElementById("preSub").textContent = message;
-    document.getElementById("preMain").style.color = "#F00";
+    this.preloadSubMsg.textContent = message;
+    this.preloadMsg.style.color = "#F00";
 };
 
 HuesCore.prototype.warning = function(message) {
     console.log(message);
-    document.getElementById("preSub").innerHTML = message;
-    document.getElementById("preMain").style.color = "#F93";
+    this.preloadSubMsg.innerHTML = message;
+    this.preloadMsg.style.color = "#F93";
 };
 
 HuesCore.prototype.clearMessage = function() {
-    document.getElementById("preSub").textContent = "";
-    document.getElementById("preMain").style.color = "";
+    this.preloadSubMsg.textContent = "";
+    this.preloadMsg.style.color = "";
 };
 
 HuesCore.prototype.oldColours =

src/js/HuesSettings.js

@@ -210,8 +210,8 @@ HuesSettings.prototype.settingsOptions = {
 function HuesSettings(defaults) {
     this.core = null;
     this.hasUI = false;
-    this.root = document.getElementById("huesSettings");
-    this.window = document.getElementById("settingsHelper");
+    this.root = getElemWithFallback("huesSettings");
+    this.window = getElemWithFallback("settingsHelper");
     
     this.textCallbacks = [];
     this.visCallbacks = [];
@@ -244,7 +244,7 @@ function HuesSettings(defaults) {
     }
 
     // because we still care about the main window
-    document.getElementById("closeButton").onclick = this.hide.bind(this);
+    getElemWithFallback("closeButton").onclick = this.hide.bind(this);
     
     // we also care about tabs looking nice.
     let checkListener = function(check) { 
@@ -296,22 +296,22 @@ HuesSettings.prototype.toggle = function() {
 
 HuesSettings.prototype.showRespacks = function() {
     this.show();
-    document.getElementById("tab-resources").click();
+    getElemWithFallback("tab-resources").click();
 };
 
 HuesSettings.prototype.showEditor = function() {
     this.show();
-    document.getElementById("tab-editor").click();
+    getElemWithFallback("tab-editor").click();
 };
 
 HuesSettings.prototype.showOptions = function() {
     this.show();
-    document.getElementById("tab-options").click();
+    getElemWithFallback("tab-options").click();
 };
 
 HuesSettings.prototype.showInfo = function() {
     this.show();
-    document.getElementById("tab-info").click();
+    getElemWithFallback("tab-info").click();
 };
 
 HuesSettings.prototype.initUI = function() {

src/js/HuesUI.js

@@ -1038,13 +1038,13 @@ HalloweenUI.prototype.beat = function(beats, index) {
 HalloweenUI.prototype.connectCore = function(core) {
     ModernUI.prototype.connectCore.call(this, core);
     
-    document.getElementById("preloadHelper").classList.add("hues-h-text");
+    getElemWithFallback("preloadHelper").classList.add("hues-h-text");
 };
 
 HalloweenUI.prototype.disconnect = function() {
     ModernUI.prototype.disconnect.call(this, core);
     
-    document.getElementById("preloadHelper").classList.remove("hues-h-text");
+    getElemWithFallback("preloadHelper").classList.remove("hues-h-text");
 };
 
 // Positions and angles for the Xmas lights