#18Traffic Light

Overview

Build a traffic light component where the lights switch automatically in a continuous loop, following real-world traffic light timing.

Requirements

• The traffic light should start with the red light active.
• After a short period, it should switch automatically to green.
• After another interval, it should switch to yellow.
• After the full cycle, it should return to red and repeat indefinitely.
• Only one light should be active at any given time.
• The timing between color transitions must match the defined cycle durations.

Notes

• Each light should visually indicate when it is active or inactive.
• Inactive lights must appear dimmed or covered by an overlay.
• The sequence of transitions must repeat continuously without user interaction.
• Ensure the timing of transitions aligns with the test expectations:
  • Red → Green after 2 seconds
  • Green → Yellow after a total of 3 seconds
  • Yellow → Red after a total of 3.5 seconds

Tests

1. starts on red
2. changes to green after 2s
3. changes to yellow after 3000ms total
4. returns to red after full cycle 3500ms