AnthonyDuan/taiko-web2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Controller: Separate game and view loops

Browse Source
This commit is contained in:
LoveEevee
2019-01-16 15:33:42 +03:00
parent 926b163460
commit 3398791afe
20 changed files with 275 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
public/src/js/loader.js
View File

@@ -3,92 +3,141 @@ class Loader{
this.callback = callback
this.loadedAssets = 0
this.assetsDiv = document.getElementById("assets")
this.canvasTest = new CanvasTest()
this.screen = document.getElementById("screen")
this.startTime = Date.now()
this.ajax("/src/views/loader.html").then(this.run.bind(this))
var promises = []
promises.push(this.ajax("/src/views/loader.html").then(page => {
this.screen.innerHTML = page
}))
promises.push(this.ajax("/api/config").then(conf => {
gameConfig = JSON.parse(conf)
}))
Promise.all(promises).then(this.run.bind(this))
}
run(page){
run(){
this.promises = []
this.screen = document.getElementById("screen")
this.screen.innerHTML = page
this.loaderPercentage = document.querySelector("#loader .percentage")
this.loaderProgress = document.querySelector("#loader .progress")
snd.buffer = new SoundBuffer()
snd.musicGain = snd.buffer.createGain()
snd.sfxGain = snd.buffer.createGain()
snd.previewGain = snd.buffer.createGain()
snd.sfxGainL = snd.buffer.createGain("left")
snd.sfxGainR = snd.buffer.createGain("right")
snd.sfxLoudGain = snd.buffer.createGain()
snd.buffer.setCrossfade(
[snd.musicGain, snd.previewGain],
[snd.sfxGain, snd.sfxGainL, snd.sfxGainR],
0.5
)
snd.sfxLoudGain.setVolume(1.2)
this.promises.push(this.ajax("/api/config").then(conf => {
gameConfig = JSON.parse(conf)
snd.buffer.load(gameConfig.assets_baseurl + "audio/" + assets.audioOgg).then(() => {
var queryString = gameConfig._version ? "?" + gameConfig._version.commit_short : ""
assets.js.forEach(name => {
var script = document.createElement("script")
this.addPromise(pageEvents.load(script))
script.src = "/src/js/" + name + queryString
document.head.appendChild(script)
})
this.addPromise(new Promise(resolve => {
var cssCount = document.styleSheets.length + assets.css.length
assets.css.forEach(name => {
var stylesheet = document.createElement("link")
stylesheet.rel = "stylesheet"
stylesheet.href = "/src/css/" + name + queryString
document.head.appendChild(stylesheet)
})
var checkStyles = () => {
if(document.styleSheets.length >= cssCount){
resolve()
clearInterval(interval)
}
}
var interval = setInterval(checkStyles, 100)
checkStyles()
}))
assets.fonts.forEach(name => {
var font = document.createElement("h1")
font.style.fontFamily = name
font.appendChild(document.createTextNode("I am a font"))
this.assetsDiv.appendChild(font)
})
assets.img.forEach(name => {
var id = this.getFilename(name)
var image = document.createElement("img")
this.addPromise(pageEvents.load(image))
image.id = name
image.src = gameConfig.assets_baseurl + "img/" + name
this.assetsDiv.appendChild(image)
assets.image[id] = image
})
assets.views.forEach(name => {
var id = this.getFilename(name)
this.addPromise(this.ajax("/src/views/" + name + queryString).then(page => {
assets.pages[id] = page
}))
})
this.addPromise(this.ajax("/api/songs").then(songs => {
assets.songsDefault = JSON.parse(songs)
assets.songs = assets.songsDefault
}))
this.afterJSCount =
[assets.audioOgg, "blurPerformance", "P2Connection"].length +
assets.fonts.length +
assets.audioSfx.length +
assets.audioMusic.length +
assets.audioSfxLR.length +
assets.audioSfxLoud.length
Promise.all(this.promises).then(() => {
snd.buffer = new SoundBuffer()
snd.musicGain = snd.buffer.createGain()
snd.sfxGain = snd.buffer.createGain()
snd.previewGain = snd.buffer.createGain()
snd.sfxGainL = snd.buffer.createGain("left")
snd.sfxGainR = snd.buffer.createGain("right")
snd.sfxLoudGain = snd.buffer.createGain()
snd.buffer.setCrossfade(
[snd.musicGain, snd.previewGain],
[snd.sfxGain, snd.sfxGainL, snd.sfxGainR],
0.5
)
snd.sfxLoudGain.setVolume(1.2)
this.afterJSCount--
this.addPromise(snd.buffer.load(gameConfig.assets_baseurl + "audio/" + assets.audioOgg).then(() => {
this.oggNotSupported = false
}, () => {
this.oggNotSupported = true
}).then(() => {
this.afterJSCount = 0
assets.fonts.forEach(name => {
var font = document.createElement("h1")
font.style.fontFamily = name
font.appendChild(document.createTextNode("I am a font"))
this.assetsDiv.appendChild(font)
this.promises.push(new Promise((resolve, reject) => {
FontDetect.onFontLoaded(name, resolve, reject, {msTimeout: 90000})
this.addPromise(new Promise(resolve => {
FontDetect.onFontLoaded(name, resolve, resolve, {msTimeout: Infinity})
}))
})
assets.img.forEach(name => {
var id = this.getFilename(name)
var image = document.createElement("img")
this.promises.push(pageEvents.load(image))
image.id = name
image.src = gameConfig.assets_baseurl + "img/" + name
this.assetsDiv.appendChild(image)
assets.image[id] = image
})
assets.audioSfx.forEach(name => {
this.promises.push(this.loadSound(name, snd.sfxGain))
this.addPromise(this.loadSound(name, snd.sfxGain))
})
assets.audioMusic.forEach(name => {
this.promises.push(this.loadSound(name, snd.musicGain))
this.addPromise(this.loadSound(name, snd.musicGain))
})
assets.audioSfxLR.forEach(name => {
this.promises.push(this.loadSound(name, snd.sfxGain).then(sound => {
this.addPromise(this.loadSound(name, snd.sfxGain).then(sound => {
var id = this.getFilename(name)
assets.sounds[id + "_p1"] = assets.sounds[id].copy(snd.sfxGainL)
assets.sounds[id + "_p2"] = assets.sounds[id].copy(snd.sfxGainR)
}))
})
assets.audioSfxLoud.forEach(name => {
this.promises.push(this.loadSound(name, snd.sfxLoudGain))
this.addPromise(this.loadSound(name, snd.sfxLoudGain))
})
this.promises.push(this.ajax("/api/songs").then(songs => {
assets.songsDefault = JSON.parse(songs)
assets.songs = assets.songsDefault
}))
assets.views.forEach(name => {
var id = this.getFilename(name)
var qs = gameConfig._version ? '?' + gameConfig._version.commit_short : '?'
this.promises.push(this.ajax("/src/views/" + name + qs).then(page => {
assets.pages[id] = page
}))
})
this.promises.push(this.canvasTest.blurPerformance().then(result => {
this.canvasTest = new CanvasTest()
this.addPromise(this.canvasTest.blurPerformance().then(result => {
perf.blur = result
if(result > 1000 / 50){
// Less than 50 fps with blur enabled
@@ -96,8 +145,10 @@ class Loader{
}
}))
p2 = new P2Connection()
if(location.hash.length === 6){
this.promises.push(new Promise(resolve => {
p2.hashLock = true
this.addPromise(new Promise(resolve => {
p2.open()
pageEvents.add(p2, "message", response => {
if(response.type === "session"){
@@ -119,12 +170,10 @@ class Loader{
}).then(() => {
pageEvents.remove(p2, "message")
}))
}else{
p2.hash("")
}
this.promises.forEach(promise => {
promise.then(this.assetLoaded.bind(this))
})
Promise.all(this.promises).then(() => {
this.canvasTest.drawAllImages().then(result => {
perf.allImg = result
@@ -135,9 +184,13 @@ class Loader{
})
}, this.errorMsg.bind(this))
})
}))
}))
})
}
addPromise(promise){
this.promises.push(promise)
promise.then(this.assetLoaded.bind(this))
}
loadSound(name, gain){
if(this.oggNotSupported && name.endsWith(".ogg")){
@@ -161,13 +214,14 @@ class Loader{
assetLoaded(){
if(!this.error){
this.loadedAssets++
var percentage = Math.floor(this.loadedAssets * 100 / this.promises.length)
var percentage = Math.floor(this.loadedAssets * 100 / (this.promises.length + this.afterJSCount))
this.loaderProgress.style.width = percentage + "%"
this.loaderPercentage.firstChild.data = percentage + "%"
}
}
changePage(name){
changePage(name, patternBg){
this.screen.innerHTML = assets.pages[name]
this.screen.classList[patternBg ? "add" : "remove"]("pattern-bg")
}
ajax(url, customRequest){
return new Promise((resolve, reject) => {