135 lines
2.9 KiB
Plaintext
135 lines
2.9 KiB
Plaintext
---
|
|
import LoggedIn from '../../layouts/LoggedIn.astro';
|
|
import locationManager from '../../lib/classes/managers/LocationManager';
|
|
|
|
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
|
|
};
|
|
})
|
|
};
|
|
})
|
|
---
|
|
<LoggedIn id="galaxyView" title="Galaxy view">
|
|
<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="galaxy-details">
|
|
<h2></h2>
|
|
<div class="galaxy-sector-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;
|
|
}
|
|
|
|
.galaxy-details {
|
|
width: 23%;
|
|
height: 500px;
|
|
margin-top: 50px;
|
|
margin-right: 50px;
|
|
}
|
|
|
|
.galaxy-details h2 {
|
|
text-align: center;
|
|
}
|
|
|
|
.galaxy-sector-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.galaxy-sector-list div {
|
|
text-align: center;
|
|
background-color: gray;
|
|
margin-top: 10px;
|
|
border-radius: 10px;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
}
|
|
</style>
|
|
<script>
|
|
function gvinit() {
|
|
const galaxyIcons = document.querySelectorAll('.galaxy-icon');
|
|
const galaxyDetails = document.querySelector('.galaxy-details');
|
|
const galaxySectorList = document.querySelector('.galaxy-sector-list');
|
|
|
|
if(!galaxyIcons) return;
|
|
if(!galaxyDetails) return;
|
|
if(!galaxySectorList) 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');
|
|
if(!galaxyNameField) return;
|
|
galaxyNameField.innerText = (icon.querySelector('.galaxy-name') as HTMLElement)?.innerText;
|
|
galaxySectorList.innerHTML = "";
|
|
sectors.forEach(sector => {
|
|
const sectorDiv = document.createElement('div');
|
|
sectorDiv.innerText = sector.name;
|
|
sectorDiv.setAttribute('data-id', sector.id);
|
|
galaxySectorList.appendChild(sectorDiv);
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
gvinit();
|
|
</script> |