diff options
| -rw-r--r-- | derelict.js | 19 | ||||
| -rw-r--r-- | 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) @@ -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; |