Move building form to ItemCard component

src/components/ItemCard.astro

@@ -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>

src/pages/game/buildings.astro

@@ -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>

src/pages/game/research.astro

@@ -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>