🐞 fix: Add live timer to ship details page

ship-details.php

@@ -341,7 +341,13 @@ function formatString( $str ) {
                 <h2 class="text-xl font-bold mb-2">Cargo / Fuel</h2>
                 <p><span class="font-bold">Cargo:</span> <?php echo number_format( (int) ( $ship['cargo']['units'] ?? 0 ) ); ?> / <?php echo number_format( (int) ( $ship['cargo']['capacity'] ?? 0 ) ); ?></p>
                 <p><span class="font-bold">Fuel:</span> <?php echo number_format( (int) ( $ship['fuel']['current'] ?? 0 ) ); ?> / <?php echo number_format( (int) ( $ship['fuel']['capacity'] ?? 0 ) ); ?></p>
-                <p><span class="font-bold">Cooldown Remaining:</span> <?php echo number_format( (int) ( $ship['cooldown']['remainingSeconds'] ?? 0 ) ); ?>s</p>
+                <p>
+                    <span class="font-bold">Cooldown Remaining:</span>
+                    <span
+                        class="ship-cooldown"
+                        data-seconds="<?php echo htmlspecialchars( (string) max( 0, (int) ( $ship['cooldown']['remainingSeconds'] ?? 0 ) ) ); ?>"
+                    ></span>
+                </p>
             </div>
         </div>
 
@@ -437,6 +443,7 @@ function formatString( $str ) {
     <script>
     (function() {
         const navTimerNodes = document.querySelectorAll('.ship-nav-timer');
+        const cooldownNodes = document.querySelectorAll('.ship-cooldown');
 
         function formatNavTimer(seconds) {
             if (seconds <= 0) {
@@ -455,6 +462,22 @@ function formatString( $str ) {
             return `${minutes}:${String(secs).padStart(2, '0')}`;
         }
 
+        function formatCooldown(seconds) {
+            if (seconds <= 0) {
+                return 'Ready';
+            }
+
+            const total = Math.max(0, Math.floor(seconds));
+            const mins = Math.floor(total / 60);
+            const secs = total % 60;
+
+            if (mins > 0) {
+                return `${mins}:${String(secs).padStart(2, '0')}`;
+            }
+
+            return `${secs}s`;
+        }
+
         function renderNavTimers() {
             const nowMs = Date.now();
 
@@ -478,9 +501,26 @@ function formatString( $str ) {
             });
         }
 
+        function renderCooldownTimers() {
+            cooldownNodes.forEach((node) => {
+                const seconds = Number(node.dataset.seconds || '0');
+                node.textContent = formatCooldown(seconds);
+            });
+        }
+
         renderNavTimers();
-        if (navTimerNodes.length > 0) {
-            window.setInterval(renderNavTimers, 1000);
+        renderCooldownTimers();
+
+        if (navTimerNodes.length > 0 || cooldownNodes.length > 0) {
+            window.setInterval(() => {
+                renderNavTimers();
+
+                cooldownNodes.forEach((node) => {
+                    const current = Number(node.dataset.seconds || '0');
+                    node.dataset.seconds = String(Math.max(0, current - 1));
+                });
+                renderCooldownTimers();
+            }, 1000);
         }
     })();
     </script>