diff options
| -rw-r--r-- | derelict.js | 29 | ||||
| -rw-r--r-- | index.html | 2 |
2 files changed, 22 insertions, 9 deletions
diff --git a/derelict.js b/derelict.js index 573e7f9..6e8ba5b 100644 --- a/derelict.js +++ b/derelict.js @@ -73,6 +73,15 @@ class Wreck { grid.controls.update() } } + + toggleKilled(timestamp) { + if (Date.parse(this.killmail.killmail_time) > timestamp) { + this.domElement.classList.remove('killed') + } + else { + this.domElement.classList.add('killed') + } + } } function loadWreckIcon() { @@ -108,8 +117,11 @@ function averagePosition(positions) { } function processKillmails(grid, killmails, icon) { - let clusters = killmails.reduce(splitKillmails, new Array()) - let center = averagePosition(clusters[0].map(km => km.victim.position)) + const dates = killmails.map(km => Date.parse(km.killmail_time)) + const start = Math.min(...dates) + const end = Math.max(...dates) + const clusters = killmails.reduce(splitKillmails, new Array()) + const center = averagePosition(clusters[0].map(km => km.victim.position)) clusters[0].sort((a, b) => a.killmail_time.localeCompare(b.killmail_time)) let elements = [] clusters[0].forEach(killmail => { @@ -118,14 +130,15 @@ function processKillmails(grid, killmails, icon) { vec3.divideScalar(SCALE) const wreck = new Wreck({position: vec3, killmail, icon, grid}) grid.add(wreck.point) - elements.push(wreck.domElement) + elements.push(wreck) }) const timeline = document.getElementById("timeline") - timeline.max = elements.length + 1 - timeline.oninput = function () { - elements.slice(0, this.value).forEach(element => element.classList.add("killed")) - elements.slice(this.value, this.max).forEach(element => element.classList.remove("killed")) - } + const step = 1000 + timeline.min = start - step + timeline.max = end + step + timeline.value = timeline.min + timeline.step = step + timeline.oninput = () => elements.forEach(item => item.toggleKilled(timeline.value)) } function init() { @@ -8,7 +8,7 @@ <div id="wrapper"> <div id="container"></div> <div id="toolbar"> - <input type="range" min="0" max="1" value="0" id="timeline"> + <input type="range" id="timeline"> </div> </div> <script type="module" src="derelict.js"></script> |