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

Redesign resource bar

This commit is contained in:
Aelita4 2025-02-08 15:02:04 +01:00
parent ab986fd69f
commit c27f05fea8
Signed by: Aelita4
GPG Key ID: E44490C2025906C1
9 changed files with 68 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 968 B

BIN
public/images/resources/stellar-quartz.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

2
src/components/NavBar.astro
View File

@ -190,7 +190,7 @@ const hasUnreadMail = await checkForUnreadMails(new ObjectId(userId));
<style>
nav {
background-color: rgb(56, 59, 99);
border-radius: 10px;
border-radius: 10px 10px 0px 0px;
}
nav ul {

168
src/components/ResourceBar.astro
View File

@ -35,6 +35,12 @@ if(!(planet instanceof SystemManager)) {
"hydrogen-tank": "hydrogen",
"oxygen-tank": "oxygen",
"helium3-tank": "helium-3",
"uranium-container": "uranium",
"oil-tank": "oil",
"diesel-tank": "diesel",
"kerosene-tank": "kerosene",
"deuterium-tank": "deuterium",
"tritium-tank": "tritium",
}
resourceArray.forEach(res => {
@ -53,21 +59,27 @@ if(!(planet instanceof SystemManager)) {
}
---
<div id="resourcebar">
<!-- Energy: <span class={`${planet.energy.consumption > planet.energy.production ? "prod-full" : planet.energy.consumption >= (planet.energy.production * 0.9) ? "prod-almost-full" : ""}`}>{planet.energy.consumption}/{planet.energy.production}</span> -->
<div class="resourcebar-item">
<div class="resbar-item">
<Image src="/images/resources/energy.png" alt="energy" class="icon" width={32} height={32} />
<div class="text">
<span class="line1"><!--{getName(lang, 'resources', 'energy')}-->Energy</span>
<span class={`line2 ${planet.energy.consumption > planet.energy.production ? "prod-full" : planet.energy.consumption >= (planet.energy.production * 0.9) ? "prod-almost-full" : ""}`}>{planet.energy.consumption}/{planet.energy.production}</span>
</div>
<span class={`res-amount ${planet.energy.consumption > planet.energy.production ? "prod-full" : planet.energy.consumption >= (planet.energy.production * 0.9) ? "prod-almost-full" : ""}`}>{planet.energy.production - planet.energy.consumption}</span>
<div class="resourcebar-item-tooltip">
<span class="resourcebar-item-tooltip-title">Energy</span>
<span class="resourcebar-item-tooltip-name">{getName(lang, 'general', 'production')}</span><span class={`resourcebar-item-tooltip-amount`}>{planet.energy.production}</span>
<span class="resourcebar-item-tooltip-name">{getName(lang, 'general', 'consumption')}</span><span class="resourcebar-item-tooltip-amount">{planet.energy.consumption}</span>
<span class="resourcebar-item-tooltip-name">{getName(lang, 'general', 'balance')}</span><span class={`resourcebar-item-tooltip-amount ${planet.energy.consumption > planet.energy.production ? "prod-full" : planet.energy.consumption >= (planet.energy.production * 0.9) ? "prod-almost-full" : ""}`}>{planet.energy.production - planet.energy.consumption}</span>
</div>
</div>
<div class="resbar-item">
<Image src="/images/resources/stellar-quartz.png" alt="stellar-quartz" class="icon" width={32} height={32} />
<span class={`res-amount`}>0</span>
<div class="resourcebar-item-tooltip">
<span class="resourcebar-item-tooltip-title">Stellar Quartz</span>
<span class="resourcebar-item-tooltip-name">{getName(lang, 'general', 'avaliable')}</span><span class={`resourcebar-item-tooltip-amount`}>0</span>
</div>
</div>
<div class="horizontal-divider"></div>
{resourceArray.map(res =>
<div class="resourcebar-item resourcebar-iterable" id={`resource-${res.id}`}
<div class="resbar-item resourcebar-iterable" id={`resource-${res.id}`}
data-res-type={resourceTypes.find(x => x.id === res.id)?.type ?? "solid"}
data-res-id={res.id}
data-res-amount={res.amount}
@ -75,11 +87,9 @@ if(!(planet instanceof SystemManager)) {
data-res-capacity={res.capacity}
>
<Image src={resourceTypes.find(x => x.id === res.id)?.icon ?? "#"} alt={res.id} class="icon" width={32} height={32} />
<div class="text" data-resname={res.id}>
<span class="line1">{getName(lang, 'resources', res.id)}</span>
<span class={`line2 ${res.amount >= res.capacity ? "prod-full" : res.amount >= (res.capacity * 0.9) ? "prod-almost-full" : ""}`}></span>
</div>
<span class={`res-amount ${res.amount >= res.capacity ? "prod-full" : res.amount >= (res.capacity * 0.9) ? "prod-almost-full" : ""}`}>0</span>
<div class="resourcebar-item-tooltip">
<span class="resourcebar-item-tooltip-title">{getName(lang, 'resources', res.data.id)}</span>
<span class="resourcebar-item-tooltip-name">{getName(lang, 'general', 'avaliable')}</span><span class="resourcebar-item-tooltip-amount resourcebar-item-tooltip-avaliable">{Math.floor(res.amount).toString()}</span>
<span class="resourcebar-item-tooltip-name">{getName(lang, 'general', 'production')}</span><span class={`resourcebar-item-tooltip-amount resourcebar-item-tooltip-production ${res.amount >= res.capacity ? "prod-full" : res.amount >= (res.capacity * 0.9) ? "prod-almost-full" : ""}`}>{res.amount >= res.capacity ? "0" : res.perHourMiningRate.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") ?? "0"}</span>
<span class="resourcebar-item-tooltip-name">{getName(lang, 'general', 'capacity')}</span><span class="resourcebar-item-tooltip-amount resourcebar-item-tooltip-capacity">{res.capacity.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}</span>
@ -90,97 +100,53 @@ if(!(planet instanceof SystemManager)) {
<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;
border-radius: 0px 0px 10px 10px;
padding-top: 4px;
padding-bottom: 4px;
}
.resourcebar-item {
.horizontal-divider {
width: 1px;
height: 32px;
background-color: #b0b0b0;
margin-left: 20px;
}
.res-amount {
color: #fff;
}
.resbar-item {
display: flex;
align-items: center;
margin: 0 10px;
flex-direction: row;
padding-left: 10px;
}
.resbar-item span {
font-size: 14px;
font-weight: bold;
margin-top: 3px;
}
.icon {
width: 24px;
height: 24px;
margin-right: 10px;
margin-left: 10px;
margin-right: 5px;
}
.text {
display: flex;
flex-direction: column;
}
.line1 {
font-size: 14px;
font-weight: bold;
.resourcebar-item-tooltip-title {
font-size: 18px;
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-text-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
margin: 5px;
padding-bottom: 5px;
border-bottom: 1px solid #b0b0b0;
}
.resourcebar-item-tooltip-name {
@ -198,21 +164,13 @@ if(!(planet instanceof SystemManager)) {
margin-bottom: 5px;
}
.prod-almost-full {
color: #ff9900;
}
.prod-full {
color: #ff0000;
}
.resourcebar-item .resourcebar-item-tooltip {
.resbar-item .resourcebar-item-tooltip {
position: absolute;
display: flex;
flex-direction: column;
color: #b0b0b0;
background-color: rgb(58, 58, 58);
margin-top: 220px;
margin-top: 32px;
border-radius: 10px;
min-width: 134px;
transition: visibility 1s, opacity 1s;
@ -220,10 +178,18 @@ if(!(planet instanceof SystemManager)) {
opacity: 0;
}
.resourcebar-item:hover .resourcebar-item-tooltip {
.resbar-item:hover .resourcebar-item-tooltip {
visibility: visible;
opacity: 1;
}
.prod-almost-full {
color: #ff9900;
}
.prod-full {
color: #ff0000;
}
</style>
<script>
function numWithPrefix(x: number) {
@ -231,7 +197,7 @@ if(!(planet instanceof SystemManager)) {
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();
return "1B+";
}
function numWithSeparator(x: number) {
@ -247,17 +213,17 @@ if(!(planet instanceof SystemManager)) {
const newAmount = resourceAmount + miningRate;
item.dataset.resAmount = newAmount.toString();
(item.querySelector('.line2') as HTMLElement).innerHTML = numWithPrefix(newAmount);
(item.querySelector('.res-amount') as HTMLElement).innerHTML = numWithPrefix(newAmount);
(item.querySelector('.resourcebar-item-tooltip-avaliable') as HTMLElement).innerHTML = numWithSeparator(newAmount);
if(newAmount >= parseFloat(item.dataset.resCapacity ?? '0')) {
(item.querySelector('.line2') as HTMLElement).classList.remove('prod-almost-full');
(item.querySelector('.line2') as HTMLElement).classList.add('prod-full');
(item.querySelector('.res-amount') as HTMLElement).classList.remove('prod-almost-full');
(item.querySelector('.res-amount') as HTMLElement).classList.add('prod-full');
(item.querySelector('.resourcebar-item-tooltip-production') as HTMLElement).classList.remove('prod-almost-full');
(item.querySelector('.resourcebar-item-tooltip-production') as HTMLElement).classList.add('prod-full');
item.dataset.resMiningRate = '0';
} else if(newAmount >= parseFloat(item.dataset.resCapacity ?? '0') * 0.9) {
(item.querySelector('.line2') as HTMLElement).classList.add('prod-almost-full');
(item.querySelector('.res-amount') as HTMLElement).classList.add('prod-almost-full');
(item.querySelector('.resourcebar-item-tooltip-production') as HTMLElement).classList.add('prod-almost-full');
}
});