Added expired wrecks and extended timeline-based styles

1 files changed, 14 insertions, 4 deletions

diff --git a/derelict.js b/derelict.js
index 0cd0455..f0fabc2 100644
--- a/derelict.js
+++ b/derelict.js
@@ -5,6 +5,7 @@ import { CSS2DRenderer, CSS2DObject } from 'https://unpkg.com/three@0.126.1/exam
 const ESI = "https://esi.evetech.net/latest"
 const SCALE = 10000
 const METERS_IN_AU = 149597871000
+const EXPIRY = 1000 * 60 * 5
 
 class SkirmishGrid {
 	scene = new THREE.Scene()
@@ -91,11 +92,18 @@ class Wreck {
 	}
 
 	toggleKilled(timestamp) {
-		if (Date.parse(this.killmail.killmail_time) > timestamp) {
-			this.domElement.classList.remove('killed')
+		const timeDifference = timestamp - Date.parse(this.killmail.killmail_time)
+		if (timeDifference > EXPIRY) {
+			this.domElement.classList.add('expired')
+			this.domElement.classList.remove('future', 'killed')
 		}
-		else {
+		else if (timeDifference >= 0) {
 			this.domElement.classList.add('killed')
+			this.domElement.classList.remove('expired', 'future')
+		}
+		else {
+			this.domElement.classList.add('future')
+			this.domElement.classList.remove('killed', 'expired')
 		}
 	}
 }
@@ -160,11 +168,13 @@ function processKillmails(grid, killmails, icon) {
 
 	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
 	timeline.value = timeline.min
 	timeline.step = step
-	timeline.oninput = () => elements.forEach(item => item.toggleKilled(timeline.value))
+	timeline.oninput = toggleAll
+	toggleAll()
 }
 
 function init() {