Implemented stupid playback

1 files changed, 29 insertions, 3 deletions

diff --git a/derelict.js b/derelict.js
index 8f0f8a3..1484c55 100644
--- a/derelict.js
+++ b/derelict.js
@@ -184,26 +184,52 @@ function processBattle({battle, renderer, renderer2d, container, toolbar, skybox
 	const bottomBar = document.createElement("div")
 	const seekbar = document.createElement("div")
 	const progress = document.createElement("div")
+	const play = document.createElement("button")
 	bottomBar.classList.add("bottom-bar")
 	seekbar.classList.add("seekbar")
 	seekbar.draggable = true
 	progress.classList.add("progress")
 	progress.style.width = "0%"
+	play.innerText = "Play"
 
 	container.appendChild(bottomBar)
+	bottomBar.appendChild(play)
 	bottomBar.appendChild(seekbar)
 	seekbar.appendChild(progress)
 
-	let current = 0
+	let current = start
+	let isPlaying = false
+	let callbackId
+	play.onclick = () => {
+		isPlaying = !isPlaying
+		if (isPlaying) {
+			callbackId = setInterval(() => {
+				if (current + 5000 > end) {
+					current = end
+					isPlaying = false
+					clearInterval(callbackId)
+				}
+				else {
+					current += 5000
+				}
+				elements.forEach(item => item.toggleKilled(current))
+				const norm = (current - start) / (end - start)
+				progress.style.width = `${norm * 100}%`
+			}, 80)
+		}
+		else {
+			clearInterval(callbackId)
+		}
+	}
 	const seekWithBar = e => {
 		const rect = e.srcElement.getBoundingClientRect()
 		const norm = Math.min(1, Math.max(0, (e.clientX - rect.left) / e.srcElement.clientWidth))
 		const lim = Math.floor(norm * e.srcElement.clientWidth) / e.srcElement.clientWidth
 		const timestamp = start + (end - start) * lim
-		if (e.clientX != 0 && current != lim) {
+		if (e.clientX != 0 && current != timestamp) {
+			current = timestamp
 			elements.forEach(item => item.toggleKilled(timestamp))
 			progress.style.width = `${lim * 100}%`
-			current = lim
 		}
 	}
 	elements.forEach(item => item.toggleKilled(start))