Help with mouse running away from "respond" button.

[amber depot]

So i found this cool trick where your mouse runs away from a button and wanted to apply it to a drag and drop game i am making. Basically, I want to have the respond button move randomly away from the middle item i am dragging around, but at the same time not leave the window.innerwidth ratio. And i also dont want the "scam alert" to move at all. I would like it to remain constant. You'll understand when you see the app. <App/> <Lvl2/> and styles are the only thing you would be looking at. Thank you in advance: https://codesandbox.io/s/sad-moser-6k3xgc?file=/src/styles.css

"onDragEnter" is similar to "onMouseOver" btw

By "not leaving window.innerwidth", i am referring to both desktop and mobile width

[amber depot]

😦

[alpine citrus]

from wht i see . handleMouseOver function generated random values for left and top properties without considering the middle of the window.

u want to solve that

function handleMouseOver() {
const middleX = window.innerWidth / 2;
const middleY = window.innerHeight / 2;

// Calculate a random distance for the button to move away
const randomX = Math.random() * 100 - 50; // Adjust as needed
const randomY = Math.random() * 100 - 50; // Adjust as needed

const newPos = {
left: ${middleX + randomX}px,
top: ${middleY + randomY}px,
};

setPosition(newPos);
} try this ...