From de6fc77a1b4becf5841881fa4fb7bd78141d81dc Mon Sep 17 00:00:00 2001
From: skal <pascal.massimino@gmail.com>
Date: Sat, 7 Feb 2026 18:56:08 +0100
Subject: fix(track_visualizer): Convert beats to seconds correctly

- Added beatsToSeconds() helper function
- Renamed getPatternDuration to getPatternDurationBeats for clarity
- Pattern durations now correctly calculated in seconds (was treating beats as seconds)
- Fixes visualization showing incorrect pattern box widths
---
 tools/track_visualizer/index.html | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

(limited to 'tools/track_visualizer/index.html')

diff --git a/tools/track_visualizer/index.html b/tools/track_visualizer/index.html
index 70a5fd8..dea358d 100644
--- a/tools/track_visualizer/index.html
+++ b/tools/track_visualizer/index.html
@@ -212,12 +212,18 @@
       return { patterns, score };
     }
 
-    // Calculate pattern duration (max beat time)
-    function getPatternDuration(pattern) {
+    // Calculate pattern duration in beats
+    function getPatternDurationBeats(pattern) {
       if (pattern.length === 0) return 4.0; // Default 4 beats
       return Math.max(...pattern.map(e => e.beat)) + 1.0;
     }
 
+    // Convert beats to seconds (120 BPM = 2 beats per second)
+    function beatsToSeconds(beats) {
+      const beatsPerSecond = 2; // 120 BPM
+      return beats / beatsPerSecond;
+    }
+
     // Draw timeline
     function drawTimeline() {
       if (!trackData) return;
@@ -226,7 +232,7 @@
 
       // Find max time for canvas sizing
       const maxTime = score.length > 0
-        ? Math.max(...score.map(s => s.time + getPatternDuration(patterns[s.pattern] || [])))
+        ? Math.max(...score.map(s => s.time + beatsToSeconds(getPatternDurationBeats(patterns[s.pattern] || []))))
         : 60;
 
       // Update canvas size
@@ -247,7 +253,8 @@
       const stackedPatterns = [];
       for (const entry of score) {
         const startTime = entry.time;
-        const duration = getPatternDuration(patterns[entry.pattern] || []);
+        const durationBeats = getPatternDurationBeats(patterns[entry.pattern] || []);
+        const duration = beatsToSeconds(durationBeats);
         const endTime = startTime + duration;
 
         // Find stack level (avoid overlaps)
-- 
cgit v1.2.3