From c72b5a742c4f8bafd5b5fcbd400724bb3ea2120a Mon Sep 17 00:00:00 2001 From: LoveEevee Date: Wed, 20 Feb 2019 23:48:21 +0300 Subject: [PATCH] Add animations and fix behaviour --- public/src/js/canvascache.js | 1 + public/src/js/canvasdraw.js | 9 +- public/src/js/debug.js | 8 +- public/src/js/game.js | 164 ++++++++++++++++++++++++----------- public/src/js/main.js | 4 +- public/src/js/mekadon.js | 6 ++ public/src/js/parsetja.js | 84 +++++++++--------- public/src/js/strings.js | 31 ++++++- public/src/js/view.js | 157 +++++++++++++++++++++++++++------ public/src/views/debug.html | 8 +- 10 files changed, 344 insertions(+), 128 deletions(-) diff --git a/public/src/js/canvascache.js b/public/src/js/canvascache.js index 56a1f7d..1b4c121 100644 --- a/public/src/js/canvascache.js +++ b/public/src/js/canvascache.js @@ -11,6 +11,7 @@ class CanvasCache{ this.map = new Map() this.canvas = document.createElement("canvas") this.ctx = this.canvas.getContext("2d") + document.body.appendChild(this.canvas) } this.scale = scale this.x = 0 diff --git a/public/src/js/canvasdraw.js b/public/src/js/canvasdraw.js index 8a072a4..4431774 100644 --- a/public/src/js/canvasdraw.js +++ b/public/src/js/canvasdraw.js @@ -268,6 +268,9 @@ easeOut(pos){ return Math.sin(Math.PI / 2 * pos) } + easeOutBack(pos){ + return Math.sin(Math.PI / 1.74 * pos) * 1.03 + } easeInOut(pos){ return (Math.cos(Math.PI * pos) - 1) / -2 } @@ -572,7 +575,7 @@ } if(symbol.ura){ ctx.font = (30 * mul) + "px Meiryo, sans-serif" - ctx.textBaseline = "center" + ctx.textBaseline = "middle" ctx.beginPath() ctx.arc(currentX, currentY + (17 * mul), (18 * mul), 0, Math.PI * 2) if(action === "stroke"){ @@ -581,7 +584,7 @@ }else if(action === "fill"){ ctx.strokeStyle = config.fill ctx.lineWidth = 2.5 * mul - ctx.fillText(symbol.text, currentX, currentY) + ctx.fillText(symbol.text, currentX, currentY + (17 * mul)) } ctx.stroke() }else{ @@ -788,7 +791,7 @@ } if(symbol.ura){ ctx.font = (30 * mul) + "px Meiryo, sans-serif" - ctx.textBaseline = "center" + ctx.textBaseline = "middle" ctx.beginPath() ctx.arc(currentX, currentY + (17 * mul), (18 * mul), 0, Math.PI * 2) if(action === "strokeText"){ diff --git a/public/src/js/debug.js b/public/src/js/debug.js index 607002d..9f2836c 100644 --- a/public/src/js/debug.js +++ b/public/src/js/debug.js @@ -116,7 +116,9 @@ class Debug{ this.branchReset(null, true) } - var measures = this.controller.parsedSongData.measures + var measures = this.controller.parsedSongData.measures.filter((measure, i, array) => { + return i === 0 || Math.abs(measure.ms - array[i - 1].ms) > 0.01 + }) this.measureNumSlider.setMinMax(0, measures.length - 1) if(this.measureNum && measures.length > this.measureNum){ var measureMS = measures[this.measureNum].ms @@ -197,7 +199,9 @@ class Debug{ var game = this.controller.game var name = this.branchSelect.value game.branch = name === "auto" ? false : name - game.branchSet = false + game.branchSet = name === "auto" + var selectedOption = this.branchSelect.selectedOptions[0] + this.branchSelect.style.background = selectedOption.style.background if(this.restartCheckbox.checked && !noRestart){ this.restartSong() } diff --git a/public/src/js/game.js b/public/src/js/game.js index 865b905..3f0845b 100644 --- a/public/src/js/game.js +++ b/public/src/js/game.js @@ -28,8 +28,8 @@ class Game{ this.musicFadeOut = 0 this.fadeOutStarted = false this.currentTimingPoint = 0 - this.sectionNotes = [] - this.sectionDrumroll = 0 + this.branchNames = ["normal", "advanced", "master"] + this.resetSection() assets.songs.forEach(song => { if(song.id == selectedSong.folder){ @@ -77,7 +77,7 @@ class Game{ var index = 0 for(var i = startIndex; i < circles.length; i++){ var circle = circles[i] - if((!circle.branch || circle.branch.active) && !circle.isPlayed){ + if(circle && (!circle.branch || circle.branch.active) && !circle.isPlayed){ var type = circle.type var drumrollNotes = type === "balloon" || type === "drumroll" || type === "daiDrumroll" var endTime = circle.endTime + (drumrollNotes ? 0 : this.rules.bad) @@ -100,6 +100,9 @@ class Game{ if(ms > endTime){ if(!this.controller.autoPlayEnabled){ if(drumrollNotes){ + if(circle.section && circle.timesHit === 0){ + this.resetSection() + } circle.played(-1, false) this.updateCurrentCircle() if(this.controller.multiplayer === 1){ @@ -112,6 +115,9 @@ class Game{ p2.send("drumroll", value) } }else{ + if(circle.section){ + this.resetSection() + } var currentScore = 0 circle.played(-1, type === "daiDon" || type === "daiKa") this.sectionNotes.push(0) @@ -137,47 +143,62 @@ class Game{ } var branches = this.songData.branches if(branches){ - if(this.controller.multiplayer === 2 || this.branch){ - var parent = this.controller.multiplayer === 2 ? p2 : this - var view = this.controller.view - if(view.branch !== parent.branch){ - view.branchAnimate = { - ms: ms, - fromBranch: view.branch + var force = this.controller.multiplayer === 2 ? p2 : this + var measures = this.songData.measures + if(this.controller.multiplayer === 2 || force.branch){ + if(!force.branchSet){ + force.branchSet = true + if(branches.length){ + this.setBranch(branches[0], force.branch) } - view.branch = parent.branch - } - if(!parent.branchSet){ - parent.branchSet = true - for(var i = 0; i < branches.length; i++){ - this.setBranch(branches[i], parent.branch) + var view = this.controller.view + var currentMeasure = view.branch + for(var i = measures.length; i--;){ + var measure = measures[i] + if(measure.nextBranch && measure.ms <= ms){ + currentMeasure = measure.nextBranch.active + } + } + if(view.branch !== currentMeasure){ + view.branchAnimate = { + ms: ms, + fromBranch: view.branch + } + view.branch = currentMeasure } } - }else{ - var measures = this.songData.measures - for(var i = 0; i < measures.length; i++){ - var measure = measures[i] - if(measure.ms > ms){ - break - }else if(measure.nextBranch && !measure.gameChecked){ - measure.gameChecked = true - var branch = measure.nextBranch - if(branch.type){ - if(branch.type === "drumroll"){ + } + for(var i = 0; i < measures.length; i++){ + var measure = measures[i] + if(measure.ms > ms){ + break + }else if(measure.nextBranch && !measure.gameChecked){ + measure.gameChecked = true + var branch = measure.nextBranch + if(branch.type){ + var accuracy = 0 + if(branch.type === "drumroll"){ + if(force.branch){ + var accuracy = Math.max(0, branch.requirement[force.branch]) + }else{ var accuracy = this.sectionDrumroll + } + }else if(this.sectionNotes.length !== 0){ + if(force.branch){ + var accuracy = Math.max(0, Math.min(100, branch.requirement[force.branch])) }else{ var accuracy = this.sectionNotes.reduce((a, b) => a + b) / this.sectionNotes.length * 100 } - if(accuracy >= branch.requirement[1]){ - this.setBranch(branch, "master") - }else if(accuracy >= branch.requirement[0]){ - this.setBranch(branch, "advanced") - }else{ - this.setBranch(branch, "normal") - } - }else if(this.controller.multiplayer === 1){ - p2.send("branch", "normal") } + if(accuracy >= branch.requirement.master){ + this.setBranch(branch, "master") + }else if(accuracy >= branch.requirement.advanced){ + this.setBranch(branch, "advanced") + }else{ + this.setBranch(branch, "normal") + } + }else if(this.controller.multiplayer === 1){ + p2.send("branch", "normal") } } } @@ -273,6 +294,9 @@ class Game{ this.updateCombo(score) this.updateGlobalScore(score, typeDai && keyDai ? 2 : 1, circle.gogoTime) this.updateCurrentCircle() + if(circle.section){ + this.resetSection() + } this.sectionNotes.push(score === 450 ? 1 : (score === 230 ? 0.5 : 0)) if(this.controller.multiplayer === 1){ var value = { @@ -327,6 +351,9 @@ class Game{ var ms = this.elapsedTime var dai = circle.type === "daiDrumroll" var score = 100 + if(circle.section && circle.timesHit === 0){ + this.resetSection() + } circle.hit(keysKa) var keyTime = this.controller.getKeyTime() if(circle.type === "drumroll"){ @@ -347,9 +374,7 @@ class Game{ circleAnim.animate(ms) this.view.drumroll.push(circleAnim) this.globalScore.drumroll++ - if(this.controller.multiplayer !== 2){ - this.sectionDrumroll++ - } + this.sectionDrumroll++ this.globalScore.points += score * (dai ? 2 : 1) this.view.setDarkBg(false) } @@ -473,10 +498,6 @@ class Game{ do{ var circle = circles[++this.currentCircle] }while(circle && circle.branch && !circle.branch.active) - if(circle && circle.section){ - this.sectionNotes = [] - this.sectionDrumroll = 0 - } } getCurrentCircle(){ return this.currentCircle @@ -530,16 +551,59 @@ class Game{ } this.globalScore.points += Math.floor(score * multiplier / 10) * 10 } - setBranch(branch, name){ - var names = ["normal", "advanced", "master"] - for(var i in names){ - if(names[i] in branch){ - branch[names[i]].active = names[i] === name + setBranch(currentBranch, activeName){ + var pastActive = currentBranch.active + var ms = currentBranch.ms + for(var i = 0; i < this.songData.branches.length; i++){ + var branch = this.songData.branches[i] + if(branch.ms >= ms){ + var relevantName = activeName + var req = branch.requirement + var noNormal = req.advanced <= 0 + var noAdvanced = req.master <= 0 || req.advanced >= req.master || branch.type === "accuracy" && req.advanced > 100 + var noMaster = branch.type === "accuracy" && req.master > 100 + if(relevantName === "normal" && noNormal){ + relevantName = noAdvanced ? "master" : "advanced" + } + if(relevantName === "advanced" && noAdvanced){ + relevantName = noMaster ? "normal" : "master" + } + if(relevantName === "master" && noMaster){ + relevantName = noAdvanced ? "normal" : "advanced" + } + for(var j in this.branchNames){ + var name = this.branchNames[j] + if(name in branch){ + branch[name].active = name === relevantName + } + } + if(branch === currentBranch){ + activeName = relevantName + } + branch.active = relevantName } } - branch.active = name + var circles = this.songData.circles + var circle = circles[this.currentCircle] + if(!circle || circle.branch === currentBranch[pastActive]){ + var ms = this.elapsedTime + var closestCircle = circles.findIndex(circle => { + return (!circle.branch || circle.branch.active) && circle.endTime >= ms + }) + if(closestCircle !== -1){ + this.currentCircle = closestCircle + } + } + this.HPGain = 100 / this.songData.circles.filter(circle => { + var type = circle.type + return (type === "don" || type === "ka" || type === "daiDon" || type === "daiKa") && (!circle.branch || circle.branch.active) + }).length if(this.controller.multiplayer === 1){ - p2.send("branch", name) + p2.send("branch", activeName) } } + resetSection(){ + this.sectionNotes = [] + this.sectionDrumroll = 0 + } } diff --git a/public/src/js/main.js b/public/src/js/main.js index a63691e..1e632ca 100644 --- a/public/src/js/main.js +++ b/public/src/js/main.js @@ -106,7 +106,9 @@ pageEvents.keyAdd(debugObj, "all", "down", event => { }else if(debugObj.state === "minimised"){ debugObj.debug.restore() }else{ - debugObj.debug = new Debug() + try{ + debugObj.debug = new Debug() + }catch(e){} } } if(event.keyCode === 82 && debugObj.debug && debugObj.controller){ diff --git a/public/src/js/mekadon.js b/public/src/js/mekadon.js index 22f7d73..962b9ff 100644 --- a/public/src/js/mekadon.js +++ b/public/src/js/mekadon.js @@ -8,6 +8,9 @@ class Mekadon{ play(circle){ var type = circle.type if((type === "balloon" || type === "drumroll" || type === "daiDrumroll") && this.getMS() > circle.endTime){ + if(circle.section && circle.timesHit === 0){ + this.game.resetSection() + } circle.played(-1, false) this.game.updateCurrentCircle() } @@ -96,6 +99,9 @@ class Mekadon{ this.game.updateGlobalScore(score, keyDai ? 2 : 1, circle.gogoTime) this.game.updateCurrentCircle() circle.played(score, keyDai) + if(circle.section){ + this.game.resetSection() + } this.game.sectionNotes.push(score === 450 ? 1 : (score === 230 ? 0.5 : 0)) } this.lastHit = ms diff --git a/public/src/js/parsetja.js b/public/src/js/parsetja.js index 262c0b9..22e2e9f 100644 --- a/public/src/js/parsetja.js +++ b/public/src/js/parsetja.js @@ -137,7 +137,7 @@ var branchObj = {} var currentBranch = false var branchSettings = {} - var branchPushed = false + var branchFirstMeasure = false var sectionBegin = true var currentMeasure = [] @@ -157,8 +157,10 @@ originalMS: ms, speed: speed, visible: barLine, - branch: currentBranch + branch: currentBranch, + branchFirst: branchFirstMeasure }) + branchFirstMeasure = false if(currentMeasure.length){ for(var i = 0; i < currentMeasure.length; i++){ var note = currentMeasure[i] @@ -222,14 +224,14 @@ gogo = false break case "bpmchange": - bpm = parseFloat(value) + bpm = parseFloat(value) || bpm break case "scroll": - scroll = parseFloat(value) + scroll = parseFloat(value) || scroll break case "measure": var [numerator, denominator] = value.split("/") - measure = numerator / denominator * 4 + measure = numerator / denominator * 4 || measure break case "delay": ms += (parseFloat(value) || 0) * 1000 @@ -243,7 +245,7 @@ case "branchstart": branch = true currentBranch = false - branchPushed = false + branchFirstMeasure = true branchSettings = { ms: ms, gogo: gogo, @@ -255,26 +257,45 @@ if(!this.branches){ this.branches = [] } + var req = { + advanced: parseFloat(value[1]) || 0, + master: parseFloat(value[2]) || 0 + } + if(req.advanced > 0){ + var active = req.master > 0 ? "normal" : "master" + }else{ + var active = req.master > 0 ? "advanced" : "master" + } branchObj = { ms: ms, originalMS: ms, - type: value[0].toLowerCase() === "r" ? "drumroll" : "perfect", - requirement: [ - parseFloat(value[1]), - parseFloat(value[2]) - ] + active: active, + type: value[0].trim().toLowerCase() === "r" ? "drumroll" : "accuracy", + requirement: req + } + this.branches.push(branchObj) + if(this.measures.length === 1 && branchObj.type === "drumroll"){ + for(var i = circles.length; i--;){ + var circle = circles[i] + if(circle.endTime && circle.type === "drumroll" || circle.type === "daiDrumroll" || circle.type === "balloon"){ + this.measures.push({ + ms: circle.endTime, + originalMS: circle.endTime, + speed: circle.bpm * circle.scroll / 60, + visible: false, + branch: circle.branch + }) + break + } + } + } + if(this.measures.length !== 0){ + this.measures[this.measures.length - 1].nextBranch = branchObj } break case "branchend": branch = false currentBranch = false - if(this.measures.length !== 0){ - this.measures[this.measures.length - 1].nextBranch = { - ms: ms, - originalMS: ms, - active: "normal" - } - } break case "section": sectionBegin = true @@ -283,37 +304,19 @@ } break case "n": case "e": case "m": - if(!branchPushed){ - branchPushed = true - this.branches.push(branchObj) - if(this.measures.length === 1 && branchObj.type === "drumroll"){ - for(var i = circles.length; i--;){ - var circle = circles[i] - if(circle.endTime && circle.type === "drumroll" || circle.type === "daiDrumroll" || circle.type === "balloon"){ - this.measures.push({ - ms: circle.endTime, - originalMS: circle.endTime, - speed: circle.bpm * circle.scroll / 60, - visible: false, - branch: circle.branch - }) - break - } - } - } - if(this.measures.length !== 0){ - this.measures[this.measures.length - 1].nextBranch = branchObj - } + if(!branch){ + break } ms = branchSettings.ms gogo = branchSettings.gogo bpm = branchSettings.bpm scroll = branchSettings.scroll sectionBegin = branchSettings.sectionBegin + branchFirstMeasure = true var branchName = name === "m" ? "master" : (name === "e" ? "advanced" : "normal") currentBranch = { name: branchName, - active: branchName === "normal" + active: branchName === branchObj.active } branchObj[branchName] = currentBranch break @@ -432,6 +435,7 @@ if(this.branches){ circles.sort((a, b) => a.ms > b.ms ? 1 : -1) + this.measures.sort((a, b) => a.ms > b.ms ? 1 : -1) circles.forEach((circle, i) => circle.id = i + 1) } return circles diff --git a/public/src/js/strings.js b/public/src/js/strings.js index 7c6b029..7d13389 100644 --- a/public/src/js/strings.js +++ b/public/src/js/strings.js @@ -54,6 +54,11 @@ this.good = "良" this.ok = "可" this.bad = "不可" + this.branch = { + "normal": "普通譜面", + "advanced": "玄人譜面", + "master": "達人譜面" + } this.pauseOptions = [ "演奏をつづける", "はじめからやりなおす", @@ -136,7 +141,7 @@ function StringsEn(){ this.normal = "Normal" this.hard = "Hard" this.oni = "Extreme" - this.songBranch = "Forked Paths" + this.songBranch = "Diverge Notes" this.sessionStart = "Begin an Online Session!" this.sessionEnd = "End Online Session" this.loading = "Loading..." @@ -156,6 +161,11 @@ function StringsEn(){ this.good = "GOOD" this.ok = "OK" this.bad = "BAD" + this.branch = { + "normal": "Normal", + "advanced": "Professional", + "master": "Master" + } this.pauseOptions = [ "Continue", "Retry", @@ -238,7 +248,7 @@ function StringsCn(){ this.normal = "普通" this.hard = "困难" this.oni = "魔王" - this.songBranch = "有分数分支" + this.songBranch = "有谱面分歧" this.sessionStart = "开始在线会话!" this.sessionEnd = "结束在线会话" this.loading = "加载中..." @@ -258,6 +268,11 @@ function StringsCn(){ this.good = "良" this.ok = "可" this.bad = "不可" + this.branch = { + "normal": "一般谱面", + "advanced": "进阶谱面", + "master": "达人谱面" + } this.pauseOptions = [ "继续演奏", "从头开始", @@ -340,7 +355,7 @@ function StringsTw(){ this.normal = "普通" this.hard = "困難" this.oni = "魔王" - this.songBranch = "有分數分支" + this.songBranch = "有譜面分歧" this.sessionStart = "開始多人模式!" this.sessionEnd = "結束多人模式" this.loading = "讀取中..." @@ -360,6 +375,11 @@ function StringsTw(){ this.good = "良" this.ok = "可" this.bad = "不可" + this.branch = { + "normal": "一般譜面", + "advanced": "進階譜面", + "master": "達人譜面" + } this.pauseOptions = [ "繼續演奏", "從頭開始", @@ -462,6 +482,11 @@ function StringsKo(){ this.good = "얼쑤" this.ok = "좋다" this.bad = "에구" + this.branch = { + "normal": "보통 악보", + "advanced": "현인 악보", + "master": "달인 악보" + } this.pauseOptions = [ "연주 계속하기", "처음부터 다시", diff --git a/public/src/js/view.js b/public/src/js/view.js index 43975cb..a50bf13 100644 --- a/public/src/js/view.js +++ b/public/src/js/view.js @@ -82,9 +82,24 @@ fromBranch: "normal" } this.branchMap = { - "normal": "rgba(0, 0, 0, 0)", - "advanced": "rgba(29, 129, 189, 0.4)", - "master": "rgba(230, 29, 189, 0.4)" + "normal": { + "bg": "rgba(0, 0, 0, 0)", + "text": "#d3d3d3", + "stroke": "#393939", + "shadow": "#000" + }, + "advanced": { + "bg": "rgba(29, 129, 189, 0.4)", + "text": "#94d7e7", + "stroke": "#315973", + "shadow": "#082031" + }, + "master": { + "bg": "rgba(230, 29, 189, 0.4)", + "text": "#f796ef", + "stroke": "#7e2e6e", + "shadow": "#3e0836" + } } } @@ -97,6 +112,7 @@ this.titleCache = new CanvasCache() this.comboCache = new CanvasCache() this.pauseCache = new CanvasCache() + this.branchCache = new CanvasCache() this.multiplayer = this.controller.multiplayer @@ -144,7 +160,8 @@ } this.setDonBg() - this.lastMousemove = this.controller.game.getAccurateTime() + this.startTime = this.controller.game.getAccurateTime() + this.lastMousemove = this.startTime pageEvents.mouseAdd(this, this.onmousemove.bind(this)) this.refresh() @@ -174,6 +191,7 @@ } var ratio = (ratioX < ratioY ? ratioX : ratioY) + var resized = false if(this.winW !== winW || this.winH !== winH){ this.winW = winW this.winH = winH @@ -193,6 +211,7 @@ } this.fillComboCache() this.setDonBgHeight() + resized = true }else if(this.controller.game.paused && !document.hasFocus()){ return }else if(this.multiplayer !== 2){ @@ -681,7 +700,7 @@ } ctx.restore() - // Bar pressed keys + // Branch background var keyTime = this.controller.getKeyTime() var sound = keyTime["don"] > keyTime["ka"] ? "don" : "ka" var padding = this.slotPos.paddingLeft @@ -689,12 +708,78 @@ var barY = this.slotPos.y - 65 * mul var barH = 130 * mul + if(this.branchAnimate && ms <= this.branchAnimate.ms + 300){ + var alpha = Math.max(0, (ms - this.branchAnimate.ms) / 300) + ctx.globalAlpha = 1 - alpha + ctx.fillStyle = this.branchMap[this.branchAnimate.fromBranch].bg + ctx.fillRect(padding, barY, winW - padding, barH) + ctx.globalAlpha = alpha + } + if(this.branch){ + ctx.fillStyle = this.branchMap[this.branch].bg + ctx.fillRect(padding, barY, winW - padding, barH) + ctx.globalAlpha = 1 + } + + // Current branch text + if(this.branch){ + if(resized){ + this.fillBranchCache() + } + var textW = Math.floor(260 * mul) + var textH = Math.floor(barH) + var textX = winW - textW + var oldOffset = 0 + var newOffset = 0 + var elapsed = ms - this.startTime + if(elapsed < 250){ + textX = winW + }else if(elapsed < 500){ + textX += (1 - this.draw.easeOutBack((elapsed - 250) / 250)) * textW + } + if(this.branchAnimate && ms - this.branchAnimate.ms < 310 && ms >= this.branchAnimate.ms){ + var fromBranch = this.branchAnimate.fromBranch + var elapsed = ms - this.branchAnimate.ms + var reverse = fromBranch === "master" || fromBranch === "advanced" && this.branch === "normal" ? -1 : 1 + if(elapsed < 65){ + oldOffset = elapsed / 65 * 12 * mul * reverse + ctx.globalAlpha = 1 + var newAlpha = 0 + }else if(elapsed < 215){ + var animPoint = (elapsed - 65) / 150 + oldOffset = (12 - animPoint * 48) * mul * reverse + newOffset = (36 - animPoint * 48) * mul * reverse + ctx.globalAlpha = this.draw.easeIn(1 - animPoint) + var newAlpha = this.draw.easeIn(animPoint) + }else{ + newOffset = (1 - (elapsed - 215) / 95) * -12 * mul * reverse + ctx.globalAlpha = 0 + var newAlpha = 1 + } + this.branchCache.get({ + ctx: ctx, + x: textX, y: barY + oldOffset, + w: textW, h: textH, + id: fromBranch + }) + ctx.globalAlpha = newAlpha + } + this.branchCache.get({ + ctx: ctx, + x: textX, y: barY + newOffset, + w: textW, h: textH, + id: this.branch + }) + ctx.globalAlpha = 1 + } + + // Go go time background if(this.gogoTime || ms <= this.gogoTimeStarted + 100){ var grd = ctx.createLinearGradient(padding, 0, winW, 0) - grd.addColorStop(0, "#512a2c") - grd.addColorStop(0.46, "#6f2a2d") - grd.addColorStop(0.76, "#8a4763") - grd.addColorStop(1, "#2c2a2c") + grd.addColorStop(0, "rgba(255, 0, 0, 0.16)") + grd.addColorStop(0.45, "rgba(255, 0, 0, 0.28)") + grd.addColorStop(0.77, "rgba(255, 83, 157, 0.4)") + grd.addColorStop(1, "rgba(255, 83, 157, 0)") ctx.fillStyle = grd if(!this.touchEnabled){ var alpha = Math.min(100, ms - this.gogoTimeStarted) / 100 @@ -705,18 +790,8 @@ } ctx.fillRect(padding, barY, winW - padding, barH) } - if(this.branchAnimate && ms <= this.branchAnimate.ms + 300){ - var alpha = Math.max(0, (ms - this.branchAnimate.ms) / 300) - ctx.globalAlpha = 1 - alpha - ctx.fillStyle = this.branchMap[this.branchAnimate.fromBranch] - ctx.fillRect(padding, barY, winW - padding, barH) - ctx.globalAlpha = alpha - } - if(this.branch){ - ctx.fillStyle = this.branchMap[this.branch] - ctx.fillRect(padding, barY, winW - padding, barH) - ctx.globalAlpha = 1 - } + + // Bar pressed keys if(keyTime[sound] > ms - 130){ var gradients = { "don": "255, 0, 0", @@ -814,6 +889,7 @@ ctx.lineWidth = 7 * mul ctx.textAlign = "center" ctx.miterLimit = 1 + ctx.strokeStyle = "#000" ctx.strokeText(strings.combo, comboX, comboTextY) ctx.miterLimit = 10 ctx.fillText(strings.combo, comboX, comboTextY) @@ -1128,7 +1204,7 @@ var finishTime = measure.ms + this.posToMs(this.slotPos.x - this.slotPos.paddingLeft + 3, measure.speed) if(measure.visible && (!measure.branch || measure.branch.active) && ms >= startingTime && ms <= finishTime){ var measureX = this.slotPos.x + this.msToPos(measure.ms - ms, measure.speed) - this.ctx.strokeStyle = "#bdbdbd" + this.ctx.strokeStyle = measure.branchFirst ? "#ff0" : "#bdbdbd" this.ctx.lineWidth = 3 this.ctx.beginPath() this.ctx.moveTo(measureX, measureY) @@ -1137,9 +1213,9 @@ } if(this.multiplayer !== 2 && ms >= measure.ms && measure.nextBranch && !measure.viewChecked && measure.gameChecked){ measure.viewChecked = true - this.branchAnimate = { - ms: ms, - fromBranch: this.branch + if(measure.nextBranch.active !== this.branch){ + this.branchAnimate.ms = ms + this.branchAnimate.fromBranch = this.branch } this.branch = measure.nextBranch.active } @@ -1468,6 +1544,37 @@ }) this.globalAlpha = 1 } + fillBranchCache(){ + var mul = this.slotPos.size / 106 + var textW = Math.floor(260 * mul) + var barH = Math.floor(130 * mul) + var branchNames = this.controller.game.branchNames + var textX = textW - 33 * mul + var textY = 63 * mul + var fontSize = (strings.id === "en" ? 33 : (strings.id === "ko" ? 38 : 43)) * mul + this.branchCache.resize((textW + 1), (barH + 1) * 3, this.ratio) + for(var i in branchNames){ + this.branchCache.set({ + w: textW, + h: barH, + id: branchNames[i] + }, ctx => { + var currentMap = this.branchMap[branchNames[i]] + ctx.font = this.draw.bold(this.font) + fontSize + "px " + this.font + ctx.lineJoin = "round" + ctx.miterLimit = 1 + ctx.textAlign = "right" + ctx.textBaseline = "middle" + ctx.lineWidth = 8 * mul + ctx.strokeStyle = currentMap.shadow + ctx.strokeText(strings.branch[branchNames[i]], textX, textY + 4 * mul) + ctx.strokeStyle = currentMap.stroke + ctx.strokeText(strings.branch[branchNames[i]], textX, textY) + ctx.fillStyle = currentMap.text + ctx.fillText(strings.branch[branchNames[i]], textX, textY) + }) + } + } toggleGogoTime(circle){ this.gogoTime = circle.gogoTime this.gogoTimeStarted = circle.ms diff --git a/public/src/views/debug.html b/public/src/views/debug.html index b681717..dd37b44 100644 --- a/public/src/views/debug.html +++ b/public/src/views/debug.html @@ -13,10 +13,10 @@
Branch:
x