From f97d394eb4a40eea30bf53753027a393d1c15e0f Mon Sep 17 00:00:00 2001
From: Aelita4 <kontakt@mikorosa.pl>
Date: Fri, 23 Aug 2024 17:12:45 +0200
Subject: [PATCH] Change BuildingCard to generic ItemCard

---
 .../{BuildingCard.astro => ItemCard.astro}    | 32 ++++++++++---------
 src/pages/game/buildings.astro                |  6 ++--
 2 files changed, 21 insertions(+), 17 deletions(-)
 rename src/components/{BuildingCard.astro => ItemCard.astro} (66%)

diff --git a/src/components/BuildingCard.astro b/src/components/ItemCard.astro
similarity index 66%
rename from src/components/BuildingCard.astro
rename to src/components/ItemCard.astro
index 7ac108e..b0c10e6 100644
--- a/src/components/BuildingCard.astro
+++ b/src/components/ItemCard.astro
@@ -6,23 +6,25 @@ interface Props {
     name: string;
     description: string;
     image: string;
+    button_type: string;
+    button_name: string;
 }
 
 const lang = await getLocales(await getHighestWeightedLanguage(Astro.request.headers.get('accept-language')));
 
 ---
 
-<div class="building-card" data-id={Astro.props.id}>
-    <img class="building-card-image" src={Astro.props.image} />
-    <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>
-        <div class="building-card-info-button">i</div>
+<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}</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>
+        <div class="item-card-info-button">i</div>
     </div>
 </div>
 <style>
-.building-card {
+.item-card {
     background-color: #fff;
     color: #333;
     border-radius: 8px;
@@ -35,11 +37,11 @@ const lang = await getLocales(await getHighestWeightedLanguage(Astro.request.hea
     width: 49%;
 }
 
-.building-card-expanded {
+.item-card-expanded {
     height: auto;
 } 
 
-.building-card-image {
+.item-card-image {
     width: 150px;
     height: 150px;
     margin: 4px;
@@ -47,7 +49,7 @@ const lang = await getLocales(await getHighestWeightedLanguage(Astro.request.hea
     object-fit: cover;
 }
 
-.building-card-main-field {
+.item-card-main-field {
     background-color: #ccc;
     width: 100%;
     margin: 4px;
@@ -56,17 +58,17 @@ const lang = await getLocales(await getHighestWeightedLanguage(Astro.request.hea
     padding-right: 100px;
 }
 
-.building-card-name {
+.item-card-name {
     font-size: 48px;
 }
 
-.building-card-description {
+.item-card-description {
     font-size: 24px;
     margin-top: 16px;
     margin-bottom: 16px;
 }
 
-.building-card-build {
+.item-card-build {
     background-color: #333;
     color: #fff;
     border-radius: 8px;
@@ -78,7 +80,7 @@ const lang = await getLocales(await getHighestWeightedLanguage(Astro.request.hea
     right: 16px;
 }
 
-.building-card-info-button {
+.item-card-info-button {
     background-color: #333;
     color: #fff;
     border-radius: 50%;
diff --git a/src/pages/game/buildings.astro b/src/pages/game/buildings.astro
index e100936..990f787 100644
--- a/src/pages/game/buildings.astro
+++ b/src/pages/game/buildings.astro
@@ -1,7 +1,7 @@
 ---
 import Layout from '../../layouts/Layout.astro';
 import NavBar from '../../components/NavBar.astro';
-import BuildingCard from '../../components/BuildingCard.astro';
+import BuildingCard from '../../components/ItemCard.astro';
 import { getUserByAccessToken } from '../../lib/db/users';
 import { getHighestWeightedLanguage, getLocales, getName, getObj } from '../../lib/utils/langDriver';
 import ResourceBar from '../../components/ResourceBar.astro';
@@ -62,7 +62,9 @@ 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={`/images/buildings/${building.id}.jpeg`} />
+					image={`/images/buildings/${building.id}.jpeg`}
+					button_type="general"
+					button_name="nav-build" />
 			))}
 		</div>
 	</>)}