I am developing a booking system as a VueJS SPA. It needs to allow the user to select which room(s) they want to book.
I need to present the user with a floor-plan, and have the user click which rooms they want to book. The user cannot book rooms that are not available or of the incorrect type
Previously in the booking flow the user has selected start/end dates and room types.
I am stuck in trying to find a way to present this floor plan to the user in a way that allows clicking it to select room(s), and once a room is selected, an icon should be shown, and clicking the icon should unselect that room again.
I thought about using an image-map, but that is not able to be scaled down for mobile usage.
Any suggestions ?