Improve looks of fleet summary
This commit is contained in:
parent
8271bdcee6
commit
1a522440b9
|
@ -130,6 +130,20 @@ class LocationManager {
|
||||||
return foundSystem
|
return foundSystem
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getSystemsOwnedBy(id: ObjectId) {
|
||||||
|
const systems: System[] = [];
|
||||||
|
|
||||||
|
for(const galaxy of this.galaxies) {
|
||||||
|
for(const sector of galaxy.sectors) {
|
||||||
|
for(const system of sector.systems) {
|
||||||
|
if(system.ownedBy.id.equals(id)) systems.push(system);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return systems;
|
||||||
|
}
|
||||||
|
|
||||||
getPlanet(_id: ObjectId) {
|
getPlanet(_id: ObjectId) {
|
||||||
let foundPlanet: Planet | undefined;
|
let foundPlanet: Planet | undefined;
|
||||||
|
|
||||||
|
|
|
@ -22,6 +22,28 @@ const ships = await getAllShips();
|
||||||
|
|
||||||
const fleet = await getAllFleetByUser(user.id);
|
const fleet = await getAllFleetByUser(user.id);
|
||||||
|
|
||||||
|
const userSystems = locationManager.getSystemsOwnedBy(user.id);
|
||||||
|
|
||||||
|
let own = 0;
|
||||||
|
let friendly = 0;
|
||||||
|
let enemy = 0;
|
||||||
|
|
||||||
|
for(const system of userSystems) {
|
||||||
|
for(const planet of system.planets.planets) {
|
||||||
|
for(const f of fleet) {
|
||||||
|
if(f.source.equals(planet._id)) own++;
|
||||||
|
else if(f.destination.equals(planet._id)) {
|
||||||
|
if(f.mission === 'attack') enemy++;
|
||||||
|
else {
|
||||||
|
const source = locationManager.getPlanet(f.source)?.manager.owner.id;
|
||||||
|
const destination = locationManager.getPlanet(f.destination)?.manager.owner.id;
|
||||||
|
if(!source?.equals(destination)) friendly++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const lang = await getLocales(await getHighestWeightedLanguage(Astro.request.headers.get('accept-language')));
|
const lang = await getLocales(await getHighestWeightedLanguage(Astro.request.headers.get('accept-language')));
|
||||||
---
|
---
|
||||||
|
|
||||||
|
@ -29,15 +51,25 @@ const lang = await getLocales(await getHighestWeightedLanguage(Astro.request.hea
|
||||||
<NavBar loggedIn="true" active="fleet" />
|
<NavBar loggedIn="true" active="fleet" />
|
||||||
<ResourceBar />
|
<ResourceBar />
|
||||||
|
|
||||||
{fleet.map(f => <>
|
<label for="fleet-toggle">
|
||||||
<div class="ship-cards">
|
<input type="checkbox" id="fleet-toggle">
|
||||||
{locationManager.getPlanet(f.source)?.name ?? "?"} => {locationManager.getPlanet(f.destination)?.name ?? "?"} <br />
|
<div class="fleet-status">
|
||||||
Containing: {f.ships.map(s => {
|
<h2>Fleet status ({fleet.length} total | {own} own | {friendly} friendly | {enemy} enemy)</h2>
|
||||||
const ship = ships.find(ship => ship.id === s.id);
|
<ul>
|
||||||
return `${getName(lang, 'ships', s.id)} x${s.amount}`;
|
{fleet.map(f => <li>
|
||||||
}).join(', ')} <br />
|
<div class="ship-cards">
|
||||||
|
{locationManager.getPlanet(f.source)?.name ?? "?"} => {locationManager.getPlanet(f.destination)?.name ?? "?"} | {f.mission}<br />
|
||||||
|
Containing: {f.ships.map(s => {
|
||||||
|
const ship = ships.find(ship => ship.id === s.id);
|
||||||
|
return `${getName(lang, 'ships', s.id)} x${s.amount}`;
|
||||||
|
}).join(', ')} <br />
|
||||||
|
</div>
|
||||||
|
</li>)}
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</>)}
|
</label>
|
||||||
|
|
||||||
|
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
@ -151,4 +183,43 @@ const lang = await getLocales(await getHighestWeightedLanguage(Astro.request.hea
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
z-index: 101;
|
z-index: 101;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.fleet-status {
|
||||||
|
margin-top: 40px;
|
||||||
|
background-color: gray;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fleet-status ul {
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
opacity: 0;
|
||||||
|
max-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
transition-property: max-height;
|
||||||
|
transition-duration: 0.5s;
|
||||||
|
transition-timing-function: ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=checkbox] {
|
||||||
|
position: absolute;
|
||||||
|
top: -9999px;
|
||||||
|
left: -9999px;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
-webkit-appearance: push-button;
|
||||||
|
-moz-appearance: button;
|
||||||
|
margin: 60px 0 10px 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=checkbox]:checked ~ .fleet-status ul {
|
||||||
|
opacity: 1;
|
||||||
|
height: auto;
|
||||||
|
max-height: 1000px;
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
Reference in New Issue