Add viewing of spy reports in galaxy view
This commit is contained in:
parent
208b73ffc1
commit
b08bb37029
GPG Key ID:
E44490C2025906C1
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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 galaxySectorList = document.querySelector('.galaxy-sector-list');
|
||||
const sidebarDetails = document.querySelector('.sidebar-details');
|
||||
const sidebarList = document.querySelector('.sidebar-list');
|
||||
|
||||
if(!galaxyIcons) return;
|
||||
if(!galaxyDetails) return;
|
||||
if(!galaxySectorList) return;
|
||||
if(!sidebarDetails) 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 galaxyNameField = galaxyDetails.querySelector('h2');
|
||||
const sectors = JSON.parse(galaxy.getAttribute('data-sectors') ?? "[]");
|
||||
const galaxyNameField = sidebarDetails.querySelector('h2');
|
||||
if(!galaxyNameField) return;
|
||||
galaxyNameField.innerText = (icon.querySelector('.galaxy-name') as HTMLElement)?.innerText;
|
||||
galaxySectorList.innerHTML = "";
|
||||
galaxyNameField.innerText = icon.querySelector('.galaxy-name')?.innerText;
|
||||
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();
|
||||
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>
|
||||
Loading…
Reference in New Issue