From 04473acb74924c27471f7a025570741b2e322936 Mon Sep 17 00:00:00 2001 From: LoveEevee Date: Sun, 14 Oct 2018 21:08:05 +0300 Subject: [PATCH 1/5] Add debugging user interface --- public/src/css/debug.css | 77 +++++++++++++ public/src/js/assets.js | 3 +- public/src/js/circle.js | 2 + public/src/js/controller.js | 13 +++ public/src/js/debug.js | 211 ++++++++++++++++++++++++++++++++++++ public/src/js/main.js | 17 +++ public/src/js/parseosu.js | 1 + public/src/js/parsetja.js | 1 + public/src/views/debug.html | 8 ++ templates/index.html | 2 + 10 files changed, 334 insertions(+), 1 deletion(-) create mode 100644 public/src/css/debug.css create mode 100644 public/src/js/debug.js create mode 100644 public/src/views/debug.html diff --git a/public/src/css/debug.css b/public/src/css/debug.css new file mode 100644 index 0000000..c0ea86b --- /dev/null +++ b/public/src/css/debug.css @@ -0,0 +1,77 @@ +#debug{ + position: absolute; + top: 0; + left: 0; + width: 180px; + height: 160px; + background: #fff; + border: 1px solid #333; + color: #000; + z-index: 50; + font-size: 14px; + font-family: TnT, Meiryo, sans-serif; +} + +#debug .title{ + position: relative; + height: 25px; + padding: 5px 0 0 5px; + box-sizing: border-box; + background: #bbb; + color: #fff; + cursor: default; + z-index: 1 +} + +#debug .title::before{ + left: auto; + -webkit-text-stroke: 0.25em #555; +} + +#debug .minimise{ + position: absolute; + top: 3px; + right: 3px; + width: 19px; + height: 19px; + background: #d77; + z-index: 1; +} + +#debug .content{ + height: calc(100% - 25px); + overflow-y: auto; + padding: 8px; + box-sizing: border-box; +} + +#debug .input-slider{ + display: flex; + width: 100%; + height: 30px; + margin: 5px 0; +} +#debug .input-slider>input{ + width: 70%; + height: 100%; + box-sizing: border-box; + font-size: 18px; + font-family: monospace; + padding: 2px 4px; + text-align: center; +} +#debug .input-slider>span{ + display: block; + width: 10%; + height: 100%; + opacity: 0.8; + background: #666; + color: #fff; + text-align: center; + line-height: 2em; + cursor: pointer; +} +#debug .input-slider>span:hover{ + opacity: 1; + background: #333; +} diff --git a/public/src/js/assets.js b/public/src/js/assets.js index fde1bec..3fa9dc8 100644 --- a/public/src/js/assets.js +++ b/public/src/js/assets.js @@ -124,7 +124,8 @@ var assets = { "songselect.html", "titlescreen.html", "tutorial.html", - "about.html" + "about.html", + "debug.html" ], "songs": [], diff --git a/public/src/js/circle.js b/public/src/js/circle.js index fdb0478..0bae2d8 100644 --- a/public/src/js/circle.js +++ b/public/src/js/circle.js @@ -3,10 +3,12 @@ class Circle{ // id, ms, type, text, speed, endTime, requiredHits this.id = config.id this.ms = config.start + this.originalMS = this.ms this.type = config.type this.text = config.txt this.speed = config.speed this.endTime = config.endTime || this.ms + this.originalEndTime = this.endTime this.isPlayed = 0 this.animating = false this.animT = 0 diff --git a/public/src/js/controller.js b/public/src/js/controller.js index 9ef9608..d6fcbe8 100644 --- a/public/src/js/controller.js +++ b/public/src/js/controller.js @@ -38,6 +38,12 @@ class Controller{ syncWith.startDate = this.game.startDate this.syncWith = syncWith } + if(this.multiplayer !== 2){ + debugObj.controller = this + if(debugObj.debug){ + debugObj.debug.updateStatus() + } + } } loadUIEvents(){ this.pauseMenu = document.getElementById("pause-menu") @@ -217,5 +223,12 @@ class Controller{ delete this.restartBtn pageEvents.remove(this.songSelBtn, ["click", "touchend"]) delete this.songSelBtn + + if(this.multiplayer !== 2){ + debugObj.controller = null + if(debugObj.debug){ + debugObj.debug.updateStatus() + } + } } } diff --git a/public/src/js/debug.js b/public/src/js/debug.js new file mode 100644 index 0000000..bb5ea0b --- /dev/null +++ b/public/src/js/debug.js @@ -0,0 +1,211 @@ +class Debug{ + constructor(){ + this.debugDiv = document.createElement("div") + this.debugDiv.id = "debug" + this.debugDiv.innerHTML = assets.pages["debug"] + document.body.appendChild(this.debugDiv) + + this.titleDiv = this.debugDiv.getElementsByClassName("title")[0] + this.minimiseDiv = this.debugDiv.getElementsByClassName("minimise")[0] + this.offsetDiv = this.debugDiv.getElementsByClassName("offset")[0] + + this.moving = false + pageEvents.add(window, ["mousedown", "mouseup", "blur"], this.stopMove.bind(this)) + pageEvents.add(window, "mousemove", this.onMove.bind(this)) + pageEvents.add(this.titleDiv, "mousedown", this.startMove.bind(this)) + pageEvents.add(this.minimiseDiv, "click", this.minimise.bind(this)) + + this.offsetSlider = new InputSlider(this.offsetDiv) + this.offsetSlider.onchange(this.offsetChange.bind(this)) + + this.moveTo(100, 100) + this.restore() + this.updateStatus() + } + startMove(event){ + if(event.which === 1){ + event.stopPropagation() + this.moving = { + x: event.offsetX, + y: event.offsetY + } + } + } + onMove(event){ + if(this.moving){ + var x = event.clientX - this.moving.x + var y = event.clientY - this.moving.y + this.moveTo(x, y) + } + } + stopMove(event){ + var x = event.clientX - this.moving.x + var y = event.clientY - this.moving.y + var w = this.debugDiv.offsetWidth + var h = this.debugDiv.offsetHeight + if(x + w > innerWidth){ + x = innerWidth - w + } + if(y + h > lastHeight){ + y = lastHeight - h + } + if(x < 0){ + x = 0 + } + if(y < 0){ + y = 0 + } + this.moveTo(x, y) + this.moving = false + } + moveTo(x, y){ + this.debugDiv.style.transform = "translate(" + x + "px, " + y + "px)" + } + restore(){ + debugObj.state = "open" + this.debugDiv.style.display = "" + } + minimise(){ + debugObj.state = "minimised" + this.debugDiv.style.display = "none" + } + updateStatus(){ + if(debugObj.controller && !this.controller){ + this.controller = debugObj.controller + var selectedSong = this.controller.selectedSong + this.defaultOffset = selectedSong.offset + if(this.songFolder === selectedSong.folder){ + this.offsetChange(this.offsetSlider.get()) + }else{ + this.songFolder = selectedSong.folder + this.offsetSlider.set(this.defaultOffset) + } + } + if(this.controller && !debugObj.controller){ + this.controller = null + } + } + offsetChange(value){ + if(this.controller){ + var offset = (this.defaultOffset - value) * 1000 + var songData = this.controller.parsedSongData + songData.circles.forEach(circle => { + circle.ms = circle.originalMS + offset + circle.endTime = circle.originalEndTime + offset + }) + songData.measures.forEach(measure => { + measure.ms = measure.originalMS + offset + }) + } + } + clean(){ + this.offsetSlider.clean() + + pageEvents.remove(window, ["mousedown", "mouseup", "mousemove", "blur"]) + pageEvents.remove(this.title, "mousedown") + + delete this.debugDiv + delete this.titleDiv + delete this.minimiseDiv + delete this.controller + + debugObj.state = "closed" + debugObj.debug = null + document.body.removeChild(this.debugDiv) + } +} +class InputSlider{ + constructor(sliderDiv){ + this.input = sliderDiv.getElementsByTagName("input")[0] + this.reset = sliderDiv.getElementsByClassName("reset")[0] + this.plus = sliderDiv.getElementsByClassName("plus")[0] + this.minus = sliderDiv.getElementsByClassName("minus")[0] + this.value = null + this.defaultValue = null + this.callbacks = [] + + pageEvents.add(this.plus, "click", this.add.bind(this)) + pageEvents.add(this.minus, "click", this.subtract.bind(this)) + pageEvents.add(this.reset, "click", this.resetValue.bind(this)) + pageEvents.add(this.input, "change", this.manualSet.bind(this)) + } + update(noCallback, force){ + var oldValue = this.input.value + if(this.value === null){ + this.input.value = "" + this.input.readOnly = true + }else{ + if(this.value > 60000){ + this.value = 60000 + } + if(this.value < -60000){ + this.value = -60000 + } + this.input.value = this.get().toFixed(3) + this.input.readOnly = false + } + if(force || !noCallback && oldValue !== this.input.value){ + this.callbacks.forEach(callback => { + callback(this.input.value) + }) + } + } + set(number){ + this.value = Math.floor(number * 1000) + this.defaultValue = this.value + this.update(true) + } + get(){ + if(this.value === null){ + return null + }else{ + return Math.floor(this.value) / 1000 + } + } + add(event){ + if(this.value !== null){ + var newValue = this.value + this.eventNumber(event) + if(newValue <= 60000){ + this.value = newValue + this.update() + } + } + } + subtract(event){ + if(this.value !== null){ + var newValue = this.value - this.eventNumber(event) + if(newValue >= -60000){ + this.value = newValue + this.update() + } + } + } + eventNumber(event){ + return (event.ctrlKey ? 10 : 1) * (event.shiftKey ? 10 : 1) * (event.altKey ? 10 : 1) * 1 + } + resetValue(){ + this.value = this.defaultValue + this.update() + } + onchange(callback){ + this.callbacks.push(callback) + } + manualSet(){ + var number = parseFloat(this.input.value) + if(Number.isFinite(number) && -60 <= number && number <= 60){ + this.value = number * 1000 + } + this.update(false, true) + } + clean(){ + pageEvents.remove(this.plus, "click") + pageEvents.remove(this.minus, "click") + pageEvents.remove(this.reset, "click") + pageEvents.remove(this.input, "change") + + delete this.input + delete this.reset + delete this.plus + delete this.minus + } +} diff --git a/public/src/js/main.js b/public/src/js/main.js index 7647985..3dd2975 100644 --- a/public/src/js/main.js +++ b/public/src/js/main.js @@ -40,6 +40,19 @@ function resizeRoot(){ } } +function debug(){ + if(debugObj.state === "open"){ + debugObj.debug.clean() + return "Debug closed" + }else if(debugObj.state === "minimised"){ + debugObj.debug.restore() + return "Debug restored" + }else{ + debugObj.debug = new Debug() + return "Debug opened" + } +} + var root = document.documentElement var fullScreenSupported = "requestFullscreen" in root || "webkitRequestFullscreen" in root || "mozRequestFullScreen" in root @@ -49,6 +62,10 @@ var p2 var disableBlur = false var cancelTouch = true var lastHeight +var debugObj = { + state: "closed", + debug: null +} var perf = { blur: 0, allImg: 0, diff --git a/public/src/js/parseosu.js b/public/src/js/parseosu.js index 8618450..c4b6280 100644 --- a/public/src/js/parseosu.js +++ b/public/src/js/parseosu.js @@ -150,6 +150,7 @@ class ParseOsu{ if(measureNumber === 0){ measures.push({ ms: start + this.offset, + originalMS: start + this.offset, speed: this.timingPoints[i].sliderMultiplier }) } diff --git a/public/src/js/parsetja.js b/public/src/js/parsetja.js index 52d56f0..5d390ce 100644 --- a/public/src/js/parsetja.js +++ b/public/src/js/parsetja.js @@ -140,6 +140,7 @@ } this.measures.push({ ms: ms, + originalMS: ms, speed: speed }) if(firstMeasure){ diff --git a/public/src/views/debug.html b/public/src/views/debug.html new file mode 100644 index 0000000..1f5edb7 --- /dev/null +++ b/public/src/views/debug.html @@ -0,0 +1,8 @@ +
Debug
+
+
+ Offset:
+
+ x+- +
+
diff --git a/templates/index.html b/templates/index.html index d4b8f13..b733fa0 100644 --- a/templates/index.html +++ b/templates/index.html @@ -21,6 +21,7 @@ + @@ -52,6 +53,7 @@ + From 122d3c06c8c328f83b66e6b6034349548ecca9bd Mon Sep 17 00:00:00 2001 From: LoveEevee Date: Sun, 14 Oct 2018 23:14:58 +0300 Subject: [PATCH 2/5] Add key shortcut for debug, add starting measure and restart --- public/src/css/debug.css | 15 +++++-- public/src/js/controller.js | 4 +- public/src/js/debug.js | 88 +++++++++++++++++++++++++++++-------- public/src/js/main.js | 11 +++++ public/src/views/debug.html | 9 +++- 5 files changed, 101 insertions(+), 26 deletions(-) diff --git a/public/src/css/debug.css b/public/src/css/debug.css index c0ea86b..87710d9 100644 --- a/public/src/css/debug.css +++ b/public/src/css/debug.css @@ -2,8 +2,8 @@ position: absolute; top: 0; left: 0; - width: 180px; - height: 160px; + width: 250px; + height: 220px; background: #fff; border: 1px solid #333; color: #000; @@ -49,7 +49,7 @@ display: flex; width: 100%; height: 30px; - margin: 5px 0; + margin: 5px 0 15px 0; } #debug .input-slider>input{ width: 70%; @@ -75,3 +75,12 @@ opacity: 1; background: #333; } + +#debug label{ + display: block; + margin: 15px 0; +} + +#debug input[type="checkbox"]{ + margin-right: 1em; +} diff --git a/public/src/js/controller.js b/public/src/js/controller.js index d6fcbe8..5c1c316 100644 --- a/public/src/js/controller.js +++ b/public/src/js/controller.js @@ -38,7 +38,7 @@ class Controller{ syncWith.startDate = this.game.startDate this.syncWith = syncWith } - if(this.multiplayer !== 2){ + if(!this.multiplayer){ debugObj.controller = this if(debugObj.debug){ debugObj.debug.updateStatus() @@ -224,7 +224,7 @@ class Controller{ pageEvents.remove(this.songSelBtn, ["click", "touchend"]) delete this.songSelBtn - if(this.multiplayer !== 2){ + if(!this.multiplayer){ debugObj.controller = null if(debugObj.debug){ debugObj.debug.updateStatus() diff --git a/public/src/js/debug.js b/public/src/js/debug.js index bb5ea0b..afac0a5 100644 --- a/public/src/js/debug.js +++ b/public/src/js/debug.js @@ -8,6 +8,8 @@ class Debug{ this.titleDiv = this.debugDiv.getElementsByClassName("title")[0] this.minimiseDiv = this.debugDiv.getElementsByClassName("minimise")[0] this.offsetDiv = this.debugDiv.getElementsByClassName("offset")[0] + this.measureNumDiv = this.debugDiv.getElementsByClassName("measure-num")[0] + this.restartCheckbox = this.debugDiv.getElementsByClassName("change-restart")[0] this.moving = false pageEvents.add(window, ["mousedown", "mouseup", "blur"], this.stopMove.bind(this)) @@ -15,9 +17,13 @@ class Debug{ pageEvents.add(this.titleDiv, "mousedown", this.startMove.bind(this)) pageEvents.add(this.minimiseDiv, "click", this.minimise.bind(this)) - this.offsetSlider = new InputSlider(this.offsetDiv) + this.offsetSlider = new InputSlider(this.offsetDiv, -60, 60, 3) this.offsetSlider.onchange(this.offsetChange.bind(this)) + this.measureNumSlider = new InputSlider(this.measureNumDiv, 0, 1000, 0) + this.measureNumSlider.onchange(this.measureNumChange.bind(this)) + this.measureNumSlider.set(0) + this.moveTo(100, 100) this.restore() this.updateStatus() @@ -75,17 +81,37 @@ class Debug{ var selectedSong = this.controller.selectedSong this.defaultOffset = selectedSong.offset if(this.songFolder === selectedSong.folder){ - this.offsetChange(this.offsetSlider.get()) + this.offsetChange(this.offsetSlider.get(), true) }else{ this.songFolder = selectedSong.folder this.offsetSlider.set(this.defaultOffset) } + + var measures = this.controller.parsedSongData.measures + this.measureNumSlider.setMinMax(0, measures.length - 1) + if(this.measureNum && measures.length > this.measureNum){ + var measureMS = measures[this.measureNum].ms + var game = this.controller.game + game.started = true + var timestamp = +new Date + var currentDate = timestamp - measureMS + game.startDate = currentDate + game.sndTime = timestamp - snd.buffer.getTime() * 1000 + var circles = game.songData.circles + for(var i in circles){ + if(circles[i].ms < measureMS){ + game.currentCircle = i + }else{ + break + } + } + } } if(this.controller && !debugObj.controller){ this.controller = null } } - offsetChange(value){ + offsetChange(value, noRestart){ if(this.controller){ var offset = (this.defaultOffset - value) * 1000 var songData = this.controller.parsedSongData @@ -96,6 +122,15 @@ class Debug{ songData.measures.forEach(measure => { measure.ms = measure.originalMS + offset }) + if(this.restartCheckbox.checked, !noRestart){ + this.controller.restartSong() + } + } + } + measureNumChange(value){ + this.measureNum = value + if(this.controller && this.restartCheckbox.checked){ + this.controller.restartSong() } } clean(){ @@ -104,7 +139,6 @@ class Debug{ pageEvents.remove(window, ["mousedown", "mouseup", "mousemove", "blur"]) pageEvents.remove(this.title, "mousedown") - delete this.debugDiv delete this.titleDiv delete this.minimiseDiv delete this.controller @@ -112,10 +146,17 @@ class Debug{ debugObj.state = "closed" debugObj.debug = null document.body.removeChild(this.debugDiv) + + delete this.debugDiv } } class InputSlider{ - constructor(sliderDiv){ + constructor(sliderDiv, min, max, fixedPoint){ + this.fixedPoint = fixedPoint + this.mul = Math.pow(10, fixedPoint) + this.min = min * this.mul + this.max = max * this.mul + this.input = sliderDiv.getElementsByTagName("input")[0] this.reset = sliderDiv.getElementsByClassName("reset")[0] this.plus = sliderDiv.getElementsByClassName("plus")[0] @@ -128,6 +169,7 @@ class InputSlider{ pageEvents.add(this.minus, "click", this.subtract.bind(this)) pageEvents.add(this.reset, "click", this.resetValue.bind(this)) pageEvents.add(this.input, "change", this.manualSet.bind(this)) + pageEvents.add(this.input, "keydown", this.captureKeys.bind(this)) } update(noCallback, force){ var oldValue = this.input.value @@ -135,37 +177,42 @@ class InputSlider{ this.input.value = "" this.input.readOnly = true }else{ - if(this.value > 60000){ - this.value = 60000 + if(this.value > this.max){ + this.value = this.max } - if(this.value < -60000){ - this.value = -60000 + if(this.value < this.min){ + this.value = this.min } - this.input.value = this.get().toFixed(3) + this.input.value = this.get().toFixed(this.fixedPoint) this.input.readOnly = false } if(force || !noCallback && oldValue !== this.input.value){ this.callbacks.forEach(callback => { - callback(this.input.value) + callback(this.get()) }) } } set(number){ - this.value = Math.floor(number * 1000) + this.value = Math.floor(number * this.mul) this.defaultValue = this.value this.update(true) } + setMinMax(min, max){ + this.min = min + this.max = max + this.update() + } get(){ if(this.value === null){ return null }else{ - return Math.floor(this.value) / 1000 + return Math.floor(this.value) / this.mul } } add(event){ if(this.value !== null){ var newValue = this.value + this.eventNumber(event) - if(newValue <= 60000){ + if(newValue <= this.max){ this.value = newValue this.update() } @@ -174,7 +221,7 @@ class InputSlider{ subtract(event){ if(this.value !== null){ var newValue = this.value - this.eventNumber(event) - if(newValue >= -60000){ + if(newValue >= this.min){ this.value = newValue this.update() } @@ -191,17 +238,20 @@ class InputSlider{ this.callbacks.push(callback) } manualSet(){ - var number = parseFloat(this.input.value) - if(Number.isFinite(number) && -60 <= number && number <= 60){ - this.value = number * 1000 + var number = parseFloat(this.input.value) * this.mul + if(Number.isFinite(number) && this.min <= number && number <= this.max){ + this.value = number } this.update(false, true) } + captureKeys(event){ + event.stopPropagation() + } clean(){ pageEvents.remove(this.plus, "click") pageEvents.remove(this.minus, "click") pageEvents.remove(this.reset, "click") - pageEvents.remove(this.input, "change") + pageEvents.remove(this.input, ["change", "keydown"]) delete this.input delete this.reset diff --git a/public/src/js/main.js b/public/src/js/main.js index 3dd2975..0ab0eb4 100644 --- a/public/src/js/main.js +++ b/public/src/js/main.js @@ -84,6 +84,17 @@ pageEvents.add(versionDiv, ["click", "touchend"], () => { }) resizeRoot() setInterval(resizeRoot, 100) +pageEvents.keyAdd(debugObj, 186, "down", event => { + if(event.ctrlKey && event.shiftKey && !event.altKey){ + if(debugObj.state === "open"){ + debugObj.debug.minimise() + }else if(debugObj.state === "minimised"){ + debugObj.debug.restore() + }else{ + debugObj.debug = new Debug() + } + } +}) var loader = new Loader(() => { new Titlescreen() diff --git a/public/src/views/debug.html b/public/src/views/debug.html index 1f5edb7..b67b065 100644 --- a/public/src/views/debug.html +++ b/public/src/views/debug.html @@ -1,8 +1,13 @@
Debug
- Offset:
+
Song offset:
- x+- + x-+
+
Starting measure:
+
+ x-+ +
+
From d4f242a236a210014389d8105cf164d0abe949a3 Mon Sep 17 00:00:00 2001 From: LoveEevee Date: Sun, 14 Oct 2018 23:33:22 +0300 Subject: [PATCH 3/5] Fix missing original timestamps --- public/src/js/parsetja.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/public/src/js/parsetja.js b/public/src/js/parsetja.js index 5d390ce..1874c82 100644 --- a/public/src/js/parsetja.js +++ b/public/src/js/parsetja.js @@ -149,6 +149,7 @@ for(var measureMs = ms - msPerMeasure; measureMs > 0; measureMs -= msPerMeasure){ this.measures.push({ ms: measureMs, + originalMS: ms, speed: speed }) } @@ -167,6 +168,7 @@ note.start = ms if(note.endDrumroll){ note.endDrumroll.endTime = ms + note.endDrumroll.originalEndTime = ms } var msPerMeasure = 60000 * measure / note.bpm ms += msPerMeasure / currentMeasure.length @@ -345,6 +347,7 @@ pushMeasure() if(lastDrumroll){ lastDrumroll.endTime = ms + lastDrumroll.originalEndTime = ms } return circles From 925e6b44bdd27ad0682918100f2a73450280da6a Mon Sep 17 00:00:00 2001 From: LoveEevee Date: Mon, 15 Oct 2018 01:00:40 +0300 Subject: [PATCH 4/5] Add restart and exit buttons, add restart shortcut, fix restarting on specific measures --- public/src/css/debug.css | 31 +++++++++++++++++++++++++++++-- public/src/js/debug.js | 24 ++++++++++++++++++++---- public/src/js/game.js | 10 ++++++++-- public/src/js/main.js | 7 +++++-- public/src/views/debug.html | 4 ++++ 5 files changed, 66 insertions(+), 10 deletions(-) diff --git a/public/src/css/debug.css b/public/src/css/debug.css index 87710d9..907efe2 100644 --- a/public/src/css/debug.css +++ b/public/src/css/debug.css @@ -2,8 +2,8 @@ position: absolute; top: 0; left: 0; - width: 250px; - height: 220px; + width: 260px; + height: 240px; background: #fff; border: 1px solid #333; color: #000; @@ -84,3 +84,30 @@ #debug input[type="checkbox"]{ margin-right: 1em; } + +#debug .bottom-btns{ + display: flex; + width: 100%; + justify-content: flex-end; +} +#debug .bottom-btns div{ + width: calc(50% - 3px); + height: 30px; + opacity: 0.8; + background: #666; + color: #fff; + text-align: center; + line-height: 2em; + cursor: pointer; +} +#debug .bottom-btns div:hover{ + opacity: 1; + background: #333; +} +#debug .restart-btn{ + display: none; + margin-right: 3px; +} +#debug .exit-btn{ + margin-left: 3px; +} diff --git a/public/src/js/debug.js b/public/src/js/debug.js index afac0a5..4bbda33 100644 --- a/public/src/js/debug.js +++ b/public/src/js/debug.js @@ -1,5 +1,8 @@ class Debug{ constructor(){ + if(!assets.pages["debug"]){ + return + } this.debugDiv = document.createElement("div") this.debugDiv.id = "debug" this.debugDiv.innerHTML = assets.pages["debug"] @@ -10,12 +13,16 @@ class Debug{ this.offsetDiv = this.debugDiv.getElementsByClassName("offset")[0] this.measureNumDiv = this.debugDiv.getElementsByClassName("measure-num")[0] this.restartCheckbox = this.debugDiv.getElementsByClassName("change-restart")[0] + this.restartBtn = this.debugDiv.getElementsByClassName("restart-btn")[0] + this.exitBtn = this.debugDiv.getElementsByClassName("exit-btn")[0] this.moving = false pageEvents.add(window, ["mousedown", "mouseup", "blur"], this.stopMove.bind(this)) pageEvents.add(window, "mousemove", this.onMove.bind(this)) pageEvents.add(this.titleDiv, "mousedown", this.startMove.bind(this)) pageEvents.add(this.minimiseDiv, "click", this.minimise.bind(this)) + pageEvents.add(this.restartBtn, "click", this.restartSong.bind(this)) + pageEvents.add(this.exitBtn, "click", this.clean.bind(this)) this.offsetSlider = new InputSlider(this.offsetDiv, -60, 60, 3) this.offsetSlider.onchange(this.offsetChange.bind(this)) @@ -77,9 +84,11 @@ class Debug{ } updateStatus(){ if(debugObj.controller && !this.controller){ + this.restartBtn.style.display = "block" + this.controller = debugObj.controller var selectedSong = this.controller.selectedSong - this.defaultOffset = selectedSong.offset + this.defaultOffset = selectedSong.offset || 0 if(this.songFolder === selectedSong.folder){ this.offsetChange(this.offsetSlider.get(), true) }else{ @@ -99,6 +108,7 @@ class Debug{ game.sndTime = timestamp - snd.buffer.getTime() * 1000 var circles = game.songData.circles for(var i in circles){ + game.currentCircle = i if(circles[i].ms < measureMS){ game.currentCircle = i }else{ @@ -108,6 +118,7 @@ class Debug{ } } if(this.controller && !debugObj.controller){ + this.restartBtn.style.display = "" this.controller = null } } @@ -122,14 +133,19 @@ class Debug{ songData.measures.forEach(measure => { measure.ms = measure.originalMS + offset }) - if(this.restartCheckbox.checked, !noRestart){ - this.controller.restartSong() + if(this.restartCheckbox.checked && !noRestart){ + this.restartSong() } } } measureNumChange(value){ this.measureNum = value - if(this.controller && this.restartCheckbox.checked){ + if(this.restartCheckbox.checked){ + this.restartSong() + } + } + restartSong(){ + if(this.controller){ this.controller.restartSong() } } diff --git a/public/src/js/game.js b/public/src/js/game.js index 0cb85df..14ee334 100644 --- a/public/src/js/game.js +++ b/public/src/js/game.js @@ -60,8 +60,10 @@ class Game{ return this.songData.circles } updateCirclesStatus(){ + var nextSet = false var circles = this.songData.circles - circles.forEach(circle => { + for(var i in circles){ + var circle = circles[i] if(!circle.getPlayed()){ var ms = this.elapsedTime var type = circle.getType() @@ -82,6 +84,10 @@ class Game{ } circle.beatMSCopied = true } + if(!nextSet){ + nextSet = true + this.currentCircle = i + } } if(ms > endTime){ if(!this.controller.autoPlayEnabled){ @@ -109,7 +115,7 @@ class Game{ } } } - }) + } } setHPGain(gain){ this.HPGain = gain diff --git a/public/src/js/main.js b/public/src/js/main.js index 0ab0eb4..268f06c 100644 --- a/public/src/js/main.js +++ b/public/src/js/main.js @@ -84,8 +84,8 @@ pageEvents.add(versionDiv, ["click", "touchend"], () => { }) resizeRoot() setInterval(resizeRoot, 100) -pageEvents.keyAdd(debugObj, 186, "down", event => { - if(event.ctrlKey && event.shiftKey && !event.altKey){ +pageEvents.keyAdd(debugObj, "all", "down", event => { + if(event.keyCode === 186 && event.ctrlKey && event.shiftKey && !event.altKey){ if(debugObj.state === "open"){ debugObj.debug.minimise() }else if(debugObj.state === "minimised"){ @@ -94,6 +94,9 @@ pageEvents.keyAdd(debugObj, 186, "down", event => { debugObj.debug = new Debug() } } + if(event.keyCode === 82 && debugObj.debug && debugObj.controller){ + debugObj.controller.restartSong() + } }) var loader = new Loader(() => { diff --git a/public/src/views/debug.html b/public/src/views/debug.html index b67b065..dcee191 100644 --- a/public/src/views/debug.html +++ b/public/src/views/debug.html @@ -10,4 +10,8 @@ x-+ +
+
Restart song
+
Exit debug
+
From 0e1283c5376d63859e13eb685f1684a0d1f248d6 Mon Sep 17 00:00:00 2001 From: LoveEevee Date: Mon, 15 Oct 2018 02:18:01 +0300 Subject: [PATCH 5/5] Add autoplay toggle, fix notes not being skipped on autoplay --- public/src/css/debug.css | 5 ++++- public/src/js/debug.js | 34 +++++++++++++++++++++++++++++++--- public/src/js/game.js | 9 ++++----- public/src/views/debug.html | 1 + 4 files changed, 40 insertions(+), 9 deletions(-) diff --git a/public/src/css/debug.css b/public/src/css/debug.css index 907efe2..7c838f0 100644 --- a/public/src/css/debug.css +++ b/public/src/css/debug.css @@ -3,7 +3,6 @@ top: 0; left: 0; width: 260px; - height: 240px; background: #fff; border: 1px solid #333; color: #000; @@ -111,3 +110,7 @@ #debug .exit-btn{ margin-left: 3px; } + +#debug .autoplay-label{ + display: none; +} diff --git a/public/src/js/debug.js b/public/src/js/debug.js index 4bbda33..0c566ee 100644 --- a/public/src/js/debug.js +++ b/public/src/js/debug.js @@ -13,6 +13,8 @@ class Debug{ this.offsetDiv = this.debugDiv.getElementsByClassName("offset")[0] this.measureNumDiv = this.debugDiv.getElementsByClassName("measure-num")[0] this.restartCheckbox = this.debugDiv.getElementsByClassName("change-restart")[0] + this.autoplayLabel = this.debugDiv.getElementsByClassName("autoplay-label")[0] + this.autoplayCheckbox = this.debugDiv.getElementsByClassName("autoplay")[0] this.restartBtn = this.debugDiv.getElementsByClassName("restart-btn")[0] this.exitBtn = this.debugDiv.getElementsByClassName("exit-btn")[0] @@ -23,6 +25,7 @@ class Debug{ pageEvents.add(this.minimiseDiv, "click", this.minimise.bind(this)) pageEvents.add(this.restartBtn, "click", this.restartSong.bind(this)) pageEvents.add(this.exitBtn, "click", this.clean.bind(this)) + pageEvents.add(this.autoplayCheckbox, "change", this.toggleAutoplay.bind(this)) this.offsetSlider = new InputSlider(this.offsetDiv, -60, 60, 3) this.offsetSlider.onchange(this.offsetChange.bind(this)) @@ -85,6 +88,7 @@ class Debug{ updateStatus(){ if(debugObj.controller && !this.controller){ this.restartBtn.style.display = "block" + this.autoplayLabel.style.display = "block" this.controller = debugObj.controller var selectedSong = this.controller.selectedSong @@ -109,16 +113,16 @@ class Debug{ var circles = game.songData.circles for(var i in circles){ game.currentCircle = i - if(circles[i].ms < measureMS){ - game.currentCircle = i - }else{ + if(circles[i].endTime >= measureMS){ break } } } + this.autoplayCheckbox.checked = this.controller.autoPlayEnabled } if(this.controller && !debugObj.controller){ this.restartBtn.style.display = "" + this.autoplayLabel.style.display = "" this.controller = null } } @@ -149,14 +153,38 @@ class Debug{ this.controller.restartSong() } } + toggleAutoplay(){ + if(this.controller){ + this.controller.autoPlayEnabled = this.autoplayCheckbox.checked + if(!this.controller.autoPlayEnabled){ + var keyboard = debugObj.controller.keyboard + var kbd = keyboard.getBindings() + keyboard.setKey(kbd.don_l, false) + keyboard.setKey(kbd.don_r, false) + keyboard.setKey(kbd.ka_l, false) + keyboard.setKey(kbd.ka_r, false) + } + } + } clean(){ this.offsetSlider.clean() pageEvents.remove(window, ["mousedown", "mouseup", "mousemove", "blur"]) pageEvents.remove(this.title, "mousedown") + pageEvents.remove(this.minimiseDiv, "click") + pageEvents.remove(this.restartBtn, "click") + pageEvents.remove(this.exitBtn, "click") + pageEvents.remove(this.autoplayCheckbox, "change") delete this.titleDiv delete this.minimiseDiv + delete this.offsetDiv + delete this.measureNumDiv + delete this.restartCheckbox + delete this.autoplayLabel + delete this.autoplayCheckbox + delete this.restartBtn + delete this.exitBtn delete this.controller debugObj.state = "closed" diff --git a/public/src/js/game.js b/public/src/js/game.js index 14ee334..a194fda 100644 --- a/public/src/js/game.js +++ b/public/src/js/game.js @@ -71,7 +71,7 @@ class Game{ var endTime = circle.getEndTime() + (drumrollNotes ? 0 : this.rules.bad) if(ms >= circle.getMS()){ - if(drumrollNotes && !circle.rendaPlayed){ + if(drumrollNotes && !circle.rendaPlayed && ms < endTime){ circle.rendaPlayed = true if(this.rules.difficulty === "easy"){ assets.sounds["renda" + this.controller.snd].stop() @@ -84,10 +84,6 @@ class Game{ } circle.beatMSCopied = true } - if(!nextSet){ - nextSet = true - this.currentCircle = i - } } if(ms > endTime){ if(!this.controller.autoPlayEnabled){ @@ -113,6 +109,9 @@ class Game{ } } } + }else if(!this.controller.autoPlayEnabled && !nextSet){ + nextSet = true + this.currentCircle = i } } } diff --git a/public/src/views/debug.html b/public/src/views/debug.html index dcee191..eba64ac 100644 --- a/public/src/views/debug.html +++ b/public/src/views/debug.html @@ -10,6 +10,7 @@ x-+ +
Restart song
Exit debug