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

Improve resource bar tooltips

This commit is contained in:
Aelita4 2025-01-14 21:41:27 +01:00
parent d6520fdee6
commit 5caf20c680
Signed by: Aelita4
GPG Key ID: E44490C2025906C1
1 changed files with 29 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/ResourceBar.astro
View File

@ -36,9 +36,9 @@ for(const key of planet.resources.resources) {
<span class="line2"></span>
</div>
<div class="resourcebar-item-tooltip">
<div class="resourcebar-item-tooltip-name">{getName(lang, 'general', 'avaliable')} - <span class="resourcebar-item-tooltip-avaliable">{Math.floor(res.amount).toString()}</span></div>
<div class="resourcebar-item-tooltip-name">{getName(lang, 'general', 'production')} - <span class="resourcebar-item-tooltip-production">{res.perHourMiningRate?.toString() ?? "0"}</span></div>
<div class="resourcebar-item-tooltip-name">{getName(lang, 'general', 'capacity')} - <span class="resourcebar-item-tooltip-capacity">{'21372137'}</span></div>
<span class="resourcebar-item-tooltip-name">{getName(lang, 'general', 'avaliable')}</span><span class="resourcebar-item-tooltip-amount resourcebar-item-tooltip-avaliable">{Math.floor(res.amount).toString()}</span>
<span class="resourcebar-item-tooltip-name">{getName(lang, 'general', 'production')}</span><span class="resourcebar-item-tooltip-amount resourcebar-item-tooltip-production">{res.perHourMiningRate.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") ?? "0"}</span>
<span class="resourcebar-item-tooltip-name">{getName(lang, 'general', 'capacity')}</span><span class="resourcebar-item-tooltip-amount resourcebar-item-tooltip-capacity">{'21372137'.replace(/\B(?=(\d{3})+(?!\d))/g, ",")}</span>
</div>
</div>
)}
@ -143,13 +143,30 @@ for(const key of planet.resources.resources) {
justify-content: center;
}
.resourcebar-item-tooltip-name {
font-size: 16px;
color: #b0b0b0;
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
}
.resourcebar-item-tooltip-amount {
font-size: 14px;
color: #fff;
margin-left: 5px;
margin-bottom: 5px;
}
.resourcebar-item .resourcebar-item-tooltip {
position: absolute;
display: flex;
flex-direction: column;
color: #b0b0b0;
background-color: rgb(58, 58, 58);
margin-top: 130px;
width: 150%;
margin-top: 220px;
border-radius: 10px;
min-width: 134px;
transition: visibility 1s, opacity 1s;
visibility: hidden;
opacity: 0;
@ -169,6 +186,11 @@ for(const key of planet.resources.resources) {
return x.toString();
}
function numWithSeparator(x: number) {
x = Math.floor(x);
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
function init() {
const resourcebarItems = document.getElementById('resourcebar')?.querySelectorAll('.resourcebar-item');
resourcebarItems?.forEach((item: any) => {
@ -178,7 +200,7 @@ for(const key of planet.resources.resources) {
item.dataset.resAmount = newAmount.toString();
(item.querySelector('.line2') as HTMLElement).innerHTML = numWithPrefix(newAmount);
(item.querySelector('.resourcebar-item-tooltip-avaliable') as HTMLElement).innerHTML = Math.floor(newAmount).toString();
(item.querySelector('.resourcebar-item-tooltip-avaliable') as HTMLElement).innerHTML = numWithSeparator(newAmount);
});
}