Obsidian: як це зроблено

Obsidian — темний застосунок нагород: металева картка балансу, квести з великою картинкою й нижня панель навігації. Ця сторінка показує, де в редакторі живуть його головні прийоми і як повторити їх на власному екрані.

Obsidian ви отримуєте, скопіювавши його з галереї готових застосунків (Початок роботи). Виділяйте віджет на полотні або в розділі Дерево; назви в коді нижче — це назви, які ви бачите в дереві.

Екрани#

Екран	Що це	Куди веде
`Home`	Картка балансу, швидкі дії, тиждень серії, карусель квестів, остання активність	До `Quest`, до розділів
`Quest`	Один квест: велика картинка, прогрес, кроки	Назад на `Home`
`Rewards`	Баланс і список нагород	Розділи
`Profile`	Людина, статистика й історія	Розділи

Home, Rewards і Profile — три розділи Bottom navigation; Quest відкривається поверх розділу, у якому ви були.

Як зроблено металеву картку балансу#

На Home виділіть Metal balance card. Це Накладання: шари лежать один на одному, і перший — найнижчий.

Найнижчий шар — Зображення зі значенням З даних і полем даних art.balance: металева текстура приходить як дані, тож її можна замінити, не чіпаючи документа.
Над ним стоїть Колонка, у якої Розмір шару — На весь стос: вона бере розмір накладання, і тексти та смуга в ній лежать поверх картинки.
Смуга — Смуга прогресу, прив’язана до user.tierProgress; її Градієнт заповнення — progressGlow. Речення під нею — Шаблон: {left} {unit} to {next}.

Щоб повторити: додайте Накладання, покладіть першим Зображення, другою колонку, задайте колонці Розмір шару На весь стос, а зображення прив’яжіть до текстового поля словника, що несе адресу.

Як картка міняється на широкому екрані#

Картка балансу й панель біля неї лежать у Balance summary, і кожна має частку ширини. Виділіть Metal balance card і Balance side panel: для ширшого екрана вони несуть власні значення — поле й висоту 264, — задані перемикачем Редагую для угорі панелі, переведеним на Планшет. Картинки квестів ростуть так само, а тексти квестів тримають зручну ширину. Див. Ширина екрана. Переключіть рамку над полотном на вікно браузера, щоб побачити результат.

Щоб повторити: спершу зберіть телефонну версію, потім переведіть Редагую для на Планшет і змініть лише те, що відрізняється; панель запише лише різницю.

Як зроблено карусель квестів#

Quests list — Список із даних з Джерело quests. Його Карусель увімкнено: Карток у полі зору — 1, Наступна визирає на дає побачити край наступної картки, а Крапки показують крапки. Картка Quest card — один шаблон, що малюється для кожного запису:

Зображення, прив’язане до quest.image;
малий Контейнер у куті, чиї Стани міняють колір за quest.status — новий, активний тощо;
Бейдж з нагородою: Число з роздільниками і знак плюс;
Смуга прогресу для квестів із трьома, чотирма й п’ятьма кроками: три копії, кожна За умовою за quest.target.

Картка має дію Перейти на екран Quest і несе запис картки на наступний екран.

Щоб повторити: додайте Список із даних, оберіть Джерело, покладіть усередину одну картку й прив’яжіть її тексти та зображення; потім відкрийте Карусель на списку.

Як зроблено екран квесту#

Quest показує запис картки: кожен текст прив’язано до quest.*.

Верхня картинка, Quest hero, — накладання зображення й шару-градієнта (Розмір шару: На весь стос). Блок заголовка під нею, Quest title block, має Наїзд на попередній, тож перекриває картинку.
Верхня панель має запис у Стани на quest.id: кожен квест отримує власний колір шапки з одного віджета.
Кроки, Step 1, Step 2, Step 3, показують три вигляди одного рядка: виконаний (галочка), поточний (число й Бейдж «Now») і ще не відкритий (приглушений текст). Кожен вигляд — умова Видимість за quest.stage.
Pinned action bar — колонка з Прибито до низу зі значенням Прибито: кнопка стоїть під довгим екраном.

Серія#

Streak card показує тиждень. У кожній колонці кружок міняється за Стани, а іконка — за Видимість, обидва за streak.days: більше за номер дня — виконано, дорівнює — сьогодні, менше — ще ні. Скопіюйте колонку шість разів і змініть число.

Дані#

Obsidian читає user.* (ім’я, картинка, бали, рівень, прогрес), streak.*, art.balance і три списки: quests, activity та rewards. Поля списку записано як quest.title, entry.points тощо.

Над полотном відкрийте список Сценарій і оберіть Налаштувати значення…: задайте streak.days 0, 3 і 7 та подивіться, як заповнюється тиждень; зробіть список Порожній; оберіть Даних немає, щоб побачити кожен запасний текст. Усі стани показують ці телефони поруч. Докладніше: Дані.