AstroCol/src/components/ResourceBar.astro

---
import { ObjectId } from 'mongodb';
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 ?? ''));

const resourceArray = [];
for(const key in resources) {
    resourceArray.push(resources[key as never]);
}
---
<div id="resourcebar">
    <div class="resourcebar-item-identifier">
        <div class="resourcebar-circle-id" data-type="solid"></div>
    </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"}
              data-res-amount={res.amount}
              data-res-mining-rate={res.perHourMiningRate}
              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>
                <div class="resourcebar-item-text-wrapper" data-resname={res.name}>
                    <div class="resourcebar-item-text">{resourceLang[`Label_${res.name}`]}</div>
                    <div class="resourcebar-item-amount">{Math.floor(res.amount).toString()}</div>
                </div>
                <div class="resourcebar-item-tooltip">
                    <div class="resourcebar-item-tooltip-name">{resBarLang['Label_avaliable']} - <span class="resourcebar-item-tooltip-avaliable">{Math.floor(res.amount).toString()}</span></div>
                    <div class="resourcebar-item-tooltip-name">{resBarLang['Label_production']} - <span class="resourcebar-item-tooltip-production">{res.perHourMiningRate.toString()}</span></div>
                    <div class="resourcebar-item-tooltip-name">{resBarLang['Label_capacity']} - <span class="resourcebar-item-tooltip-capacity">{'21372137'}</span></div>
                </div>
            </div>    
        )}
    </div>
</div>

<style>
#resourcebar {
    color: white;
    background-color: blueviolet;
    border-radius: 15px;
    margin-top: 20px;
    display: flex;
    flex-direction: row;
}

.resourcebar-item-identifier {
    left: 25px;
    flex-shrink: 0;
    margin-left: 25px;
}

.resourcebar-circle-id {
    width: 50px;
    height: 50px;
    background-color: #0f0;
    border-radius: 25px;
    margin-right: 8px;
    margin-top: 8px;
    margin-bottom: 8px;
}


.resourcebar-elements {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.resourcebar-item {
    list-style: none;
    display: flex;
    flex-direction: row;
    padding-left: 15px;
    position: relative;
}

.resourcebar-item-icon {
    width: 50px;
    height: 50px;
    margin-right: 8px;
    margin-top: 8px;
    margin-bottom: 8px;
}

.resourcebar-item-icon img {
    width: 100%;
}

.resourcebar-item-text-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.resourcebar-item-text {
    font-size: 1.5em;
}

.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) {
        x = Math.floor(x);
        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();
    }

    setInterval(() => {
        const resourcebarItems = document.getElementById('resourcebar')?.querySelectorAll('.resourcebar-item');

        resourcebarItems?.forEach((item: any) => {
            const resourceAmount = parseFloat(item.dataset.resAmount ?? '0');
            const miningRate = parseInt(item.dataset.resMiningRate ?? '0') / 3600;
            const newAmount = resourceAmount + miningRate;

            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 = Math.floor(newAmount).toString();
        });
    }, 1_000);

    document.querySelector(".resourcebar-item-identifier")?.addEventListener("click", () => {
        switch((document.querySelector(".resourcebar-item-identifier")?.children[0] as HTMLElement)?.dataset.type) {
            case "solid":
                (document.querySelector(".resourcebar-item-identifier")?.children[0] as HTMLElement).dataset.type = "liquid";
                (document.querySelector(".resourcebar-item-identifier")?.children[0] as HTMLElement).style.backgroundColor = "#00f";
                (document.getElementById("resourcebar-elements")?.querySelectorAll(".resourcebar-item") as NodeListOf<HTMLElement>).forEach(item => {
                    if(item.dataset.resType === "liquid") {
                        item.style.display = "";
                    } else {
                        item.style.display = "none";
                    }
                });
                break;
            case "liquid":
                (document.querySelector(".resourcebar-item-identifier")?.children[0] as HTMLElement).dataset.type = "gas";
                (document.querySelector(".resourcebar-item-identifier")?.children[0] as HTMLElement).style.backgroundColor = "#ff0";
                (document.getElementById("resourcebar-elements")?.querySelectorAll(".resourcebar-item") as NodeListOf<HTMLElement>).forEach(item => {
                    if(item.dataset.resType === "gas") {
                        item.style.display = "";
                    } else {
                        item.style.display = "none";
                    }
                });
                break;
            case "gas":
                (document.querySelector(".resourcebar-item-identifier")?.children[0] as HTMLElement).dataset.type = "solid";
                (document.querySelector(".resourcebar-item-identifier")?.children[0] as HTMLElement).style.backgroundColor = "#0f0";
                (document.getElementById("resourcebar-elements")?.querySelectorAll(".resourcebar-item") as NodeListOf<HTMLElement>).forEach(item => {
                    if(item.dataset.resType === "solid") {
                        item.style.display = "";
                    } else {
                        item.style.display = "none";
                    }
                });
                break;
        }
    });
</script>