@id0/ Interface Collection

Арт-событие и выбор места

Lumen Field

Изучите доступные места на 3D-карте или в списке с теми же возможностями, добавьте до четырёх, проверьте итоговую цену и отправьте заявку.

Технология
  • Next.js
  • React
  • TypeScript
  • Base UI
  • Three.js

Задача

Объёмная карта помогает сравнить расположение мест, но бронирование должно полностью работать с клавиатуры, при включённом режиме уменьшения движения и без WebGL. Выбор и цена не должны пропадать, если место уже заняли или сервис временно недоступен.

Как устроен сценарий

  1. Познакомиться с событием

    До начала бронирования посетитель видит программу, площадку, даты и практическую информацию.

  2. Посмотреть доступные места

    На 3D-карте и в списке можно сначала открыть сведения о месте и только потом добавить его в заказ.

  3. Проверить заказ

    Места можно добавлять и удалять, а в итоге сразу видны их количество и общая стоимость.

  4. Подтвердить бронирование

    Если выбранное место уже занято или сервис временно недоступен, заказ сохраняется и отправку можно повторить после исправления ошибки.

Ключевые решения

  • Один выбор на карте и в списке

    Карта, список и итог заказа используют одни данные о местах и выборе. При смене представления заказ не меняется.

  • Действия доступны вне 3D-карты

    Объёмная карта показывает расположение мест, а описание, выбор, цена и отправка заявки остаются обычными элементами страницы.

Сложные состояния

  • Сначала изучить, затем выбрать

    Мышью, касанием и клавиатурой можно открыть сведения о месте, не добавляя его в заказ случайно.

  • Полноценный вариант без 3D

    При включённом уменьшении движения, отсутствии WebGL или работе с экранным диктором список сохраняет все сведения, выбор мест и цену.