Improve looks of fleet summary

src/lib/classes/managers/LocationManager.ts

@@ -130,6 +130,20 @@ class LocationManager {
         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) {
         let foundPlanet: Planet | undefined;
 

src/pages/game/fleet.astro

@@ -22,6 +22,28 @@ const ships = await getAllShips();
 
 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')));
 ---
 
@@ -29,15 +51,25 @@ const lang = await getLocales(await getHighestWeightedLanguage(Astro.request.hea
 	<NavBar loggedIn="true" active="fleet" />
 	<ResourceBar />
 
-    {fleet.map(f => <>
-		<div class="ship-cards">
-			{locationManager.getPlanet(f.source)?.name ?? "?"} =&gt; {locationManager.getPlanet(f.destination)?.name ?? "?"} <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 />
+	<label for="fleet-toggle">
+		<input type="checkbox" id="fleet-toggle">
+		<div class="fleet-status">
+			<h2>Fleet status ({fleet.length} total | {own} own | {friendly} friendly | {enemy} enemy)</h2>
+			<ul>
+				{fleet.map(f => <li>
+					<div class="ship-cards">
+						{locationManager.getPlanet(f.source)?.name ?? "?"} =&gt; {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>
-	</>)}
+	</label>
+
+    
 </Layout>
 
 <style>
@@ -152,3 +184,42 @@ const lang = await getLocales(await getHighestWeightedLanguage(Astro.request.hea
 		padding: 1rem;
 		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>