diff --git a/static/homepage-roadmap.js b/static/homepage-roadmap.js
index c3936011a4e59cdc3c88061898df1f71b9cc7bc3..8d515d0c252ea9e5ee31fd3020205e6a02f795e9 100644
--- a/static/homepage-roadmap.js
+++ b/static/homepage-roadmap.js
@@ -1,358 +1,272 @@
-// var current_line = 300;
-// var lines = [300, 180, 1040, 180, 1120, 480, 700, 180, 600, 180, 210, 180, 630, 1120, 260, 180];
-// var r = 30;
-// var start_height = 300;
-// var speed = 10;
-// var top_screen;
-// var bottom_screen;
+var current_line = 300;
+var lines = [300, 180, 1040, 180, 1120, 480, 700, 180, 600, 180, 210, 180, 630, 1120, 260, 180];
+var r = 30;
+var start_height = 300;
+var speed = 10;
+var top_screen;
+var bottom_screen;
-// function canDraw(y1, y2) {
-// if (y2 < top_screen || y1 > bottom_screen) return false;
-// else return true;
-// }
-
-// function verticalLine(x, y1, y2, ctx, canvas_h) {
-// if (current_line >= y1 && canvas_h >= start_height) {
-// if (canDraw(y1, y2)) ctx.moveTo(x, y1);
-// if (current_line > y2){
-// if (canDraw(y1, y2)) ctx.lineTo(x, y2);
-// }
-// else if(current_line < y2){
-// if (canDraw(y1, y2)) ctx.lineTo(x, current_line);
-// if (canvas_h > current_line){
-// current_line+=speed;
-// setTimeout("draw()", 5);
-// }
-// else if (canvas_h < current_line){
-// current_line-=speed;
-// setTimeout("draw()", 5);
-// }
-// }
-// else{
-// ctx.lineTo(x, y2);
-// if (canvas_h < current_line){
-// current_line-=speed;
-// }
-// }
-// }
-// }
-// function circularArc(x, y, ctx, canvas_h, typeID, lineID) { // r = 100
-// if (typeID == 1) {
-// if (current_line >= y){
-// if (current_line > y+r){
-// if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI, Math.PI/2, true);
-// }
-// else if (current_line < y+r){
-// if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI, Math.PI-Math.asin((Math.min(current_line,y+r)-y) / r), true);
-// if (canvas_h > current_line){
-// current_line+=speed;
-// setTimeout("draw()", 5);
-// }
-// else if (canvas_h < current_line && lines[lineID] == x){
-// current_line-=speed;
-// setTimeout("draw(), 5");
-// }
-// }
-// else{
-// if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI, Math.PI/2, true);
-// if (canvas_h < current_line && lines[lineID] == x){
-// current_line-=speed;
-// }
-// }
-// }
-// }
-// else if (typeID == 2) {
-// if (current_line >= y-r && lines[lineID] == x){
-// if (current_line > y){
-// if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI*1.5, 0, false);
-// }
-// else if (current_line < y){
-// if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI*1.5, Math.PI*1.5+Math.acos((y-current_line)/r), false);
-// if (canvas_h > current_line){
-// current_line+=speed;
-// setTimeout("draw()", 5);
-// }
-// else if (canvas_h < current_line){
-// current_line-=speed;
-// setTimeout("draw()", 5);
-// }
-// }
-// else{
-// if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI*1.5, 0, false);
-// if (canvas_h < current_line){
-// current_line-=speed;
-// }
-// }
-// }
-// }
-// else if (typeID == 3) {
-// if (current_line >= y){
-// if (current_line > y+r){
-// if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, 0, Math.PI/2, false);
-// }
-// else if (current_line < y+r){
-// if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, 0, Math.asin((current_line-y)/r), false);
-// if (canvas_h > current_line){
-// current_line+=speed;
-// setTimeout("draw()", 5);
-// }
-// else if (canvas_h < current_line){
-// current_line-=speed;
-// setTimeout("draw()", 5);
-// }
-// }
-// else{
-// if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, 0, Math.PI/2, false);
-// if (canvas_h < current_line && lines[lineID] == x){
-// current_line-=speed;
-// }
-// }
-// }
-// }
-// else if (typeID == 4) {
-// if (current_line >= y-r && lines[lineID] == x){
-// if (current_line > y){
-// if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI*1.5, Math.PI, true);
-// }
-// else if (current_line < y){
-// if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI*1.5, Math.PI + Math.asin((y-current_line)/r), true);
-// if (canvas_h > current_line){
-// current_line+=speed;
-// setTimeout("draw()", 5);
-// }
-// else if (canvas_h < current_line){
-// current_line-=speed;
-// setTimeout("draw()", 5);
-// }
-// }
-// else{
-// if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI*1.5, Math.PI, true);
-// if (canvas_h < current_line){
-// current_line-=speed;
-// }
-// }
-// }
-// }
-// }
-// function horizontalLine(x1, x2, y, ctx, canvas_h, typeID, lineID) {
-// if (typeID == 1) {
-// if (current_line >= y && canvas_h >= y){
-// if (canDraw(y - 150, y + 150)) ctx.moveTo(x1, y);
-// if (canDraw(y - 150, y + 150) && x1 != lines[lineID]) ctx.lineTo(lines[lineID], y);
-// if (lines[lineID] < x2){
-// lines[lineID] += 10;
-// }
-// if (lines[lineID] < x2){
-// setTimeout("draw()", 120);
-// }
-// }
-// if (canvas_h < y && lines[lineID] > x1 && current_line == y){
-// if (canDraw(y - 150, y + 150)) ctx.moveTo(x1, y);
-// if (canDraw(y - 150, y + 150) && x1 != lines[lineID]) ctx.lineTo(lines[lineID], y);
-// if (lines[lineID] > x1){
-// lines[lineID] -= 10;
-// }
-// if (lines[lineID] > x1){
-// setTimeout("draw()", 80);
-// }
-// }
-// }
-// else if (typeID == 2) {
-// if (current_line >= y && canvas_h >= y){
-// if (canDraw(y - 150, y + 150)) ctx.moveTo(x1, y);
-// if (canDraw(y - 150, y + 150) && x1 != lines[lineID]) ctx.lineTo(lines[lineID], y);
-// if (lines[lineID] > x2){
-// lines[lineID] -= 10;
-// }
-// if (lines[lineID] > x2){
-// setTimeout("draw()", 120);
-// }
-// }
-// if (canvas_h < y && lines[lineID] < x1 && current_line == y){
-// if (canDraw(y - 150, y + 150)) ctx.moveTo(x1, y);
-// if (canDraw(y - 150, y + 150) && x1 != lines[lineID]) ctx.lineTo(lines[lineID], y);
-// if (lines[lineID] < x1){
-// lines[lineID] += 10;
-// }
-// if (lines[lineID] < x1){
-// setTimeout("draw()", 80);
-// }
-// }
-// }
-// }
-// function draw(){
-// /** @type {HTMLCanvasElement} */
-// let scrTop = document.documentElement.scrollTop;
-// var canvas = document.getElementById("roadmap")
-// canvas.width = 1300;
-// canvas.height = 3000;
-// let cvs_h = canvas.getBoundingClientRect().top + scrTop;
-// let cur_h = document.documentElement.clientHeight / 1.8 + scrTop;
-// top_screen = Math.floor(-canvas.getBoundingClientRect().top);
-// bottom_screen = Math.floor(document.documentElement.clientHeight + scrTop - cvs_h);
-// let canvas_h = Math.floor(cur_h - cvs_h);
-// if (canvas_h % 10 == 9) {
-// canvas_h -= 9;
-// }
-// if (canvas_h % 10 == 8) {
-// canvas_h -= 8;
-// }
-// if (canvas_h % 10 == 7) {
-// canvas_h -= 7;
-// }
-// if (canvas_h % 10 == 6) {
-// canvas_h -= 6;
-// }
-// if (canvas_h % 10 == 5) {
-// canvas_h -= 5;
-// }
-// if (canvas_h % 10 == 4) {
-// canvas_h -= 4;
-// }
-// if (canvas_h % 10 == 3) {
-// canvas_h -= 3;
-// }
-// if (canvas_h % 10 == 2) {
-// canvas_h -= 2;
-// }
-// if (canvas_h % 10 == 1) {
-// canvas_h -= 1;
-// }
-
-// if(!canvas.getContext) return;
-// var ctx = canvas.getContext("2d");
-// var gradient = ctx.createLinearGradient(0, 0, 0, 13370);
-// 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");
-// ctx.strokeStyle = gradient;
-// // ctx.shadowColor = "#00508A";
-// // ctx.shadowBlur = 20;
-// ctx.lineWidth = 17;
-// ctx.lineCap = 'round';
-// ctx.lineJoin = 'round';
-// ctx.beginPath();
-// // console.log(current_line, canvas_h);
-
-// if (canvas_h < start_height){
-// current_line = start_height;
-// }
-
-
-// var centerX = canvas.width / 2;
-// verticalLine(centerX, 200, 3000, ctx, canvas_h);
-
-// circularArc(centerX - 30, 600, ctx, canvas_h, 3, 0);
-
-// horizontalLine(centerX - 30, centerX - 400, 630, ctx, canvas_h, 2, 0);
-
-// circularArc(centerX + 30, 1200, ctx, canvas_h, 1, 1);
-// horizontalLine(centerX + 30, centerX + 400, 1230, ctx, canvas_h, 1, 1);
-
-// circularArc(centerX - 30, 1800, ctx, canvas_h, 3, 2);
-// horizontalLine(centerX - 30, centerX - 400, 1830, ctx, canvas_h, 2, 2);
-
-// circularArc(centerX + 30, 2400, ctx, canvas_h, 1, 3);
-// horizontalLine(centerX + 30, centerX + 400, 2430, ctx, canvas_h, 1, 3);
-
-// ctx.stroke()
-// canvas.style.backgroundColor="transparent";
-// }
-let branchesDrawn = [false, false, false, false]; // Track which branches have been drawn
-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) {
- // Draw the vertical line from y1 to the current height y2
- ctx.moveTo(x, y1);
- ctx.lineTo(x, y2);
+function canDraw(y1, y2) {
+ if (y2 < top_screen || y1 > bottom_screen) return false;
+ else return true;
}
-function circularArc(x, y, ctx, typeID) {
- if (typeID == 1) {
- ctx.arc(x, y, 30, Math.PI, Math.PI / 2, true); // top-left curve
- } else if (typeID == 2) {
- ctx.arc(x, y, 30, Math.PI * 1.5, 0, false); // top-right curve
- } else if (typeID == 3) {
- ctx.arc(x, y, 30, 0, Math.PI / 2, false); // bottom-right curve
- } else if (typeID == 4) {
- ctx.arc(x, y, 30, Math.PI * 1.5, Math.PI, true); // bottom-left curve
+function verticalLine(x, y1, y2, ctx, canvas_h) {
+ if (current_line >= y1 && canvas_h >= start_height) {
+ if (canDraw(y1, y2)) ctx.moveTo(x, y1);
+ if (current_line > y2){
+ if (canDraw(y1, y2)) ctx.lineTo(x, y2);
+ }
+ else if(current_line < y2){
+ if (canDraw(y1, y2)) ctx.lineTo(x, current_line);
+ if (canvas_h > current_line){
+ current_line+=speed;
+ setTimeout("draw()", 5);
+ }
+ else if (canvas_h < current_line){
+ current_line-=speed;
+ setTimeout("draw()", 5);
+ }
+ }
+ else{
+ ctx.lineTo(x, y2);
+ if (canvas_h < current_line){
+ current_line-=speed;
+ }
+ }
}
}
-
-function horizontalLine(x1, x2, y, ctx) {
- ctx.moveTo(x1, y);
- ctx.lineTo(x2, y);
+function circularArc(x, y, ctx, canvas_h, typeID, lineID) { // r = 100
+ if (typeID == 1) {
+ if (current_line >= y){
+ if (current_line > y+r){
+ if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI, Math.PI/2, true);
+ }
+ else if (current_line < y+r){
+ if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI, Math.PI-Math.asin((Math.min(current_line,y+r)-y) / r), true);
+ if (canvas_h > current_line){
+ current_line+=speed;
+ setTimeout("draw()", 5);
+ }
+ else if (canvas_h < current_line && lines[lineID] == x){
+ current_line-=speed;
+ setTimeout("draw(), 5");
+ }
+ }
+ else{
+ if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI, Math.PI/2, true);
+ if (canvas_h < current_line && lines[lineID] == x){
+ current_line-=speed;
+ }
+ }
+ }
+ }
+ else if (typeID == 2) {
+ if (current_line >= y-r && lines[lineID] == x){
+ if (current_line > y){
+ if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI*1.5, 0, false);
+ }
+ else if (current_line < y){
+ if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI*1.5, Math.PI*1.5+Math.acos((y-current_line)/r), false);
+ if (canvas_h > current_line){
+ current_line+=speed;
+ setTimeout("draw()", 5);
+ }
+ else if (canvas_h < current_line){
+ current_line-=speed;
+ setTimeout("draw()", 5);
+ }
+ }
+ else{
+ if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI*1.5, 0, false);
+ if (canvas_h < current_line){
+ current_line-=speed;
+ }
+ }
+ }
+ }
+ else if (typeID == 3) {
+ if (current_line >= y){
+ if (current_line > y+r){
+ if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, 0, Math.PI/2, false);
+ }
+ else if (current_line < y+r){
+ if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, 0, Math.asin((current_line-y)/r), false);
+ if (canvas_h > current_line){
+ current_line+=speed;
+ setTimeout("draw()", 5);
+ }
+ else if (canvas_h < current_line){
+ current_line-=speed;
+ setTimeout("draw()", 5);
+ }
+ }
+ else{
+ if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, 0, Math.PI/2, false);
+ if (canvas_h < current_line && lines[lineID] == x){
+ current_line-=speed;
+ }
+ }
+ }
+ }
+ else if (typeID == 4) {
+ if (current_line >= y-r && lines[lineID] == x){
+ if (current_line > y){
+ if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI*1.5, Math.PI, true);
+ }
+ else if (current_line < y){
+ if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI*1.5, Math.PI + Math.asin((y-current_line)/r), true);
+ if (canvas_h > current_line){
+ current_line+=speed;
+ setTimeout("draw()", 5);
+ }
+ else if (canvas_h < current_line){
+ current_line-=speed;
+ setTimeout("draw()", 5);
+ }
+ }
+ else{
+ if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI*1.5, Math.PI, true);
+ if (canvas_h < current_line){
+ current_line-=speed;
+ }
+ }
+ }
+ }
}
-
-function drawBranch(ctx, index) {
- var centerX = ctx.canvas.width / 2;
-
- // Draw branches based on the index
- if (index === 0) {
- circularArc(centerX - 30, 600, ctx, 3);
- horizontalLine(centerX - 30, centerX - 400, 630, ctx);
- } else if (index === 1) {
- circularArc(centerX + 30, 1200, ctx, 1);
- horizontalLine(centerX + 30, centerX + 400, 1230, ctx);
- } else if (index === 2) {
- circularArc(centerX - 30, 1800, ctx, 3);
- horizontalLine(centerX - 30, centerX - 400, 1830, ctx);
- } else if (index === 3) {
- circularArc(centerX + 30, 2400, ctx, 1);
- horizontalLine(centerX + 30, centerX + 400, 2430, ctx);
+function horizontalLine(x1, x2, y, ctx, canvas_h, typeID, lineID) {
+ if (typeID == 1) {
+ if (current_line >= y && canvas_h >= y){
+ if (canDraw(y - 150, y + 150)) ctx.moveTo(x1, y);
+ if (canDraw(y - 150, y + 150) && x1 != lines[lineID]) ctx.lineTo(lines[lineID], y);
+ if (lines[lineID] < x2){
+ lines[lineID] += 10;
+ }
+ if (lines[lineID] < x2){
+ setTimeout("draw()", 120);
+ }
+ }
+ if (canvas_h < y && lines[lineID] > x1 && current_line == y){
+ if (canDraw(y - 150, y + 150)) ctx.moveTo(x1, y);
+ if (canDraw(y - 150, y + 150) && x1 != lines[lineID]) ctx.lineTo(lines[lineID], y);
+ if (lines[lineID] > x1){
+ lines[lineID] -= 10;
+ }
+ if (lines[lineID] > x1){
+ setTimeout("draw()", 80);
+ }
+ }
+ }
+ else if (typeID == 2) {
+ if (current_line >= y && canvas_h >= y){
+ if (canDraw(y - 150, y + 150)) ctx.moveTo(x1, y);
+ if (canDraw(y - 150, y + 150) && x1 != lines[lineID]) ctx.lineTo(lines[lineID], y);
+ if (lines[lineID] > x2){
+ lines[lineID] -= 10;
+ }
+ if (lines[lineID] > x2){
+ setTimeout("draw()", 120);
+ }
+ }
+ if (canvas_h < y && lines[lineID] < x1 && current_line == y){
+ if (canDraw(y - 150, y + 150)) ctx.moveTo(x1, y);
+ if (canDraw(y - 150, y + 150) && x1 != lines[lineID]) ctx.lineTo(lines[lineID], y);
+ if (lines[lineID] < x1){
+ lines[lineID] += 10;
+ }
+ if (lines[lineID] < x1){
+ setTimeout("draw()", 80);
+ }
+ }
}
-
- branchesDrawn[index] = true; // Mark the branch as drawn
}
-
-function draw() {
- let canvas = document.getElementById("roadmap");
+function draw(){
+ /** @type {HTMLCanvasElement} */
+ let scrTop = document.documentElement.scrollTop;
+ var canvas = document.getElementById("roadmap")
canvas.width = 1300;
- canvas.height = totalHeight;
+ canvas.height = 3000;
+ let cvs_h = canvas.getBoundingClientRect().top + scrTop;
+ let cur_h = document.documentElement.clientHeight / 1.8 + scrTop;
+ top_screen = Math.floor(-canvas.getBoundingClientRect().top);
+ bottom_screen = Math.floor(document.documentElement.clientHeight + scrTop - cvs_h);
+ let canvas_h = Math.floor(cur_h - cvs_h);
+ if (canvas_h % 10 == 9) {
+ canvas_h -= 9;
+ }
+ if (canvas_h % 10 == 8) {
+ canvas_h -= 8;
+ }
+ if (canvas_h % 10 == 7) {
+ canvas_h -= 7;
+ }
+ if (canvas_h % 10 == 6) {
+ canvas_h -= 6;
+ }
+ if (canvas_h % 10 == 5) {
+ canvas_h -= 5;
+ }
+ if (canvas_h % 10 == 4) {
+ canvas_h -= 4;
+ }
+ if (canvas_h % 10 == 3) {
+ canvas_h -= 3;
+ }
+ if (canvas_h % 10 == 2) {
+ canvas_h -= 2;
+ }
+ if (canvas_h % 10 == 1) {
+ canvas_h -= 1;
+ }
- if (!canvas.getContext) return;
+ if(!canvas.getContext) return;
var ctx = canvas.getContext("2d");
- var gradient = ctx.createLinearGradient(0, 0, 0, totalHeight);
+ var gradient = ctx.createLinearGradient(0, 0, 0, 13370);
gradient.addColorStop(0, "#185A4F");
- gradient.addColorStop(1, "#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");
ctx.strokeStyle = gradient;
+ // ctx.shadowColor = "#00508A";
+ // ctx.shadowBlur = 20;
ctx.lineWidth = 17;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.beginPath();
+ // console.log(current_line, canvas_h);
- 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
+ if (canvas_h < start_height){
+ current_line = start_height;
+ }
- // Clear the canvas to redraw
- ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ var centerX = canvas.width / 2;
+ verticalLine(centerX, 200, 3000, ctx, canvas_h);
- // Draw the vertical line, growing with scrolling
- var centerX = canvas.width / 2;
- verticalLine(centerX, 200, maxLineHeight, ctx); // Vertical line grows with scroll
+ circularArc(centerX - 30, 600, ctx, canvas_h, 3, 0);
- // 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); // Draw the branch if the user has scrolled past its position
- }
- });
-
- ctx.stroke();
+ horizontalLine(centerX - 30, centerX - 400, 630, ctx, canvas_h, 2, 0);
+
+ circularArc(centerX + 30, 1200, ctx, canvas_h, 1, 1);
+ horizontalLine(centerX + 30, centerX + 400, 1230, ctx, canvas_h, 1, 1);
+
+ circularArc(centerX - 30, 1800, ctx, canvas_h, 3, 2);
+ horizontalLine(centerX - 30, centerX - 400, 1830, ctx, canvas_h, 2, 2);
+
+ circularArc(centerX + 30, 2400, ctx, canvas_h, 1, 3);
+ horizontalLine(centerX + 30, centerX + 400, 2430, ctx, canvas_h, 1, 3);
+
+ ctx.stroke()
+ canvas.style.backgroundColor="transparent";
}
-
-// Redraw on scroll event
+draw();
window.addEventListener('scroll', draw);
-// Initial draw
-draw();
\ No newline at end of file