Improve looks of buildings menu

src/components/BuildingCard.astro

@@ -13,8 +13,8 @@ const lang = await getLocales(await getHighestWeightedLanguage(Astro.request.hea
 ---
 
 <div class="building-card" data-id={Astro.props.id}>
-    <div><img src={Astro.props.image} /></div>
+    <img class="building-card-image" src={Astro.props.image} />
-    <div>
+    <div class="building-card-main-field">
         <div class="building-card-name">{Astro.props.name}</div>
         <div class="building-card-description">{Astro.props.description}</div>
         <a id={`build_${Astro.props.id}`} href="#" class="building-card-build">{getName(lang, "general", "nav-build")}</a>
@@ -39,6 +39,23 @@ const lang = await getLocales(await getHighestWeightedLanguage(Astro.request.hea
     height: auto;
 } 
 
+.building-card-image {
+    width: 150px;
+    height: 150px;
+    margin: 4px;
+    border-radius: 8px;
+    object-fit: cover;
+}
+
+.building-card-main-field {
+    background-color: #ccc;
+    width: 100%;
+    margin: 4px;
+    border-radius: 8px;
+    padding-left: 8px;
+    padding-right: 100px;
+}
+
 .building-card-name {
     font-size: 48px;
 }

src/pages/game/buildings.astro

@@ -23,6 +23,15 @@ const lang = await getLocales(locale);
 
 const modalSet: { [key: string]: { resources: Array<any>, research: Array<any>, buildings: Array<any>, energy: number } } = {};
 
+for(const building of buildingsList) {
+	modalSet[building.id] = {
+		resources: building.requirements.resources,
+		research: building.requirements.research,
+		buildings: building.requirements.buildings,
+		energy: building.energy
+	};
+}
+
 const buildingsByCategory = buildingsList.reduce((acc: { [key: string]: DBBuilding[] }, building) => {
 	if(!acc[building.category]) acc[building.category] = [];
 	acc[building.category].push(building);
@@ -53,7 +62,7 @@ const buildingsByCategory = buildingsList.reduce((acc: { [key: string]: DBBuildi
 					id={building.id}
 					name={getObj(lang, "buildings", building.id).name}
 					description={getObj(lang, "buildings", building.id).description ?? ""}
-					image="/favicon.svg" />
+					image={`/images/buildings/${building.id}.jpeg`} />
 			))}
 		</div>
 	</>)}
@@ -186,16 +195,20 @@ const buildingsByCategory = buildingsList.reduce((acc: { [key: string]: DBBuildi
             if(!modalDiv) return;
             modalDiv.style.display = 'block';
 
-			modalResources.innerHTML = modalSet[el.parentElement.parentElement.dataset.id].resources.map(resource => {
+			const reqResources = modalSet[el.parentElement.parentElement.dataset.id]?.resources ?? [];
-				return `${lang['resources'][`Label_${resource.name}`]}: ${resource.amount}`;
+			const reqBuildings = modalSet[el.parentElement.parentElement.dataset.id]?.buildings ?? [];
+			const reqResearch = modalSet[el.parentElement.parentElement.dataset.id]?.research ?? [];
+
+			modalResources.innerHTML = reqResources.length === 0 ? "None" : reqResources.map(resource => {
+				return `${lang['resources'].find(r => r.id === resource.name).name}: ${resource.amount}`;
 			}).join("<br />");
 
-			modalBuildings.innerHTML = modalSet[el.parentElement.parentElement.dataset.id].buildings.map(building => {
+			modalBuildings.innerHTML = reqBuildings.length === 0 ? "None" : reqBuildings.map(building => {
-				return `${lang['buildings'][`Label_${building.id}`].name}: ${building.level}`;
+				return `${lang['buildings'].find(b => b.id === building.id).name}: ${building.level}`;
 			}).join("<br />");
 
-			modalResearch.innerHTML = modalSet[el.parentElement.parentElement.dataset.id].research.map(research => {
+			modalResearch.innerHTML = reqResearch.length === 0 ? "None" : reqResearch.map(research => {
-				return `${lang['research'][`Label_${research.id}`].name}: ${research.level}`;
+				return `${lang['research'].find(r => r.id === research.id).name}: ${research.level}`;
 			}).join("<br />");
 
             // background