Added stub grid selector

2 files changed, 16 insertions, 1 deletions

diff --git a/derelict.js b/derelict.js
index 13cd884..d88b951 100644
--- a/derelict.js
+++ b/derelict.js
@@ -4,6 +4,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
 
 class SkirmishGrid {
 	scene = new THREE.Scene()
@@ -125,7 +126,19 @@ function processKillmails(grid, killmails, icon) {
 	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))
+
+	const gridSelection = document.getElementById("grid")
+	clusters.forEach(cluster => {
+		const option = document.createElement("option")
+		const origin = new THREE.Vector3()
+		origin.copy(cluster[0].victim.position)
+		console.log(origin)
+		origin.divideScalar(METERS_IN_AU)
+		option.text = `${origin.x.toFixed(1)} AU, ${origin.y.toFixed(1)} AU, ${origin.z.toFixed(1)} AU`
+		gridSelection.options.add(option)
+	})
+	gridSelection.oninput = () => console.log(clusters[gridSelection.selectedIndex])
+
 	let elements = []
 	clusters[0].forEach(killmail => {
 		killmail.victim.position.sub(center).divideScalar(SCALE)
@@ -133,6 +146,7 @@ function processKillmails(grid, killmails, icon) {
 		grid.add(wreck.point)
 		elements.push(wreck)
 	})
+
 	const timeline = document.getElementById("timeline")
 	const step = 1000
 	timeline.min = start - step
diff --git a/index.html b/index.html
index f5cf97d..1a2f1bd 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,7 @@
 <div id="wrapper">
 	<div id="container"></div>
 	<div id="toolbar">
+		<select id="grid"></select>
 		<input type="range" id="timeline">
 	</div>
 </div>