Add optional number input for ItemCard

src/components/ItemCard.astro

@@ -10,6 +10,7 @@ interface Props {
     image: string;
     button_type: string;
     button_name: string;
+    has_amount_input?: string;
 }
 
 const lang = await getLocales(Astro.cookies.get('language')?.value ?? await getHighestWeightedLanguage(Astro.request.headers.get('accept-language')));
@@ -17,10 +18,14 @@ const lang = await getLocales(Astro.cookies.get('language')?.value ?? await getH
 <div class="item-card" data-id={Astro.props.id}>
     <img class="item-card-image" src={Astro.props.image} />
     <div class="item-card-main-field">
+        <form method="post">
+            <input type="hidden" name="id" value={Astro.props.id} />
             <div class="item-card-name">{Astro.props.name} | {Astro.props.level}</div>
             <div class="item-card-description">{Astro.props.description} <a href={`/wiki/${Astro.props.category}/${Astro.props.id}`}>[more]</a></div>
-        <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>
+            <input type="submit" class="item-card-build" value={getName(lang, Astro.props.button_type, Astro.props.button_name)} />
             <div class="item-card-info-button">i</div>
+            {Astro.props.has_amount_input === "true" && <input type="number" name="amount" />}
+        </form>
     </div>
 </div>
 <style>

src/pages/game/buildings.astro

@@ -117,6 +117,7 @@ const buildingsByCategory = buildingsList.reduce((acc: { [key: string]: Array<DB
 	border-radius: 8px;
 	padding: 1rem;
 	z-index: 101;
+	color: white;
 }
 
 h1 {
@@ -144,9 +145,9 @@ h1 {
             if(!modalDiv) return;
             modalDiv.style.display = 'block';
 
-			const reqResources = modalSet[el.parentElement.parentElement.dataset.id]?.resources ?? [];
+			const reqResources = modalSet[el.parentElement.parentElement.parentElement.dataset.id]?.resources ?? [];
-			const reqBuildings = modalSet[el.parentElement.parentElement.dataset.id]?.buildings ?? [];
+			const reqBuildings = modalSet[el.parentElement.parentElement.parentElement.dataset.id]?.buildings ?? [];
-			const reqResearch = modalSet[el.parentElement.parentElement.dataset.id]?.research ?? [];
+			const reqResearch = modalSet[el.parentElement.parentElement.parentElement.dataset.id]?.research ?? [];
 
 			modalResources.innerHTML = reqResources.length === 0 ? "None" : reqResources.map(resource => {
 				return `${lang['resources'].find(r => r.id === resource.id).name}: ${resource.amount}`;

src/pages/game/research.astro

@@ -100,6 +100,7 @@ for(const research of researchList) {
 	border-radius: 8px;
 	padding: 1rem;
 	z-index: 101;
+	color: white;
 }
 </style>
 <script define:vars={{ modalSet, lang }}>
@@ -116,9 +117,9 @@ for(const research of researchList) {
 
 			console.log(modalSet)
 
-			const reqResources = modalSet[el.parentElement.parentElement.dataset.id]?.resources ?? [];
+			const reqResources = modalSet[el.parentElement.parentElement.parentElement.dataset.id]?.resources ?? [];
-			const reqBuildings = modalSet[el.parentElement.parentElement.dataset.id]?.buildings ?? [];
+			const reqBuildings = modalSet[el.parentElement.parentElement.parentElement.dataset.id]?.buildings ?? [];
-			const reqResearch = modalSet[el.parentElement.parentElement.dataset.id]?.research ?? [];
+			const reqResearch = modalSet[el.parentElement.parentElement.parentElement.dataset.id]?.research ?? [];
 
 			modalResources.innerHTML = reqResources.length === 0 ? "None" : reqResources.map(resource => {
 				return `${lang['resources'].find(r => r.id === resource.id).name}: ${resource.amount}`;

src/pages/game/ships.astro

@@ -6,11 +6,33 @@ import SystemManager from '../../lib/classes/managers/SystemManager';
 import { getAllShips } from '../../lib/db/ships';
 import { getObj } from '../../lib/utils/langDriver';
 
-const { lang } = Astro.locals;
+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) {
@@ -46,7 +68,8 @@ const planetId = active instanceof SystemManager ? active.data._id : active._id;
 				description={getObj(lang, "ships", ship.id).description ?? ""}
 				image={`/images/ships/${ship.id}.jpeg`}
 				button_type="general"
-				button_name="nav-build" />
+				button_name="nav-build"
+				has_amount_input="true" />
 		</>)}
 	</div>
 </LoggedIn>
@@ -84,6 +107,7 @@ const planetId = active instanceof SystemManager ? active.data._id : active._id;
 	border-radius: 8px;
 	padding: 1rem;
 	z-index: 101;
+	color: white;
 }
 </style>
 <script define:vars={{ modalSet, lang, planetId }}>
@@ -98,9 +122,9 @@ const planetId = active instanceof SystemManager ? active.data._id : active._id;
             if(!modalDiv) return;
             modalDiv.style.display = 'block';
 
-			const reqResources = modalSet[el.parentElement.parentElement.dataset.id]?.resources ?? [];
+			const reqResources = modalSet[el.parentElement.parentElement.parentElement.dataset.id]?.resources ?? [];
-			const reqBuildings = modalSet[el.parentElement.parentElement.dataset.id]?.buildings ?? [];
+			const reqBuildings = modalSet[el.parentElement.parentElement.parentElement.dataset.id]?.buildings ?? [];
-			const reqResearch = modalSet[el.parentElement.parentElement.dataset.id]?.research ?? [];
+			const reqResearch = modalSet[el.parentElement.parentElement.parentElement.dataset.id]?.research ?? [];
 
 			modalResources.innerHTML = reqResources.length === 0 ? "None" : reqResources.map(resource => {
 				return `${lang['resources'].find(r => r.id === resource.id).name}: ${resource.amount}`;