Detect overlapping circle | Uber Frontend Interview Question | Q-30

[@amansaxena4446]

Tough one this will really test your FE skills

[@mohitharge]

This is really helpful, thank you

[@abd11868]

Thanks a lot for this video, I tried the same code given in description, I notice one issue here , if draw 2 circle near each other it turned into green but it didn't overlap, here the issue is of border radius, I went into console , removed border radius then found that these 2 square are overlapping, it would much helpful if you let us know how to handle this.

[@Learnersbucket]

Update the calc for detecting collision

[@anujnandwana726]

The condition is not correct for circle. Two circles will intersect if the difference between their radius is smaller than the distance separating their centers :
correct answer is :
const distance = Math.sqrt(
(x1 - x2)*(x1 - x2) + (y1 - y2)*(y1 - y2)
);
if ( distance -r1 - r2

[@Learnersbucket]

Check the code yourself

[@0xatul]

I dont get why we need to use prevState?
Why were we not allowed to access the earlier state?
Any links would be helpful

[@Learnersbucket]

stackoverflow.com/questions/55817787/access-state-from-event-handler-created-within-react-js-useeffect-hook

[@sukdipkar8108]

How to add those drag features?

[@Learnersbucket]

That you have to practice, calculate the difference in position between mouse click and mouse move

[@mayurwankhade7447]

There is a typo in thumbnail

[@Learnersbucket]

Thanks for pointing, will fix

[@hariomasati6403]

Some Test cases are failed

[@Learnersbucket]

Which cases?

[@hathigamingyt3796]

@@Learnersbucket If you check the last circle which is drawn, it is not colliding but still it shows green color

[@Learnersbucket]

@@hathigamingyt3796 there is a Codepen link, please test yourself once

[@lalitsheoran8628]

@@Learnersbucket Yeah, the overlap detection logic isn't working well. I have tried it on the shared codepen link. Below is the screenshot for the same
i.snipboard.io/FMZlp2.jpg