Prepared parts of code for clean-up

3 files changed, 70 insertions, 41 deletions

diff --git a/derelict.js b/derelict.js
index ff100e0..7e2da08 100644
--- a/derelict.js
+++ b/derelict.js
@@ -2,12 +2,48 @@ 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 camera, scene, renderer, renderer2d, wreck
+let wreck
 
 const SCALE = 10000
 
-init()
-animate()
+class SkirmishGrid {
+	scene = new THREE.Scene()
+	camera
+	controls
+	renderer
+	renderer2d
+
+	constructor(obj) {
+		this.container = obj.container
+		this.renderer = obj.renderer
+		this.renderer2d = obj.renderer2d
+
+		const aspect = this.container.clientWidth / this.container.clientHeight
+		this.camera = new THREE.PerspectiveCamera(80, aspect, 0.1, 1000)
+		this.camera.position.set(8, 8, 8)
+		this.camera.lookAt(0, 0, 0)
+		this.controls = new OrbitControls(this.camera, this.renderer2d.domElement)
+		this.controls.minDistance = 2
+		this.controls.maxDistance = 30
+	}
+
+	add(obj) {
+		this.scene.add(obj)
+	}
+
+	draw() {
+		this.renderer.render(this.scene, this.camera)
+		this.renderer2d.render(this.scene, this.camera)
+		requestAnimationFrame(() => this.draw())
+	}
+
+	onresize() {
+		this.renderer.setSize(this.container.clientWidth, this.container.clientHeight)
+		this.renderer2d.setSize(this.container.clientWidth, this.container.clientHeight)
+		this.camera.aspect = this.container.clientWidth / this.container.clientHeight
+		this.camera.updateProjectionMatrix()
+	}
+}
 
 function Wreck(vec3, km) {
 	const point = new THREE.Object3D()
@@ -34,7 +70,7 @@ function loadWreckIcon() {
 		})
 }
 
-function processKillmails(killmails) {
+function processKillmails(grid, killmails) {
 	let clusters = []
 	killmails.forEach(km => {
 		const pos = km.victim.position
@@ -70,7 +106,7 @@ function processKillmails(killmails) {
 		div.appendChild(w)
 		const label = new CSS2DObject(div)
 		point.add(label)
-		scene.add(point)
+		grid.add(point)
 		elements.push(div)
 	})
 	const timeline = document.getElementById("timeline")
@@ -82,10 +118,19 @@ function processKillmails(killmails) {
 }
 
 function init() {
-	camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 0.1, 100)
-	camera.position.set(8, 8, 8)
-	camera.lookAt(0, 0, 0)
-	scene = new THREE.Scene()
+	const container = document.getElementById("container")
+	const renderer = new THREE.WebGLRenderer({antialias: true})
+	const renderer2d = new CSS2DRenderer()
+
+	renderer.setSize(container.clientWidth, container.clientHeight)
+	renderer2d.setSize(container.clientWidth, container.clientHeight)
+	renderer2d.domElement.style.position = 'absolute'
+	renderer2d.domElement.style.top = '0px'
+
+	container.appendChild(renderer.domElement)
+	container.appendChild(renderer2d.domElement)
+
+	const grid = new SkirmishGrid({renderer, renderer2d, container})
 
 	loadWreckIcon()
 		.then(() => {
@@ -98,44 +143,21 @@ function init() {
 			const retrieve = km => fetch(url(km)).then(response => response.json())
 			return Promise.all(killmails.map(retrieve))
 		})
-		.then(processKillmails)
-
-	const grid = new THREE.GridHelper(30, 30)
-	scene.add(grid)
-
-	renderer = new THREE.WebGLRenderer({antialias: true})
-	renderer.setSize(window.innerWidth, window.innerHeight)
-	document.body.appendChild(renderer.domElement)
+		.then(killmails => processKillmails(grid, killmails))
 
-	renderer2d = new CSS2DRenderer()
-	renderer2d.setSize(window.innerWidth, window.innerHeight)
-	renderer2d.domElement.style.position = 'absolute'
-	renderer2d.domElement.style.top = '0px'
-	document.body.appendChild(renderer2d.domElement)
-	const controls = new OrbitControls(camera, renderer2d.domElement)
-	controls.minDistance = 2
-	controls.maxDistance = 24
+	const helper = new THREE.GridHelper(50, 50)
+	grid.add(helper)
 
 	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)
-			scene.background = rt
+			grid.scene.background = rt
 		});
 
-	window.addEventListener('resize', onWindowResize)
-}
-
-function onWindowResize() {
-	camera.aspect = window.innerWidth / window.innerHeight
-	camera.updateProjectionMatrix()
-	renderer.setSize(window.innerWidth, window.innerHeight)
-	renderer2d.setSize(window.innerWidth, window.innerHeight)
+	window.addEventListener('resize', () => grid.onresize())
+	grid.draw()
 }
 
-function animate() {
-	requestAnimationFrame(animate)
-	renderer.render(scene, camera)
-	renderer2d.render(scene, camera)
-}
+init()
diff --git a/index.html b/index.html
index 5576386..b95430d 100644
--- a/index.html
+++ b/index.html
@@ -5,5 +5,6 @@
 <link rel="stylesheet" type="text/css" href="style.css">
 <title>Derelict</title>
 <body>
-<script type="module" src="derelict.js"></script>
+<div id="container"></div>
 <input type="range" min="0" max="1" value="0" id="timeline">
+<script type="module" src="derelict.js"></script>
diff --git a/style.css b/style.css
index a3faba9..2be182c 100644
--- a/style.css
+++ b/style.css
@@ -11,7 +11,13 @@ body {
 	fill: #eee;
 }
 
+#container {
+	width: 100vw;
+	height: 100vh;
+}
+
 #timeline {
 	position: absolute;
-	top: 0px;
+	width: 50vw;
+	bottom: 0px;
 }