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

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

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

Екрани#

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

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

На Home виділіть Level section — Накладання з двох шарів. Перший — Level card; другий — Зображення (art.emblem), що лежить над карткою в куті.

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

Щоб повторити: покладіть картку й емблему в Накладання, оберіть емблемі Власне місце, вирівняйте її до кута й задайте зсув.

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

Quests list — Список із даних з Джерело quests і ввімкненою Карусель: одна картка в полі зору, наступна трохи визирає, внизу крапки. Усі картки походять з одного шаблону, Quest card. Кольори не лежать у документі: запис має поле quest.color (mint тощо), а картка має Стани. Стан каже: «коли quest.color дорівнює mint, тло таке». Текст кнопки всередині теж має стан, тож на світлій картці він темнішає. Верхня панель на Quest робить те саме.

Щоб повторити: намалюйте одну картку, відкрийте Стани, натисніть Додати стан і оберіть поле й умову; тло задайте в самому стані. Додайте по стану на колір.

Як картинки лягають на картку#

У картці два зображення: велике (quest.art) і малий предмет (quest.object) з Власне місце в куті, над великим. Обидва — З даних, тож квест приносить власні картинки. Екран Quest починається з Quest hero image і Quest title card: картка має Наїзд на попередній, тож перекриває картинку на задану величину.

Як зроблено картку зі штампами#

На Quest у Stamp card лежить Stamps: п’ять колонок. Кожну показано За умовою: quest.target більше за її номер, — квест на три штампи показує три. Кружок усередині має запис у Стани за quest.progress (заповнений, коли прогрес вищий за його номер), а число показано, лише поки це наступний штамп.

Кроки#

Step 1, Step 2 і Step 3 — три рядки з однаковою логікою: рамка й галочка через Стани та Видимість за quest.stage, приглушений текст для ще не відкритих кроків і Бейдж «Now» на поточному.

Прибита кнопка#

Pinned action bar має Прибито до низу зі значенням Прибито: кнопка «Continue quest» стоїть під довгим екраном. Панель розділів не рахується.

Дані#

Sunny читає user.* (ім’я, картинка, рівень, бали, прогрес), streak.*, chest.opensIn, картинки art.* і списки quests, activity та rewards.

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