diff --git a/src/js/HuesCanvas.js b/src/js/HuesCanvas.js index 0836692..b5a9a28 100644 --- a/src/js/HuesCanvas.js +++ b/src/js/HuesCanvas.js @@ -108,7 +108,7 @@ HuesCanvas.prototype.settingsUpdated = function() { HuesCanvas.prototype.resize = function() { // height is constant 720px, we expand width to suit - var ratio = window.innerWidth / window.innerHeight; + let ratio = window.innerWidth / window.innerHeight; this.canvas.width = Math.ceil(720 * ratio); this.offCanvas.height = this.canvas.height; this.offCanvas.width = this.canvas.width; @@ -118,11 +118,11 @@ HuesCanvas.prototype.resize = function() { }; HuesCanvas.prototype.redraw = function() { - var offset; // for centering/right/left align - var bOpacity; - var width = this.canvas.width; + let offset; // for centering/right/left align + let bOpacity; + let width = this.canvas.width; - var cTime = this.audio.currentTime; + let cTime = this.audio.currentTime; // white BG for the hard light filter this.context.globalAlpha = 1; this.context.globalCompositeOperation = "source-over"; @@ -141,7 +141,7 @@ HuesCanvas.prototype.redraw = function() { } if(this.image && (this.image.bitmap || this.image.bitmaps)) { - var bitmap = this.image.animated ? + let bitmap = this.image.animated ? this.image.bitmaps[this.animFrame] : this.image.bitmap; if(this.smartAlign) { switch(this.image.align) { @@ -191,9 +191,9 @@ HuesCanvas.prototype.redraw = function() { // x blur moves inwards from the corners, y comes out // So the base colour is inverted for y, normal for x // Thus if the y start is more recent, we invert - var baseInvert = this.trippyStart[1] > this.trippyStart[0]; - var invertC = this.intToHex(0xFFFFFF ^ this.colour); - var normalC = this.intToHex(this.colour); + let baseInvert = this.trippyStart[1] > this.trippyStart[0]; + let invertC = this.intToHex(0xFFFFFF ^ this.colour); + let normalC = this.intToHex(this.colour); this.offContext.fillStyle = baseInvert ? invertC : normalC; this.offContext.fillRect(0,0,width,720); @@ -202,7 +202,7 @@ HuesCanvas.prototype.redraw = function() { return b - a; }); - var invert = !baseInvert; + let invert = !baseInvert; for(let i = 0; i < 2; i++) { if(this.trippyRadii[i] === 0) { continue; @@ -242,7 +242,7 @@ HuesCanvas.prototype.intToHex = function(num) { HuesCanvas.prototype.animationLoop = function() { if (this.colourFade) { let delta = this.audio.currentTime - this.colourFadeStart; - var fadeVal = delta / this.colourFadeLength; + let fadeVal = delta / this.colourFadeLength; if (fadeVal >= 1) { this.stopFade(); this.colour = this.newColour; @@ -256,7 +256,7 @@ HuesCanvas.prototype.animationLoop = function() { } if(this.image && this.image.animated){ if(this.image.beatsPerAnim && this.core.currentSong && this.core.currentSong.charsPerBeat) { - var a = this.animFrame; + let a = this.animFrame; this.syncAnim(); if(this.animFrame != a) { this.needsRedraw = true; @@ -277,7 +277,7 @@ HuesCanvas.prototype.animationLoop = function() { this.blurDistance = this.blurAmount * Math.exp(-this.blurDecay * delta); // Update UI - var dist = this.blurDistance / this.blurAmount; + let dist = this.blurDistance / this.blurAmount; if(this.xBlur) this.core.blurUpdated(dist, 0); else @@ -343,20 +343,20 @@ HuesCanvas.prototype.beat = function() { }; HuesCanvas.prototype.syncAnim = function() { - var song = this.core.currentSong; + let song = this.core.currentSong; if(!song) { // fallback to default return; } - var index = this.core.beatIndex; + let index = this.core.beatIndex; // When animation has more frames than song has beats, or part thereof if(this.lastBeat && this.core.getBeatLength()) { - var interp = (this.audio.currentTime - this.lastBeat) / this.core.getBeatLength(); + let interp = (this.audio.currentTime - this.lastBeat) / this.core.getBeatLength(); index += Math.min(interp, 1); } // This loops A-OK because the core's beatIndex never rolls over for a new loop - var beatLoc = (index / song.charsPerBeat) % this.image.beatsPerAnim; + let beatLoc = (index / song.charsPerBeat) % this.image.beatsPerAnim; - var aLen = this.image.bitmaps.length; + let aLen = this.image.bitmaps.length; this.animFrame = Math.floor(aLen * (beatLoc / this.image.beatsPerAnim)); if(this.image.syncOffset) { this.animFrame += this.image.syncOffset; @@ -426,15 +426,15 @@ HuesCanvas.prototype.stopFade = function() { HuesCanvas.prototype.mixColours = function(percent) { percent = Math.min(1, percent); - var oldR = this.oldColour >> 16 & 0xFF; - var oldG = this.oldColour >> 8 & 0xFF; - var oldB = this.oldColour & 0xFF; - var newR = this.newColour >> 16 & 0xFF; - var newG = this.newColour >> 8 & 0xFF; - var newB = this.newColour & 0xFF; - var mixR = oldR * (1 - percent) + newR * percent; - var mixG = oldG * (1 - percent) + newG * percent; - var mixB = oldB * (1 - percent) + newB * percent; + let oldR = this.oldColour >> 16 & 0xFF; + let oldG = this.oldColour >> 8 & 0xFF; + let oldB = this.oldColour & 0xFF; + let newR = this.newColour >> 16 & 0xFF; + let newG = this.newColour >> 8 & 0xFF; + let newB = this.newColour & 0xFF; + let mixR = oldR * (1 - percent) + newR * percent; + let mixG = oldG * (1 - percent) + newG * percent; + let mixB = oldB * (1 - percent) + newB * percent; this.colour = mixR << 16 | mixG << 8 | mixB; }; @@ -486,8 +486,8 @@ HuesCanvas.prototype.setAnimating = function(anim) { HuesCanvas.prototype.startSnow = function() { this.snowing = true; this.snowCanvas.style.display = "block"; - var height = this.canvas.height; - var width = this.canvas.width; + let height = this.canvas.height; + let width = this.canvas.width; this.snowAngle = 0; this.snowflakes = []; for(let i = 0; i < this.maxSnow; i++) { @@ -507,9 +507,9 @@ HuesCanvas.prototype.stopSnow = function() { }; HuesCanvas.prototype.drawSnow = function() { - var width = this.snowCanvas.width; - var height = this.snowCanvas.height; - var delta = this.lastSnow - this.audio.currentTime; + let width = this.snowCanvas.width; + let height = this.snowCanvas.height; + let delta = this.lastSnow - this.audio.currentTime; this.snowContext.clearRect(0, 0, width, height); this.snowContext.fillStyle = "rgba(255, 255, 255, 0.8)"; diff --git a/src/js/HuesCore.js b/src/js/HuesCore.js index 67fec10..2dd4be1 100644 --- a/src/js/HuesCore.js +++ b/src/js/HuesCore.js @@ -124,7 +124,7 @@ function HuesCore(defaults) { return false; }; - var versionString = "v" + (parseInt(this.version)/10).toFixed(1); + let versionString = "v" + (parseInt(this.version)/10).toFixed(1); console.log("0x40 Hues " + versionString + " - start your engines!"); populateHuesInfo(this.version); this.colours = this.oldColours; @@ -157,9 +157,9 @@ function HuesCore(defaults) { if(defaults.load) { return this.resourceManager.addAll(defaults.respacks, function(progress) { - var prog = document.getElementById("preMain"); - var scale = Math.floor(progress * defaults.preloadMax); - var padding = defaults.preloadMax.toString(defaults.preloadBase).length; + let prog = document.getElementById("preMain"); + 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); }); } else { @@ -198,13 +198,13 @@ function HuesCore(defaults) { e.target.contentEditable === "true") { return true; } - var key = e.keyCode || e.which; + let key = e.keyCode || e.which; return this.keyHandler(key); }; } HuesCore.prototype.callEventListeners = function(ev) { - var args = Array.prototype.slice.call(arguments, 1); + let args = Array.prototype.slice.call(arguments, 1); this.eventListeners[ev].forEach(function(callback) { callback.apply(null, args); }); @@ -239,25 +239,25 @@ HuesCore.prototype.updateVisualiser = function() { return; } - var logArrays = this.soundManager.getVisualiserData(); + let logArrays = this.soundManager.getVisualiserData(); if(!logArrays) { return; } this.vCtx.clearRect(0, 0, this.vCtx.canvas.width, this.vCtx.canvas.height); - var gradient=this.vCtx.createLinearGradient(0,64,0,0); + let gradient=this.vCtx.createLinearGradient(0,64,0,0); gradient.addColorStop(1,"rgba(255,255,255,0.6)"); gradient.addColorStop(0,"rgba(20,20,20,0.6)"); this.vCtx.fillStyle = gradient; - var barWidth = 2; - var barHeight; - var x = 0; - for(var a = 0; a < logArrays.length; a++) { - var vals = logArrays[a]; - for(var i = 0; i < vals.length; i++) { - var index = 0; + let barWidth = 2; + let barHeight; + let x = 0; + for(let a = 0; a < logArrays.length; a++) { + let vals = logArrays[a]; + for(let i = 0; i < vals.length; i++) { + let index = 0; if(logArrays.length == 2 && a === 0) { index = vals.length - i - 1; } else { @@ -279,7 +279,7 @@ HuesCore.prototype.animationLoop = function() { return; } this.updateVisualiser(); - var now = this.soundManager.currentTime(); + let now = this.soundManager.currentTime(); if(now < 0) { this.callEventListeners("time", 0); } else { @@ -288,9 +288,9 @@ HuesCore.prototype.animationLoop = function() { this.currentSong.buildupPlayed = true; } } - for(var beatTime = this.beatIndex * this.getBeatLength(); beatTime < now; + for(let beatTime = this.beatIndex * this.getBeatLength(); beatTime < now; beatTime = ++this.beatIndex * this.getBeatLength()) { - var beat = this.getBeat(this.beatIndex); + let beat = this.getBeat(this.beatIndex); this.beater(beat); } this.callEventListeners("frame"); @@ -300,9 +300,9 @@ HuesCore.prototype.recalcBeatIndex = function() { this.beatIndex = Math.floor(this.soundManager.currentTime() / this.getBeatLength()); // We should sync up to how many inverts there are - var build = this.currentSong.buildupRhythm; - var rhythm = this.currentSong.rhythm; - var mapSoFar; + let build = this.currentSong.buildupRhythm; + let rhythm = this.currentSong.rhythm; + let mapSoFar; if(this.beatIndex < 0) { mapSoFar = build.slice(0, this.beatIndex + build.length); } else { @@ -314,7 +314,7 @@ HuesCore.prototype.recalcBeatIndex = function() { mapSoFar = build + rhythm.slice(0, this.beatIndex); } // If there's an odd amount of inverts thus far, invert our display - var invertCount = (mapSoFar.match(/i|I/g)||[]).length; + let invertCount = (mapSoFar.match(/i|I/g)||[]).length; this.setInvert(invertCount % 2); }; @@ -329,7 +329,7 @@ HuesCore.prototype.getBeatIndex = function() { }; HuesCore.prototype.getSafeBeatIndex = function() { - var index = this.getBeatIndex(); + let index = this.getBeatIndex(); if(index < 0) { return 0; } else { @@ -343,19 +343,19 @@ HuesCore.prototype.blurUpdated = function(x, y) { HuesCore.prototype.nextSong = function() { this.lastSongArray = []; - var index = (this.songIndex + 1) % this.resourceManager.enabledSongs.length; + let index = (this.songIndex + 1) % this.resourceManager.enabledSongs.length; this.setSong(index); }; HuesCore.prototype.previousSong = function() { this.lastSongArray = []; - var index = ((this.songIndex - 1) + this.resourceManager.enabledSongs.length) % this.resourceManager.enabledSongs.length; + let index = ((this.songIndex - 1) + this.resourceManager.enabledSongs.length) % this.resourceManager.enabledSongs.length; this.setSong(index); }; HuesCore.prototype.setSongByName = function(name) { - var songs = this.resourceManager.enabledSongs; - for(var i = 0; i < songs.length; i++) { + let songs = this.resourceManager.enabledSongs; + for(let i = 0; i < songs.length; i++) { if(songs[i].title == name) { return this.setSong(i); } @@ -365,7 +365,7 @@ HuesCore.prototype.setSongByName = function(name) { /* To set songs via reference instead of index - used in HuesEditor */ HuesCore.prototype.setSongOject = function(song) { - for(var i = 0; i < this.resourceManager.enabledSongs.length; i++) { + for(let i = 0; i < this.resourceManager.enabledSongs.length; i++) { if(this.resourceManager.enabledSongs[i] === song) { return this.setSong(i); } @@ -438,7 +438,7 @@ HuesCore.prototype.fillBuildup = function() { // Do nothing } else { console.log("Flash behaviour - filling buildup"); - var buildBeats = Math.floor(this.soundManager.buildLength / this.loopLength); + let buildBeats = Math.floor(this.soundManager.buildLength / this.loopLength); if(buildBeats < 1) { buildBeats = 1; } @@ -455,14 +455,14 @@ HuesCore.prototype.fillBuildup = function() { }; HuesCore.prototype.randomSong = function() { - var songCount = this.resourceManager.enabledSongs.length; - var index=Math.floor((Math.random() * songCount)); + let songCount = this.resourceManager.enabledSongs.length; + let index=Math.floor((Math.random() * songCount)); if (songCount > 1 && (index == this.songIndex || this.lastSongArray.indexOf(index) != -1)) { this.randomSong(); } else { console.log("Randoming a song!"); this.setSong(index); - var noRepeat = Math.min(5, Math.floor(songCount / 2)); + let noRepeat = Math.min(5, Math.floor(songCount / 2)); while (this.lastSongArray.length > noRepeat && noRepeat >= 0) { this.lastSongArray.shift(); } @@ -498,7 +498,7 @@ HuesCore.prototype.onLoop = function() { }; HuesCore.prototype.doAutoSong = function() { - var func = null; + let func = null; if(localStorage["autoSongShuffle"] == "on") { func = this.randomSong; } else { @@ -530,20 +530,20 @@ HuesCore.prototype.resetAudio = function() { HuesCore.prototype.randomImage = function() { if(localStorage["shuffleImages"] == "on") { - var len = this.resourceManager.enabledImages.length; - var index = Math.floor(Math.random() * len); + let len = this.resourceManager.enabledImages.length; + let index = Math.floor(Math.random() * len); if ((index == this.imageIndex || this.lastImageArray.indexOf(index) != -1) && len > 1) { this.randomImage(); } else { this.setImage(index); this.lastImageArray.push(index); - var cull = Math.min(20, Math.floor((len / 2))); + let cull = Math.min(20, Math.floor((len / 2))); while (this.lastImageArray.length > cull && cull >= 0) { this.lastImageArray.shift(); } } } else { // jk, not actually random - var img=(this.imageIndex + 1) % this.resourceManager.enabledImages.length; + let img=(this.imageIndex + 1) % this.resourceManager.enabledImages.length; this.setImage(img); } }; @@ -551,7 +551,7 @@ HuesCore.prototype.randomImage = function() { HuesCore.prototype.setImage = function(index) { // If there are no images, this corrects NaN to 0 this.imageIndex = index ? index : 0; - var img=this.resourceManager.enabledImages[this.imageIndex]; + let img=this.resourceManager.enabledImages[this.imageIndex]; if (img == this.currentImage && img !== null) { return; } @@ -566,8 +566,8 @@ HuesCore.prototype.setImage = function(index) { }; HuesCore.prototype.setImageByName = function(name) { - var images = this.resourceManager.enabledImages; - for(var i = 0; i < images.length; i++) { + let images = this.resourceManager.enabledImages; + for(let i = 0; i < images.length; i++) { if(images[i].name == name || images[i].fullname == name) { this.setImage(i); return; @@ -578,20 +578,20 @@ HuesCore.prototype.setImageByName = function(name) { HuesCore.prototype.nextImage = function() { this.setIsFullAuto(false); - var img=(this.imageIndex + 1) % this.resourceManager.enabledImages.length; + let img=(this.imageIndex + 1) % this.resourceManager.enabledImages.length; this.setImage(img); this.lastImageArray = []; }; HuesCore.prototype.previousImage = function() { this.setIsFullAuto(false); - var img=((this.imageIndex - 1) + this.resourceManager.enabledImages.length) % this.resourceManager.enabledImages.length; + let img=((this.imageIndex - 1) + this.resourceManager.enabledImages.length) % this.resourceManager.enabledImages.length; this.setImage(img); this.lastImageArray = []; }; HuesCore.prototype.randomColourIndex = function() { - var index=Math.floor((Math.random() * 64)); + let index=Math.floor((Math.random() * 64)); if (index == this.colourIndex) { return this.randomColourIndex(); } @@ -599,13 +599,13 @@ HuesCore.prototype.randomColourIndex = function() { }; HuesCore.prototype.randomColour = function(isFade) { - var index=this.randomColourIndex(); + let index=this.randomColourIndex(); this.setColour(index, isFade); }; HuesCore.prototype.setColour = function(index, isFade) { this.colourIndex = index; - var colour = this.colours[this.colourIndex]; + let colour = this.colours[this.colourIndex]; this.callEventListeners("newcolour", colour, isFade); }; @@ -655,11 +655,11 @@ HuesCore.prototype.beater = function(beat) { /* falls through */ case '~': // case: fade in build, not in rhythm. Must max out fade timer. - var maxSearch = this.currentSong.rhythm.length; + let maxSearch = this.currentSong.rhythm.length; if(this.beatIndex < 0) { maxSearch -= this.beatIndex; } - var fadeLen; + let fadeLen; for (fadeLen = 1; fadeLen <= maxSearch; fadeLen++) { if (this.getBeat(fadeLen + this.beatIndex) != ".") { break; @@ -691,8 +691,8 @@ HuesCore.prototype.beater = function(beat) { HuesCore.prototype.getBeatString = function(length) { length = length ? length : 256; - var beatString = ""; - var song = this.currentSong; + let beatString = ""; + let song = this.currentSong; if (song) { if(this.beatIndex < 0) { beatString = song.buildupRhythm.slice( diff --git a/src/js/HuesEditor.js b/src/js/HuesEditor.js index ad8bf51..67b9ce3 100644 --- a/src/js/HuesEditor.js +++ b/src/js/HuesEditor.js @@ -22,8 +22,8 @@ (function(window, document) { "use strict"; -var WAVE_PIXELS_PER_SECOND = 100; -var WAVE_HEIGHT_PIXELS = 20; +let WAVE_PIXELS_PER_SECOND = 100; +let WAVE_HEIGHT_PIXELS = 20; function HuesEditor(core) { this.buildEditSize = 80; // pixels, including header @@ -64,7 +64,7 @@ function HuesEditor(core) { } HuesEditor.prototype.initUI = function() { - var titleButtons = document.createElement("div"); + let titleButtons = document.createElement("div"); titleButtons.id = "edit-titlebuttons"; this.root.appendChild(titleButtons); this.saveBtn = this.createButton("Save XML", titleButtons, true); @@ -73,7 +73,7 @@ HuesEditor.prototype.initUI = function() { this.copyBtn.onclick = this.copyXML.bind(this); this.undoBtn = this.createButton("Undo", titleButtons, true); this.redoBtn = this.createButton("Redo", titleButtons, true); - var help = this.createButton("Help?", titleButtons); + let help = this.createButton("Help?", titleButtons); help.style.backgroundColor = "rgba(0,160,0,0.3)"; help.onclick = function() { window.open("http://0x40hues.blogspot.com/p/0x40-hues-creation-tutorial.html", '_blank'); @@ -98,16 +98,16 @@ HuesEditor.prototype.initUI = function() { HuesEditor.prototype.resize = function(noHilightCalc) { this.root.style.height = (window.innerHeight - 200) + "px"; - var boxHeight = this.editArea.offsetHeight; - var bHeadHeight = this.buildEdit._header.offsetHeight; - var lHeadHeight = this.loopEdit._header.offsetHeight; - var handleHeight = this.resizeHandle.offsetHeight; - var minHeight = bHeadHeight; - var maxHeight = boxHeight - handleHeight - lHeadHeight - bHeadHeight; - var buildHeight = Math.min(maxHeight, Math.max(minHeight, this.buildEditSize - handleHeight)); + let boxHeight = this.editArea.offsetHeight; + let bHeadHeight = this.buildEdit._header.offsetHeight; + let lHeadHeight = this.loopEdit._header.offsetHeight; + let handleHeight = this.resizeHandle.offsetHeight; + let minHeight = bHeadHeight; + let maxHeight = boxHeight - handleHeight - lHeadHeight - bHeadHeight; + let buildHeight = Math.min(maxHeight, Math.max(minHeight, this.buildEditSize - handleHeight)); this.buildEdit.style.height = buildHeight + "px"; this.buildEdit._box.style.height = (buildHeight - bHeadHeight) + "px"; - var loopHeight = maxHeight - buildHeight + lHeadHeight; + let loopHeight = maxHeight - buildHeight + lHeadHeight; this.loopEdit.style.height = loopHeight + "px"; this.loopEdit._box.style.height = (loopHeight - lHeadHeight) + "px"; @@ -122,7 +122,7 @@ HuesEditor.prototype.resize = function(noHilightCalc) { // Save to fix Chrome rendering and to enable right click to seek // We only resize on a window resize event, not when dragging the handle if(!noHilightCalc) { - var hilight = document.createElement("div"); + let hilight = document.createElement("div"); hilight.className = "beat-hilight"; hilight.innerHTML = "█"; this.root.appendChild(hilight); @@ -136,15 +136,15 @@ HuesEditor.prototype.resize = function(noHilightCalc) { }; HuesEditor.prototype.createTextInput = function(label, id, subtitle, parent) { - var div = document.createElement("div"); + let div = document.createElement("div"); div.className = "edit-label"; - var caption = document.createElement("label"); + let caption = document.createElement("label"); caption.innerHTML = label; caption.htmlFor = id; div.appendChild(caption); - var container = document.createElement("span"); + let container = document.createElement("span"); container.className = "edit-textbox-container"; - var input = document.createElement("input"); + let input = document.createElement("input"); input.className = "edit-textbox"; input.type = "text"; input.id = id; @@ -158,7 +158,7 @@ HuesEditor.prototype.createTextInput = function(label, id, subtitle, parent) { }; HuesEditor.prototype.createButton = function(label, parent, disabled, extraClass) { - var button = document.createElement("span"); + let button = document.createElement("span"); button.className = "hues-button"; if(disabled) { button.className += " disabled"; @@ -172,11 +172,11 @@ HuesEditor.prototype.createButton = function(label, parent, disabled, extraClass }; HuesEditor.prototype.uiCreateInfo = function() { - var info = document.createElement("div"); + let info = document.createElement("div"); this.topBar.appendChild(info); info.id = "edit-info"; - var songUpdate = function(name) { + let songUpdate = function(name) { if(!this.song ) { return; } @@ -217,7 +217,7 @@ HuesEditor.prototype.onBeat = function(map, index) { if(!this.song || this.core.currentSong != this.song) { return; } - var editor; + let editor; if(index < 0) { index += this.core.currentSong.buildupRhythm.length; editor = this.buildEdit; @@ -229,8 +229,8 @@ HuesEditor.prototype.onBeat = function(map, index) { } } editor._hilight.className = "beat-hilight"; - var offsetX = index % editor._breakAt; - var offsetY = Math.floor(index / editor._breakAt); + let offsetX = index % editor._breakAt; + let offsetY = Math.floor(index / editor._breakAt); // Not computing width/height here due to Chrome bug editor._hilight.style.left = (offsetX * this.hilightWidth) + "px"; editor._hilight.style.top = (offsetY * this.hilightHeight) + "px"; @@ -248,13 +248,13 @@ HuesEditor.prototype.reflow = function(editor, map) { } else { editor._hilight.innerHTML = "█"; } - var charsPerLine = Math.floor(this.editorWidth / this.hilightWidth); + let charsPerLine = Math.floor(this.editorWidth / this.hilightWidth); // if it's too long to wrap, just give up - var wrap = Math.min(this.wrapAt, charsPerLine); + let wrap = Math.min(this.wrapAt, charsPerLine); charsPerLine -= charsPerLine % wrap; editor._beatCount.textContent = map.length + " beats"; // http://stackoverflow.com/a/27012001 - var regex = new RegExp("(.{" + charsPerLine + "})", "g"); + let regex = new RegExp("(.{" + charsPerLine + "})", "g"); editor._beatmap.innerHTML = map.replace(regex, "$1
"); editor._breakAt = charsPerLine; }; @@ -264,7 +264,7 @@ HuesEditor.prototype.loadAudio = function(editor) { return; } // Disable load button TODO - var file = editor._fileInput.files[0]; + let file = editor._fileInput.files[0]; // load audio this.blobToArrayBuffer(file) .then(buffer => { @@ -273,7 +273,7 @@ HuesEditor.prototype.loadAudio = function(editor) { this.song[editor._sound] = buffer; // Save filename for XML export - var noExt = file.name.replace(/\.[^/.]+$/, ""); + let noExt = file.name.replace(/\.[^/.]+$/, ""); if(editor._sound == "sound") { this.song.name = noExt; } else { @@ -323,7 +323,7 @@ HuesEditor.prototype.removeAudio = function(editor) { HuesEditor.prototype.blobToArrayBuffer = function(blob) { return new Promise((resolve, reject) => { - var fr = new FileReader(); + let fr = new FileReader(); fr.onload = () => { resolve(fr.result); }; @@ -387,9 +387,9 @@ HuesEditor.prototype.updateInfo = function() { return; } - var loopLen = this.core.soundManager.loopLength; - var buildLen = this.core.soundManager.buildLength; - var beatLen = (loopLen / this.song.rhythm.length) * 1000; + let loopLen = this.core.soundManager.loopLength; + let buildLen = this.core.soundManager.buildLength; + let beatLen = (loopLen / this.song.rhythm.length) * 1000; this.loopLen.textContent = loopLen.toFixed(2); this.buildLen.textContent = buildLen.toFixed(2); @@ -451,7 +451,7 @@ HuesEditor.prototype.undoRedo = function(from, to) { return; } // Remove old data - var fromData = from.pop(); + let fromData = from.pop(); // Make restore from current to.push({songVar: fromData.songVar, editor: fromData.editor, text: this.song[fromData.songVar]}); // Restore to editor @@ -491,7 +491,7 @@ HuesEditor.prototype.halveBeats = function(editor) { } if(!this.song.independentBuild) { // halve them both - var other = editor._rhythm == "rhythm" ? this.buildEdit : this.loopEdit; + let other = editor._rhythm == "rhythm" ? this.buildEdit : this.loopEdit; if(this.getText(other).length < 2) { return; } @@ -508,7 +508,7 @@ HuesEditor.prototype.doubleBeats = function(editor) { } if(!this.song.independentBuild) { // Double them both - var other = editor._rhythm == "rhythm" ? this.buildEdit : this.loopEdit; + let other = editor._rhythm == "rhythm" ? this.buildEdit : this.loopEdit; if(this.getText(other).length === 0) { return; } @@ -520,18 +520,18 @@ HuesEditor.prototype.doubleBeats = function(editor) { }; HuesEditor.prototype.uiCreateImport = function() { - var imports = document.createElement("div"); + let imports = document.createElement("div"); this.topBar.appendChild(imports); imports.id = "edit-imports"; - var songEdits = document.createElement("div"); + let songEdits = document.createElement("div"); imports.appendChild(songEdits); - var newSongBtn = this.createButton("New song", songEdits, false, "glow"); + let newSongBtn = this.createButton("New song", songEdits, false, "glow"); newSongBtn.onclick = () => { this.newSong(); }; this.newSongBtn = newSongBtn; - var fromSong = this.createButton("Edit current song", songEdits, false, "glow"); + let fromSong = this.createButton("Edit current song", songEdits, false, "glow"); fromSong.onclick = () => { if(this.core.currentSong) { this.newSong(this.core.currentSong); @@ -539,7 +539,7 @@ HuesEditor.prototype.uiCreateImport = function() { }; this.fromSongBtn = fromSong; - var songInfos = document.createElement("div"); + let songInfos = document.createElement("div"); songInfos.className = "settings-individual"; songInfos.id = "edit-songstats"; imports.appendChild(songInfos); @@ -550,12 +550,12 @@ HuesEditor.prototype.uiCreateImport = function() { }; HuesEditor.prototype.uiCreateSongStat = function(name, value, parent) { - var container = document.createElement("div"); + let container = document.createElement("div"); parent.appendChild(container); - var label = document.createElement("span"); + let label = document.createElement("span"); label.textContent = name; container.appendChild(label); - var valueSpan = document.createElement("span"); + let valueSpan = document.createElement("span"); valueSpan.textContent = value; valueSpan.className = "edit-songstat-value"; container.appendChild(valueSpan); @@ -563,7 +563,7 @@ HuesEditor.prototype.uiCreateSongStat = function(name, value, parent) { }; HuesEditor.prototype.uiCreateEditArea = function() { - var editArea = document.createElement("div"); + let editArea = document.createElement("div"); this.editArea = editArea; editArea.id = "edit-area"; this.root.appendChild(editArea); @@ -574,7 +574,7 @@ HuesEditor.prototype.uiCreateEditArea = function() { this.timeLock.id = "edit-timelock"; this.timeLock.className = "hues-icon"; // CHAIN, use  for CHAIN-BROKEN - var locker = this.createButton("", this.timeLock); + let locker = this.createButton("", this.timeLock); locker.onclick = () => { if(!this.song) { return; @@ -598,10 +598,10 @@ HuesEditor.prototype.uiCreateEditArea = function() { }; // drag handle - var handleContainer = document.createElement("div"); + let handleContainer = document.createElement("div"); handleContainer.id = "edit-resize-handle-container"; editArea.appendChild(handleContainer); - var handle = document.createElement("div"); + let handle = document.createElement("div"); handle.id = 'edit-resize-handle'; handle.className = 'hues-icon'; handle.innerHTML = ""; // DRAG HANDLE @@ -610,15 +610,15 @@ HuesEditor.prototype.uiCreateEditArea = function() { handleContainer.addEventListener("mousedown", (e) => { e.preventDefault(); - var editTop = this.editArea.getBoundingClientRect().top; - var handleSize = this.resizeHandle.clientHeight; + let editTop = this.editArea.getBoundingClientRect().top; + let handleSize = this.resizeHandle.clientHeight; - var resizer = (e) => { + let resizer = (e) => { this.buildEditSize = Math.floor(e.clientY - editTop + handleSize/2); this.resize(true); }; - var mouseup = function(e) { + let mouseup = function(e) { document.removeEventListener("mousemove", resizer); document.removeEventListener("mouseup", mouseup); }; @@ -655,23 +655,23 @@ HuesEditor.prototype.uiCreateEditArea = function() { }; HuesEditor.prototype.uiCreateSingleEditor = function(title, soundName, rhythmName, id, parent) { - var container = document.createElement("div"); + let container = document.createElement("div"); container.id = id; parent.appendChild(container); - var header = document.createElement("div"); + let header = document.createElement("div"); header.className = "edit-area-header"; container.appendChild(header); - var nameLabel = document.createElement("span"); + let nameLabel = document.createElement("span"); header.appendChild(nameLabel); nameLabel.innerHTML = title; - var seek = this.createButton("", header, true, "hues-icon"); + let seek = this.createButton("", header, true, "hues-icon"); header.appendChild(seek); container._seek = seek; - var beatCount = document.createElement("span"); + let beatCount = document.createElement("span"); header.appendChild(beatCount); beatCount.className = "beat-count"; beatCount.textContent = "0 beats"; @@ -680,12 +680,12 @@ HuesEditor.prototype.uiCreateSingleEditor = function(title, soundName, rhythmNam if(container._locked) { this.setLocked(container, 0); } else { - var textLen = this.getText(container).length; + let textLen = this.getText(container).length; this.setLocked(container, textLen); } }; - var rightHeader = document.createElement("span"); + let rightHeader = document.createElement("span"); rightHeader.className = "edit-area-right-header"; header.appendChild(rightHeader); @@ -694,27 +694,27 @@ HuesEditor.prototype.uiCreateSingleEditor = function(title, soundName, rhythmNam container._doubleBtn = this.createButton("Double", rightHeader); container._doubleBtn.onclick = this.doubleBeats.bind(this, container); - var fileInput = document.createElement("input"); + let fileInput = document.createElement("input"); fileInput.type ="file"; fileInput.accept="audio/mpeg3"; fileInput.multiple = false; fileInput.onchange = this.loadAudio.bind(this, container); - var load = this.createButton("Load " + title.replace(/ /g,""), rightHeader); + let load = this.createButton("Load " + title.replace(/ /g,""), rightHeader); load.onclick = () => {fileInput.click();}; container._removeBtn = this.createButton("Remove", rightHeader, true); container._removeBtn.onclick = this.removeAudio.bind(this, container); - var editBox = document.createElement("div"); + let editBox = document.createElement("div"); editBox.className = "edit-box"; - var beatmap = document.createElement("div"); + let beatmap = document.createElement("div"); beatmap.className = "beatmap"; beatmap.contentEditable = true; beatmap.spellcheck = false; beatmap.oninput = this.textUpdated.bind(this, container); beatmap.oncontextmenu = this.rightClick.bind(this, container); - var beatHilight = document.createElement("div"); + let beatHilight = document.createElement("div"); beatHilight.className = "beat-hilight"; editBox.appendChild(beatHilight); @@ -742,15 +742,15 @@ HuesEditor.prototype.rightClick = function(editor, event) { return; } // We abuse the fact that right clicking moves the caret. Hooray! - var caret = this.getCaret(editor._beatmap); - var totalLen = this.getText(editor).length; - var percent = caret / totalLen; + let caret = this.getCaret(editor._beatmap); + let totalLen = this.getText(editor).length; + let percent = caret / totalLen; if(caret <= totalLen) { - var seekTime = 0; + let seekTime = 0; if(editor._rhythm == "rhythm") { // loop seekTime = this.core.soundManager.loopLength * percent; } else { // build - var bLen = this.core.soundManager.buildLength; + let bLen = this.core.soundManager.buildLength; seekTime = -bLen + bLen * percent; } this.core.soundManager.seek(seekTime); @@ -767,7 +767,7 @@ HuesEditor.prototype.textUpdated = function(editor) { return; } // Space at start of line is nonbreaking, get it with \u00a0 - var input = editor._beatmap.textContent.replace(/ |\u00a0/g, ""); + let input = editor._beatmap.textContent.replace(/ |\u00a0/g, ""); if(input.length === 0) { input = "."; } @@ -787,7 +787,7 @@ HuesEditor.prototype.setText = function(editor, text, caretFromEnd) { this.reflow(editor, ""); return; } - var caret = caretFromEnd ? text.length : this.getCaret(editor._beatmap); + let caret = caretFromEnd ? text.length : this.getCaret(editor._beatmap); if(editor._locked) { caret = Math.min(editor._locked, caret); if(text.length > editor._locked) { @@ -800,8 +800,8 @@ HuesEditor.prototype.setText = function(editor, text, caretFromEnd) { } // time to scale things to fit } else if(!this.song.independentBuild && this.song.buildupRhythm && this.song.rhythm) { - var ratio = this.core.soundManager.loopLength / this.core.soundManager.buildLength; - var newLen, otherMap; + let ratio = this.core.soundManager.loopLength / this.core.soundManager.buildLength; + let newLen, otherMap; if(editor._rhythm == "rhythm") { // editing rhythm, adjust beatmap otherMap = this.buildEdit; newLen = Math.floor(text.length / ratio); @@ -809,7 +809,7 @@ HuesEditor.prototype.setText = function(editor, text, caretFromEnd) { otherMap = this.loopEdit; newLen = Math.floor(text.length * ratio); } - var wasLocked = otherMap._locked; + let wasLocked = otherMap._locked; // avoid infinite loop this.song.independentBuild = true; // clamp the length @@ -840,10 +840,10 @@ HuesEditor.prototype.setText = function(editor, text, caretFromEnd) { }; HuesEditor.prototype.getCaret = function(editable) { - var caret = 0; - var sel = window.getSelection(); + let caret = 0; + let sel = window.getSelection(); if (sel.rangeCount) { - var range = sel.getRangeAt(0); + let range = sel.getRangeAt(0); //
elements are empty, and pastes do weird things. // So don't go up in multiples of 2 for getCaret for(let i = 0; i < editable.childNodes.length; i++) { @@ -859,11 +859,11 @@ HuesEditor.prototype.getCaret = function(editable) { }; HuesEditor.prototype.setCaret = function(editable, caret) { - var range = document.createRange(); - var sel = window.getSelection(); + let range = document.createRange(); + let sel = window.getSelection(); //
elements mean children go up in multiples of 2 for(let i = 0; i < editable.childNodes.length; i+= 2) { - var textLen = editable.childNodes[i].textContent.length; + let textLen = editable.childNodes[i].textContent.length; if(caret > textLen) { caret -= textLen; } else { @@ -881,7 +881,7 @@ HuesEditor.prototype.updateHalveDoubleButtons = function(editor) { editor._doubleBtn.className = "hues-button disabled"; if(!editor._locked) { - var txtLen = this.getText(editor).length; + let txtLen = this.getText(editor).length; if(txtLen > 0) { editor._doubleBtn.className = "hues-button"; } @@ -902,43 +902,43 @@ HuesEditor.prototype.setLocked = function(editor, locked) { }; HuesEditor.prototype.uiCreateControls = function() { - var controls = document.createElement("div"); + let controls = document.createElement("div"); controls.id = "edit-controls"; this.root.appendChild(controls); - var changeRate = function(change) { - var rate = this.core.soundManager.playbackRate; + let changeRate = function(change) { + let rate = this.core.soundManager.playbackRate; rate += change; this.core.soundManager.setRate(rate); // In case it gets clamped, check - var newRate = this.core.soundManager.playbackRate; + let newRate = this.core.soundManager.playbackRate; playRateLab.textContent = newRate.toFixed(2) + "x"; }; - var speedControl = document.createElement("div"); + let speedControl = document.createElement("div"); controls.appendChild(speedControl); // BACKWARD - var speedDown = this.createButton("", speedControl, false, "hues-icon"); + let speedDown = this.createButton("", speedControl, false, "hues-icon"); speedDown.onclick = changeRate.bind(this, -0.25); // FORWARD - var speedUp = this.createButton("", speedControl, false, "hues-icon"); + let speedUp = this.createButton("", speedControl, false, "hues-icon"); speedUp.onclick = changeRate.bind(this, 0.25); - var playRateLab = document.createElement("span"); + let playRateLab = document.createElement("span"); playRateLab.className = "settings-individual"; playRateLab.textContent = "1.00x"; speedControl.appendChild(playRateLab); - var wrapControl = document.createElement("div"); + let wrapControl = document.createElement("div"); controls.appendChild(wrapControl); - var wrapLab = document.createElement("span"); + let wrapLab = document.createElement("span"); wrapLab.className = "settings-individual"; wrapLab.textContent = "New line at beat "; wrapControl.appendChild(wrapLab); - var wrapAt = document.createElement("input"); + let wrapAt = document.createElement("input"); wrapAt.className = "settings-input"; wrapAt.value = this.wrapAt; wrapAt.type = "text"; @@ -958,7 +958,7 @@ HuesEditor.prototype.uiCreateControls = function() { HuesEditor.prototype.uiCreateVisualiser = function() { // TODO placeholder - var wave = document.createElement("canvas"); + let wave = document.createElement("canvas"); wave.id = "edit-waveform"; wave.height = WAVE_HEIGHT_PIXELS; this.root.appendChild(wave); @@ -984,33 +984,33 @@ HuesEditor.prototype.renderWave = function(buffer, length) { return null; } // The individual wave section - var wave = document.createElement("canvas"); - var waveContext = wave.getContext("2d"); + let wave = document.createElement("canvas"); + let waveContext = wave.getContext("2d"); wave.height = WAVE_HEIGHT_PIXELS; wave.width = Math.floor(WAVE_PIXELS_PER_SECOND * length); - var samplesPerPixel = Math.floor(buffer.sampleRate / WAVE_PIXELS_PER_SECOND); - var waveData = []; + let samplesPerPixel = Math.floor(buffer.sampleRate / WAVE_PIXELS_PER_SECOND); + let waveData = []; for(let i = 0; i < buffer.numberOfChannels; i++) { waveData.push(buffer.getChannelData(i)); } // Half pixel offset makes things look crisp - var pixel = 0.5; + let pixel = 0.5; waveContext.strokeStyle = "black"; - var halfHeight = WAVE_HEIGHT_PIXELS/2; + let halfHeight = WAVE_HEIGHT_PIXELS/2; for(let i = 0; i < buffer.length; i += samplesPerPixel) { - var min = 0, max = 0; - for(var j = 0; j < samplesPerPixel && i + j < buffer.length; j++) { - for(var chan = 0; chan < waveData.length; chan++) { - var sample = waveData[chan][i+j]; + let min = 0, max = 0; + for(let j = 0; j < samplesPerPixel && i + j < buffer.length; j++) { + for(let chan = 0; chan < waveData.length; chan++) { + let sample = waveData[chan][i+j]; if(sample > max) max = sample; if(sample < min) min = sample; } } - var maxPix = Math.floor(halfHeight + max * halfHeight); + let maxPix = Math.floor(halfHeight + max * halfHeight); // Min is negative, addition is correct - var minPix = Math.floor(halfHeight + min * halfHeight); + let minPix = Math.floor(halfHeight + min * halfHeight); waveContext.beginPath(); waveContext.moveTo(pixel, maxPix); waveContext.lineTo(pixel, minPix); @@ -1022,27 +1022,27 @@ HuesEditor.prototype.renderWave = function(buffer, length) { }; HuesEditor.prototype.drawWave = function() { - var width = this.waveCanvas.width; - var now = this.core.soundManager.currentTime(); - var span = width / WAVE_PIXELS_PER_SECOND / 2; - var minTime = now - span; - var maxTime = now + span; + let width = this.waveCanvas.width; + let now = this.core.soundManager.currentTime(); + let span = width / WAVE_PIXELS_PER_SECOND / 2; + let minTime = now - span; + let maxTime = now + span; this.waveContext.clearRect(0, 0, width, WAVE_HEIGHT_PIXELS); if(this.buildWave && minTime < 0) { - var bLen = this.core.soundManager.buildLength; + let bLen = this.core.soundManager.buildLength; let center = Math.floor((now + bLen) / bLen * this.buildWave.width); this.drawOneWave(this.buildWave, center, width); } if(this.loopWave && maxTime > 0) { - var loopLen = this.core.soundManager.loopLength; - var clampedNow = (minTime % loopLen) + span; + let loopLen = this.core.soundManager.loopLength; + let clampedNow = (minTime % loopLen) + span; let center = Math.floor(clampedNow / loopLen * this.loopWave.width); this.drawOneWave(this.loopWave, center, width); - var clampedNext = (maxTime % loopLen) - span; + let clampedNext = (maxTime % loopLen) - span; // We've looped and need to draw 2 things if(clampedNext < clampedNow) { let center = Math.floor(clampedNext / loopLen * this.loopWave.width); @@ -1072,7 +1072,7 @@ HuesEditor.prototype.generateXML = function() { } // Yes, this is just a bunch of strings. Simple XML, simple method. - var result = " \n"; + let result = " \n"; result += " " + this.song.title + "\n"; if(this.song.source) { result += " " + this.song.source + "\n"; @@ -1090,16 +1090,16 @@ HuesEditor.prototype.generateXML = function() { }; HuesEditor.prototype.saveXML = function() { - var xml = this.generateXML(); + let xml = this.generateXML(); if(!xml) { return; } - var result = "\n"; + let result = "\n"; result += xml; result += "\n"; // http://stackoverflow.com/a/18197341 - var element = document.createElement('a'); + let element = document.createElement('a'); element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(result)); element.setAttribute('download', "0x40Hues - " + this.song.name + ".xml"); @@ -1113,14 +1113,14 @@ HuesEditor.prototype.saveXML = function() { // http://stackoverflow.com/a/30810322 HuesEditor.prototype.copyXML = function() { - var text = this.generateXML(); + let text = this.generateXML(); // Clicking when disabled if(!text) { return; } - var textArea = document.createElement("textarea"); + let textArea = document.createElement("textarea"); textArea.id = "edit-copybox"; textArea.value = text; @@ -1129,7 +1129,7 @@ HuesEditor.prototype.copyXML = function() { textArea.select(); - var success; + let success; try { success = document.execCommand('copy'); diff --git a/src/js/HuesInfo.js b/src/js/HuesInfo.js index 70d61a3..8155050 100644 --- a/src/js/HuesInfo.js +++ b/src/js/HuesInfo.js @@ -29,13 +29,13 @@ * like a custom info page, simply leave them out. */ -var huesInfo = { +let huesInfo = { versionID: "versionText", referenceID: "reference", referenceClass: "info-ref" }; -var beatGlossary = [ +let beatGlossary = [ "x Vertical blur (snare)", "o Horizontal blur (bass)", "- No blur", @@ -51,7 +51,7 @@ var beatGlossary = [ "I Invert & change image" ]; -var shortcuts = [ +let shortcuts = [ "↑↓ Change song", "←→ Change image", "[N] Random song", @@ -69,9 +69,9 @@ var shortcuts = [ ]; function populateHuesInfo(version) { - var versionInt = parseInt(version); + let versionInt = parseInt(version); - var versionElem = document.getElementById(huesInfo.versionID); + let versionElem = document.getElementById(huesInfo.versionID); if(versionElem) { versionElem.textContent = "v" + (versionInt/10).toFixed(1); } @@ -80,23 +80,23 @@ function populateHuesInfo(version) { addInfo("Keyboard shortcuts", shortcuts); } -var addInfo = function(titleText, list) { - var refElem = document.getElementById(huesInfo.referenceID); +let addInfo = function(titleText, list) { + let refElem = document.getElementById(huesInfo.referenceID); if(!refElem) { return; } - var info = document.createElement("div"); + let info = document.createElement("div"); info.className = huesInfo.referenceClass; refElem.appendChild(info); - var title = document.createElement("h3"); + let title = document.createElement("h3"); title.textContent = titleText; info.appendChild(title); - var listElem = document.createElement("ul"); + let listElem = document.createElement("ul"); list.forEach(function(elem) { - var item = document.createElement("li"); + let item = document.createElement("li"); item.textContent = elem; listElem.appendChild(item); }); diff --git a/src/js/HuesSettings.js b/src/js/HuesSettings.js index a5fa5fa..c058dee 100644 --- a/src/js/HuesSettings.js +++ b/src/js/HuesSettings.js @@ -163,7 +163,7 @@ HuesSettings.prototype.settingsOptions = { } }, {type:"varText", text:function() { - var ret = ""; + let ret = ""; switch(localStorage["autoSong"]) { case "loop": ret = "loop"; @@ -210,7 +210,7 @@ function HuesSettings(defaults) { this.textCallbacks = []; this.visCallbacks = []; - for(var attr in this.defaultSettings) { + for(let attr in this.defaultSettings) { if(this.defaultSettings.hasOwnProperty(attr)) { if(defaults[attr] === undefined) { defaults[attr] = this.defaultSettings[attr]; @@ -241,15 +241,15 @@ function HuesSettings(defaults) { document.getElementById("closeButton").onclick = this.hide.bind(this); // we also care about tabs looking nice. - var checkListener = function() { + let checkListener = function() { for(let i = 0; i < tabs.length; i++) { tabs[i].className = "tab-label"; } this._label.className = "tab-label checked"; }; - var tabs = document.getElementsByClassName("tab-label"); + let tabs = document.getElementsByClassName("tab-label"); for(let i = 0; i < tabs.length; i++) { - var check = document.getElementById(tabs[i].htmlFor); + let check = document.getElementById(tabs[i].htmlFor); check._label = tabs[i]; check.addEventListener("change", checkListener); } @@ -306,10 +306,10 @@ HuesSettings.prototype.showInfo = function() { }; HuesSettings.prototype.initUI = function() { - var doc = this.root.ownerDocument; + let doc = this.root.ownerDocument; // Don't make in every loop - var intValidator = function(self, variable) { + let intValidator = function(self, variable) { this.value = this.value.replace(/\D/g,''); if(this.value === "" || this.value < 1) { this.value = ""; @@ -321,25 +321,25 @@ HuesSettings.prototype.initUI = function() { }; // To order things nicely - for(var cat in this.settingsCategories) { + for(let cat in this.settingsCategories) { if(this.settingsCategories.hasOwnProperty(cat)) { - var catContainer = doc.createElement("div"); + let catContainer = doc.createElement("div"); catContainer.textContent = cat; catContainer.className = "settings-category"; - var cats = this.settingsCategories[cat]; + let cats = this.settingsCategories[cat]; for(let i = 0; i < cats.length; i++) { - var setName = cats[i]; - var setContainer = doc.createElement("div"); - var setting = this.settingsOptions[setName]; + let setName = cats[i]; + let setContainer = doc.createElement("div"); + let setting = this.settingsOptions[setName]; setContainer.textContent = setting.name; setContainer.className = "settings-individual"; - var buttonContainer = doc.createElement("div"); + let buttonContainer = doc.createElement("div"); buttonContainer.className = "settings-buttons"; - for(var j = 0; j < setting.options.length; j++) { - var option = setting.options[j]; + for(let j = 0; j < setting.options.length; j++) { + let option = setting.options[j]; if(typeof option === "string") { - var checkbox = doc.createElement("input"); + let checkbox = doc.createElement("input"); checkbox.className = "settings-checkbox"; checkbox.type = "radio"; checkbox.name = setName; @@ -353,19 +353,19 @@ HuesSettings.prototype.initUI = function() { }.bind(checkbox, this); buttonContainer.appendChild(checkbox); // So we can style this nicely - var label = doc.createElement("label"); + let label = doc.createElement("label"); label.className = "settings-label"; label.htmlFor = checkbox.id; label.textContent = option.toUpperCase(); buttonContainer.appendChild(label); } else { // special option if(option.type == "varText") { - var text = doc.createElement("span"); + let text = doc.createElement("span"); text.textContent = option.text(); buttonContainer.appendChild(text); this.textCallbacks.push({func:option.text, element:text}); } else if(option.type == "input") { - var input = doc.createElement("input"); + let input = doc.createElement("input"); input.setAttribute("type", "text"); input.className = "settings-input"; input.value = localStorage[option.variable]; @@ -395,7 +395,7 @@ HuesSettings.prototype.initUI = function() { // Set a named index to its named value, returns false if name doesn't exist HuesSettings.prototype.set = function(setting, value) { value = value.toLowerCase(); - var opt = this.settingsOptions[setting]; + let opt = this.settingsOptions[setting]; if(!opt || opt.options.indexOf(value) == -1) { console.log(value, "is not a valid value for", setting); return false; @@ -413,11 +413,11 @@ HuesSettings.prototype.set = function(setting, value) { HuesSettings.prototype.updateConditionals = function() { // update any conditionally formatted settings text for(let i = 0; i < this.textCallbacks.length; i++) { - var text = this.textCallbacks[i]; + let text = this.textCallbacks[i]; text.element.textContent = text.func(); } for(let i = 0; i < this.visCallbacks.length; i++) { - var callback = this.visCallbacks[i]; + let callback = this.visCallbacks[i]; callback.element.style.visibility = callback.func() ? "visible" : "hidden"; } }; @@ -425,7 +425,7 @@ HuesSettings.prototype.updateConditionals = function() { // Note: This is not defaults as per defaultSettings, but those merged with // the defaults given in the initialiser HuesSettings.prototype.setDefaults = function() { - for(var attr in this.defaults) { + for(let attr in this.defaults) { if(this.defaults.hasOwnProperty(attr)) { if(this.ephemeralSettings.indexOf(attr) != -1) { continue; diff --git a/src/js/HuesUI.js b/src/js/HuesUI.js index 40f23d3..c9ca370 100644 --- a/src/js/HuesUI.js +++ b/src/js/HuesUI.js @@ -80,46 +80,46 @@ HuesUI.prototype.addCoreCallback = function(name, func) { HuesUI.prototype.initUI = function() { // Major info, image, song names - var imageName = document.createElement("div"); + let imageName = document.createElement("div"); this.imageName = imageName; this.imageLink = document.createElement("a"); this.imageLink.target = "_blank"; this.imageName.appendChild(this.imageLink); - var songName = document.createElement("div"); + let songName = document.createElement("div"); this.songName = songName; this.songLink = document.createElement("a"); this.songLink.target = "_blank"; this.songName.appendChild(this.songLink); - var hueName = document.createElement("div"); + let hueName = document.createElement("div"); this.hueName = hueName; // Prev/next controls - var imagePrev = document.createElement("div"); + let imagePrev = document.createElement("div"); imagePrev.textContent = "<"; imagePrev.onclick = () => {this.core.previousImage();}; this.imagePrev = imagePrev; - var imageNext = document.createElement("div"); + let imageNext = document.createElement("div"); imageNext.textContent = ">"; imageNext.onclick = () =>{this.core.nextImage();}; this.imageNext = imageNext; - var songPrev = document.createElement("div"); + let songPrev = document.createElement("div"); songPrev.textContent = "<"; this.songPrev = songPrev; songPrev.onclick = () =>{this.core.previousSong();}; - var songNext = document.createElement("div"); + let songNext = document.createElement("div"); songNext.textContent = ">"; songNext.onclick = () =>{this.core.nextSong();}; this.songNext = songNext; - var songList = document.createElement("div"); + let songList = document.createElement("div"); songList.textContent = "SONGS"; songList.onclick = () =>{this.core.toggleSongList();}; this.songList = songList; - var imageList = document.createElement("div"); + let imageList = document.createElement("div"); imageList.textContent = "IMAGES"; imageList.onclick = () =>{this.core.toggleImageList();}; this.imageList = imageList; @@ -229,7 +229,7 @@ HuesUI.prototype.newImage = function(image) { return; } - var name = image.fullname ? image.fullname : image.name; + let name = image.fullname ? image.fullname : image.name; this.imageLink.textContent = name.toUpperCase(); this.imageLink.href = image.source ? image.source : ""; @@ -290,7 +290,7 @@ RetroUI.prototype.constructor = RetroUI; RetroUI.prototype.initUI = function() { HuesUI.prototype.initUI.call(this); - var container = document.createElement("div"); + let container = document.createElement("div"); container.className = "hues-r-container"; this.root.appendChild(container); this.container = container; @@ -319,7 +319,7 @@ RetroUI.prototype.initUI = function() { this.controls = document.createElement("div"); this.controls.className = "hues-r-controls"; - var imageMode = document.createElement("div"); + let imageMode = document.createElement("div"); this.imageModeManual = document.createElement("div"); this.imageModeManual.textContent = "NORMAL"; this.imageModeManual.onclick = () => { @@ -350,7 +350,7 @@ RetroUI.prototype.initUI = function() { this.root.appendChild(this.controls); - var subControl = document.createElement("div"); + let subControl = document.createElement("div"); subControl.className = "hues-r-subcontrols"; subControl.appendChild(this.settingsToggle); this.imageList.textContent = "C"; @@ -420,7 +420,7 @@ RetroUI.prototype.newColour = function(colour) { }; RetroUI.prototype.beat = function(beats, index) { - var rest = beats.slice(1); + let rest = beats.slice(1); this.beatBar.textContent = ">>" + rest; if(index < 0) { index = 0; @@ -451,17 +451,17 @@ WeedUI.prototype.initUI = function() { this.controls.className = "hues-w-controls"; this.subControls.className = "hues-w-subcontrols"; - var beatBar = document.createElement("div"); + let beatBar = document.createElement("div"); beatBar.className = "hues-w-beatbar"; this.root.appendChild(beatBar); this.beatBar = beatBar; - var beatLeft = document.createElement("div"); + let beatLeft = document.createElement("div"); beatLeft.className = "hues-w-beatleft"; beatBar.appendChild(beatLeft); this.beatLeft = beatLeft; - var beatRight = document.createElement("div"); + let beatRight = document.createElement("div"); beatRight.className = "hues-w-beatright"; beatBar.appendChild(beatRight); this.beatRight = beatRight; @@ -482,7 +482,7 @@ WeedUI.prototype.toggleHide = function() { }; WeedUI.prototype.beat = function(beats, index) { - var rest = beats.slice(1); + let rest = beats.slice(1); this.beatLeft.textContent = rest; this.beatRight.textContent = rest; @@ -493,12 +493,12 @@ WeedUI.prototype.beat = function(beats, index) { this.beatCount.textContent = "B=" + this.intToHex4(index); if(["x", "o", "X", "O"].indexOf(beats[0]) != -1) { - var beatCenter = document.createElement("div"); + let beatCenter = document.createElement("div"); beatCenter.className = "hues-w-beataccent"; - var rot = this.round10(15 - Math.random() * 30); - var x = this.round10(- this.xVariance / 2 + Math.random() * this.xVariance); - var y = this.round10(30 - this.yVariance / 2 + Math.random() * this.yVariance); - var transform = "rotate(" + rot + "deg) translate(" + x + "px, " + y + "px)"; + let rot = this.round10(15 - Math.random() * 30); + let x = this.round10(- this.xVariance / 2 + Math.random() * this.xVariance); + let y = this.round10(30 - this.yVariance / 2 + Math.random() * this.yVariance); + let transform = "rotate(" + rot + "deg) translate(" + x + "px, " + y + "px)"; beatCenter.style.MozTransform = transform; beatCenter.style.webkitTransform = transform; beatCenter.style.transform = transform; @@ -546,7 +546,7 @@ ModernUI.prototype.initUI = function() { this.imageName.className = "hues-m-imagename"; this.songName.className = "hues-m-songtitle"; - var controls = document.createElement("div"); + let controls = document.createElement("div"); controls.className = "hues-m-controls"; this.root.appendChild(controls); this.controls = controls; @@ -554,7 +554,7 @@ ModernUI.prototype.initUI = function() { controls.appendChild(this.imageName); controls.appendChild(this.songName); - var leftBox = document.createElement("div"); + let leftBox = document.createElement("div"); leftBox.className = "hues-m-leftbox"; controls.appendChild(leftBox); this.leftBox = leftBox; @@ -562,7 +562,7 @@ ModernUI.prototype.initUI = function() { this.hueName.className = "hues-m-huename"; leftBox.appendChild(this.hueName); - var volCluster = document.createElement("div"); + let volCluster = document.createElement("div"); volCluster.className = "hues-m-vol-cluster"; leftBox.appendChild(volCluster); @@ -572,12 +572,12 @@ ModernUI.prototype.initUI = function() { this.hideToggle.className = "hues-m-hide"; volCluster.appendChild(this.hideToggle); - var volBar = document.createElement("div"); + let volBar = document.createElement("div"); volBar.className = "hues-m-vol-bar"; this.volBar = volBar; volCluster.appendChild(volBar); - var label = document.createElement("div"); + let label = document.createElement("div"); label.textContent = "VOL"; label.className = "hues-m-vol-label"; label.onclick = () => { @@ -594,7 +594,7 @@ ModernUI.prototype.initUI = function() { }; volCluster.appendChild(this.infoToggle); - var input = document.createElement("input"); + let input = document.createElement("input"); input.type = "range"; input.min = 0; input.max = 1; @@ -605,18 +605,18 @@ ModernUI.prototype.initUI = function() { this.core.soundManager.setVolume(parseFloat(input.value)); }; - var rightBox = document.createElement("div"); + let rightBox = document.createElement("div"); rightBox.className = "hues-m-rightbox"; controls.appendChild(rightBox); this.rightBox = rightBox; //Song/image controls - var songs = document.createElement("div"); + let songs = document.createElement("div"); songs.className = "hues-m-controlblock"; this.songBlock = songs; this.songList.className = "hues-m-songbutton"; - var songControls = document.createElement("div"); + let songControls = document.createElement("div"); songControls.className = "hues-m-controlbuttons"; this.songPrev.className = "hues-m-prevbutton"; this.songNext.className = "hues-m-nextbutton"; @@ -631,12 +631,12 @@ ModernUI.prototype.initUI = function() { songs.appendChild(songControls); rightBox.appendChild(songs); - var images = document.createElement("div"); + let images = document.createElement("div"); images.className = "hues-m-controlblock"; this.imageList.className = "hues-m-songbutton"; this.imageBlock = images; - var imageControls = document.createElement("div"); + let imageControls = document.createElement("div"); imageControls.className = "hues-m-controlbuttons"; this.imageMode = document.createElement("div"); @@ -652,9 +652,9 @@ ModernUI.prototype.initUI = function() { images.appendChild(imageControls); rightBox.appendChild(images); - var leftInfo = document.createElement("div"); + let leftInfo = document.createElement("div"); leftInfo.className = "hues-m-leftinfo"; - var rightInfo = document.createElement("div"); + let rightInfo = document.createElement("div"); rightInfo.className = "hues-m-rightinfo"; leftInfo.appendChild(this.xBlur); leftInfo.appendChild(this.yBlur); @@ -668,22 +668,22 @@ ModernUI.prototype.initUI = function() { this.visualiserContainer.className = "hues-m-visualisercontainer"; controls.appendChild(this.visualiserContainer); - var beatBar = document.createElement("div"); + let beatBar = document.createElement("div"); beatBar.className = "hues-m-beatbar"; this.root.appendChild(beatBar); this.beatBar = beatBar; - var beatLeft = document.createElement("div"); + let beatLeft = document.createElement("div"); beatLeft.className = "hues-m-beatleft"; beatBar.appendChild(beatLeft); this.beatLeft = beatLeft; - var beatRight = document.createElement("div"); + let beatRight = document.createElement("div"); beatRight.className = "hues-m-beatright"; beatBar.appendChild(beatRight); this.beatRight = beatRight; - var beatCenter = document.createElement("div"); + let beatCenter = document.createElement("div"); beatCenter.className = "hues-m-beatcenter"; this.root.appendChild(beatCenter); this.beatCenter = beatCenter; @@ -739,7 +739,7 @@ ModernUI.prototype.newMode = function(isAuto) { ModernUI.prototype.beat = function(beats, index) { this.currentBeat = beats[0]; - var rest = beats.slice(1); + let rest = beats.slice(1); this.beatLeft.textContent = rest; this.beatRight.textContent = rest; @@ -749,7 +749,7 @@ ModernUI.prototype.beat = function(beats, index) { while (this.beatCenter.firstElementChild) { this.beatCenter.removeChild(this.beatCenter.firstElementChild); } - var span = this.beatCenter.ownerDocument.createElement("span"); + let span = this.beatCenter.ownerDocument.createElement("span"); span.textContent = this.currentBeat; this.beatCenter.appendChild(span); } @@ -824,35 +824,35 @@ function XmasUI() { this.lights = []; - var wires = document.createElement("div"); + let wires = document.createElement("div"); wires.className = "hues-x-wires"; - var left = document.createElement("div"); + let left = document.createElement("div"); left.className = "hues-x-wiresleft"; xleft.forEach(function(l, i, a) { - var light = this.newLight(l, left); + let light = this.newLight(l, left); light.style.transform = "rotate(" + l.angle + "deg)"; light.style.left = l.x + "px"; light.style.top = l.y + "px"; this.lights.push(light); }, this); - var right = document.createElement("div"); + let right = document.createElement("div"); right.className = "hues-x-wiresright"; xright.forEach(function(l, i, a) { - var light = this.newLight(l, right); + let light = this.newLight(l, right); light.style.transform = "rotate(" + (-l.angle) + "deg)"; light.style.right = l.x + "px"; light.style.top = l.y + "px"; this.lights.push(light); }, this); - var bottomHelper = document.createElement("div"); + let bottomHelper = document.createElement("div"); bottomHelper.className = "hues-x-wiresbottomhelper"; - var bottom = document.createElement("div"); + let bottom = document.createElement("div"); bottom.className = "hues-x-wiresbottom"; xbottom.forEach(function(l, i, a) { - var light = this.newLight(l, bottom); + let light = this.newLight(l, bottom); light.style.transform = "rotate(" + l.angle + "deg)"; light.style.left = l.x + "px"; light.style.bottom = l.y + "px"; @@ -899,7 +899,7 @@ XmasUI.prototype.lightFadeOut = function(light) { }; XmasUI.prototype.lightRecolour = function(light) { - var hue = Math.floor(Math.random() * 7) * -56; + let hue = Math.floor(Math.random() * 7) * -56; light.on.style.backgroundPosition = hue + "px, 0, center"; light.off.style.backgroundPosition = hue + "px, 0, center"; }; @@ -913,11 +913,11 @@ XmasUI.prototype.randomLight = function(light) { }; XmasUI.prototype.newLight = function(l, parent) { - var light = document.createElement("div"); + let light = document.createElement("div"); light.className = "hues-x-light"; - var bulb = document.createElement("div"); - var on = document.createElement("div"); - var off = document.createElement("div"); + let bulb = document.createElement("div"); + let on = document.createElement("div"); + let off = document.createElement("div"); bulb.appendChild(on); bulb.appendChild(off); light.appendChild(bulb); @@ -994,33 +994,33 @@ HalloweenUI.prototype.initUI = function() { this.xBlur.className = "hues-h-textfade"; this.yBlur.className = "hues-h-textfade"; - var leftBoxTomb = document.createElement("div"); + let leftBoxTomb = document.createElement("div"); leftBoxTomb.className = "hues-h-tombstone"; this.leftBox.appendChild(leftBoxTomb); - var songTomb = document.createElement("div"); + let songTomb = document.createElement("div"); songTomb.className = "hues-h-tombstone"; this.songBlock.insertBefore(songTomb,this.songBlock.firstChild); - var imageTomb = document.createElement("div"); + let imageTomb = document.createElement("div"); imageTomb.className = "hues-h-tombstone"; this.imageBlock.insertBefore(imageTomb,this.imageBlock.firstChild); - var topLeft = document.createElement("div"); + let topLeft = document.createElement("div"); topLeft.className = "hues-h-topleft"; - var topRight = document.createElement("div"); + let topRight = document.createElement("div"); topRight.className = "hues-h-topright"; - var bottomRight = document.createElement("div"); + let bottomRight = document.createElement("div"); bottomRight.className = "hues-h-bottomright"; this.root.appendChild(topLeft); this.root.appendChild(topRight); this.root.appendChild(bottomRight); - var leftHand = document.createElement("div"); + let leftHand = document.createElement("div"); leftHand.className = "hues-h-left-hand"; this.beatBar.appendChild(leftHand); - var rightHand = document.createElement("div"); + let rightHand = document.createElement("div"); rightHand.className = "hues-h-right-hand"; this.beatBar.appendChild(rightHand); @@ -1035,7 +1035,7 @@ HalloweenUI.prototype.beat = function(beats, index) { ModernUI.prototype.beat.call(this, beats, index); if (this.currentBeat != ".") { - var eyes = this.beatCenter.ownerDocument.createElement("div"); + let eyes = this.beatCenter.ownerDocument.createElement("div"); eyes.className = "hues-m-beatcenter hues-h-eyes"; this.beatCenter.appendChild(eyes); } @@ -1064,7 +1064,7 @@ HalloweenUI.prototype.disconnect = function() { }; // Positions and angles for the Xmas lights -var xleft = [ +let xleft = [ {"angle": 122.529582194, "x": 19.4, "y": -19.35}, {"angle": 92.5309436511, "x": 25.4, "y": 38.7}, {"angle": 107.530202659, "x": 39.4, "y": 107.75}, @@ -1083,7 +1083,7 @@ var xleft = [ {"angle": 74.9981580491, "x": 45.75, "y": 1158.5}, {"angle": 88.3307935055, "x": 35.85, "y": 1238.55} ]; -var xright = [ +let xright = [ {"angle": 120.001009518, "x": 33.3, "y": -29.75}, {"angle": 90.0026227926, "x": 35.35, "y": 53.65}, {"angle": 102.469029922, "x": 41.5, "y": 136.5}, @@ -1103,7 +1103,7 @@ var xright = [ {"angle": 87.4690563489, "x": 40.45, "y": 1119.9}, {"angle": 102.46813454, "x": 20.9, "y": 1193.85} ]; -var xbottom = [ +let xbottom = [ {"angle": 32.5804579323, "x": 110.35, "y": -12.1}, {"angle": 3.28979777069, "x": 168.05, "y": -5.55}, {"angle": 17.6989154099, "x": 238.35, "y": 7.7}, diff --git a/src/js/ResourceManager.js b/src/js/ResourceManager.js index 3d0e585..b688bb2 100644 --- a/src/js/ResourceManager.js +++ b/src/js/ResourceManager.js @@ -23,7 +23,7 @@ "use strict"; // NOTE: Any packs referenced need CORS enabled or loads fail -var packsURL = "http://cdn.0x40hu.es/getRespacks.php"; +let packsURL = "http://cdn.0x40hu.es/getRespacks.php"; function Resources(core) { this.core = core; @@ -84,9 +84,9 @@ Resources.prototype.addAll = function(urls, progressCallback) { this.progressState = Array.apply(null, Array(urls.length)).map(Number.prototype.valueOf,0); } - var respackPromises = []; + let respackPromises = []; - var progressFunc = function(index, progress, pack) { + let progressFunc = function(index, progress, pack) { this.progressState[index] = progress; this.updateProgress(pack); }; @@ -106,7 +106,7 @@ Resources.prototype.addAll = function(urls, progressCallback) { }; Resources.prototype.updateProgress = function(pack) { - var total = 0; + let total = 0; for(let i = 0; i < this.progressState.length; i++) { total += this.progressState[i]; } @@ -116,13 +116,13 @@ Resources.prototype.updateProgress = function(pack) { Resources.prototype.addPack = function(pack) { console.log("Added", pack.name, "to respacks"); - var id = this.resourcePacks.length; + let id = this.resourcePacks.length; this.resourcePacks.push(pack); this.addResourcesToArrays(pack); this.rebuildEnabled(); this.updateTotals(); - var self = this; + let self = this; this.appendListItem("respacks", pack.name, "res" + id, this.packsView.respackList, function() { pack.enabled = this.checked; @@ -153,7 +153,7 @@ Resources.prototype.rebuildEnabled = function() { this.enabledImages = []; for(let i = 0; i < this.resourcePacks.length; i++) { - var pack = this.resourcePacks[i]; + let pack = this.resourcePacks[i]; if (pack.enabled !== true) { continue; } @@ -171,11 +171,11 @@ Resources.prototype.rebuildEnabled = function() { } } if(this.hasUI) { - var songList = this.enabledSongList; + let songList = this.enabledSongList; while(songList.firstElementChild) { songList.removeChild(songList.firstElementChild); } - var imageList = this.enabledImageList; + let imageList = this.enabledImageList; while(imageList.firstElementChild) { imageList.removeChild(imageList.firstElementChild); } @@ -197,7 +197,7 @@ Resources.prototype.rebuildEnabled = function() { }; Resources.prototype.removePack = function(pack) { - var index = this.resourcePacks.indexOf(pack); + let index = this.resourcePacks.indexOf(pack); if (index != -1) { this.resourcePacks.splice(index, 1); this.rebuildArrays(); @@ -210,7 +210,7 @@ Resources.prototype.removeAllPacks = function() { }; Resources.prototype.getSongNames = function() { - var names = []; + let names = []; for(let i = 0; i < this.allSongs.length; i++) { names.push(this.allSongs[i]); } @@ -220,8 +220,8 @@ Resources.prototype.getSongNames = function() { Resources.prototype.loadLocal = function() { console.log("Loading local zip(s)"); - var files = this.fileInput.files; - var p = Promise.resolve(); + let files = this.fileInput.files; + let p = Promise.resolve(); for(let i = 0; i < files.length; i++) { let r = new Respack(); /*jshint -W083 */ @@ -250,7 +250,7 @@ Resources.prototype.localProgress = function(progress, respack) { }; Resources.prototype.localComplete = function(progress) { - var progStat = this.packsView.progressStatus; + let progStat = this.packsView.progressStatus; progStat.textContent = "Complete"; window.setTimeout(function() {progStat.textContent = "Idle";}, 2000); @@ -263,20 +263,20 @@ Resources.prototype.localComplete = function(progress) { Resources.prototype.initUI = function() { this.root = document.getElementById("huesResources"); - var packsContainer = document.createElement("div"); + let packsContainer = document.createElement("div"); packsContainer.className = "res-packscontainer"; - var packHeader = document.createElement("div"); + let packHeader = document.createElement("div"); packHeader.textContent = "Current respacks"; packHeader.className = "res-header"; packHeader.id = "res-curheader"; - var packList = document.createElement("div"); + let packList = document.createElement("div"); packList.className = "res-list"; packList.id = "res-packlist"; this.packsView.respackList = packList; // so we don't use it out of scope in the next if - var remoteHeader = null; - var remoteList = null; + let remoteHeader = null; + let remoteList = null; if(!this.core.settings.defaults.disableRemoteResources) { remoteHeader = document.createElement("div"); remoteHeader.textContent = "Remote respacks"; @@ -291,13 +291,13 @@ Resources.prototype.initUI = function() { packList.className += " noremotes"; } - var buttons = document.createElement("div"); + let buttons = document.createElement("div"); buttons.className = "res-buttons"; - var loadRemote = document.createElement("div"); + let loadRemote = document.createElement("div"); loadRemote.className = "hues-button hidden"; loadRemote.textContent = "LOAD REMOTE"; loadRemote.onclick = this.loadCurrentRemote.bind(this); - var loadLocal = document.createElement("div"); + let loadLocal = document.createElement("div"); loadLocal.className = "hues-button"; loadLocal.textContent = "LOAD ZIPS"; loadLocal.onclick = () => {this.fileInput.click();}; @@ -311,25 +311,25 @@ Resources.prototype.initUI = function() { this.fileInput.multiple = true; this.fileInput.onchange = this.loadLocal.bind(this); - var progressContainer = document.createElement("div"); + let progressContainer = document.createElement("div"); progressContainer.id = "res-progress-container"; - var progressBar = document.createElement("div"); + let progressBar = document.createElement("div"); progressBar.id = "res-progress-bar"; - var progressFilled = document.createElement("span"); + let progressFilled = document.createElement("span"); progressFilled.id = "res-progress-filled"; progressBar.appendChild(progressFilled); - var progressStatus = document.createElement("div"); + let progressStatus = document.createElement("div"); progressStatus.textContent = "Idle"; - var progressTexts = document.createElement("div"); + let progressTexts = document.createElement("div"); progressTexts.id = "res-progress-texts"; - var progressCurrent = document.createElement("div"); + let progressCurrent = document.createElement("div"); progressCurrent.id = "res-progress-current"; progressCurrent.textContent = "0b"; - var progressTop = document.createElement("div"); + let progressTop = document.createElement("div"); progressTop.id = "res-progress-top"; progressTop.textContent = "0b"; - var progressPercent = document.createElement("div"); + let progressPercent = document.createElement("div"); progressPercent.id = "res-progress-percent"; progressPercent.textContent = "0%"; progressTexts.appendChild(progressCurrent); @@ -354,73 +354,73 @@ Resources.prototype.initUI = function() { packsContainer.appendChild(buttons); packsContainer.appendChild(progressContainer); - var indivView = document.createElement("div"); + let indivView = document.createElement("div"); indivView.className = "res-packcontainer"; - var packName = document.createElement("div"); + let packName = document.createElement("div"); packName.textContent = "