finish formatting bodies

This commit is contained in:
punkfairie 2023-05-08 19:13:30 -07:00
parent 2870645169
commit d70c4143f8
4 changed files with 58 additions and 12 deletions

View file

@ -54,31 +54,61 @@
<!-- low-value scans -->
<div class="container-fluid">
<div v-for="body in currentSystemBodies" :key="body.BodyID" class="row ml-1 mr-1">
<div v-for="body in currentLocationBodies" :key="body.BodyID" class="row ml-1 mr-1">
<div class="col-1 system"><!-- indent --></div>
<div class="col-2 system charted text-left">
<i :class="{
'flaticon-jupiter-3': body.PlanetClass,
'flaticon-star': body.StarType,
'flaticon-asteroid-4': body.BodyName.includes('Belt')
'flaticon-jupiter-3': body.isPlanet(),
'flaticon-star': body.isStar(),
'flaticon-asteroid-4': body.isAsteroid()
}"></i>
{{ body.BodyName.replace(body.StarSystem, '') }}
{{ body.simpleName() }}
</div>
<div class="col pr-0 mr-0 system charted">
<i :class="{
'flaticon-star': body.StarType,
'flaticon-asteroid-4': body.BodyName.includes('Belt')
'flaticon-star': body.isStar(),
'flaticon-asteroid-4': body.isAsteroid(),
'flaticon-ingot': body.PlanetClass?.toLowerCase().includes('metal'),
'flaticon-snowflake': body.PlanetClass?.toLowerCase().includes('icy'),
'flaticon-earth': body.PlanetClass?.toLowerCase().includes('earth'),
'flaticon-jupiter-1': body.PlanetClass?.toLowerCase().includes('gas giant'),
'flaticon-asteroid-3': body.PlanetClass?.toLowerCase().includes('rock'),
'flaticon-water-drops': body.PlanetClass?.toLowerCase().includes('water') || body.PlanetClass?.toLowerCase().includes('ammonia'),
}"></i>
<!-- rings -->
<template v-if="body.Rings">
)
<template v-for="(ring, index) in body.Rings" :key="index">
<i :class="{
'flaticon-gold-bars': ring.RingClass === 'eRingClass_MetalRich',
'flaticon-ingot': ring.RingClass === 'eRingClass_Metalic' || ring.RingClass === 'eRingClass_Metallic',
'flaticon-snowflake': ring.RingClass === 'eRingClass_Icy',
'flaticon-asteroid-3': ring.RingClass === 'eRingClass_Rocky',
}"></i> )
</template>
</template>
{{ body.PlanetClass || body.StarType || '' }}
</div>
<div class="col-auto pl-2 ml-0 system charted">
{{ Intl.NumberFormat().format(Math.round(body.DistanceFromArrivalLS)) }}
{{ body.distance() }}
</div>
<div class="col-auto system charted"><!-- icons --></div>
<div class="col-1 system charted">
<i :class="{
'flaticon-cooling-tower': true,
'opacity-0': !(body.isPlanet() && body.TerraformState),
}"></i>
<i :class="{
'flaticon-flag-outline-on-a-pole-with-stars-around': true,
'opacity-0': !(body.isPlanet() && !body.WasMapped),
}"></i>
</div>
<div class="col-2 system charted text-right"><!-- mapped value --></div>
</div>

View file

@ -14,6 +14,10 @@ body {
text-transform: uppercase;
}
.opacity-0 {
opacity: 0;
}
.system {
margin-top: 1px;
margin-bottom: 1px;

View file

@ -5,7 +5,19 @@ export class Body {
return this.BodyName.includes('Belt')
}
isPlanet() {
return !!this.PlanetClass
}
isStar() {
return !!this.StarType
}
simpleName() {
return this.BodyName.replace(this.StarSystem, '')
}
distance() {
return Intl.NumberFormat().format(Math.round(this.DistanceFromArrivalLS))
}
}

View file

@ -54,15 +54,15 @@ createApp({
journal.watchJournal()
const currentLocation = ref('Unknown')
const currentSystemBodies = ref([])
const currentLocationBodies = ref([])
journal.on('FSDJump', () => currentLocation.value = journal.currentLocation)
journal.on('SCANNED_BODIES_FOUND', () => currentSystemBodies.value = journal.currentLocation.bodies)
journal.on('SCANNED_BODIES_FOUND', () => currentLocationBodies.value = journal.currentLocation.bodies)
return {
currentLocation,
currentSystemBodies,
currentLocationBodies,
}
}
}).mount('#app')