Clean up classes before exiting them

public/src/js/loader.js

@@ -1,15 +1,15 @@
 class Loader{
 	constructor(){
 		this.loadedAssets = 0
-		this.errorCount = 0
 		this.assetsDiv = document.getElementById("assets")
-		this.promises = []
-		$("#screen").load("/src/views/loader.html", () => {
-			this.run()
-		})
+		this.ajax("src/views/loader.html").then(this.run.bind(this))
 	}
-	run(){
+	run(page){
+		this.promises = []
+		this.screen = document.getElementById("screen")
+		this.screen.innerHTML = page
 		this.loaderPercentage = document.querySelector("#loader .percentage")
+		this.loaderProgress = document.querySelector("#loader .progress")
 		
 		assets.fonts.forEach(name => {
 			var font = document.createElement("h1")
@@ -20,11 +20,13 @@ class Loader{
 				FontDetect.onFontLoaded(name, resolve, reject, {msTimeout: 90000})
 			}))
 		})
+		var fontDetectDiv = document.getElementById("fontdetectHelper")
+		fontDetectDiv.parentNode.removeChild(fontDetectDiv)
 		
 		assets.img.forEach(name => {
-			var id = name.substr(0, name.length - 4)
+			var id = this.getFilename(name)
 			var image = document.createElement("img")
-			this.promises.push(promiseLoad(image))
+			this.promises.push(pageEvents.load(image))
 			image.id = name
 			image.src = "/assets/img/" + name
 			this.assetsDiv.appendChild(image)
@@ -39,68 +41,82 @@ class Loader{
 		snd.previewGain.setVolume(0.5)
 		
 		assets.audioSfx.forEach(name => {
-			var id = name.substr(0, name.length-4)
-			this.promises.push(snd.sfxGain.load("/assets/audio/" + name).then(sound => {
-				assets.sounds[id] = sound
-			}))
+			this.promises.push(this.loadSound(name, snd.sfxGain))
 		})
 		assets.audioMusic.forEach(name => {
-			var id = name.substr(0, name.length-4)
-			this.promises.push(snd.musicGain.load("/assets/audio/" + name).then(sound => {
-				assets.sounds[id] = sound
-			}))
+			this.promises.push(this.loadSound(name, snd.musicGain))
 		})
 		
 		p2 = new P2Connection()
 		
-		this.promises.push(ajax("/api/songs").then(songs => {
+		this.promises.push(this.ajax("/api/songs").then(songs => {
 			assets.songs = JSON.parse(songs)
 		}))
 		
+		assets.views.forEach(name => {
+			var id = this.getFilename(name)
+			this.promises.push(this.ajax("src/views/" + name).then(page => {
+				assets.pages[id] = page
+			}))
+		})
+		
 		this.promises.forEach(promise => {
-			promise.then(() => {
-				this.assetLoaded()
-			}, () => {
-				this.errorMsg()
-			})
+			promise.then(this.assetLoaded.bind(this))
 		})
 		
 		Promise.all(this.promises).then(() => {
+			this.clean()
 			new Titlescreen()
+		}, this.errorMsg.bind(this))
+	}
+	loadSound(name, gain){
+		var id = this.getFilename(name)
+		return gain.load("/assets/audio/" + name).then(sound => {
+			assets.sounds[id] = sound
 		})
 	}
+	getFilename(name){
+		return name.slice(0, name.lastIndexOf("."))
+	}
 	errorMsg(){
-		if(this.errorCount == 0){
-			this.loaderPercentage.appendChild(document.createElement("br"))
-			this.loaderPercentage.appendChild(document.createTextNode("An error occurred, please refresh"))
-		}
-		this.errorCount++
+		this.error = true
+		this.loaderPercentage.appendChild(document.createElement("br"))
+		this.loaderPercentage.appendChild(document.createTextNode("An error occurred, please refresh"))
+		this.clean()
 	}
 	assetLoaded(){
-		this.loadedAssets++
-		var percentage = parseInt(this.loadedAssets * 100 / this.promises.length)
-		document.querySelector("#loader .progress").style.width = percentage + "%"
-		this.loaderPercentage.firstChild.data = percentage + "%"
+		if(!this.error){
+			this.loadedAssets++
+			var percentage = Math.floor(this.loadedAssets * 100 / this.promises.length)
+			this.loaderProgress.style.width = percentage + "%"
+			this.loaderPercentage.firstChild.data = percentage + "%"
+		}
+	}
+	changePage(name){
+		document.getElementById("screen").innerHTML = assets.pages[name]
+	}
+	ajax(url, customRequest){
+		return new Promise((resolve, reject) => {
+			var request = new XMLHttpRequest()
+			request.open("GET", url)
+			pageEvents.load(request).then(() => {
+				resolve(request.response)
+			}, reject)
+			if(customRequest){
+				customRequest(request)
+			}
+			request.send()
+		})
+	}
+	clean(){
+		delete this.assetsDiv
+		delete this.loaderPercentage
+		delete this.loaderProgress
+		delete this.promises
 	}
 }
-function ajax(url){
-	return new Promise((resolve, reject) => {
-		var request = new XMLHttpRequest()
-		request.open("GET", url)
-		promiseLoad(request).then(() => {
-			resolve(request.response)
-		}, reject)
-		request.send()
-	})
-}
-function promiseLoad(asset){
-	return new Promise((resolve, reject) => {
-		asset.addEventListener("load", resolve)
-		asset.addEventListener("error", reject)
-		asset.addEventListener("abort", reject)
-	})
-}
 
+var pageEvents = new PageEvents()
+var loader = new Loader()
 var snd = {}
 var p2
-new Loader()