Manacost Arena

Мета Hearthstone без таблиц, которые приходится расшифровывать.

Русскоязычная production-платформа для Арены и Полей Сражений:
тир-листы, винрейты, библиотека карт, гайды и игровые конструкторы.

Открыть сайт · Быстрый старт · Надёжность · Дизайн и ассеты · Деплой · Вклад в проект · Безопасность

Desktop workspace	Mobile, 390 px

Один репозиторий объединяет React-интерфейс, Express API, durable snapshots, immutable-релизы и многоуровневый desktop/mobile/security quality gate.

Зачем этот проект

Manacost Arena превращает разрозненные игровые данные в один быстрый рабочий экран: перед драфтом можно проверить лидирующие классы и карты, во время игры — открыть нужный тир-лист, а для Полей Сражений — перейти к героям, библиотеке или конструктору стратегии. Редакционные мета-отчёты находятся рядом со статистикой, поэтому контекст не теряется между несколькими сервисами.

• Актуальные данные: классы, карты и легендарные группы, источник и время обновления, durable snapshots при сбое upstream.
• Игровые инструменты: герои, BG-библиотека, конструкторы, поиск, фильтры, mobile lightbox, профиль, статьи, гайды и конкурсы.
• Production-контур: immutable releases, автоматический rollback, security contracts, encrypted backup, desktop/mobile E2E и zero-axe gate.

Быстрый вход	Ссылка
Арена: винрейты классов	Открыть /classes
Арена: тир-лист карт	Открыть /tierlist
Поля Сражений: герои	Открыть /heroes
Поля Сражений: библиотека	Открыть /library
Косметика: скины, монеты и питомцы	Открыть /cosmetics
Состояние production	Readiness API

О проекте

Manacost Arena объединяет актуальную статистику, редакционные материалы и инструменты подготовки к игре. На одном сайте доступны тир-листы карт и классов Арены, группы легендарок, герои и библиотека Полей Сражений, конструкторы стратегий, статьи, гайды и персональный профиль.

Интерфейс построен вокруг визуального языка Hearthstone: пергамент, дерево, красные тавернные поверхности и аккуратный фиолетовый акцент #4A2F66. Desktop и mobile проходят один и тот же набор функциональных, адаптивных и accessibility-проверок перед каждым релизом.

Интерфейс в деталях

Скриншоты снимаются прямо с production в desktop и mobile viewport. Их можно воспроизвести одной командой:

npm run docs:screenshots

Что внутри

Арена	Поля Сражений	Платформа
Винрейты классов	Герои и их профили	Статьи и мета-отчёты
Тир-листы карт	Библиотека и архив	Архив гайдов и галерея
Группы легендарок	Тир-листы меты	Telegram/Boosty-профиль
Матчапы и аналитика	Конструкторы стратегий	Редакционная admin-панель
Скины, монеты и питомцы	Галереи и игровые медиа	Storybook + MCP

Интерфейс работает от 320 px, проходит 200% reflow и forced-colors проверку. Клавиатурная навигация, scroll lock модальных окон и axe-аудит входят в обязательный release gate.

Архитектура

Browser
  │
  ├── React 19 + TypeScript + Vite
  │     ├── route-level code splitting
  │     ├── pre-rendered route shells
  │     └── responsive Hearthstone UI
  │
  └── /api/*
        ├── Express API (compiled TypeScript)
        ├── signed authentication and CSRF boundary
        ├── Redis-assisted caches and durable snapshots
        ├── isolated scraper publication
        └── health, readiness, freshness and metrics contracts

Nginx → immutable release → systemd service
             │
             ├── atomic switch and automatic rollback
             └── encrypted backup and restore drills

Основные каталоги:

src/components/       общие UI-компоненты
src/features/         страницы и функциональные модули
src/styles/           общие токены и ограниченные shared-стили
server/               API, auth, кэширование и публикация данных
scripts/              QA, бюджеты, релизы, мониторинг и recovery
tests/                unit, contract, security и deployment tests
deploy/               systemd units и инфраструктурные шаблоны
public/               локальные игровые и декоративные ассеты
docs/screenshots/     актуальные изображения для GitHub

Качество и безопасность

Каждое изменение проходит единый обязательный gate:

npm run verify:ci

Он включает:

• TypeScript typecheck и архитектурные ограничения;
• unit, HTTP contract, auth, CSRF, backup и deployment tests;
• production-сборку frontend и server;
• бюджеты JavaScript/CSS и контроль роста !important;
• desktop/mobile E2E с mocked-подпиской;
• axe accessibility audit, 200% reflow, keyboard и modal scroll-lock;
• проверку документации и дизайн-системы.

Отдельные GitHub-проверки защищают цепочку поставки и репозиторий:

• CodeQL и Semgrep ищут уязвимые потоки данных и небезопасные конструкции;
• Gitleaks проверяет полную Git-историю и рабочее дерево на секреты;
• Dependabot, OSV-Scanner и Dependency Review контролируют lockfile, новые зависимости, известные уязвимости, лицензии и здоровье пакетов;
• Trivy блокирует HIGH/CRITICAL уязвимости и ошибки конфигурации;
• OpenSSF Scorecard оценивает security posture репозитория;
• Sentry опционально собирает очищенные от PII frontend/server ошибки.

После выкладки production дополнительно проверяется командами:

node scripts/production-monitor.mjs
npm run qa:e2e

Подробные SLO, stop-the-line правила и текущий прогресс находятся в STABILIZATION.md.

Стек и инструменты

Контур	Используемые инструменты
Интерфейс	React 19, TypeScript strict, Vite 6, Tailwind CSS 4, Lucide, responsive CSS
API и данные	Node.js 22, Express, Redis, SQLite, Sharp, Puppeteer, node-cron, Hearthstone deckstrings
Тестирование	Node test runner, tsx, fast-check, Storybook 10 + MCP, Puppeteer E2E, axe-core, browser contract tests
Качество кода	TypeScript, React Doctor, Knip, markdownlint, design.md, архитектурные и bundle-budget проверки
AppSec	CodeQL, Semgrep CE, Gitleaks, Trivy, GitHub Private Vulnerability Reporting
Supply chain	Dependabot, OSV-Scanner, Dependency Review, npm audit, OpenSSF Scorecard
Наблюдаемость	Sentry React/Node SDK, Sentry MCP, Chrome DevTools MCP, readiness/metrics и production monitor
Delivery	GitHub Actions, immutable artifacts, Nginx, systemd, atomic symlink switch, rollback и encrypted backups
Контекст команды	Notion для задач, Miro для схем и UX-контекста, Codex/Claude post-push review

Все security Actions закреплены полными commit SHA, а чувствительные интеграции остаются выключенными без явной серверной конфигурации. Подробности и команды для AI-агентов собраны в docs/agent-tooling.md.

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

Требуются Node.js 22+, npm и Chromium/Google Chrome для browser QA и scraper.

git clone https://github.com/Zulut30/manacost-arena.git
cd manacost-arena
npm ci
cp .env.example .env
npm run dev

Frontend доступен на http://localhost:3000, API запускается рядом в dev режиме. Без внешних ключей используются локальные snapshots; интеграции и публикация свежих данных требуют соответствующих переменных из .env.example.

Для разработки и AI-проверки компонентов отдельно запустите:

npm run storybook

Storybook доступен на http://127.0.0.1:6006, а его локальный MCP endpoint — на http://127.0.0.1:6006/mcp. Статическая проверка всех stories:

npm run test:storybook
npm run build-storybook

Полезные команды:

Команда	Назначение
npm run dev	Frontend и API в watch-режиме
npm run build	Production frontend, server и pre-render
npm test	Unit и contract test suite
npm run qa:e2e	Полный desktop/mobile browser QA
npm run budget	Контроль размеров JS и CSS
npm run scrape	Ручной запуск scraper в разработке
npm run security:gitleaks	Локальная проверка истории и рабочего дерева
npm run security:semgrep	Статический анализ изменённых JS/TS-файлов
npm run quality:knip	Проверка dependency-контуров
npm run verify:ci	Полный обязательный gate

Production-релиз

Production использует immutable-артефакты, атомарное переключение symlink, readiness gate и автоматический rollback. Краткий ручной сценарий:

sudo -u koloda npm run verify:ci
sha=$(git rev-parse HEAD)
artifact="/tmp/hs-arena-release-$sha"
npm run release:create -- --output="$artifact" --sha="$sha"
sudo scripts/deploy-release.sh "$artifact"

Полная инструкция, включая recovery, encrypted backup и off-site replication, находится в DEPLOYMENT.md.

Участие в проекте

Ошибки и идеи принимаются через структурированные GitHub Issues. Перед pull request прочитайте CONTRIBUTING.md и выполните npm run verify:ci. Уязвимости нужно отправлять только через приватный security advisory.

История пользовательских изменений ведётся в CHANGELOG.md.

Дизайн-система

assets.md содержит цветовые токены, типографику, CSS-рецепты рам, правила mobile-декора и полный каталог production URL всех ассетов. Документ можно использовать как переносимый контракт при интеграции дизайна в другой проект.

Источники и права

Статистика агрегируется из игровых и аналитических источников, указанных в интерфейсе рядом с соответствующими наборами данных. Hearthstone и связанные изображения принадлежат Blizzard Entertainment. Репозиторий не является официальным продуктом Blizzard.

Исходный код является проприетарным. Копирование, публикация, модификация, использование в другом продукте и создание производных работ запрещены без предварительного письменного разрешения Manacost. Полные условия находятся в LICENSE. По вопросам проекта: Manacost в Telegram.

Сделано командой Manacost для русскоязычного сообщества Hearthstone.