Add tooltip to resourcebar
This commit is contained in:
parent
4bfa3bbb49
commit
6e529a9d74
|
@ -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", () => {
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"Label": {
|
||||
"avaliable": "Avaliable: {}",
|
||||
"production": "Production: {}/h",
|
||||
"capacity": "Storage capacity: {}"
|
||||
"avaliable": "Avaliable",
|
||||
"production": "Production",
|
||||
"capacity": "Storage capacity"
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue