Seat Selector Page: Initial Implementation

[justinsovine]

Develop a reusable and accessible seat selection UI for the movie showtime checkout. This interface should visualize the theater layout, allow users to choose available seats, and prevent the selection of sold or held seats.

Features/Requirements:

1. Dynamic Theater Layout:

   • Accept theater layout as a JSON configuration (can start with hardcoded data).
   • Label rows (A–Z) and columns (1–20).
   • Include seat types (standard, accessible, premium).

2. Visual Seat Diagram:

   • Use CSS grid or canvas to render the layout.
   • Color-code seats based on availability.
   • Include a screen position at the top for orientation.

3. Seat Availability Logic:

   • Load seat availability from movieId, showtime, and date.
   • Prevent selection of sold or held seats.
   • Allow a maximum ticket count based on the user's selection.

4. User Actions:

   • Enable seat selection with click/tap.
   • Display a counter for selected seats.
   • Prevent deselection after confirmation.

5. Accessibility & Responsiveness:

   • Ensure keyboard navigation (Tab/Enter).
   • Design mobile-friendly layout.
   • Ensure screen reader accessibility for available and accessible seats.

6. Later Considerations:

   • Seat adjacency rules.
   • Backend persistence for seat locking.
   • Real-time updates when seats are sold.

[justinsovine]

• Began work on this. Seat selection is possible, but convoluted due to the way seats are being generated.
• Need to re-create using data structure that emulates a REST API response to initialize seat status.
• Also need to make possible to have rows with more or less seats.