Fix #47

• Add .prettierrc so I don't overwrite / format all the existing files 😅
• Implement different color for up/down-route

Currently the implementation is as follow:

• For ⇄ and → route, check direction and assign color accordingly to different direction
• For ⟲ route, is it a even-numbered or odd-numbered loop route?
  • If it is odd-numbered (i.e. hasMidStop)
    1. Get coordinate for midStop
    2. Find the interpolation of midStop coordinate to the loop
    3. Color the route accordingly up to the interpolatedCoordinate
  • If it is even-numbered (i.e. !hasMidStop)
    1. Get coordinates for 2 stops: lastStopOfFirstHalfOfLoop and firstStopOfSecondHalfOfLoop
    2. Get the segment of the loop that approximates closest to those 2 stops coordinates
    3. Get the middle point of the said segment
    4. Color the route accordingly up to the middle point

This feature removes color gradient for route colouring due to Mapbox's line-gradient not able to accept data-driven property mapbox/mapbox-gl-js#8977

Photos: