Klockwerk Kat

Продолжаю развивать идеи, описанные в прошлой публикации: - Вывод на маленьких экранах; - Перевод на английский. На видео видно, как текущая конфигурация работает на физическом Андроид-телефоне. Нет цели, только путь. Продолжаем.

Насколько же сложно претворять в код все задумки из мокапа! То, что в #figma создавалось играючи, вдохновенно перебирая разные варианты, и в пару кликов мыши получая наглядный результат, во #flutter рождается через страдания, скурпулёзное изучение незнакомых концепций, концентрированное усилие воли. Но! Но создаётся. Так, как это выглядело в макете, как это представлялось, как задумывалось изначально. За прошедшие выходные удалось сделать: 1. Анимацию переходов вперёд и назад по страницам альбома; 2. Вывод всех страниц с фотографиями. В веб-версии отчего-то не подгружаются файлы фотографий и это ещё один орешек, который предстоит раскусить через усердие, изучение и затраченное время.

Как и предполагал, последние дни были медленными — время на проект сократилось до пары часов в день. Однако, прогресс есть: 1. Практически готов шаблонный экран с фотографией и аннотацией; 2. Весь дизайн теперь реагирует на растягивание окна в реальном времени; 3. И самое главное, теперь процесс публикации настроен таким образом, что сразу создаётся общедоступная веб-страничка. Таким образом, все перечисленные — и все будущие — изменения теперь можно увидеть по ссылке: cheshiren.github.io/...x_f

Ну что ж. Проект на основе #Flutter-шаблона создан: github.com/...x_f И я уже начал править код в произвольных местах: шрифты Гугла, цвета из макета и т.п. Уже появились и первые проблемы: в макете #Figma я повсеместно использовал внутренние тени (InnerShadow) — функцию, легко доступную в CSS. Однако, во Flutter с этим проблемы, особенно для текста. Доступны только внешние тени и как получить то, что нужно, я пока ума не приложу. На StackOverflow совсем уж какие-то низкоуровневые решения предлагаются. Перефразируя классика: «Единственное, что меня беспокоило — это рендеринг. В мире нет никого более беспомощного, безответственного и безнравственного, чем человек, ковыряющий рендеринг, не разбираясь в нём. И я знал, что довольно скоро мы в это окунёмся».

Что ж. Мокап в #figma завершён! Интерактивную версию всегда можно посмотреть по той же ссылке: www.figma.com/...r=1 А вот глянуть внутрь и рассмотреть все экраны по отдельности (и референсные материалы плюсом) можно по ссылке: www.figma.com/...3a2 Что дальше? Как уже писал, то попытаюсь реализовать всё во #Flutter, как наиболее знакомый мне из всех фреймворков (да, так получилось). Плюс, в последнее время у него серьёзно подросла производительность в вебе. А именно на веб я и ориентируюсь. Буду использовать вот этот шаблон: github.com/...ate И читать вот эти документы) docs.flutter.dev/...kit Думаю вести разработку так же публично на #Github и с регулярными отчётами здесь. До скорого!

Мокап в #figma почти завершён! Остались буквально пара последних экранов и всё, данную часть проекта можно считать выполненной. Пощупать, как это всё работает можно там же: www.figma.com/...r=1 Тэги #interactivefiction #interactive_fiction #интерактивнаялитература #интерактивная_литература #текстовыеигры #текстовые_игры #текстовыеквесты #adventure #приложениеФ