1 files changed, 33 insertions, 11 deletions
diff --git a/derelict.js b/derelict.js
index 87bc4d5..8f0f8a3 100644
--- a/derelict.js
+++ b/derelict.js
@@ -178,17 +178,39 @@ function processBattle({battle, renderer, renderer2d, container, toolbar, skybox
 		grids.forEach(g => g.scene.background = rt)
 	})
 
-	const start = Date.parse(battle.started_at)
-	const end = Date.parse(battle.ended_at)
-	const timeline = document.getElementById("timeline")
-	const step = 1000
-	const toggleAll = () => elements.forEach(item => item.toggleKilled(timeline.value))
-	timeline.min = start - step
-	timeline.max = end + step + EXPIRY
-	timeline.value = timeline.min
-	timeline.step = step
-	timeline.oninput = toggleAll
-	toggleAll()
+	const start = Date.parse(battle.started_at) - EXPIRY
+	const end = Date.parse(battle.ended_at) + EXPIRY
+
+	const bottomBar = document.createElement("div")
+	const seekbar = document.createElement("div")
+	const progress = document.createElement("div")
+	bottomBar.classList.add("bottom-bar")
+	seekbar.classList.add("seekbar")
+	seekbar.draggable = true
+	progress.classList.add("progress")
+	progress.style.width = "0%"
+
+	container.appendChild(bottomBar)
+	bottomBar.appendChild(seekbar)
+	seekbar.appendChild(progress)
+
+	let current = 0
+	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) {
+			elements.forEach(item => item.toggleKilled(timestamp))
+			progress.style.width = `${lim * 100}%`
+			current = lim
+		}
+	}
+	elements.forEach(item => item.toggleKilled(start))
+
+	seekbar.onclick = seekWithBar
+	seekbar.ondrag = seekWithBar
+	seekbar.ondragstart = e => e.dataTransfer.setDragImage(new Image(0, 0), 0, 0)
 }
 
 export function init({id, container, toolbar}) {