Added new timeline state for wrecks just before death

2 files changed, 18 insertions, 14 deletions

diff --git a/derelict.js b/derelict.js
index 3f234e6..87bc4d5 100644
--- a/derelict.js
+++ b/derelict.js
@@ -4,7 +4,7 @@ import { CSS2DRenderer, CSS2DObject } from 'https://unpkg.com/three@0.126.1/exam
 
 const SCALE = 10000
 const METERS_IN_AU = 149597871000
-const EXPIRY = 1000 * 60 * 5
+const EXPIRY = 1000 * 60 * 10
 
 class SkirmishGrid {
 	scene = new THREE.Scene()
@@ -86,6 +86,7 @@ class Wreck {
 		labelElement.classList.add('label')
 
 		this.killmail = killmail
+		this.timestamp = Date.parse(killmail.killmail_time)
 
 		this.point.position.copy(killmail.victim.position)
 		this.point.add(object2d)
@@ -100,18 +101,19 @@ class Wreck {
 	}
 
 	toggleKilled(timestamp) {
-		const timeDifference = timestamp - Date.parse(this.killmail.killmail_time)
-		if (timeDifference > EXPIRY) {
+		const timeDifference = this.timestamp - timestamp
+		this.domElement.classList.remove('future', 'alive', 'killed', 'expired')
+		if (timeDifference < -EXPIRY) {
 			this.domElement.classList.add('expired')
-			this.domElement.classList.remove('future', 'killed')
 		}
-		else if (timeDifference >= 0) {
+		else if (timeDifference <= 0) {
 			this.domElement.classList.add('killed')
-			this.domElement.classList.remove('expired', 'future')
+		}
+		else if (timeDifference < EXPIRY) {
+			this.domElement.classList.add('alive')
 		}
 		else {
 			this.domElement.classList.add('future')
-			this.domElement.classList.remove('killed', 'expired')
 		}
 	}
 }
diff --git a/style.css b/style.css
index 362bba5..e78ffb3 100644
--- a/style.css
+++ b/style.css
@@ -18,7 +18,7 @@ body {
 .wreck[data-group="Black Ops"] { background-image: url('/media/brackets/battleship_16.png'); }
 .wreck[data-group="Blockade Runner"] { background-image: url('/media/brackets/industrial_16.png'); }
 .wreck[data-group="Capital Industrial Ship"] { background-image: url('/media/brackets/freighter_16.png'); }
-.wreck[data-group="Capsule"] { background-image: url('/media/brackets/frozenCorpse.png'); }
+.wreck[data-group="Capsule"] { background-image: url('/media/brackets/capsule_16.png'); }
 .wreck[data-group="Carrier"] { background-image: url('/media/brackets/carrier_16.png'); }
 .wreck[data-group="Combat Battlecruiser"] { background-image: url('/media/brackets/battleCruiser_16.png'); }
 .wreck[data-group="Combat Recon Ship"] { background-image: url('/media/brackets/cruiser_16.png'); }
@@ -78,16 +78,18 @@ body {
 	transform: translateY(-50%);
 }
 
-.future {
-	opacity: 0.3;
+.future, .expired {
+	opacity: 0.2;
 }
 
-.killed {
-	opacity: 1;
+.wreck.killed[data-group],
+.wreck.expired[data-group] {
+	background-image: url('/media/brackets/wreck.png');
 }
 
-.expired {
-	opacity: 0.3;
+.wreck.killed[data-group="Capsule"],
+.wreck.expired[data-group="Capsule"] {
+	background-image: url('/media/brackets/frozenCorpse.png');
 }
 
 .wreck:hover {