Replaced svg wreck icon with SDE brackets

3 files changed, 66 insertions, 27 deletions

diff --git a/derelict.js b/derelict.js
index 6864564..1a66f91 100644
--- a/derelict.js
+++ b/derelict.js
@@ -9,7 +9,7 @@ const EXPIRY = 1000 * 60 * 5
 
 class SkirmishGrid {
 	scene = new THREE.Scene()
-	helper = new THREE.GridHelper(50, 50)
+	helper = new THREE.GridHelper(50, 50, 0x303030, 0x222222)
 	camera
 	controls
 	renderer
@@ -71,8 +71,7 @@ class Wreck {
 	point = new THREE.Object3D()
 	killmail
 
-	constructor({killmail, icon, grid}) {
-		const iconElement = document.importNode(icon, true)
+	constructor({killmail, grid}) {
 		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
@@ -98,7 +97,6 @@ class Wreck {
 
 		this.domElement.classList.add('wreck', team)
 		this.domElement.appendChild(labelElement)
-		this.domElement.appendChild(iconElement)
 		this.domElement.onclick = () => window.open(`https://zkillboard.com/kill/${this.killmail.killmail_id}/`)
 		this.domElement.oncontextmenu = () => {
 			grid.controls.target.copy(this.point.position)
@@ -155,7 +153,7 @@ function averagePosition(positions) {
 	return sum.divideScalar(positions.length)
 }
 
-function processKillmails(obj, killmails, icon) {
+function processKillmails(obj, killmails) {
 	const dates = killmails.map(km => Date.parse(km.killmail_time))
 	const start = Math.min(...dates)
 	const end = Math.max(...dates)
@@ -176,7 +174,7 @@ function processKillmails(obj, killmails, icon) {
 		const grid = new SkirmishGrid(obj)
 		cluster.forEach(killmail => {
 			killmail.victim.position.sub(center).divideScalar(SCALE)
-			const wreck = new Wreck({killmail, icon, grid})
+			const wreck = new Wreck({killmail, grid})
 			grid.add(wreck.point)
 			elements.push(wreck)
 		})
@@ -222,8 +220,6 @@ export function init({id, container, toolbar}) {
 	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()
-
 	fetch(`/battles/${id}`)
 		.then(response => response.json())
 		.then(killmails => {
@@ -233,7 +229,5 @@ export function init({id, container, toolbar}) {
 				.then(data => { data.teams = killmails.teams; return data })
 			return Promise.all(killmails.killmails.map(retrieve))
 		})
-		.then(killmails => {
-			icon.then(icon => processKillmails({skybox, renderer, renderer2d, container}, killmails, icon))
-		})
+		.then(killmails => processKillmails({skybox, renderer, renderer2d, container}, killmails))
 }
diff --git a/style.css b/style.css
index 671aaf4..a445f22 100644
--- a/style.css
+++ b/style.css
@@ -3,25 +3,75 @@ body {
 }
 
 .wreck {
-	width: 18px;
+	width: 16px;
+	height: 16px;
 	cursor: pointer;
+	background-image: url('/media/brackets/wreck.png');
+	background-position: 50% 50%;
+	background-repeat: no-repeat;
 	padding: 2px;
-	fill: #eee;
 }
 
+.wreck[data-group="Assault Frigate"] { background-image: url('/media/brackets/frigate_16.png'); }
+.wreck[data-group="Battleship"] { background-image: url('/media/brackets/battleship_16.png'); }
+.wreck[data-group="Blockade Runner"] { background-image: url('/media/brackets/industrial_16.png'); }
+.wreck[data-group="Capital Industrial Ship"] { background-image: url('/media/brackets/freighter_16.png'); }
+.wreck[data-group="Capsule"] { background-image: url('/media/brackets/frozenCorpse.png'); }
+.wreck[data-group="Carrier"] { background-image: url('/media/brackets/carrier_16.png'); }
+.wreck[data-group="Combat Battlecruiser"] { background-image: url('/media/brackets/battleCruiser_16.png'); }
+.wreck[data-group="Combat Recon Ship"] { background-image: url('/media/brackets/cruiser_16.png'); }
+.wreck[data-group="Command Destroyer"] { background-image: url('/media/brackets/destroyer_16.png'); }
+.wreck[data-group="Command Ship"] { background-image: url('/media/brackets/battleCruiser_16.png'); }
+.wreck[data-group="Corvette"] { background-image: url('/media/brackets/rookie_16.png'); }
+.wreck[data-group="Covert Ops"] { background-image: url('/media/brackets/frigate_16.png'); }
+.wreck[data-group="Cruiser"] { background-image: url('/media/brackets/cruiser_16.png'); }
+.wreck[data-group="Deep Space Transport"] { background-image: url('/media/brackets/industrial_16.png'); }
+.wreck[data-group="Destroyer"] { background-image: url('/media/brackets/destroyer_16.png'); }
+.wreck[data-group="Dreadnought"] { background-image: url('/media/brackets/dreadnought_16.png'); }
+.wreck[data-group="Electronic Attack Ship"] { background-image: url('/media/brackets/frigate_16.png'); }
+.wreck[data-group="Exhumer"] { background-image: url('/media/brackets/miningBarge_16.png'); }
+.wreck[data-group="Expedition Frigate"] { background-image: url('/media/brackets/miningFrigate_16.png'); }
+.wreck[data-group="Force Auxiliary"] { background-image: url('/media/brackets/forceAuxiliary_16.png'); }
+.wreck[data-group="Force Recon Ship"] { background-image: url('/media/brackets/cruiser_16.png'); }
+.wreck[data-group="Freighter"] { background-image: url('/media/brackets/freighter_16.png'); }
+.wreck[data-group="Frigate"] { background-image: url('/media/brackets/frigate_16.png'); }
+.wreck[data-group="Frigate"][data-type="Venture"] { background-image: url('/media/brackets/miningFrigate_16.png'); }
+.wreck[data-group="Heavy Assault Cruiser"] { background-image: url('/media/brackets/cruiser_16.png'); }
+.wreck[data-group="Heavy Fighter"] { background-image: url('/media/brackets/fighterSquadH_16.png'); }
+.wreck[data-group="Heavy Interdiction Cruiser"] { background-image: url('/media/brackets/cruiser_16.png'); }
+.wreck[data-group="Industrial"] { background-image: url('/media/brackets/industrial_16.png'); }
+.wreck[data-group="Industrial Command Ship"] { background-image: url('/media/brackets/industrialCommand_16.png'); }
+.wreck[data-group="Interceptor"] { background-image: url('/media/brackets/frigate_16.png'); }
+.wreck[data-group="Interdictor"] { background-image: url('/media/brackets/destroyer_16.png'); }
+.wreck[data-group="Jump Freighter"] { background-image: url('/media/brackets/freighter_16.png'); }
+.wreck[data-group="Light Fighter"] { background-image: url('/media/brackets/fighterSquad_16.png'); }
+.wreck[data-group="Logistics"] { background-image: url('/media/brackets/cruiser_16.png'); }
+.wreck[data-group="Logistics Frigate"] { background-image: url('/media/brackets/frigate_16.png'); }
+.wreck[data-group="Mining Barge"] { background-image: url('/media/brackets/miningBarge_16.png'); }
+.wreck[data-group="Shuttle"] { background-image: url('/media/brackets/shuttle_16.png'); }
+.wreck[data-group="Strategic Cruiser"] { background-image: url('/media/brackets/cruiser_16.png'); }
+.wreck[data-group="Supercarrier"] { background-image: url('/media/brackets/supercarrier_16.png'); }
+.wreck[data-group="Support Fighter"] { background-image: url('/media/brackets/fighterSquadM_16.png'); }
+.wreck[data-group="Tactical Destroyer"] { background-image: url('/media/brackets/destroyer_16.png'); }
+.wreck[data-group="Titan"] { background-image: url('/media/brackets/titan_16.png'); }
+.wreck[data-type="Mobile Cynosural Inhibitor"] { background-image: url('/media/brackets/mobileCynosuralInhibitor.png'); }
+.wreck[data-type="Mobile Depot"] { background-image: url('/media/brackets/mobileStorage.png'); }
+.wreck[data-type="Mobile Tractor Unit"] { background-image: url('/media/brackets/mobileTractorUnit.png'); }
+
 .label {
-	position: absolute;
-	top: -0.2em;
-	left: calc(100% + 0.4em);
-	padding: 0.2em 0.4em;
+	color: #eee;
 	background: #000b;
-	border-radius: 0.5em;
-	border: 1px solid #444;
-	pointer-events: none;
-	width: max-content;
+	border: 1px solid #333;
 	font-family: sans-serif;
 	font-size: 12px;
-	color: #eee;
+	position: absolute;
+	top: 50%;
+	left: calc(100% + 0.2em);
+	padding: 0.2em 0.4em;
+	border-radius: 0.6em;
+	width: max-content;
+	pointer-events: none;
+	transform: translateY(-50%);
 }
 
 .future {
diff --git a/wreck.svg b/wreck.svg
deleted file mode 100644
index 9b613c5..0000000
--- a/wreck.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 6 3.2">
-	<path id="top" d="M 0,0 v 0.5 h 6 v -0.5 z" />
-	<path id="bottom" d="M 0,1 h 6 l -3,2.2 z" />
-</svg>