diff options
| -rw-r--r-- | derelict.js | 18 | ||||
| -rw-r--r-- | style.css | 62 |
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() { @@ -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; |