summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--derelict.js21
-rw-r--r--index.html1
-rw-r--r--style.css11
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 @@
<title>Derelict</title>
<body>
<script type="module" src="derelict.js"></script>
+<input type="range" min="0" max="1" value="0" id="timeline">
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;
+}