Add viewing of spy reports in galaxy view

src/components/ResourceBar.astro

@@ -105,7 +105,7 @@ if(!(planet instanceof SystemManager)) {
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
     position: sticky;
     top: 0;
-    z-index: 1000;
+    z-index: 100;
     border-radius: 0px 0px 10px 10px;
     padding-top: 4px;
     padding-bottom: 4px;

src/lib/classes/managers/FleetManager.ts

@@ -212,7 +212,7 @@ export default class FleetManager {
                                 this.data.source instanceof SystemManager ? this.data.source.data.ownedBy.id : this.data.source.system.data.ownedBy.id,
                                 this.data.destination.data.ownedBy.id,
                                 new Date(),
-                                [],
+                                this.data.destination.data.ownedBy.research.research.map(research => { return { id: research.id, level: research.level } }),
                                 gatheredData
                             );
                         }
@@ -234,7 +234,7 @@ export default class FleetManager {
                         if(existing.planets.find(p => p.id.equals(planetId))) {
                             await updatePlanetSpyReport(existing._id, planetId, gatheredData);
                         } else {
-                            await addPlanetToExistingSpyReport(existing._id, gatheredData);
+                            await addPlanetToExistingSpyReport(existing._id, planetId, gatheredData);
                         }
                     }
 

src/lib/db/spyReports.ts

@@ -65,6 +65,7 @@ export const updateSystemSpyReportWithoutPlanets = async (
 
 export const addPlanetToExistingSpyReport = async (
     id: ObjectId,
+    planetId: ObjectId,
     data: {
         resources: Array<{ id: string, amount: number }>,
         buildings: Array<{ id: string, level: number }>,
@@ -77,7 +78,7 @@ export const addPlanetToExistingSpyReport = async (
     }, {
         $push: {
             planets: {
-                id: new ObjectId(),
+                id: planetId,
                 scanned: true,
                 scannedAt: new Date(),
                 resources: data.resources,

src/pages/game/galaxyView.astro

@@ -1,6 +1,10 @@
 ---
 import LoggedIn from '../../layouts/LoggedIn.astro';
 import locationManager from '../../lib/classes/managers/LocationManager';
+import User from '../../lib/classes/User';
+import { getUserSpyReports } from '../../lib/db/users';
+
+const user: User = Astro.locals.user;
 
 const allGalaxies = locationManager.galaxies;
 
@@ -21,9 +25,80 @@ const galaxies = allGalaxies.map(galaxy => {
 			};
 		})
 	};
-})
+});
+
+const spyReportsDB = await getUserSpyReports(user.id);
+
+const spyReports = spyReportsDB.map(spy => {
+	const user = locationManager.getUser(spy.victimId);
+	const system = locationManager.getSystem(spy.systemId);
+
+	return {
+		username: user?.username ?? "Unknown",
+		systemName: system?.data.name ?? "Unknown",
+		sectorId: system?.data.sector._id.toString(),
+		scannedAt: spy.scannedAt,
+		research: spy.research,
+		resources: spy.resources,
+		structures: spy.structures,
+		ships: spy.ships,
+		defense: spy.defense,
+		planets: system?.planets.map(planet => {
+			const report = spy.planets.find(p => p.id.equals(planet._id));
+
+			return {
+				id: planet._id.toString(),
+				name: planet.name,
+				scanned: spy.planets.find(p => p.id.equals(planet._id))?.scanned ?? false,
+				scannedAt: report?.scannedAt ?? "Unknown",
+				resources: report?.resources ?? [],
+				buildings: report?.buildings ?? [],
+				ships: report?.ships ?? [],
+				defense: report?.defense ?? []
+			};
+		})
+	}
+});
 ---
 <LoggedIn id="galaxyView" title="Galaxy view">
+	<div id="report-modal-background">
+		<div id="report-modal-details">
+			<h3>Spy report from <span id="report-modal-date"></span> at <span id="report-modal-name"></span></h3>
+			<div id="report-modal-content">
+				<div class="report-modal-row">
+					<div class="report-modal-card">
+						<h3>Resources:</h3>
+						<div id="report-modal-resources"></div>
+					</div>
+					<div class="report-modal-card">
+						<h3 id="report-modal-structure-title">Structures:</h3>
+						<div id="report-modal-structures"></div>
+					</div>
+				</div>
+				<div class="report-modal-row">
+					<div class="report-modal-card">
+						
+						<h3>Ships:</h3>
+						<div id="report-modal-ships"></div>
+					</div>
+					<div class="report-modal-card">						
+						<h3>Defense:</h3>
+						<div id="report-modal-defense"></div>
+					</div>
+				</div>
+				<div class="report-modal-row" id="report-modal-row-systeminfo">
+					<div class="report-modal-card">
+						<h3>Research:</h3>
+						<div id="report-modal-research"></div>						
+					</div>
+					<div class="report-modal-card">
+						<h3>Planets:</h3>
+						<div id="report-modal-planets"></div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
 	<div class="container">
 		<div class="galaxy-container">
 			{galaxies.map(galaxy => <>
@@ -34,9 +109,9 @@ const galaxies = allGalaxies.map(galaxy => {
 				</a>
 			</>)}
 		</div>
-		<div class="galaxy-details">
+		<div class="sidebar-details">
 			<h2></h2>
-			<div class="galaxy-sector-list"></div>
+			<div class="sidebar-list"></div>
 		</div>
 	</div>
 </LoggedIn>
@@ -76,23 +151,23 @@ const galaxies = allGalaxies.map(galaxy => {
 	color: white;
 }
 
-.galaxy-details {
+.sidebar-details {
 	width: 23%;
 	height: 500px;
 	margin-top: 50px;
 	margin-right: 50px;
 }
 
-.galaxy-details h2 {
+.sidebar-details h2 {
 	text-align: center;
 }
 
-.galaxy-sector-list {
+.sidebar-list {
 	display: flex;
 	flex-direction: column;
 }
 
-.galaxy-sector-list div {
+.sidebar-list div {
 	text-align: center;
 	background-color: gray;
 	margin-top: 10px;
@@ -100,36 +175,155 @@ const galaxies = allGalaxies.map(galaxy => {
 	padding-top: 10px;
 	padding-bottom: 10px;
 }
+
+.sidebar-list .sidebar-planet {
+	margin-left: 32px;
+}
+
+.sidebar-list div:hover {
+	background-color: #888888;
+}
+
+
+#report-modal-background {
+	display: none;
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: rgba(0, 0, 0, 0.5);
+	z-index: 100;
+}
+
+#report-modal-details {
+	display: none;
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	width: 80%;
+	max-width: 800px;
+	background: rgba(0, 0, 0, 0.9);
+	border-radius: 8px;
+	padding: 1rem;
+	z-index: 10000;
+	color: white;
+}
+
+.report-modal-row {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-evenly;
+}
+
+.report-modal-card {
+	width: 45%;
+}
 </style>
-<script>
+<script define:vars={{ spyReports }}>
 	function gvinit() {
 		const galaxyIcons = document.querySelectorAll('.galaxy-icon');
-		const galaxyDetails = document.querySelector('.galaxy-details');
+		const sidebarDetails = document.querySelector('.sidebar-details');
-		const galaxySectorList = document.querySelector('.galaxy-sector-list');
+		const sidebarList = document.querySelector('.sidebar-list');
 
 		if(!galaxyIcons) return;
-		if(!galaxyDetails) return;
+		if(!sidebarDetails) return;
-		if(!galaxySectorList) return;
+		if(!sidebarList) return;
 
 		galaxyIcons.forEach(icon => {
 			icon.addEventListener('click', (e) => {
 				const galaxy = icon.querySelector('.galaxy-name');
 				if(!galaxy) return;
 
-				const sectors: Array<{ id: string, name: string }> = JSON.parse(galaxy.getAttribute('data-sectors') ?? "[]");
+				const sectors = JSON.parse(galaxy.getAttribute('data-sectors') ?? "[]");
-				const galaxyNameField = galaxyDetails.querySelector('h2');
+				const galaxyNameField = sidebarDetails.querySelector('h2');
 				if(!galaxyNameField) return;
-				galaxyNameField.innerText = (icon.querySelector('.galaxy-name') as HTMLElement)?.innerText;
+				galaxyNameField.innerText = icon.querySelector('.galaxy-name')?.innerText;
-				galaxySectorList.innerHTML = "";
+				sidebarList.innerHTML = "";
 				sectors.forEach(sector => {
 					const sectorDiv = document.createElement('div');
-					sectorDiv.innerText = sector.name;
+					const reportsInSector = spyReports.filter(spy => sector.id === spy.sectorId);
+					sectorDiv.innerText = `${sector.name} (${reportsInSector.length})`;
 					sectorDiv.setAttribute('data-id', sector.id);
-					galaxySectorList.appendChild(sectorDiv);
+					sectorDiv.addEventListener('click', (e) => {
+						galaxyNameField.innerText = `${sector.name} (${reportsInSector.length})`;
+						sidebarList.innerHTML = "";
+						reportsInSector.forEach(report => {
+							const reportDiv = document.createElement('div');
+							reportDiv.innerText = `${report.username} - ${report.scannedAt}`;
+							sidebarList.appendChild(reportDiv);
+
+							report.planets.forEach(planet => {
+								const planetDiv = document.createElement('div');
+								planetDiv.innerText = `${planet.name} - ${planet.scanned ? "Scanned" : "Not scanned"}`;
+								planetDiv.classList.add('sidebar-planet');
+
+								planetDiv.addEventListener('click', () => {
+									// modal
+									const modalDiv = document.getElementById('report-modal-details');
+									if(!modalDiv) return;
+									modalDiv.style.display = 'block';
+
+									console.log(planet)
+
+									document.getElementById('report-modal-date').innerHTML = planet.scannedAt;
+									document.getElementById('report-modal-name').innerHTML = planet.name;
+									document.getElementById('report-modal-resources').innerHTML = planet.resources.map(res => `${res.id}: ${res.amount}`).join('<br>');
+									document.getElementById('report-modal-structure-title').innerHTML = "Buildings:";
+									document.getElementById('report-modal-structures').innerHTML = planet.buildings.map(str => `${str.id}: ${str.level}`).join('<br>');
+									document.getElementById('report-modal-ships').innerHTML = planet.ships.map(ship => `${ship.id}: ${ship.amount}`).join('<br>');
+									document.getElementById('report-modal-defense').innerHTML = planet.defense.map(def => `${def.id}: ${def.amount}`).join('<br>');
+									document.getElementById('report-modal-row-systeminfo').style.display = 'none';
+
+									// background
+									const backgroundDiv = document.getElementById('report-modal-background');
+									if(!backgroundDiv) return;
+									backgroundDiv.style.display = 'block';
+								});
+
+								sidebarList.appendChild(planetDiv);
+							});
+
+							reportDiv.addEventListener('click', () => {
+								// modal
+								const modalDiv = document.getElementById('report-modal-details');
+								if(!modalDiv) return;
+								modalDiv.style.display = 'block';
+
+								document.getElementById('report-modal-date').innerHTML = report.scannedAt;
+								document.getElementById('report-modal-name').innerHTML = report.systemName;
+								document.getElementById('report-modal-research').innerHTML = report.research.map(res => `${res.id}: ${res.level}`).join('<br>');
+								document.getElementById('report-modal-resources').innerHTML = report.resources.map(res => `${res.id}: ${res.amount}`).join('<br>');
+								document.getElementById('report-modal-structure-title').innerHTML = "Structures:";
+								document.getElementById('report-modal-structures').innerHTML = report.structures.map(str => `${str.id}: ${str.level}`).join('<br>');
+								document.getElementById('report-modal-ships').innerHTML = report.ships.map(ship => `${ship.id}: ${ship.amount}`).join('<br>');
+								document.getElementById('report-modal-defense').innerHTML = report.defense.map(def => `${def.id}: ${def.amount}`).join('<br>');
+								document.getElementById('report-modal-planets').innerHTML = report.planets.map(planet => `${planet.name} - ${planet.scanned ? "Scanned" : "Not scanned"}`).join('<br>');
+								document.getElementById('report-modal-row-systeminfo').style.display = 'flex';
+
+								// background
+								const backgroundDiv = document.getElementById('report-modal-background');
+								if(!backgroundDiv) return;
+								backgroundDiv.style.display = 'block';
+							});
+						});
+					});
+					sidebarList.appendChild(sectorDiv);
 				});
 			});
 		});
 	}
 
 	gvinit();	
+
+    // close modal on background click
+    const bg = document.getElementById('report-modal-background');
+    
+    bg?.addEventListener('click', () => {
+        const modalDiv = document.getElementById('report-modal-details');
+        if(!modalDiv) return;
+        modalDiv.style.display = 'none';
+    	bg.style.display = 'none';
+    });
 </script>