Adding an observer

Now the script observe the card elements at the cover-flow component, classify their position and changes it visibility based on that.
Im using an IntersectionObserver to observe every card, but it was designed to observe the position of 2d elements, so i had to figure out how to make it work well in an 3d element. The way it works is when the observe activates (it basically means that some card is in the range to load) it get the card info (like position and angle) and changes it visibility state based on that. Simple, right? No, it was a headache for the start to the top, nearly 4 hours of what i did was to fix the fact that it was meant for 2d. The observer were activating for cards that were in the back of the element, so i had to classify the card position into back or front by using its angle.
But if i tried to use the card angle without anything else the script would broke (and did for 3 hours until i realized how to fix), so i had to use an second angle which is 360 - cardAngle (the 360 is the angle of an circle), so this new angle is based on the circle end while the other is based on the circle start.
But the system still broke, because at some point one of these values would become negative and makes the if that classify the elements fail. The fix was using the absolute value in the if (it took 1 hour until i figured that; oh i were so happy when it worked).

Why

To improve the performance, so the browser will just load what is really important and not 50 images that the user cant even see.

What else

All that work definitely improved a lot my logic thinking and for the first time i used the truth table well.
Now i just need to use the new code to change more the style of the images that are not in the screen.
I did not deleted the code that i wrote in the past devlog, it was used in the new code to select how many images should be loaded in the same time.

** The first video is the result, the others is some problems that i had **