From 172d8ccb1263d90a360666a03c425e3a54673d36 Mon Sep 17 00:00:00 2001
From: Shraddha <ShraddhaRaghuram@student.tudelft.nl>
Date: Mon, 30 Sep 2024 12:30:57 +0200
Subject: [PATCH] roadmap
---
static/homepage-roadmap.js | 32 ++++++++++++--------------------
1 file changed, 12 insertions(+), 20 deletions(-)
diff --git a/static/homepage-roadmap.js b/static/homepage-roadmap.js
index 8edb6a3..75617be 100644
--- a/static/homepage-roadmap.js
+++ b/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);
}
});
--
GitLab