summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--derelict.js18
-rw-r--r--style.css62
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;