change pirate round progress bar

Author: Huxinator

src/Module/Database/View/ShowPirateRound/ShowPirateRound.php

@@ -83,7 +83,11 @@ public function handle(GameControllerInterface $game): void
                 }
             }
         }
+        $maxPrestige = $lastRound->getMaxPrestige() ?? 0;
+        $actualPrestige = $lastRound->getActualPrestige() ?? 0;
+        $remainingPrestige = max(0, $maxPrestige - $actualPrestige);
 
+        $game->setTemplateVar('REMAINING_PRESTIGE', $remainingPrestige);
         $game->setTemplateVar('WINNER_FACTION_SHIPS', $winnerFactionShips);
         $game->setTemplateVar('PIRATE_ROUND', $lastRound);
         $game->setTemplateVar('TOP_USERS', $topList);

src/Public/static/js/database.js

@@ -317,7 +317,7 @@ function initializeSpacyProgressBar(maxPrestige, actualPrestige) {
 
 	if (!progressBar || !progressText || !progressContainer) return;
 
-	const percentage = maxPrestige > 0 ? (actualPrestige / maxPrestige) * 100 : 0;
+	const percentage = ((maxPrestige - actualPrestige) / maxPrestige) * 100;
 
 	let gradient, glowColor;
 	if (percentage >= 75) {

src/html/database/pirateRound.twig

@@ -65,6 +65,7 @@
                 <div id="factionChart" data-factions="{{ FACTION_DATA|json_encode|e('html_attr') }}"
                     data-max-prestige="{{ PIRATE_ROUND.getMaxPrestige|default(0) }}"
                     data-actual-prestige="{{ PIRATE_ROUND.getActualPrestige|default(0) }}"
+                    data-remaining-prestige="{{ REMAINING_PRESTIGE|default(0) }}"
                     style="width: 400px; height: 400px; margin: 0 auto; position: relative;">
                     <div id="chartFrame" style="
                         position: absolute; top: 0; left: 0; width: 100%; height: 100%;

tests/inttest/html/__snapshots__/AllViewControllerTest--DATABASE_VIEWS-SHOW_PIRATE_ROUND.html

@@ -93,7 +93,7 @@ <h1>Piraten-Runde</h1>
         <div class="box" style="margin-bottom: 20px;">
             <div class="box_title">Fraktions-Verteilung</div>
             <div class="box_body" style="padding: 20px;">
-                <div id="factionChart" data-factions='[{"id":3,"name":"Klingonisches Imperium","color":"#990000","prestige":370,"ships":17,"percentage":78.72340425531915,"rank":1},{"id":1,"name":"Vereinte F\u00f6deration der Planeten","color":"#000099","prestige":100,"ships":5,"percentage":21.27659574468085,"rank":2}]' data-max-prestige="10000" data-actual-prestige="470" style="width: 400px; height: 400px; margin: 0 auto; position: relative;">
+                <div id="factionChart" data-factions='[{"id":3,"name":"Klingonisches Imperium","color":"#990000","prestige":370,"ships":17,"percentage":78.72340425531915,"rank":1},{"id":1,"name":"Vereinte F\u00f6deration der Planeten","color":"#000099","prestige":100,"ships":5,"percentage":21.27659574468085,"rank":2}]' data-max-prestige="10000" data-actual-prestige="470" data-remaining-prestige="9530" style="width: 400px; height: 400px; margin: 0 auto; position: relative;">
                     <div id="chartFrame" style="
                         position: absolute; top: 0; left: 0; width: 100%; height: 100%;
                         border: 2px solid #00ffff; border-radius: 50%;