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

Rework resource bar to use new resource manager

This commit is contained in:
Aelita4 2024-02-12 19:26:03 +01:00
parent 855bdb0144
commit ef50c8fed2
Signed by: Aelita4
GPG Key ID: E44490C2025906C1
2 changed files with 72 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/ResourceBar.astro
View File

@ -13,10 +13,7 @@ const resources = await getUserResources(new ObjectId(Astro.cookies.get('userid'
const resourceArray = [];
for(const key in resources) {
resourceArray.push({
name: key,
amount: resources[key as never]
});
resourceArray.push(resources[key as never]);
}
---
<div id="resourcebar">
@ -28,6 +25,7 @@ for(const key in resources) {
<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">
@ -35,11 +33,11 @@ for(const key in resources) {
</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">{res.amount}</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">{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_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>
@ -132,36 +130,24 @@ for(const key in resources) {
<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();
}
const perSecondProduction = {
"coal": 10,
"iron": 15,
"gold": 200,
"water": 5,
"sulfuricAcid": 1,
"liquidNitrogen": 2,
"hydrogen": 5,
"oxygen": 50,
"helium3": 1
}
setInterval(() => {
const resourcebarItems = document.getElementById('resourcebar')?.querySelectorAll('.resourcebar-item');
resourcebarItems?.forEach((item: any) => {
const resourceName = (item.querySelector('.resourcebar-item-text-wrapper') as HTMLElement)?.dataset.resname ?? '';
const resourceAmount = parseInt(item.dataset.resAmount ?? '0');
const newAmount = resourceAmount + perSecondProduction[resourceName as never];
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 = newAmount.toString();
(item.querySelector('.resourcebar-item-tooltip .resourcebar-item-tooltip-avaliable') as HTMLElement).innerHTML = Math.floor(newAmount).toString();
});
}, 1_000);

61
src/lib/utils/resourceManager.ts
View File

@ -4,6 +4,67 @@ import { Users } from "../db/mongodb";
import type DBResource from "../../types/DBResource";
import type Resource from "../../types/Resource";
export const createInitialResources = async (id: ObjectId) => {
const resources: Array<DBResource> = [
{
name: "coal",
amount: 11,
lastUpdated: new Date(),
perHourMiningRate: 11
},
{
name: "iron",
amount: 22,
lastUpdated: new Date(),
perHourMiningRate: 22
},
{
name: "gold",
amount: 33,
lastUpdated: new Date(),
perHourMiningRate: 33
},
{
name: "water",
amount: 44,
lastUpdated: new Date(),
perHourMiningRate: 44
},
{
name: "sulfuricAcid",
amount: 55,
lastUpdated: new Date(),
perHourMiningRate: 55
},
{
name: "liquidNitrogen",
amount: 66,
lastUpdated: new Date(),
perHourMiningRate: 66
},
{
name: "hydrogen",
amount: 77,
lastUpdated: new Date(),
perHourMiningRate: 77
},
{
name: "oxygen",
amount: 88,
lastUpdated: new Date(),
perHourMiningRate: 88
},
{
name: "helium3",
amount: 99,
lastUpdated: new Date(),
perHourMiningRate: 99
}
];
updateUserResources(id, resources);
}
export const getUserResources = async (id: ObjectId): Promise<Array<DBResource>> => {
const user = await getUserById(id);