From 41fcbfd9cac9eaef387a315ff01e817e3847380f Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Wed, 24 Sep 2025 18:14:59 -0400
Subject: [PATCH] Left right visuals on visualizer

---
 web/superball.html | 31 ++++++++++++++++++++-----------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/web/superball.html b/web/superball.html
index 65b827a..c68f1b5 100644
--- a/web/superball.html
+++ b/web/superball.html
@@ -1489,7 +1489,7 @@
     // Generate the "Throw the Superball" button HTML
     function generateThrowButtonHtml() {
       return `
-        <div class="timeline-step throw-button" style="background: white; border: 4px solid #4a90e2; cursor: pointer;" onclick="throwSuperball()">
+        <div class="timeline-step throw-button align-left" style="background: white; border: 4px solid #4a90e2; cursor: pointer; width: 60%; margin-left: 0; margin-right: auto;" onclick="throwSuperball()">
           <div class="step-time">
             <div class="step-time-relative">Ready</div>
             <div class="step-time-absolute" style="font-size: 10px; color: #888;">Click to start</div>
@@ -1760,17 +1760,26 @@
 
     // Generate HTML for timeline visualization
     function generateTimelineHtml(eventFlow) {
-      return eventFlow.map((step, index) => `
-        <div class="timeline-step" id="timeline-step-${index}">
-          <div class="step-time">
-            <div class="step-time-relative">${formatTime(step.time)}</div>
-            <div class="step-time-absolute" style="font-size: 10px; color: #888;">${formatAbsoluteTime(step.time)}</div>
+      return eventFlow.map((step, index) => {
+        // Determine alignment based on actor type
+        const isRelay = step.actor.startsWith('Relay (');
+        const alignmentClass = isRelay ? 'align-right' : 'align-left';
+        const alignmentStyle = isRelay
+          ? 'width: 60%; margin-left: auto; margin-right: 0;'
+          : 'width: 60%; margin-left: 0; margin-right: auto;';
+        
+        return `
+          <div class="timeline-step ${alignmentClass}" id="timeline-step-${index}" style="${alignmentStyle}">
+            <div class="step-time">
+              <div class="step-time-relative">${formatTime(step.time)}</div>
+              <div class="step-time-absolute" style="font-size: 10px; color: #888;">${formatAbsoluteTime(step.time)}</div>
+            </div>
+            <div class="step-actor">${step.actor}</div>
+            <div class="step-action">${step.action}</div>
+            <div class="step-size">${step.size} bytes</div>
           </div>
-          <div class="step-actor">${step.actor}</div>
-          <div class="step-action">${step.action}</div>
-          <div class="step-size">${step.size} bytes</div>
-        </div>
-      `).join('');
+        `;
+      }).join('');
     }
 
     // Format absolute time (HH:MM:SS)