From 392bc996c73870da8a01603eed31b7d213bc9d8e Mon Sep 17 00:00:00 2001
From: Aki <please@ignore.pl>
Date: Wed, 7 Apr 2021 00:17:41 +0200
Subject: Timeline is now time-based instead of kill

---
 derelict.js | 29 +++++++++++++++++++++--------
 index.html  |  2 +-
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/derelict.js b/derelict.js
index 573e7f9..6e8ba5b 100644
--- a/derelict.js
+++ b/derelict.js
@@ -73,6 +73,15 @@ class Wreck {
 			grid.controls.update()
 		}
 	}
+
+	toggleKilled(timestamp) {
+		if (Date.parse(this.killmail.killmail_time) > timestamp) {
+			this.domElement.classList.remove('killed')
+		}
+		else {
+			this.domElement.classList.add('killed')
+		}
+	}
 }
 
 function loadWreckIcon() {
@@ -108,8 +117,11 @@ function averagePosition(positions) {
 }
 
 function processKillmails(grid, killmails, icon) {
-	let clusters = killmails.reduce(splitKillmails, new Array())
-	let center = averagePosition(clusters[0].map(km => km.victim.position))
+	const dates = killmails.map(km => Date.parse(km.killmail_time))
+	const start = Math.min(...dates)
+	const end = Math.max(...dates)
+	const clusters = killmails.reduce(splitKillmails, new Array())
+	const center = averagePosition(clusters[0].map(km => km.victim.position))
 	clusters[0].sort((a, b) => a.killmail_time.localeCompare(b.killmail_time))
 	let elements = []
 	clusters[0].forEach(killmail => {
@@ -118,14 +130,15 @@ function processKillmails(grid, killmails, icon) {
 		vec3.divideScalar(SCALE)
 		const wreck = new Wreck({position: vec3, killmail, icon, grid})
 		grid.add(wreck.point)
-		elements.push(wreck.domElement)
+		elements.push(wreck)
 	})
 	const timeline = document.getElementById("timeline")
-	timeline.max = elements.length + 1
-	timeline.oninput = function () {
-		elements.slice(0, this.value).forEach(element => element.classList.add("killed"))
-		elements.slice(this.value, this.max).forEach(element => element.classList.remove("killed"))
-	}
+	const step = 1000
+	timeline.min = start - step
+	timeline.max = end + step
+	timeline.value = timeline.min
+	timeline.step = step
+	timeline.oninput = () => elements.forEach(item => item.toggleKilled(timeline.value))
 }
 
 function init() {
diff --git a/index.html b/index.html
index 53d79ec..f5cf97d 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,7 @@
 <div id="wrapper">
 	<div id="container"></div>
 	<div id="toolbar">
-		<input type="range" min="0" max="1" value="0" id="timeline">
+		<input type="range" id="timeline">
 	</div>
 </div>
 <script type="module" src="derelict.js"></script>
-- 
cgit v1.1