Moved slider interactions to StatusBar

1 files changed, 22 insertions, 32 deletions

diff --git a/derelict.js b/derelict.js
index ca95460..a91b1a8 100644
--- a/derelict.js
+++ b/derelict.js
@@ -35,6 +35,12 @@ class Timeline {
 		this.simple_list.forEach(wreck => wreck.toggleKilled(this.current))
 	}
 
+	setNormalized(value) {
+		const span = this.finish - this.start
+		const time = this.start + span * value
+		this.setTo(time)
+	}
+
 	setTo(time) {
 		if (time < this.start)
 			this.current = new Date(this.start)
@@ -232,6 +238,7 @@ class StatusBar {
 	time = document.createElement('span')
 
 	constructor(timeline) {
+		this.timeline = timeline
 		this.domElement.classList.add("bottom-bar")
 		this.initializeSeekbar()
 		this.initializeButtons()
@@ -252,6 +259,9 @@ class StatusBar {
 		this.seekbar.appendChild(this.progress)
 		this.progress.appendChild(tip)
 		this.domElement.appendChild(this.seekbar)
+		this.seekbar.onclick = this.seek.bind(this)
+		this.seekbar.ondrag = this.seek.bind(this)
+		this.seekbar.ondragstart = e => e.dataTransfer.setDragImage(new Image(0, 0), 0, 0)
 	}
 
 	initializeButtons() {
@@ -260,6 +270,17 @@ class StatusBar {
 		this.buttons.appendChild(this.play)
 		this.buttons.appendChild(this.time)
 		this.domElement.appendChild(this.buttons)
+		this.play.onclick = () => this.timeline.togglePlayback()
+	}
+
+	seek(event) {
+		const rect = event.srcElement.getBoundingClientRect()
+		let value = (event.clientX - rect.left) / event.srcElement.clientWidth
+		value = Math.min(1, Math.max(0, value))
+		value = Math.floor(value * event.srcElement.clientWidth) / event.srcElement.clientWidth
+		// TODO: Fix slider dragging behaviour. It's not consistent across browsers and even their versions...
+		if (event.clientX != 0)
+			this.timeline.setNormalized(value)
 	}
 
 	timeUpdatedCallback(current, start, finish) {
@@ -315,41 +336,10 @@ function processBattle({battle, renderer, renderer2d, container, toolbar, skybox
 		battle_obj.grids.forEach(g => g.scene.background = rt)
 	})
 
-	const start = battle_obj.timeline.start - EXPIRY
-	const end = battle_obj.timeline.finish + EXPIRY
-
 	const statusBar = new StatusBar(battle_obj.timeline)
 	container.appendChild(statusBar.domElement)
 
-	const seekbar = statusBar.seekbar
-	const progress = statusBar.progress
-	const play = statusBar.play
-	const time = statusBar.time
-
-	const writeTime = stamp => {
-		let date = new Date(stamp)
-		time.textContent = date.toLocaleString()
-	}
-
-	play.onclick = () => battle_obj.timeline.togglePlayback()
-
-	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 != timestamp) {
-			current = timestamp
-			battle_obj.timeline.simple_list.forEach(item => item.toggleKilled(timestamp))
-			progress.style.width = `${lim * 100}%`
-			writeTime(current)
-		}
-	}
-	battle_obj.timeline.simple_list.forEach(item => item.toggleKilled(start))
-
-	seekbar.onclick = seekWithBar
-	seekbar.ondrag = seekWithBar
-	seekbar.ondragstart = e => e.dataTransfer.setDragImage(new Image(0, 0), 0, 0)
+	battle_obj.timeline.update()
 }
 
 export function init({id, container, toolbar}) {