summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorAki <please@ignore.pl>2021-04-09 20:37:30 +0200
committerAki <please@ignore.pl>2021-04-09 20:37:30 +0200
commitce34a9c255d12e3e985d224a6744af62daffeb9b (patch)
tree2b9c13b1fffbed07e0a6f8f0c9204655511084ad
parent8fa81a7134b595e3857d7719a8f45bb378d77b7e (diff)
downloadderelict-prototype-ce34a9c255d12e3e985d224a6744af62daffeb9b.zip
derelict-prototype-ce34a9c255d12e3e985d224a6744af62daffeb9b.tar.gz
derelict-prototype-ce34a9c255d12e3e985d224a6744af62daffeb9b.tar.bz2
Moved labels to separate elements
-rw-r--r--derelict.js19
-rw-r--r--style.css6
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;