roadmap

static/homepage-roadmap.js

@@ -269,7 +269,8 @@
 // }
 
 let branchesDrawn = [false, false, false, false];  // Track which branches have been drawn
-let branchPositions = [600, 1200, 1800, 2400];  // The vertical positions of each branch
+let branchPositions = [600, 1200, 1800, 2400];  // The vertical positions where branches appear
+let totalHeight = 3000;  // Total height for the vertical line
 
 function verticalLine(x, y1, y2, ctx) {
     ctx.moveTo(x, y1);
@@ -296,10 +297,10 @@ function horizontalLine(x1, x2, y, ctx) {
     ctx.lineTo(x2, y);
 }
 
-function drawBranch(ctx, canvas_h, index) {
+function drawBranch(ctx, index) {
     var centerX = ctx.canvas.width / 2;
 
-    // Draw branches based on the index (ensuring they remain independent)
+    // Draw branches based on the index
     if (index === 0) {
         circularArc(centerX - 30, 600, ctx, 3);
         horizontalLine(centerX - 30, centerX - 400, 630, ctx);
@@ -323,23 +324,13 @@ function drawBranch(ctx, canvas_h, index) {
 function draw() {
     let canvas = document.getElementById("roadmap");
     canvas.width = 1300;
-    canvas.height = 3000;
+    canvas.height = totalHeight;
 
     if (!canvas.getContext) return;
     var ctx = canvas.getContext("2d");
-    var gradient = ctx.createLinearGradient(0, 0, 0, 13370);
+    var gradient = ctx.createLinearGradient(0, 0, 0, totalHeight);
     gradient.addColorStop(0, "#185A4F");
-    gradient.addColorStop(0.36, "#185A4F");
-    gradient.addColorStop(0.373, "#05BE85");
-    gradient.addColorStop(0.381, "#05BE85");
-    gradient.addColorStop(0.387, "#05BE85");
-    gradient.addColorStop(0.38, "#05BE85");
-    gradient.addColorStop(0.41, "#185A4F");
-    gradient.addColorStop(0.53534, "#185A4F");
-    gradient.addColorStop(0.57648, "#62D881");
-    gradient.addColorStop(0.63287, "#62D881");
-    gradient.addColorStop(0.68127, "#185A4F");
-    gradient.addColorStop(1,"#185A4F");
+    gradient.addColorStop(1, "#185A4F");
     ctx.strokeStyle = gradient;
     ctx.lineWidth = 17;
     ctx.lineCap = 'round';
@@ -348,15 +339,16 @@ function draw() {
 
     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
 
-    // Draw the main vertical line
+    // Draw the vertical line as it grows with scrolling
     var centerX = canvas.width / 2;
-    verticalLine(centerX, 200, 3000, ctx);
+    verticalLine(centerX, 200, maxLineHeight, ctx);
 
-    // Draw branches as the user scrolls down
+    // 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, canvas_h, index);
+            drawBranch(ctx, index);
         }
     });