Image

[wavesinaroom]

Description

Image component works as an area where users try to find the hidden objects. Such objects have imaginary boundaries determined by top, bottom, right and left coordinates. If a user clicks within these boundaries, the object is found otherwise the user needs to keep looking.

Tests

• Fetches image (Supabase storage)
• Gets non zero user's click coordinates (MouseEvent.clientX MouseEvent.clientY)
• Fetches item coordinates from server based on <Picker/> selection (Supabase database)
• Checks user input coordinates matches item coordinates

Warning

Image must not be responsive otherwise implementing a coordinates system would be a nightmare.

[wavesinaroom]

Downloading an image from the supabase assets bucket and then render it in React seems to be unnecesary. Supabase storage works well for managing content files a user creates while using the app rather than a storage repository for the app itself. I'm gonna get the original image url and just assign it to the src inside HTML img tag.

[wavesinaroom]

I thought that starting from <Image/> was a good idea but its tests proved me wrong. MouseEvent.clientX and MouseEvent.clientY are hard to test since they are part of the implementation of the component, something that is not advised to test.

[wavesinaroom]

The number of states has been increasing and I feel they can get even bigger shortly. Previously I made the decision of getting rid of <Picker/> because I saw it as a small component that could be merged with <Image/>. Well, I was wrong since my current code is bloating as I mentioned before and having both of them together into one is risky and prone to errors. I'm opening issue 2 again and decouple them as they were in the past.

[wavesinaroom]

Finally the dialog is implemented. I just realized that for some reason I was overcomplicated the solution to that problem. Maybe I caught up by the idea that the project is hard and that made my look for very intricated solutions that actually didn't have a place in it