From 0514c6411de9ec32b63df420f7baa4efc64a3e3f Mon Sep 17 00:00:00 2001 From: hizaidii <90659514+hizaidii@users.noreply.github.com> Date: Thu, 15 Feb 2024 18:10:25 +0530 Subject: [PATCH] updated astromovement function to introduce better vertical mapping. Added hover to reveal options button for task cards. --- package-lock.json | 3 + public/css/board.css | 7 +++ public/js/astroFollowFn.js | 125 +++++++++++++++++++++++++------------ 3 files changed, 96 insertions(+), 39 deletions(-) diff --git a/package-lock.json b/package-lock.json index 56c5136..4128cc0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,6 +26,9 @@ "passport-facebook": "^3.0.0", "passport-google-oauth20": "^2.0.0", "passport-local": "^1.0.0" + }, + "engines": { + "node": "18.x" } }, "node_modules/@mapbox/node-pre-gyp": { diff --git a/public/css/board.css b/public/css/board.css index 30ae621..5846f01 100644 --- a/public/css/board.css +++ b/public/css/board.css @@ -196,6 +196,11 @@ body { border: 1px solid var(--primary-purple); } +.taskCard:hover > .taskTitle .task-more-btn { + /* display: block; */ + opacity: 1; +} + .is-dragging { scale: 1.05; box-shadow: 0px 5px 40px rgba(111, 50, 230, 0.5); @@ -245,6 +250,8 @@ body { } .task-more-btn { + /* display: none; */ + opacity: 0; cursor: pointer; } diff --git a/public/js/astroFollowFn.js b/public/js/astroFollowFn.js index f3483b3..f282720 100644 --- a/public/js/astroFollowFn.js +++ b/public/js/astroFollowFn.js @@ -1,68 +1,115 @@ +// var astro = document.querySelector(".solo-astro"); + +// // Set initial position +// var droidX = window.innerWidth / 2; +// var droidY = window.innerHeight - 100; + +// // to define it in percentage --> +// // var droidY = window.innerHeight - window.innerHeight * 0.2; + +// // Variables to keep track of mouse position and speed +// var mouseX = 0; +// var mouseY = 0; +// var speed = 0.6; +// var accelMod = 1.5; + +// function movement() { +// // Calculate distance between mouse and current position +// var distanceX = mouseX - droidX; +// var distanceY = mouseY - droidY; + +// // Calculate acceleration based on distance and acceleration modifier +// var accelerationX = Math.abs(distanceX * accelMod) / 100; +// var accelerationY = Math.abs(distanceY * accelMod) / 100; + +// // Move horizontally +// if (droidX < mouseX) { +// droidX += speed * accelerationX; +// } else { +// droidX -= speed * accelerationX; +// } + +// // Move vertically +// if (droidY < mouseY) { +// droidY += speed * accelerationY; +// } else { +// droidY -= speed * accelerationY; +// } + +// // Constrain vertical movement in pixels +// // if (droidY < window.innerHeight - 400) { +// // droidY = window.innerHeight - 400; +// // } else if (droidY > window.innerHeight - 300) { +// // droidY = window.innerHeight - 300; +// // } + +// // To define the vertical movement constraint in percentage +// if (droidY < window.innerHeight - window.innerHeight * 0.4) { +// droidY = window.innerHeight - window.innerHeight * 0.4; +// } else if (droidY > window.innerHeight - window.innerHeight * 0.3) { +// droidY = window.innerHeight - window.innerHeight * 0.3; +// } + +// // Update element position +// astro.style.left = droidX + "px"; +// astro.style.top = droidY + "px"; + +// // Request animation frame for smooth animation +// requestAnimationFrame(movement); +// } + +// // Update mouse position on mousemove event +// document.addEventListener("mousemove", function (event) { +// mouseX = event.pageX; +// mouseY = event.pageY; +// }); + +// // Start movement function +// movement(); + +// ASTRO FOLLOW FUNCTION BUT WITH BETTER MAPPING FOR VERTICAL MOVEMENT var astro = document.querySelector(".solo-astro"); // Set initial position var droidX = window.innerWidth / 2; var droidY = window.innerHeight - 100; -// to define it in percentage --> -// var droidY = window.innerHeight - window.innerHeight * 0.2; - -// Variables to keep track of mouse position and speed -var mouseX = 0; -var mouseY = 0; -var speed = 0.6; -var accelMod = 1.5; +var speed = 0.65; +var accelMod = 0.85; function movement() { - // Calculate distance between mouse and current position var distanceX = mouseX - droidX; - var distanceY = mouseY - droidY; - - // Calculate acceleration based on distance and acceleration modifier - var accelerationX = Math.abs(distanceX * accelMod) / 100; - var accelerationY = Math.abs(distanceY * accelMod) / 100; // Move horizontally if (droidX < mouseX) { - droidX += speed * accelerationX; + droidX += (speed * Math.abs(distanceX * accelMod)) / 100; } else { - droidX -= speed * accelerationX; + droidX -= (speed * Math.abs(distanceX * accelMod)) / 100; } - // Move vertically - if (droidY < mouseY) { - droidY += speed * accelerationY; - } else { - droidY -= speed * accelerationY; - } - - // Constrain vertical movement in pixels - // if (droidY < window.innerHeight - 400) { - // droidY = window.innerHeight - 400; - // } else if (droidY > window.innerHeight - 300) { - // droidY = window.innerHeight - 300; - // } - - // To define the vertical movement constraint in percentage - if (droidY < window.innerHeight - window.innerHeight * 0.4) { - droidY = window.innerHeight - window.innerHeight * 0.4; - } else if (droidY > window.innerHeight - window.innerHeight * 0.3) { - droidY = window.innerHeight - window.innerHeight * 0.3; - } + // Map mouseY to allowed droidY range + var minY = window.innerHeight - window.innerHeight * 0.5; // Upper bound of droidY + var maxY = window.innerHeight - window.innerHeight * 0.25; // Lower bound of droidY + // Invert the mouseY position since mouseY=0 is at the top but we want it to correspond to maxY + droidY = mapMouseYToRange(mouseY, 0, window.innerHeight, minY, maxY); // Update element position astro.style.left = droidX + "px"; astro.style.top = droidY + "px"; - // Request animation frame for smooth animation requestAnimationFrame(movement); } -// Update mouse position on mousemove event +// Helper function to map mouseY to the droidY range +function mapMouseYToRange(value, fromLow, fromHigh, toLow, toHigh) { + return ((value - fromLow) * (toHigh - toLow)) / (fromHigh - fromLow) + toLow; +} + +var mouseX = 0, + mouseY = 0; document.addEventListener("mousemove", function (event) { mouseX = event.pageX; mouseY = event.pageY; }); -// Start movement function movement();