From c46a51bf6f1da139663615a892e6eb9fb643cc4e Mon Sep 17 00:00:00 2001 From: Aki Date: Sun, 4 Apr 2021 23:02:22 +0200 Subject: Added simplistic timeline --- derelict.js | 21 +++++++++++++++++++-- index.html | 1 + style.css | 11 ++++++++++- 3 files changed, 30 insertions(+), 3 deletions(-) diff --git a/derelict.js b/derelict.js index 77767bf..ff100e0 100644 --- a/derelict.js +++ b/derelict.js @@ -9,7 +9,7 @@ const SCALE = 10000 init() animate() -function Wreck(vec3) { +function Wreck(vec3, km) { const point = new THREE.Object3D() point.position.copy(vec3) @@ -56,12 +56,29 @@ function processKillmails(killmails) { let positions = clusters[0].map(km => km.victim.position) positions.forEach(pos => center.add(new THREE.Vector3(pos.x, pos.y, pos.z))) center.divideScalar(positions.length) + clusters[0].sort((a, b) => a.killmail_time.localeCompare(b.killmail_time)) + let elements = [] clusters[0].forEach(km => { const vec3 = km.victim.position vec3.sub(center) vec3.divideScalar(SCALE) - scene.add(Wreck(vec3)) + const point = new THREE.Object3D() + point.position.copy(vec3) + const div = document.createElement('div') + div.className = 'wreck' + const w = document.importNode(wreck, true) + div.appendChild(w) + const label = new CSS2DObject(div) + point.add(label) + scene.add(point) + elements.push(div) }) + 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")) + } } function init() { diff --git a/index.html b/index.html index 5c80cb2..5576386 100644 --- a/index.html +++ b/index.html @@ -6,3 +6,4 @@ Derelict + diff --git a/style.css b/style.css index 35a9d31..a3faba9 100644 --- a/style.css +++ b/style.css @@ -3,6 +3,15 @@ body { } .wreck { - width: 16px; + width: 18px; + fill: #8886; +} + +.wreck.killed { fill: #eee; } + +#timeline { + position: absolute; + top: 0px; +} -- cgit v1.1