Skip to content

Commit

Permalink
updated astromovement function to introduce better vertical mapping. …
Browse files Browse the repository at this point in the history 
…Added hover to reveal options button for task cards.
  • Loading branch information
@hizaidii
hizaidii committed Feb 15, 2024
1 parent 3e58624 commit 0514c64
Show file tree
Hide file tree
Showing 3 changed files with 96 additions and 39 deletions.
3 changes: 3 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 7 additions & 0 deletions public/css/board.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -245,6 +250,8 @@ body {
}

.task-more-btn {
/* display: none; */
opacity: 0;
cursor: pointer;
}

Expand Down
125 changes: 86 additions & 39 deletions public/js/astroFollowFn.js
View file
Original file line number Diff line number Diff line change
@@ -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();

0 comments on commit 0514c64

Please sign in to comment.