laantungir
/
super_ball
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Left right visuals on visualizer

This commit is contained in:
Your Name 2025-09-24 18:14:59 -04:00
parent 6d5079561a
commit 41fcbfd9ca
1 changed files with 20 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
web/superball.html
View File

@ -1489,7 +1489,7 @@
// Generate the "Throw the Superball" button HTML // Generate the "Throw the Superball" button HTML
function generateThrowButtonHtml() { function generateThrowButtonHtml() {
return ` 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">
<div class="step-time-relative">Ready</div> <div class="step-time-relative">Ready</div>
<div class="step-time-absolute" style="font-size: 10px; color: #888;">Click to start</div> <div class="step-time-absolute" style="font-size: 10px; color: #888;">Click to start</div>
@ -1760,8 +1760,16 @@
// Generate HTML for timeline visualization // Generate HTML for timeline visualization
function generateTimelineHtml(eventFlow) { function generateTimelineHtml(eventFlow) {
return eventFlow.map((step, index) => ` return eventFlow.map((step, index) => {
<div class="timeline-step" id="timeline-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">
<div class="step-time-relative">${formatTime(step.time)}</div> <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 class="step-time-absolute" style="font-size: 10px; color: #888;">${formatAbsoluteTime(step.time)}</div>
@ -1770,7 +1778,8 @@
<div class="step-action">${step.action}</div> <div class="step-action">${step.action}</div>
<div class="step-size">${step.size} bytes</div> <div class="step-size">${step.size} bytes</div>
</div> </div>
`).join(''); `;
}).join('');
} }
// Format absolute time (HH:MM:SS) // Format absolute time (HH:MM:SS)