Move building form to ItemCard component

This commit is contained in:
Aelita4 2024-10-09 11:48:23 +02:00
parent 4735443e2e
commit c463476a3f
Signed by: Aelita4
GPG Key ID: E44490C2025906C1
3 changed files with 37 additions and 53 deletions

View File

@ -12,15 +12,13 @@ interface Props {
}
const lang = await getLocales(Astro.cookies.get('language')?.value ?? await getHighestWeightedLanguage(Astro.request.headers.get('accept-language')));
---
<div class="item-card" data-id={Astro.props.id}>
<img class="item-card-image" src={Astro.props.image} />
<div class="item-card-main-field">
<div class="item-card-name">{Astro.props.name} | {Astro.props.level}</div>
<div class="item-card-description">{Astro.props.description}</div>
<a id={`button_${Astro.props.id}`} href="#" class="item-card-build">{getName(lang, Astro.props.button_type, Astro.props.button_name)}</a>
<form method="post"><input type="hidden" name="id" value={Astro.props.id} /><input type="submit" class="item-card-build" value={getName(lang, Astro.props.button_type, Astro.props.button_name)} /></form>
<div class="item-card-info-button">i</div>
</div>
</div>

View File

@ -29,6 +29,24 @@ if(planetId === "") return "No planet selected";
const planet = locationManager.getPlanet(new ObjectId(planetId));
if(!planet) return "Planet not found";
if(Astro.request.method === "POST") {
const selectedBuildingId = (await Astro.request.formData()).get('id') as string | null;
const request = await (await fetch(Astro.url.origin + '/api/build/createBuilding', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + loggedToken
},
body: JSON.stringify({
planet: planetId,
building: selectedBuildingId
})
})).json();
console.log(request);
}
const modalSet: { [key: string]: { resources: Array<any>, research: Array<any>, buildings: Array<any>, energy: number } } = {};
for(const building of buildingsList) {
@ -246,29 +264,4 @@ const buildingsByCategory = buildingsList.reduce((acc: { [key: string]: Array<DB
if(!backgroundDiv) return;
backgroundDiv.style.display = 'none';
});
const allButtons = document.getElementsByClassName("item-card-build");
for(const buildingButton of allButtons) {
buildingButton.addEventListener("click", async () => {
const id = buildingButton.id.split("_")[1];
const response = await fetch('/api/build/createBuilding', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
building: id,
planet: planetId
})
});
if(response.status === 200) {
window.location.reload();
} else {
alert("Failed to build building: " + JSON.stringify(await response.json()));
}
});
}
</script>

View File

@ -19,6 +19,24 @@ if(checkUser === null || checkUser.username !== username) return Astro.redirect(
const planetId = Astro.cookies.get('planetid')?.value ?? "";
if(planetId === "") return Astro.redirect('/logout');
if(Astro.request.method === "POST") {
const selectedResearchId = (await Astro.request.formData()).get('id') as string | null;
const request = await (await fetch(Astro.url.origin + '/api/research/performResearch', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + loggedToken
},
body: JSON.stringify({
research: selectedResearchId,
planetId
})
})).json();
console.log(request);
}
const locale = Astro.cookies.get('language')?.value ?? await getHighestWeightedLanguage(Astro.request.headers.get('accept-language'));
const lang = await getLocales(locale);
@ -226,29 +244,4 @@ for(const research of researchList) {
if(!backgroundDiv) return;
backgroundDiv.style.display = 'none';
});
const allButtons = document.getElementsByClassName("item-card-build");
for(const researchButton of allButtons) {
researchButton.addEventListener("click", async () => {
const id = researchButton.id.split("_")[1];
const response = await fetch('/api/research/performResearch', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
research: id,
planetId
})
});
if(response.status === 200) {
window.location.reload();
} else {
alert("Failed to build building: " + JSON.stringify(await response.json()));
}
});
}
</script>