AstroCol/src/pages/game/ships.astro

---
import ItemCard from '../../components/ItemCard.astro';
import LoggedIn from '../../layouts/LoggedIn.astro';
import { Planet } from '../../lib/classes/managers/PlanetManager';
import SystemManager from '../../lib/classes/managers/SystemManager';
import { getAllShips } from '../../lib/db/ships';
import { getName, getObj } from '../../lib/utils/langDriver';

const { token, lang } = Astro.locals;
const active: SystemManager | Planet = Astro.locals.active;

const ships = await getAllShips();

if(Astro.request.method === "POST") {
	const body = await Astro.request.formData();

	const id = body.get("id") as string;
	const amount = parseInt(body.get("amount") as string ?? "1");

    const request = await (await fetch(Astro.url.origin + '/api/ships/addShip', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + token
        },
        body: JSON.stringify({
            planet: active instanceof SystemManager ? active.data._id : active._id,
            ship: id,
			amount
        })
    })).json();

    console.log(request);
}

const modalSet: { [key: string]: { resources: Array<any>, research: Array<any>, buildings: Array<any> } } = {};

for(const ship of ships) {
	modalSet[ship.id] = {
		resources: ship.requirements.resources,
		research: ship.requirements.research,
		buildings: ship.requirements.buildings,
		// energy: building.energy
	};
}

const planetId = active instanceof SystemManager ? active.data._id : active._id;
---
<LoggedIn id="ships" title="Ships">
    <div id="ship-modal-background">
		<div id="ship-modal-details" data-building-id="">
			<h3>{getName(lang, 'general', 'required-resources')}</h3>
			<div class="ship-modal-text" id="ship-modal-req-resources">{getName(lang, 'general', 'none')}</div>
			<h3>{getName(lang, 'general', 'required-buildings')}</h3>
			<div class="ship-modal-text" id="ship-modal-req-buildings">{getName(lang, 'general', 'none')}</div>
			<h3>{getName(lang, 'general', 'required-research')}</h3>
			<div class="ship-modal-text" id="ship-modal-req-research">{getName(lang, 'general', 'none')}</div>
		</div>
	</div>

	<div class="ship-cards">
		{ships.map(ship => <>
			<ItemCard
				category="ships"
				id={ship.id}
				name={getObj(lang, "ships", ship.id).name}
				level={active.ships.getShipById(ship.id)?.amount.toString() ?? "0"}
				description={getObj(lang, "ships", ship.id).description ?? ""}
				image={`/images/ships/${ship.id}.jpeg`}
				button_type="general"
				button_name="nav-build"
				has_amount_input="true" />
		</>)}
	</div>
</LoggedIn>

<style>
.ship-cards {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	row-gap: 40px;
	column-gap: 2%;
	margin-top: 40px;
}

#ship-modal-background {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 100;
}

#ship-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: 101;
	color: white;
}
</style>
<script define:vars={{ modalSet, lang, planetId }}>
	const modalResources = document.getElementById("ship-modal-req-resources");
	const modalBuildings = document.getElementById("ship-modal-req-buildings");
	const modalResearch = document.getElementById("ship-modal-req-research");

	document.querySelectorAll('.item-card-info-button').forEach((el) => {
        el.addEventListener('click', () => {
            // modal
            const modalDiv = document.getElementById('ship-modal-details');
            if(!modalDiv) return;
            modalDiv.style.display = 'block';

			const langNone = lang['general'].find(g => g.id === 'none').name;

			const reqResources = modalSet[el.parentElement.parentElement.parentElement.dataset.id]?.resources ?? [];
			const reqBuildings = modalSet[el.parentElement.parentElement.parentElement.dataset.id]?.buildings ?? [];
			const reqResearch = modalSet[el.parentElement.parentElement.parentElement.dataset.id]?.research ?? [];

			modalResources.innerHTML = reqResources.length === 0 ? langNone : reqResources.map(resource => {
				return `${lang['resources'].find(r => r.id === resource.id).name}: ${resource.amount}`;
			}).join("<br />");

			modalBuildings.innerHTML = reqBuildings.length === 0 ? langNone : reqBuildings.map(building => {
				return `${lang['buildings'].find(b => b.id === building.id).name}: ${building.level}`;
			}).join("<br />");

			modalResearch.innerHTML = reqResearch.length === 0 ? langNone : reqResearch.map(research => {
				return `${lang['research'].find(r => r.id === research.id).name}: ${research.level}`;
			}).join("<br />");

            // background
            const backgroundDiv = document.getElementById('ship-modal-background');
            if(!backgroundDiv) return;
            backgroundDiv.style.display = 'block';
        });
    });

    // close modal on background click
    const bg = document.getElementById('ship-modal-background');
    
    bg?.addEventListener('click', () => {
        const modalDiv = document.getElementById('ship-modal-details');
        if(!modalDiv) return;
        modalDiv.style.display = 'none';

        const backgroundDiv = document.getElementById('ship-modal-background');
        if(!backgroundDiv) return;
        backgroundDiv.style.display = 'none';
    });

	const allButtons = document.getElementsByClassName("item-card-build");

	for(const shipButton of allButtons) {
		shipButton.addEventListener("click", async () => {
			const id = shipButton.id.split("_")[1];

			const response = await fetch('/api/ships/addShip', {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json'
				},
				body: JSON.stringify({
					planet: planetId,
					ship: id,
					amount: 1
				})
			});

			if(response.status === 200) {
				window.location.reload();
			} else {
				alert("Failed to build ship: " + JSON.stringify(await response.json()));
			}
		});
	}
</script>