From ce34a9c255d12e3e985d224a6744af62daffeb9b Mon Sep 17 00:00:00 2001
From: Aki <please@ignore.pl>
Date: Fri, 9 Apr 2021 20:37:30 +0200
Subject: Moved labels to separate elements

---
 derelict.js | 19 +++++++++++++------
 style.css   |  6 ++----
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/derelict.js b/derelict.js
index 4e735ce..0cd0455 100644
--- a/derelict.js
+++ b/derelict.js
@@ -58,24 +58,31 @@ class Wreck {
 
 	constructor({killmail, icon, grid}) {
 		const iconElement = document.importNode(icon, true)
+		const labelElement = document.createElement('div')
 		const object2d = new CSS2DObject(this.domElement)
-
-		this.killmail = killmail
 		const team = killmail.team > 1 ? "teamA" : "teamB"
-		this.domElement.classList.add('wreck', team)
-		const shipTypeId = this.killmail.victim.ship_type_id
+		const shipTypeId = killmail.victim.ship_type_id
+
 		fetch(`${ESI}/universe/types/${shipTypeId}/`, {cache: "force-cache"})
 			.then(response => response.json())
 			.then(typeId => {
-				this.domElement.dataset.label = typeId.name
+				labelElement.textContent = typeId.name
+				this.domElement.dataset.type = typeId.name
 				return fetch(`${ESI}/universe/groups/${typeId.group_id}/`, {cache: "force-cache"})
 			})
 			.then(response => response.json())
 			.then(group => this.domElement.dataset.group = group.name)
-		this.domElement.appendChild(iconElement)
+
+		labelElement.classList.add('label')
+
+		this.killmail = killmail
+
 		this.point.position.copy(killmail.victim.position)
 		this.point.add(object2d)
 
+		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)
diff --git a/style.css b/style.css
index a8afdcb..43242aa 100644
--- a/style.css
+++ b/style.css
@@ -42,14 +42,12 @@ body {
 	background: #14ea6a;
 }
 
-.wreck::after {
-	display: block;
-	content: attr(data-label);
+.label {
 	color: #eee;
 	position: absolute;
 	top: -0.2em;
 	left: calc(100% + 0.4em);
-	padding: 0.2em 0.5em;
+	padding: 0.2em 0.4em;
 	background: #000b;
 	border-radius: 0.5em;
 	border: 1px solid #444;
-- 
cgit v1.1