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

36
src/components/ResourceBar.astro
View File

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