Miscellaneous bug fixes

This commit is contained in:
LoveEevee 2018-12-13 12:18:52 +03:00
parent f726ecdd7b
commit 5f4048315d
16 changed files with 145 additions and 93 deletions

View File

@ -78,7 +78,7 @@
}catch(e){} }catch(e){}
} }
if(errorObj.timestamp && errorObj.stack){ if(errorObj.timestamp && errorObj.stack){
if(errorObj.timestamp + 1000 * 60 * 60 * 24 > (+new Date)){ if(errorObj.timestamp + 1000 * 60 * 60 * 24 > Date.now()){
diag.push("Last error: " + errorObj.stack) diag.push("Last error: " + errorObj.stack)
diag.push("Error date: " + new Date(errorObj.timestamp).toGMTString()) diag.push("Error date: " + new Date(errorObj.timestamp).toGMTString())
}else{ }else{

View File

@ -5,7 +5,10 @@ function browserSupport(){
return true return true
}, },
"AudioContext": function(){ "AudioContext": function(){
return "AudioContext" in window || "webkitAudioContext" in window if("AudioContext" in window || "webkitAudioContext" in window){
return typeof (window.AudioContext || window.webkitAudioContext) === "function"
}
return false
}, },
"Class": function(){ "Class": function(){
eval("class a{}") eval("class a{}")

View File

@ -388,10 +388,6 @@
} }
} }
if(config.align === "bottom"){
drawn.reverse()
}
var drawnHeight = 0 var drawnHeight = 0
for(let symbol of drawn){ for(let symbol of drawn){
if(config.letterSpacing){ if(config.letterSpacing){
@ -418,13 +414,12 @@
var scaling = 1 var scaling = 1
var height = config.height - (ura ? 52 * mul : 0) var height = config.height - (ura ? 52 * mul : 0)
if(height && drawnHeight > height){ if(height && drawnHeight > height){
scaling = height / drawnHeight
if(config.align === "bottom"){ if(config.align === "bottom"){
scaling = Math.max(0.6, height / drawnHeight)
ctx.translate(40 * mul, 0) ctx.translate(40 * mul, 0)
ctx.scale(scaling, height / drawnHeight) ctx.scale(Math.max(0.6, height / drawnHeight), scaling)
ctx.translate(-40 * mul, 0) ctx.translate(-40 * mul, 0)
}else{ }else{
scaling = height / drawnHeight
ctx.scale(1, scaling) ctx.scale(1, scaling)
} }
if(config.selectable){ if(config.selectable){
@ -435,7 +430,11 @@
if(ura){ if(ura){
// Circled ura // Circled ura
drawn.push({realText: ura, text: "裏", x: 0, y: 18, h: 52, ura: true, scale: [1, 1 / scale]}) drawn.push({realText: ura, text: "裏", x: 0, y: 25, h: 52, ura: true, scale: [1, 1 / scaling]})
}
if(config.align === "bottom"){
drawn.reverse()
} }
var actions = [] var actions = []
@ -499,6 +498,9 @@
}else{ }else{
currentX = currentX + config.width / 2 - textWidth / 2 currentX = currentX + config.width / 2 - textWidth / 2
} }
if(symbol.ura){
div.style.font = (30 / (40 * mul)) + "em Meiryo, sans-serif"
}
div.style.left = currentX * scale + "px" div.style.left = currentX * scale + "px"
div.style.top = currentY * scale + "px" div.style.top = currentY * scale + "px"
div.appendChild(document.createTextNode(text)) div.appendChild(document.createTextNode(text))
@ -535,7 +537,7 @@
ctx.font = (30 * mul) + "px Meiryo, sans-serif" ctx.font = (30 * mul) + "px Meiryo, sans-serif"
ctx.textBaseline = "center" ctx.textBaseline = "center"
ctx.beginPath() ctx.beginPath()
ctx.arc(currentX, currentY + (21.5 * mul), (18 * mul), 0, Math.PI * 2) ctx.arc(currentX, currentY + (17 * mul), (18 * mul), 0, Math.PI * 2)
if(action === "stroke"){ if(action === "stroke"){
ctx.fillStyle = config.outline ctx.fillStyle = config.outline
ctx.fill() ctx.fill()
@ -559,13 +561,20 @@
layeredText(config, layers){ layeredText(config, layers){
var ctx = config.ctx var ctx = config.ctx
var inputText = config.text
var mul = config.fontSize / 40 var mul = config.fontSize / 40
ctx.save() var ura = false
var r = this.regex
var string = config.text.split("") var matches = inputText.match(r.ura)
if(matches){
inputText = inputText.slice(0, matches.index)
ura = matches[0]
}
var string = inputText.split("")
var drawn = [] var drawn = []
var r = this.regex
for(var i = 0; i < string.length; i++){ for(var i = 0; i < string.length; i++){
let symbol = string[i] let symbol = string[i]
@ -629,10 +638,6 @@
} }
} }
if(config.align === "right"){
drawn.reverse()
}
var drawnWidth = 0 var drawnWidth = 0
for(let symbol of drawn){ for(let symbol of drawn){
if(config.letterSpacing){ if(config.letterSpacing){
@ -641,15 +646,28 @@
drawnWidth += symbol.w * mul drawnWidth += symbol.w * mul
} }
ctx.save()
ctx.translate(config.x, config.y) ctx.translate(config.x, config.y)
if(config.scale){ if(config.scale){
ctx.scale(config.scale[0], config.scale[1]) ctx.scale(config.scale[0], config.scale[1])
} }
var scale = 1 var scaling = 1
if(config.width && drawnWidth > config.width){ var width = config.width - (ura ? 55 * mul : 0)
scale = config.width / drawnWidth if(width && drawnWidth > width){
ctx.scale(scale, 1) scaling = width / drawnWidth
ctx.scale(scaling, 1)
} }
if(ura){
// Circled ura
drawn.push({text: "裏", x: 0, y: 3, w: 55, ura: true, scale: [1 / scaling, 1]})
}
if(config.align === "right"){
drawn.reverse()
}
ctx.font = config.fontSize + "px " + config.fontFamily ctx.font = config.fontSize + "px " + config.fontFamily
ctx.textBaseline = config.baseline || "top" ctx.textBaseline = config.baseline || "top"
ctx.textAlign = "center" ctx.textAlign = "center"
@ -693,14 +711,13 @@
var saved = false var saved = false
var currentX = offsetX + symbol.x * mul + (layer.x || 0) + symbol.w * mul / 2 var currentX = offsetX + symbol.x * mul + (layer.x || 0) + symbol.w * mul / 2
var currentY = symbol.y + (layer.y || 0) var currentY = symbol.y + (layer.y || 0)
var isLatin = r.latin.test(symbol.text)
if(config.align === "center"){ if(config.align === "center"){
currentX -= drawnWidth / 2 currentX -= drawnWidth / 2
}else if(config.align === "right"){ }else if(config.align === "right"){
currentX = -offsetX + symbol.x + (layer.x || 0) - symbol.w / 2 currentX = -offsetX + symbol.x + (layer.x || 0) - symbol.w / 2
} }
if(symbol.scale || isLatin){ if(symbol.scale || symbol.ura){
saved = true saved = true
ctx.save() ctx.save()
ctx.translate(currentX, currentY) ctx.translate(currentX, currentY)
@ -714,17 +731,23 @@
currentX = 0 currentX = 0
currentY = 0 currentY = 0
} }
if(isLatin){ if(symbol.ura){
ctx.font = (30 * mul) + "px Meiryo, sans-serif"
ctx.textBaseline = "center"
ctx.beginPath()
ctx.arc(currentX, currentY + (17 * mul), (18 * mul), 0, Math.PI * 2)
if(action === "strokeText"){ if(action === "strokeText"){
ctx.lineWidth *= 1.05 ctx.fillStyle = layer.outline
ctx.strokeText(symbol.text, currentX, currentY) ctx.fill()
}else if(action === "fillText"){
ctx.strokeStyle = layer.fill
ctx.lineWidth = 2.5 * mul
ctx.fillText(symbol.text, currentX, currentY)
}
ctx.stroke()
}else{ }else{
ctx.lineWidth *= 0.05
ctx.strokeStyle = ctx.fillStyle
ctx.strokeText(symbol.text, currentX, currentY)
}
}
ctx[action](symbol.text, currentX, currentY) ctx[action](symbol.text, currentX, currentY)
}
if(saved){ if(saved){
ctx.restore() ctx.restore()
} }
@ -1230,7 +1253,7 @@
} }
getMS(){ getMS(){
return +new Date return Date.now()
} }
clean(){ clean(){

View File

@ -46,7 +46,7 @@ class CanvasTest{
blurIteration(){ blurIteration(){
return new Promise(resolve => { return new Promise(resolve => {
requestAnimationFrame(() => { requestAnimationFrame(() => {
var startTime = +new Date var startTime = Date.now()
var ctx = this.ctx var ctx = this.ctx
ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
@ -84,14 +84,14 @@ class CanvasTest{
{fill: "#fff", shadow: [-1, 1, 3, 1.5]} {fill: "#fff", shadow: [-1, 1, 3, 1.5]}
]) ])
} }
resolve((+new Date) - startTime) resolve(Date.now() - startTime)
}) })
}) })
} }
drawAllImages(){ drawAllImages(){
return new Promise(resolve => { return new Promise(resolve => {
requestAnimationFrame(() => { requestAnimationFrame(() => {
var startTime = +new Date var startTime = Date.now()
var ctx = this.ctx var ctx = this.ctx
ctx.save() ctx.save()
ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
@ -132,7 +132,7 @@ class CanvasTest{
} }
ctx.restore() ctx.restore()
resolve((+new Date) - startTime) resolve(Date.now() - startTime)
}) })
}) })
} }

View File

@ -135,7 +135,7 @@ class Controller{
restartSong(){ restartSong(){
this.clean() this.clean()
if(this.multiplayer){ if(this.multiplayer){
new loadSong(this.selectedSong, false, true, this.touchEnabled) new LoadSong(this.selectedSong, false, true, this.touchEnabled)
}else{ }else{
loader.changePage("game") loader.changePage("game")
var taikoGame = new Controller(this.selectedSong, this.songData, this.autoPlayEnabled, false, this.touchEnabled) var taikoGame = new Controller(this.selectedSong, this.songData, this.autoPlayEnabled, false, this.touchEnabled)
@ -143,7 +143,7 @@ class Controller{
} }
} }
playSound(id, time){ playSound(id, time){
var ms = (+new Date) + (time || 0) * 1000 var ms = Date.now() + (time || 0) * 1000
if(!(id in this.playedSounds) || ms > this.playedSounds[id] + 30){ if(!(id in this.playedSounds) || ms > this.playedSounds[id] + 30){
assets.sounds[id + this.snd].play(time) assets.sounds[id + this.snd].play(time)
this.playedSounds[id] = ms this.playedSounds[id] = ms

View File

@ -106,7 +106,7 @@ class Debug{
var measureMS = measures[this.measureNum].ms var measureMS = measures[this.measureNum].ms
var game = this.controller.game var game = this.controller.game
game.started = true game.started = true
var timestamp = +new Date var timestamp = Date.now()
var currentDate = timestamp - measureMS var currentDate = timestamp - measureMS
game.startDate = currentDate game.startDate = currentDate
game.sndTime = timestamp - snd.buffer.getTime() * 1000 game.sndTime = timestamp - snd.buffer.getTime() * 1000

View File

@ -45,7 +45,7 @@ class Game{
var offsetTime = Math.max(0, this.timeForDistanceCircle - this.songData.circles[0].ms) |0 var offsetTime = Math.max(0, this.timeForDistanceCircle - this.songData.circles[0].ms) |0
this.elapsedTime = -offsetTime this.elapsedTime = -offsetTime
// The real start for the game will start when chrono will reach 0 // The real start for the game will start when chrono will reach 0
this.startDate = +(new Date) + offsetTime this.startDate = Date.now() + offsetTime
} }
update(){ update(){
// Main operations // Main operations
@ -347,7 +347,7 @@ class Game{
if(!this.paused){ if(!this.paused){
assets.sounds["pause"].play() assets.sounds["pause"].play()
this.paused = true this.paused = true
this.latestDate = +new Date this.latestDate = Date.now()
this.mainAsset.stop() this.mainAsset.stop()
this.mainMusicPlaying = false this.mainMusicPlaying = false
this.view.pauseMove(0, true) this.view.pauseMove(0, true)
@ -357,7 +357,7 @@ class Game{
}else{ }else{
assets.sounds["cancel"].play() assets.sounds["cancel"].play()
this.paused = false this.paused = false
var currentDate = +new Date var currentDate = Date.now()
this.startDate += currentDate - this.latestDate this.startDate += currentDate - this.latestDate
this.sndTime = currentDate - snd.buffer.getTime() * 1000 this.sndTime = currentDate - snd.buffer.getTime() * 1000
this.view.gameDiv.classList.remove("game-paused") this.view.gameDiv.classList.remove("game-paused")
@ -371,12 +371,12 @@ class Game{
// Refreshed date // Refreshed date
var ms = this.elapsedTime var ms = this.elapsedTime
if(ms >= 0 && !this.started){ if(ms >= 0 && !this.started){
this.startDate = +new Date this.startDate = Date.now()
this.elapsedTime = this.getAccurateTime() this.elapsedTime = this.getAccurateTime()
this.started = true this.started = true
this.sndTime = this.startDate - snd.buffer.getTime() * 1000 this.sndTime = this.startDate - snd.buffer.getTime() * 1000
}else if(ms < 0 || ms >= 0 && this.started){ }else if(ms < 0 || ms >= 0 && this.started){
var currentDate = +new Date var currentDate = Date.now()
if(!this.controller.touchEnabled){ if(!this.controller.touchEnabled){
var sndTime = currentDate - snd.buffer.getTime() * 1000 var sndTime = currentDate - snd.buffer.getTime() * 1000
var lag = sndTime - this.sndTime var lag = sndTime - this.sndTime
@ -392,7 +392,7 @@ class Game{
if(this.isPaused()){ if(this.isPaused()){
return this.elapsedTime return this.elapsedTime
}else{ }else{
return (+new Date) - this.startDate return Date.now() - this.startDate
} }
} }
getCircles(){ getCircles(){

View File

@ -104,15 +104,17 @@ class Keyboard{
} }
} }
checkMenuKeys(){ checkMenuKeys(){
if(!this.controller.multiplayer){ if(!this.controller.multiplayer && !this.locked){
var moveMenu = 0 var moveMenu = 0
var ms = this.game.getAccurateTime() var ms = this.game.getAccurateTime()
this.gamepadMenu.play((pressed, keyCode) => { this.gamepadMenu.play((pressed, keyCode) => {
if(pressed){ if(pressed){
if(this.game.isPaused()){ if(this.game.isPaused()){
if(keyCode === "cancel"){ if(keyCode === "cancel"){
this.locked = true
return setTimeout(() => { return setTimeout(() => {
this.controller.togglePause() this.controller.togglePause()
this.locked = false
}, 200) }, 200)
} }
} }
@ -139,12 +141,11 @@ class Keyboard{
} }
var moveMenuConfirm = () => { var moveMenuConfirm = () => {
if(this.game.isPaused()){ if(this.game.isPaused()){
this.locked = true
setTimeout(() => { setTimeout(() => {
this.controller.view.pauseConfirm() this.controller.view.pauseConfirm()
this.locked = false
}, 200) }, 200)
for(var key in this.keyTime){
this.keyTime[key] = null
}
} }
} }
this.checkKey(this.kbd["previous"], "menu", moveMenuMinus) this.checkKey(this.kbd["previous"], "menu", moveMenuMinus)
@ -199,6 +200,9 @@ class Keyboard{
setKey(keyCode, down, ms){ setKey(keyCode, down, ms){
if(down){ if(down){
this.keys[keyCode] = true this.keys[keyCode] = true
if(this.game.isPaused()){
return
}
this.keyTime[keyCode] = ms this.keyTime[keyCode] = ms
if(keyCode == this.kbd.don_l || keyCode == this.kbd.don_r){ if(keyCode == this.kbd.don_l || keyCode == this.kbd.don_r){
this.checkKeySound(keyCode, "don") this.checkKeySound(keyCode, "don")

View File

@ -4,9 +4,9 @@ class Loader{
this.loadedAssets = 0 this.loadedAssets = 0
this.assetsDiv = document.getElementById("assets") this.assetsDiv = document.getElementById("assets")
this.canvasTest = new CanvasTest() this.canvasTest = new CanvasTest()
this.startTime = +new Date this.startTime = Date.now()
this.ajax("src/views/loader.html").then(this.run.bind(this)) this.ajax("/src/views/loader.html").then(this.run.bind(this))
} }
run(page){ run(page){
this.promises = [] this.promises = []
@ -47,8 +47,6 @@ class Loader{
FontDetect.onFontLoaded(name, resolve, reject, {msTimeout: 90000}) FontDetect.onFontLoaded(name, resolve, reject, {msTimeout: 90000})
})) }))
}) })
var fontDetectDiv = document.getElementById("fontdetectHelper")
fontDetectDiv.parentNode.removeChild(fontDetectDiv)
assets.img.forEach(name => { assets.img.forEach(name => {
var id = this.getFilename(name) var id = this.getFilename(name)
@ -85,7 +83,7 @@ class Loader{
assets.views.forEach(name => { assets.views.forEach(name => {
var id = this.getFilename(name) var id = this.getFilename(name)
var qs = gameConfig._version ? '?' + gameConfig._version.commit_short : '?' var qs = gameConfig._version ? '?' + gameConfig._version.commit_short : '?'
this.promises.push(this.ajax("src/views/" + name + qs).then(page => { this.promises.push(this.ajax("/src/views/" + name + qs).then(page => {
assets.pages[id] = page assets.pages[id] = page
})) }))
}) })
@ -130,7 +128,7 @@ class Loader{
Promise.all(this.promises).then(() => { Promise.all(this.promises).then(() => {
this.canvasTest.drawAllImages().then(result => { this.canvasTest.drawAllImages().then(result => {
perf.allImg = result perf.allImg = result
perf.load = (+new Date) - this.startTime perf.load = Date.now() - this.startTime
this.canvasTest.clean() this.canvasTest.clean()
this.clean() this.clean()
this.callback() this.callback()
@ -185,6 +183,8 @@ class Loader{
}) })
} }
clean(){ clean(){
var fontDetectDiv = document.getElementById("fontdetectHelper")
fontDetectDiv.parentNode.removeChild(fontDetectDiv)
delete this.assetsDiv delete this.assetsDiv
delete this.loaderPercentage delete this.loaderPercentage
delete this.loaderProgress delete this.loaderProgress

View File

@ -1,4 +1,4 @@
class loadSong{ class LoadSong{
constructor(selectedSong, autoPlayEnabled, multiplayer, touchEnabled){ constructor(selectedSong, autoPlayEnabled, multiplayer, touchEnabled){
this.selectedSong = selectedSong this.selectedSong = selectedSong
this.autoPlayEnabled = autoPlayEnabled this.autoPlayEnabled = autoPlayEnabled

View File

@ -10,7 +10,7 @@ addEventListener("error", function(err){
function errorMessage(stack){ function errorMessage(stack){
localStorage["lastError"] = JSON.stringify({ localStorage["lastError"] = JSON.stringify({
timestamp: +new Date, timestamp: Date.now(),
stack: stack stack: stack
}) })
} }

View File

@ -297,9 +297,13 @@
scroll: scroll scroll: scroll
}) })
lastDrumroll = false lastDrumroll = false
break }else{
currentMeasure.push({
bpm: bpm,
scroll: scroll
})
} }
circleObj.endDrumroll = lastDrumroll break
} }
if(symbol === "7" || symbol === "9"){ if(symbol === "7" || symbol === "9"){
var hits = balloons[balloonID] var hits = balloons[balloonID]

View File

@ -703,7 +703,7 @@ class Scoresheet{
} }
getMS(){ getMS(){
return +new Date return Date.now()
} }
clean(){ clean(){

View File

@ -313,7 +313,7 @@ class SongSelect{
ctrl: event.ctrlKey ctrl: event.ctrlKey
} }
} }
if(code === "ctrl" || code === "shift"){ if(code === "ctrl" || code === "shift" || !this.redrawRunning){
return return
} }
@ -376,7 +376,7 @@ class SongSelect{
getSelection().removeAllRanges() getSelection().removeAllRanges()
this.selectable.blur() this.selectable.blur()
} }
if(event.target !== this.canvas){ if(event.target !== this.canvas || !this.redrawRunning){
return return
} }
if(event.type === "mousedown"){ if(event.type === "mousedown"){
@ -427,7 +427,7 @@ class SongSelect{
} }
touchEnd(event){ touchEnd(event){
event.preventDefault() event.preventDefault()
if(this.state.screen === "song"){ if(this.state.screen === "song" && this.redrawRunning){
var currentSong = this.songs[this.selectedSong] var currentSong = this.songs[this.selectedSong]
if(currentSong.action === "browse"){ if(currentSong.action === "browse"){
var mouse = this.mouseOffset(event.changedTouches[0].pageX, event.changedTouches[0].pageY) var mouse = this.mouseOffset(event.changedTouches[0].pageX, event.changedTouches[0].pageY)
@ -557,6 +557,9 @@ class SongSelect{
} }
browseChange(event){ browseChange(event){
this.redrawRunning = false
this.pointer(false)
var loaderDiv = document.createElement("div") var loaderDiv = document.createElement("div")
loaderDiv.innerHTML = assets.pages["loadsong"] loaderDiv.innerHTML = assets.pages["loadsong"]
loader.screen.appendChild(loaderDiv) loader.screen.appendChild(loaderDiv)
@ -669,6 +672,7 @@ class SongSelect{
}else{ }else{
loader.screen.removeChild(loaderDiv) loader.screen.removeChild(loaderDiv)
this.browse.parentNode.reset() this.browse.parentNode.reset()
this.redrawRunning = true
} }
}) })
} }
@ -770,7 +774,7 @@ class SongSelect{
multiplayer = ctrl multiplayer = ctrl
} }
new loadSong({ new LoadSong({
"title": selectedSong.title, "title": selectedSong.title,
"folder": selectedSong.id, "folder": selectedSong.id,
"difficulty": this.difficultyId[difficulty], "difficulty": this.difficultyId[difficulty],
@ -1077,6 +1081,7 @@ class SongSelect{
selectedWidth = this.songAsset.width selectedWidth = this.songAsset.width
} }
}else{ }else{
this.playBgm(!this.songs[this.selectedSong].stars)
this.state.locked = 0 this.state.locked = 0
} }
}else if(screen === "difficulty"){ }else if(screen === "difficulty"){
@ -1809,6 +1814,7 @@ class SongSelect{
new Promise((resolve, reject) => { new Promise((resolve, reject) => {
if(currentSong.music){ if(currentSong.music){
songObj.preview_time = prvTime
snd.previewGain.load(currentSong.music, true).then(resolve, reject) snd.previewGain.load(currentSong.music, true).then(resolve, reject)
}else{ }else{
songObj.preview_time = 0 songObj.preview_time = 0
@ -1950,7 +1956,7 @@ class SongSelect{
} }
getMS(){ getMS(){
return +new Date return Date.now()
} }
clean(){ clean(){

View File

@ -147,10 +147,13 @@ class Sound{
playLoop(time, absolute, seek1, seek2, until){ playLoop(time, absolute, seek1, seek2, until){
time = this.convertTime(time, absolute) time = this.convertTime(time, absolute)
seek1 = seek1 || 0 seek1 = seek1 || 0
if(typeof seek2 == "undefined"){ if(typeof seek2 === "undefined"){
seek2 = seek1 seek2 = seek1
} }
until = until || this.duration until = until || this.duration
if(seek1 >= until || seek2 >= until){
return
}
this.loop = { this.loop = {
started: time + until - seek1, started: time + until - seek1,
seek: seek2, seek: seek2,

View File

@ -654,7 +654,7 @@
var barH = 130 * mul var barH = 130 * mul
if(this.gogoTime || ms <= this.gogoTimeStarted + 100){ if(this.gogoTime || ms <= this.gogoTimeStarted + 100){
var grd = ctx.createLinearGradient(0, 0, this.winW, 0) var grd = ctx.createLinearGradient(padding, 0, this.winW, 0)
grd.addColorStop(0, "#512a2c") grd.addColorStop(0, "#512a2c")
grd.addColorStop(0.46, "#6f2a2d") grd.addColorStop(0.46, "#6f2a2d")
grd.addColorStop(0.76, "#8a4763") grd.addColorStop(0.76, "#8a4763")
@ -669,17 +669,23 @@
} }
ctx.fillRect(padding, barY, winW - padding, barH) ctx.fillRect(padding, barY, winW - padding, barH)
} }
if(keyTime[sound] > ms - 200){ if(keyTime[sound] > ms - 130){
var gradients = { var gradients = {
"don": ["#f54c25", "#232323"], "don": "255, 0, 0",
"ka": ["#75cee9", "#232323"] "ka": "0, 170, 255"
} }
var grd = ctx.createLinearGradient(0, 0, this.winW, 0) var yellow = "255, 231, 0"
grd.addColorStop(0, gradients[sound][0]) var currentGradient = gradients[sound]
grd.addColorStop(1, gradients[sound][1]) ctx.globalCompositeOperation = "lighter"
do{
var grd = ctx.createLinearGradient(padding, 0, this.winW, 0)
grd.addColorStop(0, "rgb(" + currentGradient + ")")
grd.addColorStop(1, "rgba(" + currentGradient + ", 0)")
ctx.fillStyle = grd ctx.fillStyle = grd
ctx.globalAlpha = 1 - (ms - keyTime[sound]) / 200 ctx.globalAlpha = (1 - (ms - keyTime[sound]) / 130) / 5
ctx.fillRect(padding, barY, winW - padding, barH) ctx.fillRect(padding, barY, winW - padding, barH)
}while(this.currentScore.ms > ms - 130 && currentGradient !== yellow && (currentGradient = yellow))
ctx.globalCompositeOperation = "source-over"
} }
ctx.globalAlpha = 1 ctx.globalAlpha = 1
@ -768,6 +774,7 @@
// Measures // Measures
ctx.save() ctx.save()
ctx.beginPath()
ctx.rect(this.slotPos.paddingLeft, 0, winW - this.slotPos.paddingLeft, winH) ctx.rect(this.slotPos.paddingLeft, 0, winW - this.slotPos.paddingLeft, winH)
ctx.clip() ctx.clip()
this.drawMeasures() this.drawMeasures()
@ -799,6 +806,7 @@
// Future notes // Future notes
this.updateNoteFaces() this.updateNoteFaces()
ctx.save() ctx.save()
ctx.beginPath()
ctx.rect(this.slotPos.paddingLeft, 0, winW - this.slotPos.paddingLeft, winH) ctx.rect(this.slotPos.paddingLeft, 0, winW - this.slotPos.paddingLeft, winH)
ctx.clip() ctx.clip()
@ -848,18 +856,20 @@
ctx.fillStyle = "rgba(0, 0, 0, 0.5)" ctx.fillStyle = "rgba(0, 0, 0, 0.5)"
ctx.fillRect(0, 0, winW, winH) ctx.fillRect(0, 0, winW, winH)
if(this.portrait){
ctx.save() ctx.save()
if(this.portrait){
ctx.translate(frameLeft - 242, frameTop + 308)
var pauseScale = 720 / 766 var pauseScale = 720 / 766
ctx.scale(pauseScale, pauseScale) ctx.scale(pauseScale, pauseScale)
ctx.translate(-257, 328) }else{
ctx.translate(frameLeft, frameTop)
} }
var pauseRect = (ctx, mul) => { var pauseRect = (ctx, mul) => {
this.draw.roundedRect({ this.draw.roundedRect({
ctx: ctx, ctx: ctx,
x: (frameLeft + 269) * mul, x: 269 * mul,
y: (frameTop + 93) * mul, y: 93 * mul,
w: 742 * mul, w: 742 * mul,
h: 494 * mul, h: 494 * mul,
radius: 17 * mul radius: 17 * mul
@ -876,20 +886,19 @@
ctx: ctx, ctx: ctx,
img: assets.image["bg_pause"], img: assets.image["bg_pause"],
shape: pauseRect, shape: pauseRect,
dx: frameLeft + 68, dx: 68,
dy: frameTop + 11 dy: 11
}) })
ctx.drawImage(assets.image["mimizu"], ctx.drawImage(assets.image["mimizu"],
frameLeft + 313, frameTop + 247, 313, 247, 136, 315
136, 315
) )
var _y = frameTop + 108 var _y = 108
var _w = 80 var _w = 80
var _h = 464 var _h = 464
for(var i = 0; i < this.pauseOptions.length; i++){ for(var i = 0; i < this.pauseOptions.length; i++){
var _x = frameLeft + 520 + 110 * i var _x = 520 + 110 * i
if(this.state.moveHover !== null){ if(this.state.moveHover !== null){
var selected = i === this.state.moveHover var selected = i === this.state.moveHover
}else{ }else{
@ -957,11 +966,9 @@
} }
} }
if(this.portrait){
ctx.restore() ctx.restore()
} }
} }
}
setBackground(){ setBackground(){
var songBg = document.getElementById("songbg") var songBg = document.getElementById("songbg")
var songStage = document.getElementById("song-stage") var songStage = document.getElementById("song-stage")
@ -1066,7 +1073,9 @@
measures.forEach(measure => { measures.forEach(measure => {
var timeForDistance = this.posToMs(distanceForCircle, measure.speed) var timeForDistance = this.posToMs(distanceForCircle, measure.speed)
if(ms >= measure.ms - timeForDistance && ms <= measure.ms + 350){ var startingTime = measure.ms - timeForDistance
var finishTime = measure.ms + this.posToMs(this.slotPos.x - this.slotPos.paddingLeft + 3, measure.speed)
if(ms >= startingTime && ms <= finishTime){
var measureX = this.slotPos.x + this.msToPos(measure.ms - ms, measure.speed) var measureX = this.slotPos.x + this.msToPos(measure.ms - ms, measure.speed)
this.ctx.strokeStyle = "#bdbdbd" this.ctx.strokeStyle = "#bdbdbd"
this.ctx.lineWidth = 3 this.ctx.lineWidth = 3
@ -1581,7 +1590,7 @@
}else{ }else{
this.state.pausePos = this.mod(this.pauseOptions.length, this.state.pausePos + pos) this.state.pausePos = this.mod(this.pauseOptions.length, this.state.pausePos + pos)
} }
this.state.moveMS = +new Date - (absolute ? 0 : 500) this.state.moveMS = Date.now() - (absolute ? 0 : 500)
this.state.moveHover = null this.state.moveHover = null
} }
pauseConfirm(pos){ pauseConfirm(pos){
@ -1619,7 +1628,7 @@
var mouse = this.mouseOffset(event.offsetX, event.offsetY) var mouse = this.mouseOffset(event.offsetX, event.offsetY)
var moveTo = this.pauseMouse(mouse.x, mouse.y) var moveTo = this.pauseMouse(mouse.x, mouse.y)
if(moveTo === null && this.state.moveHover === this.state.pausePos){ if(moveTo === null && this.state.moveHover === this.state.pausePos){
this.state.moveMS = +new Date - 500 this.state.moveMS = Date.now() - 500
} }
this.state.moveHover = moveTo this.state.moveHover = moveTo
this.pointer(moveTo !== null) this.pointer(moveTo !== null)