Added new seekbar

2 files changed, 56 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}) {
diff --git a/style.css b/style.css
index 62b6670..bd5073b 100644
--- a/style.css
+++ b/style.css
@@ -186,3 +186,26 @@ body {
 	height: 100vh;
 	box-sizing: border-box;
 }
+
+.bottom-bar {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	box-sizing: border-box;
+	padding: 0 1em 1em 1em;
+	z-index: 10000;
+}
+
+.bottom-bar .seekbar {
+	width: 100%;
+	height: 0.5em;
+	background: #333;
+	cursor: pointer;
+}
+
+.bottom-bar .seekbar .progress {
+	height: 100%;
+	background: #bf1041;
+	pointer-events: none;
+}