roadmap

static/homepage-roadmap.js

@@ -273,11 +273,13 @@ let branchPositions = [600, 1200, 1800, 2400];  // The vertical positions where
 let totalHeight = 3000;  // Total height for the vertical line
 
 function verticalLine(x, y1, y2, ctx) {
+    // Draw the vertical line from y1 to the current height y2
     ctx.moveTo(x, y1);
     ctx.lineTo(x, y2);
 }
 
 function circularArc(x, y, ctx, typeID) {
+    // Draw arcs for the branches
     if (typeID == 1) {
         ctx.arc(x, y, 30, Math.PI, Math.PI/2, true);  // top-left curve
     }
@@ -293,6 +295,7 @@ function circularArc(x, y, ctx, typeID) {
 }
 
 function horizontalLine(x1, x2, y, ctx) {
+    // Draw the horizontal lines (branches)
     ctx.moveTo(x1, y);
     ctx.lineTo(x2, y);
 }
@@ -318,7 +321,7 @@ function drawBranch(ctx, index) {
         horizontalLine(centerX + 30, centerX + 400, 2430, ctx);
     }
 
-    branchesDrawn[index] = true;
+    branchesDrawn[index] = true;  // Mark the branch as drawn
 }
 
 function draw() {
@@ -337,18 +340,17 @@ function draw() {
     ctx.lineJoin = 'round';
     ctx.beginPath();
 
-    var scrTop = document.documentElement.scrollTop;  // Get the scroll position
-    var canvas_h = ctx.canvas.height;
-    var maxLineHeight = Math.min(scrTop + window.innerHeight * 0.8, totalHeight);  // Limit vertical line growth to the total height
+    var scrTop = document.documentElement.scrollTop;  // Get the current scroll position
+    var maxLineHeight = Math.min(scrTop + window.innerHeight * 0.8, totalHeight);  // Limit the growth of the vertical line
 
-    // Draw the vertical line as it grows with scrolling
+    // Draw the vertical line, growing with scrolling
     var centerX = canvas.width / 2;
-    verticalLine(centerX, 200, maxLineHeight, ctx);
+    verticalLine(centerX, 200, maxLineHeight, ctx);  // Vertical line grows with scroll
 
     // Draw branches as the user scrolls past their designated positions
     branchPositions.forEach((pos, index) => {
         if (scrTop > pos - window.innerHeight * 0.8 && !branchesDrawn[index]) {
-            drawBranch(ctx, index);
+            drawBranch(ctx, index);  // Draw the branch if the user has scrolled past its position
         }
     });