AstroCol/src/components/ResourceBar.astro

---
import { ObjectId } from 'mongodb';
import { getHighestWeightedLanguage, getLocales, getName } from '../lib/utils/langDriver';
import { getAllResources } from '../lib/db/resources';
import locationManager from '../lib/classes/managers/LocationManager';
import { Resource } from '../lib/classes/managers/abstract/ResourceManager';

const resourceTypes = await getAllResources();

const lang = await getLocales(Astro.cookies.get('language')?.value ?? await getHighestWeightedLanguage(Astro.request.headers.get('accept-language')));

const planetId = new ObjectId(Astro.cookies.get('currentPlanet')?.value ?? '');

const planet = locationManager.findId(planetId);

if(!planet) return;

await planet.resources.calculateCurrentAvailableResources();

const resourceArray: Resource[] = [];
for(const key of planet.resources.resources) {
    resourceArray.push(key);
}
---
<div id="resourcebar">
    {resourceArray.map(res =>
        <div class="resourcebar-item"
          data-res-type={resourceTypes.find(x => x.id === res.id)?.type ?? "solid"}
          data-res-id={res.id}
          data-res-amount={res.amount}
          data-res-mining-rate={res.perHourMiningRate}
        >
            <img src={resourceTypes.find(x => x.id === res.id)?.icon ?? "#"} alt={res.id} class="icon" />
            <div class="text" data-resname={res.id}>
                <span class="line1">{getName(lang, 'resources', res.id)}</span>
                <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>
            </div>
        </div>    
    )}
</div>
<style>
#resourcebar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: linear-gradient(135deg, #565656, #4a4a4a);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.resourcebar-item {
    display: flex;
    align-items: center;
    margin: 0 10px;
}

.icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

.text {
    display: flex;
    flex-direction: column;
}

.line1 {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
}

.line2 {
    font-size: 12px;
    color: #b0b0b0;
}

@media (max-width: 768px) {
    .status-bar {
        padding: 10px 15px;
    }

    .icon {
        width: 20px;
        height: 20px;
    }

    .line1 {
        font-size: 12px;
    }

    .line2 {
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .status-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .status-item {
        width: 100%;
        margin: 5px 0;
    }
}

.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 .resourcebar-item-tooltip {
    position: absolute;
    color: #b0b0b0;
    background-color: rgb(58, 58, 58);
    margin-top: 130px;
    width: 150%;
    border-radius: 10px;
    transition: visibility 1s, opacity 1s;
    visibility: hidden;
    opacity: 0;
}

.resourcebar-item:hover .resourcebar-item-tooltip {
    visibility: visible;
    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(3) + "k";
        if(x < 1_000_000_000) return (x / 1_000_000).toFixed(3) + "M";
        return x.toString();
    }

    function init() {
        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('.line2') as HTMLElement).innerHTML = numWithPrefix(newAmount);
            (item.querySelector('.resourcebar-item-tooltip-avaliable') as HTMLElement).innerHTML = Math.floor(newAmount).toString();
        });
    }

    init();
    setInterval(init, 1_000);
</script>