Moved playback to Timeline

1 files changed, 62 insertions, 35 deletions

diff --git a/derelict.js b/derelict.js
index a8900ee..ca95460 100644
--- a/derelict.js
+++ b/derelict.js
@@ -14,6 +14,11 @@ class Timeline {
 
 	simple_list = []
 
+	setCallbacks({timeUpdatedCallback, playbackCallback}) {
+		this.timeUpdatedCallback = timeUpdatedCallback
+		this.playbackCallback = playbackCallback
+	}
+
 	register(wreck) {
 		if (this.start === undefined || wreck.timestamp - EXPIRY < this.start) {
 			this.start = wreck.timestamp - EXPIRY
@@ -31,13 +36,45 @@ class Timeline {
 	}
 
 	setTo(time) {
-		if (!time instanceof Date)
-			time = new Date(time)
-		this.current = time
+		if (time < this.start)
+			this.current = new Date(this.start)
+		else if (time > this.finish)
+			this.current = new Date(this.finish)
+		else {
+			if (!time instanceof Date)
+				time = new Date(time)
+			this.current = time
+		}
+		this.update()
+		this.timeUpdatedCallback(this.current, this.start, this.finish)
+		return this.current
+	}
+
+	play() {
+		if (this.callbackId !== undefined)
+			return
+		this.callbackId = setInterval(() => {
+			const time = this.current + 5000
+			const act = this.setTo(time)
+			if (act != time)
+				this.pause()
+		}, 100)
+		this.playbackCallback(true)
 	}
 
-	getCurrentTime() {
-		return this.current.toLocaleString()
+	pause() {
+		if (this.callbackId === undefined)
+			return
+		clearInterval(this.callbackId)
+		this.callbackId = undefined
+		this.playbackCallback(false)
+	}
+
+	togglePlayback() {
+		if (this.callbackId === undefined)
+			this.play()
+		else
+			this.pause()
 	}
 }
 
@@ -195,10 +232,14 @@ class StatusBar {
 	time = document.createElement('span')
 
 	constructor(timeline) {
-		this.timeline = timeline
 		this.domElement.classList.add("bottom-bar")
 		this.initializeSeekbar()
 		this.initializeButtons()
+		timeline.setCallbacks({
+			timeUpdatedCallback: this.timeUpdatedCallback.bind(this),
+			playbackCallback: this.playbackCallback.bind(this),
+		})
+		this.time.textContent = timeline.current.toLocaleString()
 	}
 
 	initializeSeekbar() {
@@ -220,6 +261,19 @@ class StatusBar {
 		this.buttons.appendChild(this.time)
 		this.domElement.appendChild(this.buttons)
 	}
+
+	timeUpdatedCallback(current, start, finish) {
+		const norm = (current - start) / (finish - start)
+		this.progress.style.width = `${norm * 100}%`
+		this.time.textContent = current.toLocaleString()
+	}
+
+	playbackCallback(status) {
+		if (status)
+			this.play.textContent = "⏸️"
+		else
+			this.play.textContent = "▶️"
+	}
 }
 
 function vec3FromXYZ({x, y, z}) {
@@ -277,34 +331,8 @@ function processBattle({battle, renderer, renderer2d, container, toolbar, skybox
 		time.textContent = date.toLocaleString()
 	}
 
-	let current = start
-	let isPlaying = false
-	let callbackId
-	play.onclick = () => {
-		isPlaying = !isPlaying
-		if (isPlaying) {
-			play.textContent = "⏸️"
-			callbackId = setInterval(() => {
-				if (current + 5000 > end) {
-					current = end
-					isPlaying = false
-					clearInterval(callbackId)
-					play.textContent = "▶️"
-				}
-				else {
-					current += 5000
-				}
-				battle_obj.timeline.simple_list.forEach(item => item.toggleKilled(current))
-				const norm = (current - start) / (end - start)
-				progress.style.width = `${norm * 100}%`
-				writeTime(current)
-			}, 100)
-		}
-		else {
-			clearInterval(callbackId)
-			play.textContent = "▶️"
-		}
-	}
+	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))
@@ -318,7 +346,6 @@ function processBattle({battle, renderer, renderer2d, container, toolbar, skybox
 		}
 	}
 	battle_obj.timeline.simple_list.forEach(item => item.toggleKilled(start))
-	writeTime(current)
 
 	seekbar.onclick = seekWithBar
 	seekbar.ondrag = seekWithBar