Artifacts & Stones — UI/UX specification¶

Статус: UX-спецификация для последующего hi-fi HTML-макета
Платформа: mobile, portrait
Язык примеров интерфейса: English; все строки должны быть локализуемыми
Расположение в продукте: группа окон билдкрафта Artifacts / Stones

1. Источники и границы документа¶

Спецификация объединяет:

экран выбора и улучшения артефакта по центральной части референса image (5).png;
экран установки камней вокруг артефакта по референсу image (4).png;
правила системы из документа «Билдкрафт двух миров — разбор системы»;
существующие визуальные и интерактивные паттерны Unity-проекта Overlord, прежде всего SkillInfoView, горизонтальные коллекции, dropdown и общие popup/button assets.

Этот документ определяет структуру, состояния и поведение интерфейса. Он не определяет backend-события, форматы данных, стоимость улучшений или конкретные балансные значения.

1.1. Зафиксированные продуктовые правила¶

Одновременно используется один артефакт.
Артефакт содержит собственный World Law.
World Law работает только у используемого артефакта.
У артефакта три уровня. Улучшение требует дубликаты/шарды; пример отображения прогресса — 0/1.
В артефакте шесть типов сокетов: Visible Aspect, Hidden Aspect, Flip Aspect, Visible Law, Hidden Law, Bridge Law.
Камни свободно меняются вне боя, сохраняются в пресетах и переносятся при смене артефакта.
Левая колонка сокетов относится к gear Effects, правая — к Core Laws.
Часть сокетов может быть заблокирована прогрессией.

Терминология: в устном описании прозвучало Leap Aspect, но в действующем системном документе тип называется Flip Aspect. В макете использовать Flip Aspect, пока гейм-дизайн отдельно не подтвердит переименование.

2. Цель группы окон¶

Игрок должен без перехода на отдельные полноэкранные разделы уметь:

просмотреть коллекцию артефактов;
понять, какой артефакт сейчас используется, а какой только выбран для просмотра;
прочитать World Law, увидеть уровень и прогресс шардов;
использовать другой артефакт или улучшить выбранный;
перейти на вкладку камней;
увидеть все шесть сокетов и установленные камни;
быстро отфильтровать коллекцию камней под конкретный сокет;
установить или заменить камень через drag-and-drop либо через Stone Info.

Главный UX-принцип: тап выбирает и объясняет, drag-and-drop ускоряет уже понятное действие. Ни одно обязательное действие не должно требовать drag.

3. Общий каркас окна¶

3.1. Компоновка сверху вниз¶

Стандартный заголовок окна ARTIFACT или ARTIFACTS в существующей игровой подложке заголовка.
Центральная контентная область, меняющаяся между вкладками.
Однострочный горизонтальный Scroll View коллекции.
Две нижние вкладки:
ARTIFACTS;
STONES.
Стандартная кнопка закрытия/назад и нижний safe area.

Вкладки постоянно видимы и находятся ниже Scroll View. Активная вкладка имеет штатное активное состояние проекта; неактивная — штатное приглушённое. Переход между вкладками не закрывает окно.

3.2. Сохранение контекста между вкладками¶

В рамках одного посещения окна отдельно запоминаются:

выбранный артефакт и позиция Scroll View на Artifacts;
выбранный сокет, выбранный фильтр и позиция Scroll View на Stones.

Возврат на вкладку восстанавливает её прежнее состояние. После повторного открытия окна стартовое состояние:

Artifacts показывает используемый артефакт;
Stones показывает текущую конфигурацию камней, фильтр All Stones, если ранее не был выбран сокет в рамках текущего открытия.

3.3. Различение состояний¶

Во всём интерфейсе нельзя смешивать три разных понятия:

selected — объект выбран для просмотра;
equipped/used — объект реально используется в билде;
upgradeable — для объекта достаточно шардов для улучшения.

Каждое состояние имеет отдельный маркер. Одна золотая рамка не должна одновременно означать все три состояния.

4. Вкладка Artifacts¶

4.1. Центральная область¶

В центре находится выбранный артефакт. Обязательные элементы:

название артефакта;
крупное изображение артефакта;
уровень Lv. 1 / Lv. 2 / Lv. 3 либо три читаемых ступени;
маркер IN USE, если выбранный артефакт сейчас используется;
заголовок WORLD LAW;
полное пользовательское описание World Law под изображением;
прогресс шардов в формате current/required, например 0/1;
кнопка UPGRADE рядом с прогрессом шардов;
действие использования артефакта:
USE, если выбран другой доступный артефакт;
неинтерактивное состояние IN USE, если он уже используется.

Кнопка UPGRADE относится к выбранному артефакту, а не к используемому. Выбор карточки внизу обновляет всю центральную область, но сам по себе не меняет используемый артефакт.

4.2. Горизонтальная коллекция артефактов¶

Одна строка карточек без переноса на второй ряд.
Скролл строго горизонтальный.
На экране одновременно видны несколько полных карточек и часть следующей карточки как подсказка продолжения.
Тап по карточке делает её выбранной и обновляет центральную область.
После тапа карточка по возможности мягко доводится к центру viewport.
Позиция выбранной карточки не должна прыгать при апгрейде.

Карточка содержит:

иконку/миниатюру артефакта;
рамку редкости, если редкость существует в данных;
уровень;
маркер IN USE для используемого артефакта;
notification dot или штатный upgrade-marker, если улучшение доступно;
lock overlay и условие открытия для недоступного артефакта.

4.3. Состояния UPGRADE¶

Состояние	Прогресс	Кнопка
Недостаточно шардов	Например `0/1`	`UPGRADE` disabled
Достаточно шардов	Например `1/1`	`UPGRADE` enabled + штатный notification
Выполняется	Текущее значение сохраняется	disabled + loader
Успех	Новый `Lv.` и новый порог	короткая upgrade-анимация
Максимальный уровень	`MAX`	`UPGRADE` заменяется на disabled `MAX LEVEL`
Ошибка	Без оптимистического изменения уровня	snackbar и восстановленное состояние

Нажатие disabled-кнопки не отправляет действие. Если проектный паттерн допускает feedback по disabled-состоянию, показывается короткая причина: Not enough shards.

4.4. Состояния USE¶

Выбранный артефакт	Действие
Уже используется	`IN USE`, disabled
Доступен, но не используется	`USE`, enabled
Заблокирован	`USE`, disabled; тап по карточке показывает условие
Применение выполняется	Кнопка disabled + loader
Применение успешно	Старый маркер `IN USE` снимается, новый появляется
Ошибка	Предыдущий артефакт остаётся используемым; snackbar

Отдельный confirm-попап перед USE не нужен: действие обратимо и не расходует ресурс. После смены артефакта установленные камни визуально остаются в тех же шести сокетах на вкладке Stones.

5. Вкладка Stones¶

5.1. Центральная композиция¶

В центре показывается используемый артефакт. Вокруг него расположены шесть постоянных позиций сокетов матрицей 3×2:

Левая колонка — gear Effects	Правая колонка — Core Laws
`Visible Aspect`	`Visible Law`
`Hidden Aspect`	`Hidden Law`
`Flip Aspect`	`Bridge Law`

Над композицией показывается компактный World Law используемого артефакта: название/ярлык и короткое описание либо кнопка info с полным текстом. Смена артефакта выполняется на вкладке Artifacts, а не из этой композиции.

Каждый сокет всегда сохраняет позицию. Состояния:

Состояние	Вид	Тап
Пустой доступный	Рамка типа + `+` + подпись типа	Выбирает сокет и фильтрует список по его типу
Заполненный	Рамка типа + иконка камня	Выбирает сокет и фильтрует список по его типу
Выбранный	Усиленное кольцо/свечение + связь со списком	Повторный тап сохраняет выбор
Drag target	Пульсация совместимых слотов	При drop устанавливает/заменяет камень
Заблокированный	Замок и приглушение	Показывает условие открытия; список не фильтруется
Применение	Блокировка hit area + loader	Новые действия временно недоступны

Подписи типов должны оставаться видимыми и не полагаться только на цвет или иконку.

5.2. Автофильтр при тапе по сокету¶

При тапе по пустому или заполненному доступному сокету:

сокет становится выбранным;
dropdown принимает тип этого сокета;
нижний Scroll View показывает только совместимые камни этого типа;
позиция Scroll View сбрасывается к началу результата;
уже установленный в этом сокете камень получает маркер IN SLOT и идёт первым в результатах;
остальные совместимые камни сортируются в стабильном порядке.

Тап по заполненному сокету не снимает камень и не открывает окно автоматически. Он только выбирает контекст замены и фильтрует коллекцию.

Dropdown находится рядом с горизонтальным Scroll View, визуально относится к его заголовку и не перекрывает карточки. Это отдельный интерактивный элемент.

Обязательные значения:

All Stones;
Visible Aspect;
Hidden Aspect;
Flip Aspect;
Visible Law;
Hidden Law;
Bridge Law.

Поведение:

выбор конкретного типа в dropdown выбирает соответствующий доступный сокет;
выбор All Stones снимает выбор сокета;
ручная смена фильтра сбрасывает Scroll View к началу;
одновременно открыт только один dropdown;
тап вне dropdown закрывает его без изменения значения;
выбранное значение показывается текстом и иконкой типа, если подходящая проектная иконка существует;
недоступный по прогрессии тип остаётся видимым, но помечается замком; выбор показывает условие открытия и не активирует сокет.

При All Stones можно смотреть Stone Info, но кнопки USE/SWITCH требуют выбрать совместимый сокет. В таком случае модальное окно предлагает SELECT SLOT, после чего подсвечиваются только совместимые доступные сокеты.

5.4. Горизонтальная коллекция камней¶

Одна строка без переноса.
Скролл строго горизонтальный.
Карточки не уменьшаются до нечитаемого размера ради размещения всей коллекции.
Часть следующей карточки видна как scroll affordance.
Свайп по пустому месту карточки прокручивает список.
Короткий тап открывает Stone Info.
Long press + движение начинает drag-and-drop и не открывает Stone Info.

Карточка содержит:

иконку камня;
рамку типа/редкости по данным;
количество копий ×N;
уровень, если камни уже имеют уровни в текущем продукте;
IN SLOT, если эта конкретная копия установлена в выбранном сокете;
маркер установки в другом месте, если одна копия не может использоваться одновременно несколько раз;
NEW/notification только по существующему проектному паттерну.

Порядок при фильтре конкретного сокета:

камень, установленный в выбранном сокете;
принадлежащие игроку доступные совместимые камни;
совместимые, но уже используемые, если они остаются видимыми по правилам коллекции;
неоткрытые варианты в конце, если дизайн коллекции должен показывать их.

5.5. Drag-and-drop¶

Drag-and-drop является ускоренным альтернативным способом установки.

Игрок делает long press по карточке и начинает движение.
Под пальцем появляется ghost иконки; исходная карточка остаётся на месте.
Совместимый доступный сокет подсвечивается; несовместимые и заблокированные приглушаются.
Drop в пустой совместимый сокет устанавливает камень.
Drop в заполненный совместимый сокет заменяет камень одним действием.
Drop вне совместимого сокета отменяется без изменений.
На успешном drop слот даёт короткую вспышку и haptic tick.
При ошибке конфигурация визуально откатывается и показывается snackbar.

Drag из Scroll View должен отличаться от горизонтального скролла:

движение до long-press считается скроллом;
после срабатывания long-press Scroll View блокируется до окончания drag;
рекомендуется использовать те же drag/equip-паттерны, что уже применяются для Skills, а не создавать новую жестовую модель.

Drag установленного камня из сокета наружу не используется для удаления: это слишком легко сделать случайно. Снятие выполняется через Stone Info.

6. Stone Info¶

6.1. Визуальный паттерн¶

Stone Info — модальное окно по прямой аналогии с существующим SkillInfoView. Фон затемняется. Обязательные элементы:

игровая popup-подложка;
заголовочная подложка STONE INFO;
кнопка ×;
крупная иконка и штатная рамка камня;
название;
тип: один из шести типов сокетов;
уровень/редкость, только если эти параметры существуют в данных;
количество копий или shard progress, если применимо;
полное пользовательское описание правила;
статус использования;
две нижние кнопки: CLOSE и контекстное основное действие.

Модальное окно сохраняет под собой выбранный сокет, фильтр и позицию Scroll View. CLOSE, ×, системный Back и тап по допустимой scrim-зоне закрывают его без изменений.

6.2. Контекстная основная кнопка¶

Контекст	Основная кнопка
Выбран пустой совместимый сокет	`USE`
Выбран заполненный совместимый сокет, в нём другой камень	`SWITCH`
Выбран тот же камень, который уже стоит в сокете	`REMOVE` либо disabled `IN USE`; для первого HTML-макета показать оба варианта как отдельные UX-state и вынести финальный выбор на подтверждение
Сокет не выбран, но есть совместимые доступные сокеты	`SELECT SLOT`
Нет совместимого доступного сокета	disabled `USE` + причина
Камень недоступен игроку	disabled `LOCKED`
Применение выполняется	disabled + loader

USE и SWITCH применяют изменение и закрывают Stone Info. Обновлённый слот остаётся выбранным, фильтр и позиция списка сохраняются. Отдельный confirm для замены не нужен, поскольку операция бесплатна и обратима вне боя.

6.3. SELECT SLOT¶

После SELECT SLOT модальное окно закрывается, а совместимые доступные сокеты пульсируют. Следующий тап по сокету повторно открывает Stone Info уже с действием USE или SWITCH. Тап по пустой области отменяет режим.

7. Конфликты жестов и приоритет ввода¶

Приоритеты должны быть одинаковыми на обеих вкладках:

короткий тап по карточке — выбрать артефакт или открыть Stone Info;
горизонтальный свайп — прокрутить коллекцию;
long press по камню + движение — начать drag-and-drop;
открытый dropdown перехватывает ввод внутри себя;
открытое модальное окно блокирует фон;
переключение вкладок недоступно во время незавершённого drag или запроса применения.

Минимальный hit area интерактивных элементов — 48×48 dp. Визуальная иконка может быть меньше.

8. Пустые, заблокированные и ошибочные состояния¶

8.1. Нет артефактов¶

Центральная иллюстрация-заглушка из существующих ресурсов.
Текст причины и источник получения, только если он подтверждён продуктом.
USE и UPGRADE не показываются.
Вкладка Stones может быть заблокирована с условием открытия.

8.2. Нет камней по фильтру¶

Сокеты остаются видимыми.
В зоне Scroll View: No stones of this type.
Dropdown остаётся доступным.
Если камни этого типа существуют, но не получены, допустимы заблокированные silhouettes только при наличии такого паттерна в текущей коллекции.

8.3. Загрузка и ошибки¶

Initial loading: skeleton сохраняет реальную геометрию экрана.
Ошибка загрузки: штатная popup/card-подложка, сообщение и RETRY.
Ошибка USE, SWITCH, REMOVE или UPGRADE: визуальный rollback и snackbar.
Во время запроса нельзя отправить то же действие повторно.
При смене состояния извне экран обновляет данные, но по возможности сохраняет выбранный объект и позицию Scroll View.

9. Обязательное использование графики проекта¶

9.1. Жёсткое правило¶

Вся графика HTML-макета и последующей Unity-реализации должна максимально использовать реальные визуальные ресурсы Overlord. Нельзя рисовать CSS-ом или генерировать заново стандартные подложки, рамки, вкладки, заголовки, кнопки, dropdown, progress bars, lock-иконки и popup chrome, если аналог уже существует в проекте.

До сборки HTML обязателен asset audit:

найти существующий prefab/sprite/atlas для каждого элемента;
зафиксировать путь и назначение в asset manifest макета;
использовать реальные PNG/sprites в HTML;
CSS применять только для layout, размеров, безопасного tint и простых переходов состояний;
новый визуальный placeholder допустим только для уникального контент-арта, которого действительно нет в проекте, и должен быть явно помечен PLACEHOLDER — REQUIRES GAME ASSET.

9.2. Приоритетные источники¶

Элемент	Проектный источник для проверки и переиспользования
Верхний заголовок, back, dark panel, центральный артефакт	`Assets/Sprites/UI/BuildCoreView/`
Базовый артефакт	`Assets/Sprites/UI/BuildCoreView/img_game_world_artifact.png`
Empty/locked рамки, `+`, progress bars, нижние подложки	`Assets/InternalAssets/Sprites/UI/SkillsScreenView/`
Stone Info структура и кнопочные состояния	`Assets/Prefabs/UI/Skills/SkillInfoView/SkillInfoView.prefab`
Skill Info визуальный референс	`DesignMocks/_Mocks_SkillInfo/SkillInfo_Upgrade.png`
Общие popup-подложки	`Assets/InternalAssets/Sprites/UI/Shared/` и `Shared/BlueBackgrounds/`
Dropdown	`Assets/InternalAssets/Sprites/UI/Shared/dropdown_selector_01.png` и существующие `CAUDropdownButton` / `HADropdownButton`
Рамки законов/слотов и lock-иконки	`Assets/Sprites/UI/BuildCoreView/`
Реальный drag-to-equip паттерн	Skills UI: `SkillButton`, `DragEquipSlot`, `IDragEquipPayload`

Пути указаны относительно overlord/frontend/unity/.

Asset audit не должен ограничиваться этой таблицей: это стартовый список. Автор макета обязан дополнительно проверить sprite atlases, prefabs и соседние экраны на более точное совпадение.

9.3. Недопустимые замены¶

плоский CSS rectangle вместо существующей декоративной подложки;
самодельная зелёная кнопка вместо проектного button sprite/prefab;
новый generic modal вместо SkillInfoView-семейства;
emoji или Unicode-символ вместо существующей игровой иконки;
произвольный шрифт при наличии проектной typography;
нарисованная с нуля рамка редкости при наличии atlas sprite.

10. Адаптивность, локализация и доступность¶

Целевой Canvas для точного референсного состояния определяется текущим Unity prefab; HTML должен дополнительно проверяться минимум на узком и высоком portrait viewport.
Центральный артефакт и все шесть сокетов всегда помещаются без вертикального скролла.
Scroll View и вкладки не перекрывают центральные слоты.
Safe area учитывается сверху и снизу.
Тексты не запекаются в картинки.
Названия фильтров допускают сокращённое визуальное представление, но полная строка доступна в dropdown и accessibility label.
Цвет не является единственным маркером selected/equipped/locked.
Все интерактивные элементы имеют pressed/disabled/focus состояния.
Анимации не должны менять layout и препятствовать быстрому повторному вводу.

11. Обязательные состояния для HTML-превью¶

HTML-макет должен показать как минимум следующие отдельные интерактивные состояния:

Artifacts — используемый артефакт выбран, прогресс 0/1, Upgrade disabled.
Artifacts — выбран другой артефакт, видна кнопка USE.
Artifacts — шардов достаточно, UPGRADE enabled.
Artifacts — MAX LEVEL.
Stones — ни один сокет не выбран, фильтр All Stones.
Stones — выбран пустой Visible Aspect, список автоотфильтрован.
Stones — выбран заполненный сокет, текущий камень помечен IN SLOT.
Stones — dropdown открыт со всеми семью значениями.
Stones — drag камня над совместимым пустым сокетом.
Stones — drag камня над заполненным сокетом для замены.
Stone Info — USE.
Stone Info — SWITCH.
Stone Info — сокет не выбран, SELECT SLOT.
Заблокированный сокет и условие открытия.
Пустой результат фильтра.

В превью должны реально работать:

переключение Artifacts / Stones;
выбор карточек в обоих горизонтальных Scroll View;
горизонтальный скролл;
автофильтр по тапу сокета;
ручной dropdown-фильтр;
открытие/закрытие Stone Info;
смена состояний USE / SWITCH / SELECT SLOT;
демонстрационный drag-and-drop с подсветкой совместимых целей.

12. Acceptance checklist¶

[ ] Внизу присутствуют две вкладки: Artifacts и Stones.
[ ] На Artifacts выбранный артефакт находится в центре.
[ ] Под артефактом видны World Law, описание и shard progress current/required.
[ ] UPGRADE имеет enabled, disabled, loading и max states.
[ ] Выбор карточки не экипирует артефакт автоматически.
[ ] USE явно меняет используемый артефакт.
[ ] Коллекция артефактов — однострочный горизонтальный Scroll View.
[ ] На Stones центральный артефакт окружён шестью постоянными сокетами.
[ ] Тап по пустому и заполненному сокету выбирает его и включает фильтр типа.
[ ] Рядом со списком есть отдельный dropdown с All + 6 types.
[ ] Коллекция камней — однострочный горизонтальный Scroll View.
[ ] Тап по камню открывает Stone Info по паттерну SkillInfoView.
[ ] Stone Info показывает CLOSE и контекстное USE / SWITCH / SELECT SLOT.
[ ] Камень можно установить или заменить через drag-and-drop.
[ ] Горизонтальный скролл и drag не конфликтуют.
[ ] Заблокированные сокеты объясняют условие открытия.
[ ] При смене артефакта установленные камни остаются на месте.
[ ] Все стандартные визуальные элементы взяты из проекта и перечислены в asset manifest.
[ ] Любой отсутствующий уникальный арт явно помечен placeholder-ом.
[ ] Макет не содержит самодельных generic UI-элементов вместо существующих project assets.

13. Вопрос на финальное подтверждение¶

Для уже установленного камня в Stone Info нужно выбрать одно финальное действие:

REMOVE — позволяет освободить сокет;
disabled IN USE — снять камень можно только заменой на другой.

Оба состояния должны быть показаны в первом HTML-превью рядом для сравнения; после решения один вариант удаляется из финального UX.