path: root/derelict.js

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'

const SCALE = 10000
const METERS_IN_AU = 149597871000
const EXPIRY = 1000 * 60 * 10
const GRID_EXTENT = 100 * SCALE

class Timeline {
	start
	finish
	current

	simple_list = []

	setCallbacks({timeUpdatedCallback, playbackCallback}) {
		this.timeUpdatedCallback = timeUpdatedCallback
		this.playbackCallback = playbackCallback
	}

	register(wreck) {
		if (this.start === undefined || wreck.timestamp - EXPIRY < this.start) {
			this.start = wreck.timestamp - EXPIRY
			if (this.current === undefined || this.current == this.start)
				this.current = this.start
		}
		if (this.finish === undefined || wreck.timestamp + EXPIRY > this.finish)
			this.finish = wreck.timestamp + EXPIRY
		// TODO: Implement more reliable and optimized data structure for timeline.
		this.simple_list.push(wreck)
	}

	update() {
		this.simple_list.forEach(wreck => wreck.toggleKilled(this.current))
	}

	setNormalized(value) {
		const span = this.finish - this.start
		const time = this.start + span * value
		this.setTo(time)
	}

	setTo(time) {
		if (time < this.start)
			this.current = new Date(this.start)
		else if (time > this.finish)
			this.current = new Date(this.finish)
		else {
			if (!time instanceof Date)
				time = new Date(time)
			this.current = time
		}
		this.update()
		this.timeUpdatedCallback(this.current, this.start, this.finish)
		return this.current
	}

	play() {
		if (this.callbackId !== undefined)
			return
		this.callbackId = setInterval(() => {
			const time = this.current + 5000
			const act = this.setTo(time)
			if (act != time)
				this.pause()
		}, 100)
		this.playbackCallback(true)
	}

	pause() {
		if (this.callbackId === undefined)
			return
		clearInterval(this.callbackId)
		this.callbackId = undefined
		this.playbackCallback(false)
	}

	togglePlayback() {
		if (this.callbackId === undefined)
			this.play()
		else
			this.pause()
	}
}

class Grid {
	scene = new THREE.Scene()
	wrecks = []

	constructor(wreck, {container, renderer, renderer2d}) {
		this.container = container
		this.renderer = renderer
		this.renderer2d = 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
		this.controls.enableDamping = true
		this.controls.dampingFactor = 0.4

		const helper = new THREE.GridHelper(50, 50, 0x303030, 0x222222)
		this.scene.add(helper)

		this.positionOfReference = wreck.killmail.victim.position
		this.locationOfReference = wreck.location
		this.scene.add(wreck.object)
		this.wrecks.push(wreck)
	}

	tryAdding(wreck) {
		if (wreck.location == this.locationOfReference) {
			const distance = wreck.killmail.victim.position.distanceTo(this.positionOfReference)
			if (distance < GRID_EXTENT) {
				this.scene.add(wreck.object)
				this.wrecks.push(wreck)
				return true
			}
		}
		return false
	}

	draw() {
		this.renderer.render(this.scene, this.camera)
		this.renderer2d.render(this.scene, this.camera)
		this.controls.update()
		if (this.active)
			requestAnimationFrame(() => this.draw())
		else
			this.renderer2d.domElement.innerHTML = ''
	}

	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()
	}

	enable() {
		this.active = true
		this.controls.enabled = true
	}

	disable() {
		this.active = false
		this.controls.enabled = false
	}

	recenter() {
		const center = averagePosition(this.wrecks.map(wreck => wreck.killmail.victim.position))
		this.wrecks.forEach(wreck => wreck.object.position.sub(center).divideScalar(SCALE))  // TODO: rescale
	}
}

class Battle {
	timeline = new Timeline()
	grids = []

	constructor(grid_initializer) {
		this.grid_initializer = grid_initializer
	}

	add(wreck) {
		this.timeline.register(wreck)
		let added = false
		for (const grid of this.grids) {
			added = grid.tryAdding(wreck)
			if (added) break
		}
		if (!added) {
			const grid = new Grid(wreck, this.grid_initializer)
			this.grids.push(grid)
		}
	}
}

class Wreck {
	domElement = document.createElement('div')
	object = new THREE.Object3D()
	killmail

	constructor({killmail, snapshot}) {
		const labelElement = document.createElement('div')
		const object2d = new CSS2DObject(this.domElement)
		const ownerId = "alliance_id" in killmail.victim ? killmail.victim.alliance_id : killmail.victim.corporation_id
		const team = snapshot.getTeam(ownerId)
		const shipTypeId = killmail.victim.ship_type_id

		const typeName = snapshot.getShipName(shipTypeId)
		const groupName = snapshot.getShipGroup(shipTypeId)
		this.domElement.dataset.type = typeName
		this.domElement.dataset.group = groupName

		labelElement.textContent = typeName
		labelElement.classList.add('label')

		this.killmail = killmail
		this.timestamp = Date.parse(killmail.killmail_time)

		this.object.position.copy(killmail.victim.position)
		this.object.add(object2d)

		this.domElement.classList.add('wreck', team)
		this.domElement.appendChild(labelElement)
		this.domElement.onclick = () => window.open(`https://zkillboard.com/kill/${this.killmail.killmail_id}/`)
	}

	toggleKilled(timestamp) {
		const timeDifference = this.timestamp - timestamp
		this.domElement.classList.remove('future', 'alive', 'killed', 'expired')
		if (timeDifference < -EXPIRY) {
			this.domElement.classList.add('expired')
		}
		else if (timeDifference <= 0) {
			this.domElement.classList.add('killed')
		}
		else if (timeDifference < EXPIRY) {
			this.domElement.classList.add('alive')
		}
		else {
			this.domElement.classList.add('future')
		}
	}
}

class StatusBar {
	domElement = document.createElement('div')
	seekbar = document.createElement('div')
	progress = document.createElement('div')
	buttons = document.createElement('div')
	play = document.createElement('button')
	time = document.createElement('span')

	constructor(timeline) {
		this.timeline = timeline
		this.domElement.classList.add("bottom-bar")
		this.initializeSeekbar()
		this.initializeButtons()
		timeline.setCallbacks({
			timeUpdatedCallback: this.timeUpdatedCallback.bind(this),
			playbackCallback: this.playbackCallback.bind(this),
		})
		this.time.textContent = timeline.current.toLocaleString()
	}

	initializeSeekbar() {
		this.seekbar.classList.add("seekbar")
		this.seekbar.draggable = true
		this.progress.classList.add("progress")
		this.progress.style.width = "0%"
		const tip = document.createElement('div')
		tip.classList.add("tip")
		this.seekbar.appendChild(this.progress)
		this.progress.appendChild(tip)
		this.domElement.appendChild(this.seekbar)
		this.seekbar.onclick = this.seek.bind(this)
		this.seekbar.ondrag = this.seek.bind(this)
		this.seekbar.ondragstart = e => e.dataTransfer.setDragImage(new Image(0, 0), 0, 0)
	}

	initializeButtons() {
		this.buttons.classList.add("buttons")
		this.play.textContent = "▶️"
		this.buttons.appendChild(this.play)
		this.buttons.appendChild(this.time)
		this.domElement.appendChild(this.buttons)
		this.play.onclick = () => this.timeline.togglePlayback()
	}

	seek(event) {
		const rect = event.srcElement.getBoundingClientRect()
		let value = (event.clientX - rect.left) / event.srcElement.clientWidth
		value = Math.min(1, Math.max(0, value))
		value = Math.floor(value * event.srcElement.clientWidth) / event.srcElement.clientWidth
		// TODO: Fix slider dragging behaviour. It's not consistent across browsers and even their versions...
		if (event.clientX != 0)
			this.timeline.setNormalized(value)
	}

	timeUpdatedCallback(current, start, finish) {
		const norm = (current - start) / (finish - start)
		this.progress.style.width = `${norm * 100}%`
		this.time.textContent = current.toLocaleString()
	}

	playbackCallback(status) {
		if (status)
			this.play.textContent = "⏸️"
		else
			this.play.textContent = "▶️"
	}
}

class Snapshot {
	constructor(json) {
		this.json = json
	}

	getKillmails() {
		return this.json.killmails
	}

	getShipName(id) {
		return this.json.ships[id.toString()].name
	}

	getShipGroup(id) {
		return this.json.ships[id.toString()].group
	}

	getTeam(lookupId) {
		const containsLookupId = team => undefined !== team.find(id => id == lookupId)
		return this.json.teams.findIndex(containsLookupId) == 0 ? "teamA" : "teamB"
	}
}

function vec3FromXYZ({x, y, z}) {
	return new THREE.Vector3(x, y, z)
}

function averagePosition(positions) {
	const sum = positions.reduce((sum, pos) => sum.add(pos), new THREE.Vector3())
	return sum.divideScalar(positions.length)
}

function processBattle({snapshot, renderer, renderer2d, container, toolbar, skybox}) {
	const battle = new Battle({container, renderer, renderer2d})
	const wrecks = snapshot.getKillmails().map(killmail => new Wreck({killmail, snapshot}))
	wrecks.forEach(wreck => wreck.killmail.victim.position = vec3FromXYZ(wreck.killmail.victim.position))
	wrecks.forEach(wreck => battle.add(wreck))
	battle.grids.forEach(grid => window.addEventListener('resize', () => grid.onresize()))
	battle.grids.forEach(grid => grid.recenter())

	const gridSelection = document.getElementById("grid")
	battle.grids.forEach(grid => {
		const option = document.createElement("option")
		const origin = new THREE.Vector3()
		origin.copy(grid.wrecks[0].killmail.victim.position)
		origin.divideScalar(METERS_IN_AU)
		option.text = `${origin.x.toFixed(1)} AU, ${origin.y.toFixed(1)} AU, ${origin.z.toFixed(1)} AU`
		gridSelection.appendChild(option)
	})
	gridSelection.oninput = () => {
		battle.grids.forEach(g => g.disable())
		battle.grids.at(gridSelection.selectedIndex).enable()
		battle.grids.at(gridSelection.selectedIndex).draw()
	}
	gridSelection.oninput()

	skybox.then(skybox => {
		const rt = new THREE.WebGLCubeRenderTarget(skybox.image.height)
		rt.fromEquirectangularTexture(renderer, skybox)
		battle.grids.forEach(g => g.scene.background = rt)
	})

	const statusBar = new StatusBar(battle.timeline)
	container.appendChild(statusBar.domElement)

	battle.timeline.update()
}

export function init({id, container, toolbar}) {
	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 loader = new THREE.TextureLoader()
	const skybox = loader.loadAsync("https://i.imgur.com/rDGOLFC.jpg") // TODO: Don't use imgur as CDN.

	fetch(`/battles/${id}`)
		.then(response => response.json())
		.then(json => new Snapshot(json))
		.then(snapshot => processBattle({snapshot, renderer, renderer2d, container, toolbar, skybox}))
}