Refactored wreck icon loading

1 files changed, 13 insertions, 15 deletions

diff --git a/derelict.js b/derelict.js
index c35f285..4a166e7 100644
--- a/derelict.js
+++ b/derelict.js
@@ -2,8 +2,6 @@ import * as THREE from 'https://unpkg.com/three@0.126.1/build/three.module.js'
 import { OrbitControls } from 'https://unpkg.com/three@0.126.1/examples/jsm/controls/OrbitControls.js'
 import { CSS2DRenderer, CSS2DObject } from 'https://unpkg.com/three@0.126.1/examples/jsm/renderers/CSS2DRenderer.js'
 
-let wreck
-
 const SCALE = 10000
 
 class SkirmishGrid {
@@ -50,13 +48,13 @@ class Wreck {
 	point = new THREE.Object3D()
 	killmail
 
-	constructor({killmail, position}) {
-		const icon = document.importNode(obj.icon, true)
+	constructor({killmail, position, icon}) {
+		const iconElement = document.importNode(icon, true)
 		const object2d = new CSS2DObject(this.domElement)
 
 		this.killmail = killmail
 		this.domElement.className = 'wreck'
-		this.domElement.appendChild(icon)
+		this.domElement.appendChild(iconElement)
 		this.point.position.copy(position)
 		this.point.add(object2d)
 	}
@@ -68,12 +66,11 @@ function loadWreckIcon() {
 		.then(text => {
 			const parser = new window.DOMParser()
 			const svg = parser.parseFromString(text, "image/svg+xml")
-			wreck = svg.documentElement
-			return wreck
+			return svg.documentElement
 		})
 }
 
-function processKillmails(grid, killmails) {
+function processKillmails(grid, killmails, icon) {
 	let clusters = []
 	killmails.forEach(km => {
 		const pos = km.victim.position
@@ -101,7 +98,7 @@ function processKillmails(grid, killmails) {
 		const vec3 = killmail.victim.position
 		vec3.sub(center)
 		vec3.divideScalar(SCALE)
-		const wreck = new Wreck({position: vec3, killmail})
+		const wreck = new Wreck({position: vec3, killmail, icon})
 		grid.add(wreck.point)
 		elements.push(wreck.domElement)
 	})
@@ -127,19 +124,20 @@ function init() {
 	container.appendChild(renderer2d.domElement)
 
 	const grid = new SkirmishGrid({renderer, renderer2d, container})
+	const url = new URL(window.location.href)
 
-	loadWreckIcon()
-		.then(() => {
-			const url = new URL(window.location.href)
-			return fetch(url.searchParams.get("related") + ".json")
-		})
+	let icon = loadWreckIcon()
+
+	fetch(url.searchParams.get("related") + ".json")
 		.then(response => response.json())
 		.then(killmails => {
 			const url = km => `https://esi.evetech.net/latest/killmails/${km.id}/${km.hash}/?datasource=tranquility`
 			const retrieve = km => fetch(url(km)).then(response => response.json())
 			return Promise.all(killmails.map(retrieve))
 		})
-		.then(killmails => processKillmails(grid, killmails))
+		.then(killmails => {
+			icon.then(icon => processKillmails(grid, killmails, icon))
+		})
 
 	const helper = new THREE.GridHelper(50, 50)
 	grid.add(helper)