Add restart and exit buttons, add restart shortcut, fix restarting on specific measures

public/src/css/debug.css

@@ -2,8 +2,8 @@
 	position: absolute;
 	top: 0;
 	left: 0;
-	width: 250px;
+	width: 260px;
-	height: 220px;
+	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;
+}

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){
+			if(this.restartCheckbox.checked && !noRestart){
-				this.controller.restartSong()
+				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()
 		}
 	}

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

public/src/js/main.js

@@ -84,8 +84,8 @@ pageEvents.add(versionDiv, ["click", "touchend"], () => {
 })
 resizeRoot()
 setInterval(resizeRoot, 100)
-pageEvents.keyAdd(debugObj, 186, "down", event => {
+pageEvents.keyAdd(debugObj, "all", "down", event => {
-	if(event.ctrlKey && event.shiftKey && !event.altKey){
+	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(() => {

public/src/views/debug.html

@@ -10,4 +10,8 @@
 		<span class="reset">x</span><input type="text" value="" readonly><span class="minus">-</span><span class="plus">+</span>
 	</div>
 	<label><input class="change-restart" type="checkbox">Restart on change</label>
+	<div class="bottom-btns">
+		<div class="restart-btn">Restart song</div>
+		<div class="exit-btn">Exit debug</div>
+	</div>
 </div>