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

Improve resource bar

This commit is contained in:
Aelita4 2025-01-14 18:55:41 +01:00
parent 119cf70e86
commit d6520fdee6
Signed by: Aelita4
GPG Key ID: E44490C2025906C1
11 changed files with 107 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/resources/coal.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 870 B

BIN
public/images/resources/gold.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
public/images/resources/helium-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
public/images/resources/hydrogen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
public/images/resources/iron.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
public/images/resources/liquid-nitrogen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 956 B

BIN
public/images/resources/oxygen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 638 B

BIN
public/images/resources/sulfuric-acid.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 864 B

BIN
public/images/resources/water.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 802 B

178
src/components/ResourceBar.astro
View File

@ -4,7 +4,6 @@ import { getHighestWeightedLanguage, getLocales, getName } from '../lib/utils/la
import { getAllResources } from '../lib/db/resources';
import locationManager from '../lib/classes/managers/LocationManager';
import { Resource } from '../lib/classes/managers/abstract/ResourceManager';
import SystemManager from '../lib/classes/managers/SystemManager';
const resourceTypes = await getAllResources();
@ -24,27 +23,17 @@ for(const key of planet.resources.resources) {
}
---
<div id="resourcebar">
<div class="resourcebar-item-identifier">
<div class="resourcebar-circle-id" data-type="solid"></div>
</div>
<div class="resourcebar-planetname">
{planet instanceof SystemManager ? <span style="color: red;">{planet.data.name}</span> : planet.name}
</div>
<div id="resourcebar-elements" class="resourcebar-elements">
{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}
style={(resourceTypes.find(x => x.id === res.id)?.type ?? "solid") === "solid" ? "" : "display: none;"}
>
<div class="resourcebar-item-icon">
<img src={resourceTypes.find(x => x.id === res.id)?.icon ?? "#"} alt={res.id} />
</div>
<div class="resourcebar-item-text-wrapper" data-resname={res.id}>
<div class="resourcebar-item-text">{getName(lang, 'resources', res.id)}</div>
<div class="resourcebar-item-amount">[fetching]</div>
<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>
@ -53,45 +42,79 @@ for(const key of planet.resources.resources) {
</div>
</div>
)}
</div>
</div>
<style>
#resourcebar {
color: white;
background-color: blueviolet;
border-radius: 15px;
margin-top: 20px;
display: flex;
flex-direction: row;
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-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-planetname {
margin-top: 8px;
font-size: 2.5em;
margin-left: 25px;
}
.resourcebar-elements {
flex-grow: 1;
.resourcebar-item {
display: flex;
flex-direction: row;
justify-content: space-evenly;
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 {
@ -120,18 +143,11 @@ for(const key of planet.resources.resources) {
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;
color: #b0b0b0;
background-color: rgb(58, 58, 58);
margin-top: 130px;
width: 150%;
border-radius: 10px;
transition: visibility 1s, opacity 1s;
@ -153,55 +169,19 @@ for(const key of planet.resources.resources) {
return x.toString();
}
setInterval(() => {
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('.resourcebar-item-amount') as HTMLElement).innerHTML = numWithPrefix(newAmount);
(item.querySelector('.resourcebar-item-tooltip .resourcebar-item-tooltip-avaliable') as HTMLElement).innerHTML = Math.floor(newAmount).toString();
(item.querySelector('.line2') as HTMLElement).innerHTML = numWithPrefix(newAmount);
(item.querySelector('.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;
}
});
init();
setInterval(init, 1_000);
</script>

11
src/layouts/LoggedIn.astro
View File

@ -21,14 +21,21 @@ const { title } = Astro.props;
<title>{title}</title>
</head>
<body>
<div class="bars">
<NavBar loggedIn="true" active={Astro.props.id} />
<ResourceBar />
</div>
<slot />
</body>
</html>
<style>
html {
html {
font-family: system-ui, sans-serif;
background: #13151a;
}
width: 100%;
}
.bars {
display: inline;
}
</style>