Aelita4
/
AstroCol
1
0
Fork 0
Code Issues 2 Pull Requests Packages Projects 1 Releases Wiki Activity

Change BuildingCard to generic ItemCard

This commit is contained in:
Aelita4 2024-08-23 17:12:45 +02:00
parent 7bd5a055e2
commit f97d394eb4
Signed by: Aelita4
GPG Key ID: E44490C2025906C1
2 changed files with 21 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/BuildingCard.astro → src/components/ItemCard.astro
View File

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

6
src/pages/game/buildings.astro
View File

@ -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>
</>)}