From 3b2db9257e9f3f41c26003d712268545b48ae8a8 Mon Sep 17 00:00:00 2001 From: Aki Date: Sat, 15 May 2021 14:04:59 +0200 Subject: Replaced svg wreck icon with SDE brackets --- derelict.js | 16 +++++--------- style.css | 72 +++++++++++++++++++++++++++++++++++++++++++++++++++---------- wreck.svg | 5 ----- 3 files changed, 66 insertions(+), 27 deletions(-) delete mode 100644 wreck.svg 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 @@ - - - - - -- cgit v1.1