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

Add planet name and fix transition in resource bar

This commit is contained in:
Aelita4 2024-10-07 11:47:09 +02:00
parent a5d4431f52
commit 4735443e2e
Signed by: Aelita4
GPG Key ID: E44490C2025906C1
1 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/ResourceBar.astro
View File

@ -11,14 +11,14 @@ const lang = await getLocales(Astro.cookies.get('language')?.value ?? await getH
const planetId = new ObjectId(Astro.cookies.get('planetid')?.value ?? ''); const planetId = new ObjectId(Astro.cookies.get('planetid')?.value ?? '');
const resources = locationManager.getPlanet(planetId)?.resources; const planet = locationManager.getPlanet(planetId);
if(!resources) return; if(!planet) return;
resources.calculateCurrentAvailableResources(); planet.resources.calculateCurrentAvailableResources();
const resourceArray: Resource[] = []; const resourceArray: Resource[] = [];
for(const key of resources.resources) { for(const key of planet.resources.resources) {
resourceArray.push(key); resourceArray.push(key);
} }
--- ---
@ -26,6 +26,9 @@ for(const key of resources.resources) {
<div class="resourcebar-item-identifier"> <div class="resourcebar-item-identifier">
<div class="resourcebar-circle-id" data-type="solid"></div> <div class="resourcebar-circle-id" data-type="solid"></div>
</div> </div>
<div class="resourcebar-planetname">
{planet.name}
</div>
<div id="resourcebar-elements" class="resourcebar-elements"> <div id="resourcebar-elements" class="resourcebar-elements">
{resourceArray.map(res => {resourceArray.map(res =>
<div class="resourcebar-item" <div class="resourcebar-item"
@ -77,6 +80,11 @@ for(const key of resources.resources) {
margin-bottom: 8px; margin-bottom: 8px;
} }
.resourcebar-planetname {
margin-top: 8px;
font-size: 2.5em;
margin-left: 25px;
}
.resourcebar-elements { .resourcebar-elements {
flex-grow: 1; flex-grow: 1;
@ -125,11 +133,13 @@ for(const key of resources.resources) {
margin-top: 70px; margin-top: 70px;
width: 150%; width: 150%;
border-radius: 10px; border-radius: 10px;
transition: opacity 1s; transition: visibility 1s, opacity 1s;
visibility: hidden;
opacity: 0; opacity: 0;
} }
.resourcebar-item:hover .resourcebar-item-tooltip { .resourcebar-item:hover .resourcebar-item-tooltip {
visibility: visible;
opacity: 1; opacity: 1;
} }
</style> </style>