summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--derelict.js63
1 files 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()