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

Add tooltip to resourcebar

This commit is contained in:
Aelita4 2024-02-06 18:19:36 +01:00
parent 4bfa3bbb49
commit 6e529a9d74
Signed by: Aelita4
GPG Key ID: E44490C2025906C1
2 changed files with 59 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/components/ResourceBar.astro
View File

@ -4,8 +4,10 @@ import { getUserResources } from '../lib/utils/resourceManager';
import { getHighestWeightedLanguage, getLocales } from '../lib/lang/langDriver';
import resourceTypes from '../lib/data/resources.json';
import format from '../lib/utils/format';
const resourceLang = await getLocales(getHighestWeightedLanguage(Astro.request.headers.get('accept-language')), 'resources');
const resBarLang = await getLocales(getHighestWeightedLanguage(Astro.request.headers.get('accept-language')), 'resourcebar');
const resources = await getUserResources(new ObjectId(Astro.cookies.get('userid')?.value ?? ''));
@ -23,7 +25,11 @@ for(const key in resources) {
</div>
<div id="resourcebar-elements" class="resourcebar-elements">
{resourceArray.map(res =>
<div class="resourcebar-item" data-res-type={resourceTypes.find(x => x.name === res.name)?.type ?? "solid"} style={(resourceTypes.find(x => x.name === res.name)?.type ?? "solid") === "solid" ? "" : "display: none;"}>
<div class="resourcebar-item"
data-res-type={resourceTypes.find(x => x.name === res.name)?.type ?? "solid"}
data-res-amount={res.amount}
style={(resourceTypes.find(x => x.name === res.name)?.type ?? "solid") === "solid" ? "" : "display: none;"}
>
<div class="resourcebar-item-icon">
<img src={resourceTypes.find(x => x.name === res.name)?.icon ?? "#"} alt={res.name} />
</div>
@ -31,6 +37,11 @@ for(const key in resources) {
<div class="resourcebar-item-text">{resourceLang[`Label_${res.name}`]}</div>
<div class="resourcebar-item-amount">{res.amount}</div>
</div>
<div class="resourcebar-item-tooltip">
<div class="resourcebar-item-tooltip-name">{resBarLang['Label_avaliable']} - <span class="resourcebar-item-tooltip-avaliable">{res.amount.toString()}</span></div>
<div class="resourcebar-item-tooltip-name">{resBarLang['Label_production']} - <span class="resourcebar-item-tooltip-production">{'69'}</span></div>
<div class="resourcebar-item-tooltip-name">{resBarLang['Label_capacity']} - <span class="resourcebar-item-tooltip-capacity">{'21372137'}</span></div>
</div>
</div>
)}
</div>
@ -75,6 +86,7 @@ for(const key in resources) {
display: flex;
flex-direction: row;
padding-left: 15px;
position: relative;
}
.resourcebar-item-icon {
@ -102,36 +114,55 @@ for(const key in resources) {
.resourcebar-item-amount {
font-size: 1.2em;
}
.resourcebar-item .resourcebar-item-tooltip {
position: absolute;
background-color: gray;
margin-top: 70px;
width: 150%;
border-radius: 10px;
transition: opacity 1s;
opacity: 0;
}
.resourcebar-item:hover .resourcebar-item-tooltip {
opacity: 1;
}
</style>
<script>
function numWithPrefix(x: number) {
if(x < 1_000) return x.toString();
if(x < 1_000_000) return (x / 1_000).toFixed(2) + "k";
if(x < 1_000_000_000) return (x / 1_000_000).toFixed(2) + "M";
return x.toString();
}
const perSecondProduction = {
"coal": 10,
"iron": 15,
"gold": 200,
"water": 5,
"sulfuricAcid": 1,
"liquidNitrogen": 2,
"hydrogen": 5,
"oxygen": 50,
"helium3": 1
}
setInterval(() => {
const resourcebar = document.getElementById('resourcebar');
const resourcebarItems = resourcebar?.querySelectorAll('.resourcebar-item');
const resourcebarItems = document.getElementById('resourcebar')?.querySelectorAll('.resourcebar-item');
const perSecondProduction = {
"coal": 10,
"iron": 15,
"gold": 20,
"water": 5,
"sulfuricAcid": 1,
"liquidNitrogen": 2,
"hydrogen": 5,
"oxygen": 50,
"helium3": 1
}
resourcebarItems?.forEach(item => {
resourcebarItems?.forEach((item: any) => {
const resourceName = (item.querySelector('.resourcebar-item-text-wrapper') as HTMLElement)?.dataset.resname ?? '';
const resourceAmount = parseInt(item.querySelector('.resourcebar-item-amount')?.innerHTML ?? '0');
const element = item.querySelector('.resourcebar-item-amount');
if(!element) return;
element.innerHTML = (resourceAmount + perSecondProduction[resourceName as never]).toString();
})
const resourceAmount = parseInt(item.dataset.resAmount ?? '0');
const newAmount = resourceAmount + perSecondProduction[resourceName as never];
item.dataset.resAmount = newAmount.toString();
(item.querySelector('.resourcebar-item-amount') as HTMLElement).innerHTML = numWithPrefix(newAmount);
(item.querySelector('.resourcebar-item-tooltip .resourcebar-item-tooltip-avaliable') as HTMLElement).innerHTML = newAmount.toString();
});
}, 1_000);
document.querySelector(".resourcebar-item-identifier")?.addEventListener("click", () => {

6
src/lib/lang/en/resourcebar.json
View File

@ -1,7 +1,7 @@
{
"Label": {
"avaliable": "Avaliable: {}",
"production": "Production: {}/h",
"capacity": "Storage capacity: {}"
"avaliable": "Avaliable",
"production": "Production",
"capacity": "Storage capacity"
}
}