Лаунчер EncoreCraft (слой интерфейса)

Это готовый визуальный слой лаунчера Minecraft EncoreCraft, свёрстанный один в один по дизайну из Figma. Технологии: Tauri 2, Vue 3, TypeScript, SCSS.

В этом репозитории находится только интерфейс. Логику (вход, запуск игры, магазин, обновления) подключает бэкенд-разработчик: он пишет команды на Rust и заменяет заглушки в файле src/ipc/commands.ts. Подробная инструкция для него лежит в файле BACKEND.md.

Что уже сделано

• Все экраны: загрузка, вход, регистрация, восстановление пароля, режимы "скоро" и "техработы", главная, магазин с четырьмя вкладками, новости, настройки клиента, настройки лаунчера, профиль со скином, установщик.
• Попапы и оверлеи: выход из аккаунта, корзина, настройки клиента, настройки лаунчера, консоль отладки.
• Два языка: русский по умолчанию и английский. Переключается в настройках, сразу и без перезапуска.
• Три темы оформления: тёмная, OLED, угольная. Меняются на лету и запоминаются.
• Автоопределение модели скина по пикселям (тонкие руки Алекс или обычные Стив). Игрок может переключить вручную.
• Таймер времени в игре в футере главной.
• Все шрифты встроены в проект, ставить их на компьютер не нужно.

Технологии

• Tauri 2: безрамочное окно фиксированного размера 1220 на 680, без изменения размера, со своим заголовком.
• Vue 3 с синтаксисом <script setup lang="ts">.
• Vue Router: именованные маршруты на каждый экран.
• Pinia: состояние интерфейса (тосты, модалки, оверлеи, настройки).
• vue-i18n: русский (основной) и английский (полный перевод).
• SCSS: токены дизайна в папке src/styles, подключаются через @use 'tokens' as *.
• Сборка на Vite, пакеты через pnpm.

Быстрый старт

Нужен установленный Node.js (версии 18 или новее) и pnpm.

pnpm install

Запуск только интерфейса в браузере (быстро, для правок вёрстки):

pnpm dev

Откроется адрес http://localhost:1420

Запуск полноценного окна лаунчера (как у пользователя):

pnpm tauri dev

Проверка типов TypeScript:

pnpm typecheck

Сборка интерфейса в папку dist:

pnpm build

Сборка готового установщика (exe и msi) под Windows:

pnpm tauri build

Запуск окна отдельным ярлыком

В корне проекта есть файл run-window.cmd. По двойному клику он поднимает окно лаунчера и цепляется к уже запущенному серверу Vite на порту 1420, чтобы не поднимать второй сервер. Если сервер ещё не запущен, сначала выполните pnpm dev в отдельном терминале.

Шрифты

Все пять шрифтов вшиты в проект (папка src/assets/fonts) и подключены через @font-face в файле src/styles/_fonts.scss. Они работают сразу у всех, кто установит лаунчер, ставить шрифты на компьютер не требуется.

• Cinzel: крупные заголовки, навигация, вкладки.
• Albertus Nova: заголовки и описания на экранах, крупные подписи.
• Montserrat: элементы управления (поля, кнопки, подписи).
• Philosopher: тексты и подзаголовки в новостях.
• Cousine: моноширинные поля (аргументы JVM, логи).

Структура проекта

src/
  components/   базовые и составные компоненты (ui, layout, forms, modals, overlays, home, store, news, settings)
  views/        экраны по одному на маршрут (ленивая загрузка)
  composables/  useWindow, useToast, useNetworkStatus
  stores/       Pinia: ui, user, clients, shop, news, skins, toast, settings
  ipc/          commands.ts (типизированные обёртки), mocks, types.ts (сюда подключается бэкенд)
  router/       именованные маршруты всех экранов
  locales/      ru.json, en.json, i18n.ts
  styles/       _variables, _mixins, _tokens, _fonts, _themes, global.scss
  utils/        вспомогательные функции (например, определение модели скина)
  assets/       fonts, images, icons, skins
src-tauri/      оболочка Tauri на Rust (только окно, без логики)

Как посмотреть все экраны

Есть служебная страница со списком всех экранов, попапов и вкладок по адресу /dev. В режиме разработки откройте http://localhost:1420/dev и переходите по ссылкам.

Иконки приложения

Иконки в src-tauri/icons уже есть. Если нужно пересоздать их из одной картинки 1024 на 1024, выполните:

pnpm tauri icon путь/к/картинке-1024.png

Для запуска в браузере (pnpm dev) иконки не нужны, они требуются только для сборки нативного приложения.

Что подключает бэкенд

Коротко: данные и действия идут через типизированные функции в src/ipc/commands.ts. Сейчас они возвращают тестовые данные. Бэкенд меняет тело функции на реальный вызов invoke('имя_команды'), при этом типы и вёрстка не трогаются. Полное описание всех команд, типов, событий и заглушек находится в файле BACKEND.md.