Всем привет!
В предыдущих статьях я показывал макет сайта, и показывал как я его разукрасил, выглядело это вот так:
Я пока-что не стал ничего менять и придумывать. Оставлю это на "потом", и решу с дизайном в следующий раз.
Сейчас было бы не плохо сделать уже готовый прототип и я начал верстать по этому макету. Вот что у меня получилось:
Из рабочего: я сделал так, что теперь можно выбирать элемент из списка и он будет отображаться на логотипе, собственно как и планировал. Из элементов есть только: квадрат, круг, круглый квадрат(!) и треугольник. Пока что ничего с ними нельзя сделать, кроме того, что добавить их на логотип.
Также я ограничил поля с цветом границы, чтобы нельзя было вводить больше 7 символов (решеточка + hex-код).
Пока что на этом всё.
В следующем посте я выложу короткое видео, где я покажу как всё работает. если бы можно было выложить видео прямо в статью, я бы так и сделал.
Внутренности
Хотел бы показать архитектуру, которую получилось сформировать:
В папке /src можно увидеть папку /assets, /components, /redux и /styles.
В /assets лежат картинки и шрифты.
В /redux есть mainReducer.tsx в котором находится состояние всего сайта (информация о вкладках, элементах, свойствах и т.д.) и функции для управления этим состоянием (переключить вкладку, выбрать элемент, изменить цвет фона и т.д.). К этому состоянию я могу обращаться из любого файла в приложении благодаря хукам.
В /styles лежат fonts.scss для подключения шрифтов, palette.scss цвета приложения. Все остальные стили расположены рядом с компонентами. Например, у блока с элементами есть свой .scss файл, в котором стили только для элементов. Общие стили расположены в файле index.scss в корне папки /src.
В /components лежат те самые блоки: блок элементов (elements-block), блок просмотра логотипа (preview-block) и блок свойств (properties-block). В каждой папке находится основной файл, файл со стилями и мелкие элементы, которые расположены внутри блока.
Формат логотипа
Хотел также рассказать про то, как будет создаваться сам логотип. Изначально я думал, что я буду делать сам логотип через canvas, но он оказался слишком громоздким, в отличие от .svg, поэтому я решил, что весь логотип будет строится в формате SVG.
Если честно выбор пал на svg потому что я не мог сделать элементарный квадрат с закругленными углами. Потом, когда я нашел решение, оно оказалось очень большим. Я ещё разок посмотрел на свой код и ужаснулся, потому-что на простой квадрат с закругленными углами он требует примерно 10 строк кода (без библиотек).
А вот SVG более компактный в этом плане, тем более когда я понял, что я могу добавлять не только примитивные фигуры, но и вообще какие захочу, и всё что для этого требуется - это зайди в адоб элюстратор и экспортировать оттуда эту фигуру в .svg формате.
Поэтому я решил использовать SVG. Я вытащил из всех .svg файлов тэг <path> и расположил все свои "фигуры" в один файл вот так:
Итог:
Это всё что есть на настоящий момент. Позже я загружу короткое видео, чтобы показать как меняются данные. Далее я, скорее всего, буду делать список шрифтов и список иконок, чтобы было с чем работать, а также добавлю новые фигуры.
Подписывайтесь, чтобы быть в курсе!