From 49497f381003f51eb146ff60176497d57f5fa7ca Mon Sep 17 00:00:00 2001
From: Aki <please@ignore.pl>
Date: Sat, 10 Apr 2021 01:18:12 +0200
Subject: Badly implemented grid switching

---
 derelict.js | 63 +++++++++++++++++++++++++++++++++++++++----------------------
 1 file changed, 40 insertions(+), 23 deletions(-)

diff --git a/derelict.js b/derelict.js
index f36f116..683e509 100644
--- a/derelict.js
+++ b/derelict.js
@@ -14,6 +14,7 @@ class SkirmishGrid {
 	controls
 	renderer
 	renderer2d
+	active = false
 
 	constructor({container, renderer, renderer2d}) {
 		this.container = container
@@ -41,7 +42,10 @@ class SkirmishGrid {
 		this.renderer.render(this.scene, this.camera)
 		this.renderer2d.render(this.scene, this.camera)
 		this.controls.update()
-		requestAnimationFrame(() => this.draw())
+		if (this.active)
+			requestAnimationFrame(() => this.draw())
+		else
+			this.renderer2d.domElement.innerHTML = ''
 	}
 
 	onresize() {
@@ -50,6 +54,14 @@ class SkirmishGrid {
 		this.camera.aspect = this.container.clientWidth / this.container.clientHeight
 		this.camera.updateProjectionMatrix()
 	}
+
+	enable() {
+		this.active = true
+	}
+
+	disable() {
+		this.active = false
+	}
 }
 
 class Wreck {
@@ -140,13 +152,14 @@ function averagePosition(positions) {
 	return sum.divideScalar(positions.length)
 }
 
-function processKillmails(grid, killmails, icon) {
+function processKillmails(obj, killmails, icon) {
 	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))
 
+	let elements = []
+	let grids = []
 	const gridSelection = document.getElementById("grid")
 	clusters.forEach(cluster => {
 		const option = document.createElement("option")
@@ -155,15 +168,29 @@ function processKillmails(grid, killmails, icon) {
 		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)
+
+		const center = averagePosition(cluster.map(km => km.victim.position))
+		const grid = new SkirmishGrid(obj)
+		cluster.forEach(killmail => {
+			killmail.victim.position.sub(center).divideScalar(SCALE)
+			const wreck = new Wreck({killmail, icon, grid})
+			grid.add(wreck.point)
+			elements.push(wreck)
+		})
+		grids.push(grid)
+		window.addEventListener('resize', () => grid.onresize())
 	})
-	gridSelection.oninput = () => console.log(clusters[gridSelection.selectedIndex])
+	gridSelection.oninput = () => {
+		grids.forEach(g => g.disable())
+		grids[gridSelection.selectedIndex].enable()
+		grids[gridSelection.selectedIndex].draw()
+	}
+	gridSelection.oninput()
 
-	let elements = []
-	clusters[0].forEach(killmail => {
-		killmail.victim.position.sub(center).divideScalar(SCALE)
-		const wreck = new Wreck({killmail, icon, grid})
-		grid.add(wreck.point)
-		elements.push(wreck)
+	obj.skybox.then(skybox => {
+		const rt = new THREE.WebGLCubeRenderTarget(skybox.image.height)
+		rt.fromEquirectangularTexture(obj.renderer, skybox)
+		grids.forEach(g => g.scene.background = rt)
 	})
 
 	const timeline = document.getElementById("timeline")
@@ -190,8 +217,9 @@ function init() {
 	container.appendChild(renderer.domElement)
 	container.appendChild(renderer2d.domElement)
 
-	const grid = new SkirmishGrid({renderer, renderer2d, container})
 	const url = new URL(window.location.href)
+	const loader = new THREE.TextureLoader()
+	const skybox = loader.loadAsync("https://i.imgur.com/rDGOLFC.jpg") // TODO: Don't use imgur as CDN.
 
 	let icon = loadWreckIcon()
 
@@ -205,19 +233,8 @@ function init() {
 			return Promise.all(killmails.map(retrieve))
 		})
 		.then(killmails => {
-			icon.then(icon => processKillmails(grid, killmails, icon))
+			icon.then(icon => processKillmails({skybox, renderer, renderer2d, container}, killmails, icon))
 		})
-
-	const loader = new THREE.TextureLoader()
-	loader.loadAsync("https://i.imgur.com/rDGOLFC.jpg") // TODO: Don't use imgur as CDN.
-		.then(skybox => {
-			const rt = new THREE.WebGLCubeRenderTarget(skybox.image.height)
-			rt.fromEquirectangularTexture(renderer, skybox)
-			grid.scene.background = rt
-		});
-
-	window.addEventListener('resize', () => grid.onresize())
-	grid.draw()
 }
 
 init()
-- 
cgit v1.1