diff options
| -rw-r--r-- | derelict.js | 21 | ||||
| -rw-r--r-- | index.html | 1 | ||||
| -rw-r--r-- | 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() { @@ -6,3 +6,4 @@ <title>Derelict</title> <body> <script type="module" src="derelict.js"></script> +<input type="range" min="0" max="1" value="0" id="timeline"> @@ -3,6 +3,15 @@ body { } .wreck { - width: 16px; + width: 18px; + fill: #8886; +} + +.wreck.killed { fill: #eee; } + +#timeline { + position: absolute; + top: 0px; +} |