Skip to content

README_RU.md

Latest commit

 

History

History
164 lines (112 loc) · 7.67 KB

README_RU.md

File metadata and controls

164 lines (112 loc) · 7.67 KB

Button Constructor

English | Русский

Визуальный конструктор игровых кнопок. Позволяет собрать стилизованную кнопку с нуля, настроить каждый параметр и экспортировать результат как PNG, CSS или Flutter-код.

Button Constructor

Приложение собирается в один HTML-файл — можно открыть в браузере без сервера.

Установка

Необходим Node.js (v18+).

git clone https://github.com/E2GO/button-constructor.git
cd button-constructor

Затем запустите start.bat (Windows) или start.sh (Linux/Mac) — зависимости установятся автоматически и откроется dev-сервер.

Или вручную:

npm install
npm run dev

Приложение откроется по адресу http://localhost:5173.

Сборка

Чтобы собрать один HTML-файл, который можно открыть без сервера:

npm run build      # создаст dist/index.html

Интерфейс

Экран разделен на три колонки:

Левая панель Центр Правая панель
Настройки кнопки: форма, цвета, слои, эффекты, иконка, бейджи, состояния Превью кнопки + экспорт/сохранение Настройки текста: цвет, обводка, тени, свечение

Верхняя панель — пресеты

Цветные кнопки вверху — встроенные пресеты (Green, Blue, Red, Purple, Yellow, Framed). Клик загружает полный набор настроек. Можно сохранить свой пресет — он появится рядом.

Что можно настроить

Форма кнопки

  • Ширина, высота, скругление углов
  • Глубина (3D-эффект через нижнюю тень)
  • Режим рендера: CSS (стандартный div) или SVG (произвольные формы: squircle, звезда, щит, сердце, облако, hexagon, custom path)

Тело кнопки

  • Слои градиентов — можно добавить несколько слоёв с разными blend mode (multiply, screen, overlay и т.д.)
  • Каждый слой: набор цветов, стопы градиента, угол, прозрачность

Эффекты поверхности

  • Shine — блик сверху (цвет, высота, прозрачность, размытие, угол)
  • Darken — затемнение снизу
  • Inset Light / Dark — внутренние тени по краям
  • Блики (Blicks) — отдельные точки/эллипсы света, перетаскиваются мышью

Текст

  • Цвет, размер, прозрачность
  • Градиент текста (двухцветный, с углом)
  • Обводка (два метода: через shadow или -webkit-text-stroke)
  • Drop shadows — внешние тени (неограниченное количество, угол + дистанция + размытие)
  • Inner shadows — внутренние тени с автоматическим периметровым бевелом
  • Glow — внешнее свечение
  • Inner Glow — внутреннее свечение

Иконка

  • Любой emoji, позиция (left/right/свободная), размер
  • Тень, обводка, свечение иконки

Бейджи

  • Метка поверх кнопки (например "SALE")
  • Цвет фона, рамка, поворот, позиция, тень, свечение

Рамка (Frame)

  • Внешняя рамка вокруг кнопки
  • Трехцветный градиент, тень, мягкая тень
  • Внутренняя рамка с отдельными настройками

Состояния кнопки

  • Normal / Hover / Pressed / Disabled
  • Для каждого: сдвиг, масштаб, яркость, насыщенность, глубина, прозрачность

Превью

  • Смена фона: тёмный, средний, светлый, белый, игровой градиент, шахматка (прозрачность), произвольный цвет
  • Зум от 50% до 200%, кнопка 1:1
  • Пиксельная сетка (видна при зуме 150%+)
  • Size Variants — моментальный просмотр кнопки в размерах Large / Medium / Small / Icon

Сохранение и экспорт

Сохранение

  • Variant — сохранить текущее состояние в библиотеку (внизу экрана). Варианты можно тегировать (Play, Shop, Settings, General) и искать
  • Preset — сохранить как пресет в верхнюю панель для быстрого переключения
  • Style — сохранить отдельно: Colors / Shape / Text / Full, чтобы потом применить к другой кнопке

Экспорт

  • JSON — копирует полное состояние в буфер обмена. Можно вставить обратно через Paste или загрузить из .json файла
  • CSS — генерирует CSS-класс с box-shadow, gradient, border-radius и т.д.
  • Flutter — генерирует Dart-код с BoxDecoration
  • PNG — скачивает картинку кнопки (размер: 128 / 256 / 512 / произвольный)

Обмен дизайнами

Чтобы передать дизайн кнопки другому человеку:

  1. Нажмите JSON — скопируется в буфер
  2. Отправьте текст
  3. Получатель нажимает Paste и вставляет JSON

Или через файл: экспортируйте JSON, сохраните в .json, получатель загружает через File.

Copy/Paste секций

Каждая группа настроек (Button, Text, Frame, States) имеет кнопки Copy/Paste. Это позволяет скопировать, например, только текстовые эффекты с одной кнопки и вставить на другую.

Горячие клавиши

Клавиша Действие
Ctrl+Z Отмена
Ctrl+Shift+Z / Ctrl+Y Повтор

Прямое редактирование (Direct Edit)

Блики, бейджи, иконку и offset рамки можно перетаскивать прямо на превью. В режиме Direct Edit:

  • Перетаскивание — перемещение
  • Оранжевые хэндлы — поворот
  • Синие хэндлы — масштаб

Технологии

  • React 19 + Vite 8
  • vite-plugin-singlefile (сборка в один HTML)
  • html-to-image (экспорт PNG)
  • Без TypeScript, без state-менеджера — всё на useState + custom useHistory hook (undo/redo, до 50 шагов)
  • Все пользовательские данные хранятся в localStorage браузера