Added expired wrecks and extended timeline-based styles

2 files changed, 52 insertions, 28 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() {
diff --git a/style.css b/style.css
index 43242aa..dd7cb07 100644
--- a/style.css
+++ b/style.css
@@ -5,22 +5,49 @@ body {
 }
 
 .wreck {
-	width: 20px;
+	width: 18px;
 	cursor: pointer;
 	padding: 2px;
-	fill: none;
-	stroke: #eee;
-	stroke-width: 0.4;
-	stroke-dasharray: 1;
+	fill: #eee;
 }
 
-.wreck.killed {
-	stroke: none;
-	fill: #eee;
+.label {
+	color: #eee;
+	position: absolute;
+	top: -0.2em;
+	left: calc(100% + 0.4em);
+	padding: 0.2em 0.4em;
+	background: #000b;
+	border-radius: 0.5em;
+	border: 1px solid #444;
+	pointer-events: none;
+	width: max-content;
+}
+
+.future {
+	opacity: 0.3;
+}
+
+.killed {
+	opacity: 1;
+}
+
+.expired {
+	opacity: 0.3;
 }
 
 .wreck:hover {
-	border: 2px solid #eee;
+	opacity: 1;
+	border: 3px solid #ff6a00;
+	border-radius: 0.5em;
+}
+
+.wreck .label {
+	display: none;
+}
+
+.wreck:hover .label {
+	display: block;
 }
 
 .wreck::before {
@@ -34,27 +61,14 @@ body {
 	overflow: hidden;
 }
 
-.wreck.teamA::before {
+.teamA::before {
 	background: #cc0899;
 }
 
-.wreck.teamB::before {
+.teamB::before {
 	background: #14ea6a;
 }
 
-.label {
-	color: #eee;
-	position: absolute;
-	top: -0.2em;
-	left: calc(100% + 0.4em);
-	padding: 0.2em 0.4em;
-	background: #000b;
-	border-radius: 0.5em;
-	border: 1px solid #444;
-	pointer-events: none;
-	width: max-content;
-}
-
 #wrapper {
 	display: flex;
 	width: 100vw;