i have progress bar but always white ( no progress ) , this is the code for the class :


private function BuildFleetEventTable($fleetRow, $FleetState)
{
$Time = 0;
$Rest = 0;
$Rest1 = 0;
$StartTime = $fleetRow['start_time'];

if ($FleetState == 0 && $this->IsPhalanx && $fleetRow['fleet_group'] != 0 && (strpos((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]", 'page=phalanx') !== false))
{
$acsResult = $this->getFleets($fleetRow['fleet_group']);
$EventString = '';

foreach($acsResult as $acsRow)
{
$Return = $this->getEventData($acsRow, $FleetState);

$Rest = $Return[0];
$EventString .= $Return[1].'<br><br>';
$Time = $Return[2];
$Rest1 = $Return[3];
$StartTime = $Return[3];
}

$EventString = substr($EventString, 0, -8);
}
else
{
list($Rest, $EventString, $Time, $Rest1) = $this->getEventData($fleetRow, $FleetState);
}

return array(
'text' => $EventString,
'returntime' => $Time,
'resttime' => $Rest,
'resttime1' => $Rest1,
'start_time' => $StartTime,
);

Thanks for this nice mod!

for me it works perfect.



one question:

is it possible to give the bar, the same color like the fleet-text?

spio - yellow, nebular - purple, attack - green... and so on

only in the last 10 minutes the green bar starts, when the shipment ends the green bar reaches about 1 fifth of the total bar, I don't understand

the bar starts when there are about 6 minutes left and reaches a maximum of 1/4 of the total

ibb.co/Xf5XcqBm

Also specify that you are on Newstar which you modified. So check to fix your bugs on your version.

I'm using the same files, if you can see if I made any mistake

mediafire.com/file/0th6mjp00mj0biz/this.zip/file

me not you, I no longer help you I let the others of the forum help you. cordially.

actually my request was towards the author of the post -_-

mein Verdacht @Dany92

irgendwo in einer .css die gleiche Klasse wie die progressbar, nur eben anderen maaßen.

schau dir mal deine Übersicht mit der Entwicklerkonsole des Browser an.

in the end I rewrote the JS part ahha, here I attach an improved solution with animation of a spaceship at the end of the event, moreover when it is in progress the bar will be yellow, when completed it will become green (the class part remains the same)

JS :

<script>
function updateProgressBars() {
const bars = document.querySelectorAll('.progress3-bar-overview');

bars.forEach(bar => {
const startTime = parseInt(bar.dataset.startTime) * 1000;
const endTime = parseInt(bar.dataset.returnTime) * 1000;
const now = Date.now();

if (now < startTime) {
bar.style.width = '0%';
bar.classList.remove('progress-in-progress', 'progress-complete');
} else if (now >= endTime) {
bar.style.width = '100%';
bar.classList.remove('progress-in-progress');

if (!bar.classList.contains('progress-complete')) {
bar.classList.add('progress-complete');


const ship = document.createElement('div');
ship.classList.add('spaceship');
bar.parentElement.appendChild(ship);


setTimeout(() => {
ship.remove();
}, 2000);
}
} else {
const progress = ((now - startTime) / (endTime - startTime)) * 100;
bar.style.width = progress.toFixed(2) + '%';
bar.classList.remove('progress-complete');
bar.classList.add('progress-in-progress');
}
});
}


updateProgressBars();
setInterval(updateProgressBars, 1000);
</script>

CSS :

.progress3-bar {
padding: 0 6px;
line-height: 14px;
font-size: 12px;
margin-bottom: 5px;
margin-top: 5px;
overflow: hidden;
position: relative;
}
.progress3-bar-container {
width: 100%;
background-color: #000c1b;
border: 1px solid #000;
border-radius: 5px;
overflow: hidden;
}
.progress3-bar-overview {
height: 13px;
background-color: #4cac50;
width: 0%;
transition: width 1.0s linear;
}

@keyframes spaceGlow {
0% { box-shadow: 0 0 10px #2ecc71; }
50% { box-shadow: 0 0 20px #00ff99, 0 0 40px #00ffcc; }
100% { box-shadow: 0 0 10px #2ecc71; }
}

@keyframes spaceshipFly {
0% { left: 0%; opacity: 0; }
10% { opacity: 1; }
100% { left: 100%; opacity: 0; }
}

.progress-in-progress {
background-color: #f1c40f;
}

.progress-complete {
background-color: #2ecc71;
animation: spaceGlow 2s infinite;
}

.spaceship {
position: absolute;
top: -10px;
height: 100px;
width: 100px;
background-image: url(/styles/theme/nsc/img/bar.png);
background-size: contain;
background-repeat: no-repeat;
animation: spaceshipFly 2s ease-in-out forwards;
z-index: 10;
}

hey there!

he @Dany92

flying spaceship sounds interesting. where you take it from?

i like the color-change from yellow to green,
but for me, the updated progressbar ends a min before the time is over and i've not seen a spaceship.

I had to change the name of the bar, in fact I used "progress3" ( change it if necessary in your overview file )

also you have to put the image you want in the CSS path ( /style/nsc/img ..... )