.

web/superball.html

@@ -1128,7 +1128,7 @@
       bounceSection.id = `bounce-${bounceId}`;
 
       bounceSection.innerHTML = `
-        <h2 id="bounce-${bounceId}-header">Bounce ${bounceId} (Kind 22222 Routing Event)</h2>
+        <h2 id="bounce-${bounceId}-header">Add a bounce (Kind 22222 Routing Event)</h2>
         <div class="input-group">
           <label for="thrower-select-${bounceId}">Thrower:</label>
           <select id="thrower-select-${bounceId}" onchange="onThrowerSelect(${bounceId})" style="width: 100%; margin-bottom: 10px;">
@@ -1172,7 +1172,7 @@
           <label for="audit-tag-${bounceId}">Audit Tag (auto-generated):</label>
           <input type="text" id="audit-tag-${bounceId}" readonly style="background: #f5f5f5;">
         </div>
-        <button onclick="createBounce(${bounceId})" id="create-bounce-btn-${bounceId}">Create Bounce ${bounceId}</button>
+        <button onclick="createBounce(${bounceId})" id="create-bounce-btn-${bounceId}">Create Bounce</button>
         
         <div id="bounce-${bounceId}-display" class="json-display"></div>
         <div style="text-align: right; margin-top: 5px;">
@@ -1203,36 +1203,10 @@
       // Populate thrower dropdown with discovered throwers
       populateThrowerDropdown(bounceId);
 
-      // Update bounce labels to reflect execution order
+      // Labels are now generic, no need to update numbering
-      updateBounceLabels();
     }
 
-    // Update bounce labels to reflect execution order (newest bounce is Bounce 1, oldest is Bounce N)
+    // Bounce labels are now generic - no numbering needed
-    function updateBounceLabels() {
-      // Get all existing bounce sections
-      const bounceContainer = document.getElementById('bounces-container');
-      const bounceSections = bounceContainer.querySelectorAll('.bounce-section');
-
-      // Update labels in reverse order (newest first gets Bounce 1)
-      bounceSections.forEach((section, index) => {
-        const bounceId = section.id.replace('bounce-', '');
-        const executionOrder = bounceSections.length - index; // Reverse the index
-
-        // Update the header
-        const header = document.getElementById(`bounce-${bounceId}-header`);
-        if (header) {
-          header.textContent = `Bounce ${executionOrder} (Kind 22222 Routing Event)`;
-        }
-
-        // Update the create button text
-        const createBtn = document.getElementById(`create-bounce-btn-${bounceId}`);
-        if (createBtn) {
-          createBtn.textContent = `Create Bounce ${executionOrder}`;
-        }
-      });
-
-      console.log('INFO: Updated bounce labels for execution order');
-    }
 
     // Update all timeline absolute times continuously
     function updateAllTimelineTimes() {
@@ -1431,8 +1405,7 @@
         // Show the Add Bounce button again now that this bounce is completed
         document.getElementById('add-bounce-btn').classList.remove('hidden');
 
-        // Update bounce labels after creation to reflect execution order
+        // Labels are generic, no update needed
-        updateBounceLabels();
 
       } catch (error) {
         console.log('ERROR', `Failed to create bounce ${bounceId}: ${error.message}`);
@@ -1638,11 +1611,12 @@
       // Start with user sending the outermost bounce
       let currentTime = baseTime;
 
-      // Work forward through bounces (in order they were created)
+      // Work forward through bounces (in EXECUTION order - reverse of creation order)
-      bounces.forEach((bounce, index) => {
+      const reversedBounces = [...bounces].reverse();
-        const bounceNumber = index + 1;
+      reversedBounces.forEach((bounce, index) => {
-        const isFirst = (index === 0);
+        const bounceNumber = bounces.length - index; // Original bounce number
-        const isLast = (index === bounces.length - 1);
+        const isFirst = (index === 0); // First in execution (last created)
+        const isLast = (index === reversedBounces.length - 1); // Last in execution (first created)
         const throwerName = getThrowerName(bounce, bounceNumber);
 
         if (isFirst) {
@@ -1763,7 +1737,8 @@
 
     // Helper functions for bounce data extraction
     function getRelaysForBounce(bounceNumber) {
-      const bounceIndex = bounceNumber - 1;
+      // Convert execution order bounce number to array index (reverse lookup)
+      const bounceIndex = bounces.length - bounceNumber;
       if (bounceIndex < 0 || bounceIndex >= bounces.length) return [];
 
       // Get relays from the bounce's routing instructions
@@ -1775,7 +1750,8 @@
     }
 
     function getDelayForBounce(bounceNumber) {
-      const bounceIndex = bounceNumber - 1;
+      // Convert execution order bounce number to array index (reverse lookup)
+      const bounceIndex = bounces.length - bounceNumber;
       if (bounceIndex < 0 || bounceIndex >= bounces.length) return 30;
 
       const bounce = bounces[bounceIndex];
@@ -1786,7 +1762,8 @@
     }
 
     function getPaddingAdjustmentForBounce(bounceNumber) {
-      const bounceIndex = bounceNumber - 1;
+      // Convert execution order bounce number to array index (reverse lookup)
+      const bounceIndex = bounces.length - bounceNumber;
       if (bounceIndex < 0 || bounceIndex >= bounces.length) return 0;
 
       const bounce = bounces[bounceIndex];