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

31
web/superball.html
View File

@ -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)