From 3398791afec2e0a0a92677649f8b0d620ae1d799 Mon Sep 17 00:00:00 2001 From: LoveEevee Date: Wed, 16 Jan 2019 15:33:42 +0300 Subject: [PATCH] Controller: Separate game and view loops --- public/src/css/loader.css | 28 ++++++ public/src/css/main.css | 97 ------------------ public/src/js/about.js | 2 +- public/src/js/assets.js | 38 +++++++ public/src/js/canvasasset.js | 6 +- public/src/js/controller.js | 67 ++++++------ public/src/js/game.js | 3 +- public/src/js/gamepad.js | 12 ++- public/src/js/keyboard.js | 20 ++-- public/src/js/loader.js | 190 ++++++++++++++++++++++------------- public/src/js/loadsong.js | 4 +- public/src/js/main.js | 14 +-- public/src/js/parseosu.js | 2 +- public/src/js/scoresheet.js | 2 +- public/src/js/session.js | 2 +- public/src/js/songselect.js | 6 +- public/src/js/titlescreen.js | 2 +- public/src/js/tutorial.js | 2 +- public/src/js/view.js | 18 ++-- templates/index.html | 35 +------ 20 files changed, 275 insertions(+), 275 deletions(-) diff --git a/public/src/css/loader.css b/public/src/css/loader.css index ab5ee2e..306ced8 100644 --- a/public/src/css/loader.css +++ b/public/src/css/loader.css @@ -1,3 +1,31 @@ +html, +body{ + margin: 0; + width: 100%; + height: 100%; + background: #fe7839; + position: absolute; + user-select: none; + touch-action: none; + overflow: hidden; +} +#screen{ + width: 100%; + height: 100%; + margin: 0; + padding: 0; + background-color: #000; + background-position: top center; + background-size: 30vh; + font-family: TnT, Meiryo, sans-serif; +} +#screen.pattern-bg{ + background-color: #fe7839; +} +#assets, +#browse{ + display: none; +} #loader{ width:90%; height:10%; diff --git a/public/src/css/main.css b/public/src/css/main.css index 131c5b0..2ec0cf7 100644 --- a/public/src/css/main.css +++ b/public/src/css/main.css @@ -1,28 +1,3 @@ -html, -body{ - margin: 0; - width: 100%; - height: 100%; - background: #fe7839; - position: absolute; - user-select: none; - touch-action: none; - overflow: hidden; -} -#screen{ - width: 100%; - height: 100%; - margin: 0; - padding: 0; - background-color: #fe7839; - background-position: top center; - background-size: 30vh; - font-family: TnT, Meiryo, sans-serif; -} -#assets, -#browse{ - display: none; -} .window{ width: 60vmin; height: 23vmin; @@ -40,40 +15,6 @@ body{ display: flex; flex-direction: column; justify-content: space-between; - -} -.stroke-main{ - font-weight: 300; -} -.result-title{ - margin-top: 9px !important; - margin-left: 5px !important; - z-index: 1; -} -.result-song, -.game-song{ - position: absolute; - right: 0; - font-size: 5vmin; - margin: 3vmin 3vmin 0px 0px; - color: white; - float: right; - z-index: 1; - font-weight: 300; -} -.stroke-main::before{ - content: attr(alt); - left: 0; - z-index: -1; - position: absolute; - -webkit-text-stroke: 0.3em #fb3c0c; -} -.stroke-main::after{ - content: attr(alt); - left: 0; - z-index: -2; - position: absolute; - -webkit-text-stroke: 0.5em #000; } .stroke-sub::before{ content: attr(alt); @@ -82,44 +23,6 @@ body{ left: 0; z-index: -1; } -.don{ - background-position-y: 0; - position: absolute; - top: 0px; -} -.alpha-title .song-title-char{ - transform: scale(1.3, 1); - font-size: 80%; - line-height: 22px; -} -.song-title-apos{ - padding-left: 4px; -} -.song-title-char[alt="ぁ"], -.song-title-char[alt="ぃ"], -.song-title-char[alt="ぅ"], -.song-title-char[alt="ぇ"], -.song-title-char[alt="ぉ"], -.song-title-char[alt="ゃ"], -.song-title-char[alt="ゅ"], -.song-title-char[alt="ょ"], -.song-title-char[alt="っ"], -.song-title-char[alt="ァ"], -.song-title-char[alt="ィ"], -.song-title-char[alt="ゥ"], -.song-title-char[alt="ェ"], -.song-title-char[alt="ォ"], -.song-title-char[alt="ャ"], -.song-title-char[alt="ュ"], -.song-title-char[alt="ョ"], -.song-title-char[alt="ッ"]{ - margin-top: -6px; -} -.song-title-char[alt="ー"], -.song-title-char[alt="-"]{ - transform: rotate(95deg); - font-size: 90%; -} #tutorial-outer{ display: flex; justify-content: center; diff --git a/public/src/js/about.js b/public/src/js/about.js index 6ba890c..a9f10a4 100644 --- a/public/src/js/about.js +++ b/public/src/js/about.js @@ -6,7 +6,7 @@ ] this.touchEnabled = touchEnabled - loader.changePage("about") + loader.changePage("about", true) cancelTouch = false this.endButton = document.getElementById("tutorial-end-button") diff --git a/public/src/js/assets.js b/public/src/js/assets.js index 6ad90cf..89097f8 100644 --- a/public/src/js/assets.js +++ b/public/src/js/assets.js @@ -1,4 +1,42 @@ var assets = { + "js": [ + "lib/fontdetect.min.js", + "loadsong.js", + "parseosu.js", + "titlescreen.js", + "scoresheet.js", + "songselect.js", + "keyboard.js", + "game.js", + "controller.js", + "circle.js", + "view.js", + "mekadon.js", + "gamepad.js", + "tutorial.js", + "soundbuffer.js", + "p2.js", + "canvasasset.js", + "viewassets.js", + "gamerules.js", + "canvasdraw.js", + "canvastest.js", + "canvascache.js", + "parsetja.js", + "about.js", + "debug.js", + "session.js", + "strings.js", + "importsongs.js" + ], + "css": [ + "main.css", + "titlescreen.css", + "loadsong.css", + "game.css", + "debug.css", + "songbg.css" + ], "img": [ "title-screen.png", "logo-big.png", diff --git a/public/src/js/canvasasset.js b/public/src/js/canvasasset.js index a4dfb1c..af1b847 100644 --- a/public/src/js/canvasasset.js +++ b/public/src/js/canvasasset.js @@ -1,7 +1,7 @@ class CanvasAsset{ constructor(view, layer, position){ this.ctx = view.ctx - this.controller = view.controller + this.view = view this.position = position this.animationFrames = {} this.speed = 1000 / 60 @@ -13,7 +13,7 @@ class CanvasAsset{ if(this.animation){ var u = (a, b) => typeof a === "undefined" ? b : a var frame = 0 - var ms = this.controller.getElapsedTime() + var ms = this.view.getMS() var beatInterval = this.frameSpeed ? 1000 / 60 : this.beatInterval if(this.animationEnd){ @@ -95,7 +95,7 @@ class CanvasAsset{ } changeBeatInterval(beatMS, initial){ if(!initial && !this.frameSpeed){ - var ms = this.controller.getElapsedTime() + var ms = this.view.getMS() this.animationStart = ms - (ms - this.animationStart) / this.beatInterval * beatMS } this.beatInterval = beatMS diff --git a/public/src/js/controller.js b/public/src/js/controller.js index dd71cc8..d99369d 100644 --- a/public/src/js/controller.js +++ b/public/src/js/controller.js @@ -7,6 +7,10 @@ class Controller{ this.touchEnabled = touchEnabled this.snd = this.multiplayer ? "_p" + this.multiplayer : "" + if(this.multiplayer !== 2){ + loader.changePage("game", false) + } + if(selectedSong.type === "tja"){ this.parsedSongData = new ParseTja(songData, selectedSong.difficulty, selectedSong.offset) }else{ @@ -47,27 +51,48 @@ class Controller{ }) } startMainLoop(){ - this.mainLoopStarted = false this.mainLoopRunning = true - this.mainLoop() + this.gameLoop() + this.viewLoop() + this.gameInterval = setInterval(this.gameLoop.bind(this), 1000 / 60) } stopMainLoop(){ this.mainLoopRunning = false this.mainAsset.stop() + clearInterval(this.gameInterval) } - mainLoop(){ + gameLoop(){ + if(this.mainLoopRunning){ + if(this.syncWith){ + this.syncWith.game.elapsedTime = this.game.elapsedTime + this.syncWith.game.startDate = this.game.startDate + } + var ms = this.game.elapsedTime + + this.keyboard.checkMenuKeys() + if(!this.game.isPaused()){ + this.keyboard.checkGameKeys() + + if(ms < 0){ + this.game.updateTime() + }else{ + this.game.update() + if(!this.mainLoopRunning){ + return + } + this.game.playMainMusic() + } + } + } + } + viewLoop(){ if(this.mainLoopRunning){ if(this.multiplayer !== 2){ requestAnimationFrame(() => { + this.viewLoop() if(this.syncWith){ - this.syncWith.game.elapsedTime = this.game.elapsedTime - this.syncWith.game.startDate = this.game.startDate + this.syncWith.viewLoop() } - this.mainLoop() - if(this.syncWith){ - this.syncWith.mainLoop() - } - if(this.scoresheet){ if(this.view.ctx){ this.view.ctx.save() @@ -80,27 +105,7 @@ class Controller{ } }) } - var ms = this.game.elapsedTime - - if(!this.game.isPaused()){ - this.keyboard.checkGameKeys() - - if(ms >= 0 && !this.mainLoopStarted){ - this.mainLoopStarted = true - } - if(ms < 0){ - this.game.updateTime() - } - if(this.mainLoopStarted){ - this.game.update() - if(!this.mainLoopRunning){ - return - } - this.game.playMainMusic() - } - } this.view.refresh() - this.keyboard.checkMenuKeys() } } gameEnded(){ @@ -130,7 +135,6 @@ class Controller{ if(!fadeIn){ this.clean() } - loader.screen.classList.remove("view") new SongSelect(false, fadeIn, this.touchEnabled) } restartSong(){ @@ -138,7 +142,6 @@ class Controller{ if(this.multiplayer){ new LoadSong(this.selectedSong, false, true, this.touchEnabled) }else{ - loader.changePage("game") var taikoGame = new Controller(this.selectedSong, this.songData, this.autoPlayEnabled, false, this.touchEnabled) taikoGame.run() } diff --git a/public/src/js/game.js b/public/src/js/game.js index 062cdd4..513c0c2 100644 --- a/public/src/js/game.js +++ b/public/src/js/game.js @@ -64,7 +64,8 @@ class Game{ updateCirclesStatus(){ var nextSet = false var circles = this.songData.circles - for(var i in circles){ + var startIndex = this.currentCircle === 0 ? 0 : this.currentCircle - 1 + for(var i = startIndex; i < circles.length && i < this.currentCircle + 2; i++){ var circle = circles[i] if(!circle.getPlayed()){ var ms = this.elapsedTime diff --git a/public/src/js/gamepad.js b/public/src/js/gamepad.js index 0487c92..b6255c0 100644 --- a/public/src/js/gamepad.js +++ b/public/src/js/gamepad.js @@ -28,21 +28,23 @@ class Gamepad{ if(callback){ this.interval = setInterval(() => { this.play(callback) - }, 100) + }, 1000 / 60) } } play(callback){ - if(pageEvents.lastKeyEvent + 5000 > Date.now()){ - return - } if("getGamepads" in navigator){ var gamepads = navigator.getGamepads() + if(gamepads.length === 0){ + return + } }else{ return } + if(pageEvents.lastKeyEvent + 5000 > Date.now()){ + return + } var bindings = this.bindings - var force = { lsu: false, lsr: false, diff --git a/public/src/js/keyboard.js b/public/src/js/keyboard.js index 3280da6..977fdde 100644 --- a/public/src/js/keyboard.js +++ b/public/src/js/keyboard.js @@ -35,6 +35,7 @@ class Keyboard{ gameBtn[this.kbd["ka_l"]] = ["lb", "lt"] gameBtn[this.kbd["ka_r"]] = ["rb", "rt"] this.gamepad = new Gamepad(gameBtn) + this.gamepadInterval = setInterval(this.gamepadKeys.bind(this), 1000 / 60 / 2) var menuBtn = { "cancel": ["a"], @@ -84,23 +85,25 @@ class Keyboard{ return true } checkGameKeys(){ - if(!this.controller.autoPlayEnabled){ - var ms = this.game.getAccurateTime() + if(this.controller.autoPlayEnabled){ + this.checkKeySound(this.kbd["don_l"], "don") + this.checkKeySound(this.kbd["don_r"], "don") + this.checkKeySound(this.kbd["ka_l"], "ka") + this.checkKeySound(this.kbd["ka_r"], "ka") + } + } + gamepadKeys(){ + if(!this.game.isPaused() && !this.controller.autoPlayEnabled){ this.gamepad.play((pressed, keyCode) => { if(pressed){ if(this.keys[keyCode]){ this.setKey(keyCode, false) } - this.setKey(keyCode, true, ms) + this.setKey(keyCode, true, this.game.getAccurateTime()) }else{ this.setKey(keyCode, false) } }) - }else{ - this.checkKeySound(this.kbd["don_l"], "don") - this.checkKeySound(this.kbd["don_r"], "don") - this.checkKeySound(this.kbd["ka_l"], "ka") - this.checkKeySound(this.kbd["ka_r"], "ka") } } checkMenuKeys(){ @@ -239,5 +242,6 @@ class Keyboard{ } clean(){ pageEvents.keyRemove(this, "all") + clearInterval(this.gamepadInterval) } } diff --git a/public/src/js/loader.js b/public/src/js/loader.js index a04167c..f4eb10f 100644 --- a/public/src/js/loader.js +++ b/public/src/js/loader.js @@ -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) => { diff --git a/public/src/js/loadsong.js b/public/src/js/loadsong.js index a4b5a76..4f08f78 100644 --- a/public/src/js/loadsong.js +++ b/public/src/js/loadsong.js @@ -5,7 +5,7 @@ class LoadSong{ this.multiplayer = multiplayer this.touchEnabled = touchEnabled - loader.changePage("loadsong") + loader.changePage("loadsong", true) var loadingText = document.getElementById("loading-text") loadingText.appendChild(document.createTextNode(strings.loading)) loadingText.setAttribute("alt", strings.loading) @@ -233,7 +233,6 @@ class LoadSong{ }else if(event.type === "gamestart"){ this.clean() p2.clearMessage("songsel") - loader.changePage("game") var taikoGame1 = new Controller(song, this.songData, false, 1, this.touchEnabled) var taikoGame2 = new Controller(this.selectedSong2, this.song2Data, true, 2, this.touchEnabled) taikoGame1.run(taikoGame2) @@ -248,7 +247,6 @@ class LoadSong{ }) }else{ this.clean() - loader.changePage("game") var taikoGame = new Controller(song, this.songData, this.autoPlayEnabled, false, this.touchEnabled) taikoGame.run() } diff --git a/public/src/js/main.js b/public/src/js/main.js index 323a0a4..7176140 100644 --- a/public/src/js/main.js +++ b/public/src/js/main.js @@ -58,11 +58,16 @@ function debug(){ } var root = document.documentElement -var fullScreenSupported = "requestFullscreen" in root || "webkitRequestFullscreen" in root || "mozRequestFullScreen" in root + +if(/iPhone|iPad/.test(navigator.userAgent)){ + var fullScreenSupported = false +}else{ + var fullScreenSupported = "requestFullscreen" in root || "webkitRequestFullscreen" in root || "mozRequestFullScreen" in root +} var pageEvents = new PageEvents() var snd = {} -var p2 = new P2Connection() +var p2 var disableBlur = false var cancelTouch = true var lastHeight @@ -104,11 +109,6 @@ pageEvents.keyAdd(debugObj, "all", "down", event => { debugObj.controller.restartSong() } }) -if(location.hash.length === 6){ - p2.hashLock = true -}else{ - p2.hash("") -} var loader = new Loader(() => { new Titlescreen() diff --git a/public/src/js/parseosu.js b/public/src/js/parseosu.js index e2b347f..0039bd8 100644 --- a/public/src/js/parseosu.js +++ b/public/src/js/parseosu.js @@ -290,7 +290,7 @@ class ParseOsu{ var extras = values.slice(this.osu.EXTRAS) - var distance = parseFloat(extras[this.osu.PIXELLENGTH]) + var distance = parseFloat(extras[this.osu.PIXELLENGTH]) * parseFloat(extras[this.osu.REPEAT]) var velocity = this.difficulty.sliderMultiplier * speed / 10 var endTime = start + distance / velocity diff --git a/public/src/js/scoresheet.js b/public/src/js/scoresheet.js index d827ef7..d0ed61e 100644 --- a/public/src/js/scoresheet.js +++ b/public/src/js/scoresheet.js @@ -493,7 +493,7 @@ class Scoresheet{ fontSize: 29, fontFamily: this.font, align: "right", - width: 215, + width: 154, letterSpacing: 1 }, [ {outline: "#000", letterBorder: 8}, diff --git a/public/src/js/session.js b/public/src/js/session.js index 526b934..c3e88a7 100644 --- a/public/src/js/session.js +++ b/public/src/js/session.js @@ -1,7 +1,7 @@ class Session{ constructor(touchEnabled){ this.touchEnabled = touchEnabled - loader.changePage("session") + loader.changePage("session", true) this.endButton = document.getElementById("tutorial-end-button") if(touchEnabled){ document.getElementById("tutorial-outer").classList.add("touch-enabled") diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js index 81b58ea..ab7fe37 100644 --- a/public/src/js/songselect.js +++ b/public/src/js/songselect.js @@ -1,11 +1,11 @@ class SongSelect{ constructor(fromTutorial, fadeIn, touchEnabled){ this.touchEnabled = touchEnabled - - loader.changePage("songselect") + + loader.changePage("songselect", false) this.canvas = document.getElementById("song-sel-canvas") this.ctx = this.canvas.getContext("2d") - + this.songSkin = { "selected": { background: "#ffdb2c", diff --git a/public/src/js/titlescreen.js b/public/src/js/titlescreen.js index 3c5d40b..777e09d 100644 --- a/public/src/js/titlescreen.js +++ b/public/src/js/titlescreen.js @@ -1,6 +1,6 @@ class Titlescreen{ constructor(){ - loader.changePage("titlescreen") + loader.changePage("titlescreen", false) this.titleScreen = document.getElementById("title-screen") var proceed = document.getElementById("title-proceed") proceed.appendChild(document.createTextNode(strings.titleProceed)) diff --git a/public/src/js/tutorial.js b/public/src/js/tutorial.js index b340d2c..eb59423 100644 --- a/public/src/js/tutorial.js +++ b/public/src/js/tutorial.js @@ -1,7 +1,7 @@ class Tutorial{ constructor(fromSongSel){ this.fromSongSel = fromSongSel - loader.changePage("tutorial") + loader.changePage("tutorial", true) assets.sounds["bgm_setsume"].playLoop(0.1, false, 0, 1.054, 16.054) this.endButton = document.getElementById("tutorial-end-button") diff --git a/public/src/js/view.js b/public/src/js/view.js index 02b7630..203db89 100644 --- a/public/src/js/view.js +++ b/public/src/js/view.js @@ -124,7 +124,7 @@ } this.setDonBg() - this.lastMousemove = this.controller.getElapsedTime() + this.lastMousemove = this.controller.game.getAccurateTime() pageEvents.mouseAdd(this, this.onmousemove.bind(this)) this.refresh() @@ -180,7 +180,10 @@ } winW /= ratio winH /= ratio - var ms = this.getMS() + if(!this.controller.game.paused){ + this.ms = this.controller.game.getAccurateTime() + } + var ms = this.ms if(this.portrait){ var frameTop = winH / 2 - 1280 / 2 @@ -978,7 +981,6 @@ }else{ var catId = this.categories.default.sort } - loader.screen.classList.add("view") if(!selectedSong.songSkin.song){ var id = selectedSong.songBg @@ -1100,7 +1102,7 @@ } drawCircles(circles){ var distanceForCircle = this.winW / this.ratio - this.slotPos.x - var ms = this.controller.getElapsedTime() + var ms = this.getMS() for(var i = circles.length; i--;){ var circle = circles[i] @@ -1127,7 +1129,7 @@ } } drawAnimatedCircles(circles){ - var ms = this.controller.getElapsedTime() + var ms = this.getMS() for(var i = 0; i < circles.length; i++){ var circle = circles[i] @@ -1174,7 +1176,7 @@ var fill, size, faceID var type = circle.getType() - var ms = this.controller.getElapsedTime() + var ms = this.getMS() var circleMs = circle.getMS() var endTime = circle.getEndTime() var animated = circle.isAnimated() @@ -1458,7 +1460,7 @@ && animation !== "gogo" ){ don.setAnimation("10combo") - var ms = this.controller.getElapsedTime() + var ms = this.getMS() don.setAnimationStart(ms) var length = don.getAnimationLength("normal") don.setUpdateSpeed(4 / length) @@ -1677,7 +1679,7 @@ this.assets.changeBeatInterval(beatMS) } getMS(){ - return this.controller.getElapsedTime() + return this.ms } clean(){ this.draw.clean() diff --git a/templates/index.html b/templates/index.html index 806047e..2381f8c 100644 --- a/templates/index.html +++ b/templates/index.html @@ -7,53 +7,20 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
+
{% if version %} taiko-web ver.{{version.version}} ({{version.commit_short}})