329 lines
9.8 KiB
Plaintext
329 lines
9.8 KiB
Plaintext
---
|
|
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;
|
|
|
|
let i = 0;
|
|
const galaxies = allGalaxies.map(galaxy => {
|
|
return {
|
|
numericId: i++,
|
|
name: galaxy.name,
|
|
style: {
|
|
left: galaxy.coords.x,
|
|
top: galaxy.coords.y,
|
|
color: "white"
|
|
},
|
|
sectors: galaxy.sectors.map(sector => {
|
|
return {
|
|
id: sector._id.toString(),
|
|
name: sector.name
|
|
};
|
|
})
|
|
};
|
|
});
|
|
|
|
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 => <>
|
|
<a href="#">
|
|
<div class="galaxy-icon" style={`left: ${galaxy.style.left}px; top: ${galaxy.style.top}px; background-color: ${galaxy.style.color};`}>
|
|
<div class="galaxy-name" data-sectors={JSON.stringify(galaxy.sectors)}>{galaxy.name}</div>
|
|
</div>
|
|
</a>
|
|
</>)}
|
|
</div>
|
|
<div class="sidebar-details">
|
|
<h2></h2>
|
|
<div class="sidebar-list"></div>
|
|
</div>
|
|
</div>
|
|
</LoggedIn>
|
|
<style is:global>
|
|
.container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
color: white;
|
|
}
|
|
|
|
.galaxy-container {
|
|
width: 70%;
|
|
height: 500px;
|
|
background-color: blue;
|
|
margin-left: 50px;
|
|
margin-right: auto;
|
|
margin-top: 50px;
|
|
position: relative;
|
|
}
|
|
|
|
.galaxy-icon {
|
|
position:absolute;
|
|
width: 40px;
|
|
height: 40px;
|
|
background-color: white;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.galaxy-icon:hover {
|
|
background-color: yellow !important;
|
|
}
|
|
|
|
.galaxy-name {
|
|
position: absolute;
|
|
top: 40px;
|
|
left: -5px;
|
|
color: white;
|
|
}
|
|
|
|
.sidebar-details {
|
|
width: 23%;
|
|
height: 500px;
|
|
margin-top: 50px;
|
|
margin-right: 50px;
|
|
}
|
|
|
|
.sidebar-details h2 {
|
|
text-align: center;
|
|
}
|
|
|
|
.sidebar-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sidebar-list div {
|
|
text-align: center;
|
|
background-color: gray;
|
|
margin-top: 10px;
|
|
border-radius: 10px;
|
|
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 define:vars={{ spyReports }}>
|
|
function gvinit() {
|
|
const galaxyIcons = document.querySelectorAll('.galaxy-icon');
|
|
const sidebarDetails = document.querySelector('.sidebar-details');
|
|
const sidebarList = document.querySelector('.sidebar-list');
|
|
|
|
if(!galaxyIcons) 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 = JSON.parse(galaxy.getAttribute('data-sectors') ?? "[]");
|
|
const galaxyNameField = sidebarDetails.querySelector('h2');
|
|
if(!galaxyNameField) return;
|
|
galaxyNameField.innerText = icon.querySelector('.galaxy-name')?.innerText;
|
|
sidebarList.innerHTML = "";
|
|
sectors.forEach(sector => {
|
|
const sectorDiv = document.createElement('div');
|
|
const reportsInSector = spyReports.filter(spy => sector.id === spy.sectorId);
|
|
sectorDiv.innerText = `${sector.name} (${reportsInSector.length})`;
|
|
sectorDiv.setAttribute('data-id', sector.id);
|
|
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> |