En
Geno-Dice Devlog: Roguelike Web Client & UI Overhaul
We’ve replaced the old CLI-based roguelike with a fully interactive web experience. The new SPA (Single Page Application) lets players recruit, battle, and evolve their units directly in the browser, with real-time feedback and deep meta integration.
Roguelike Web Client
- Team Recruitment: Choose 6 units from 12 candidates presented as fantasy-styled cards. Each card shows skill, ultimate, league, rank, and win rate—powered by the new /api/meta/batch endpoint.
- Room Selection: The team is displayed as compact vertical cards. Four difficulty-graded rooms (Easy → Very Hard) appear as colored "banks" – square buttons with ELO targets and difficulty labels.
- Battle Preview: Both teams are shown in a 3×4 grid (enemy back, enemy front, player front, player back). Player’s units are draggable to rearrange order before battle. Enemy cards are tinted purple, player cards blue.
- Battle Result: A full battle log viewer with Play/Pause, step-by-step navigation, and a 4-row unit grid. Clicking a log entry highlights the actor and target directly on the unit grid. Unit stats (attack/skill/ultimate success rates) are shown as percentages.
- Post-Battle Distribution: Drag-and-drop units into 5 colored banks (Leave, Mutate, Cross, Chimerize, Delete) with inline percentage stats and validation (even cross, 0 or 6 chimera).
- Team Finalization: Same recruitment screen after distribution, reusing the unified unit selector component.
UI & Design System
- Unit Cards: Three variants – full MTG-style (150×200), compact square with battle stats (105×105), and compact vertical with portrait (100×140) – used consistently across all screens.
- Fantasy-Meets-Cyberpunk: Card colors, skill colors, and fonts evoke a D&D/MTG fantasy feel, while the overall layout keeps the site’s neon cyberpunk aesthetic.
- New Meta System: Leagues are now 100-ELO ranges (0–1150, 1150–1250, … 2450+), stored in a leagues table with bilingual names (e.g., “Свалка / Scrapheap”). A batch endpoint provides meta info for any unit on the fly.
Backend Updates
- Added /api/meta/batch public endpoint for bulk meta queries.
- Migration: created leagues and skill_ultimate_meta_prev tables, updated update_skill_ultimate_meta() function.
- Fixed SPA fallback and middleware to correctly serve HTML for all client routes.
What’s Next
- Visual unit portraits (currently placeholders).
- Real-time battle animations (Canvas-based).
- Player laboratory with calibration history.
- Ascension timer and PvP arena.
РУ
Geno-Dice Devlog: Веб-клиент рогалика и обновление интерфейса
Мы полностью перенесли рогалик из консольного CLI в интерактивный веб-интерфейс. Теперь весь цикл игры — от подбора команды до распределения юнитов после боя — доступен в браузере, с живыми подсказками и интеграцией меты.
Веб-клиент рогалика
- Набор команды: выбор 6 юнитов из 12 кандидатов, представленных в виде фэнтези-карточек. На каждой карточке — навык, ультимейт, лига, место в рейтинге и винрейт (через /api/meta/batch).
- Выбор комнаты: команда показана компактными вертикальными карточками. Четыре уровня сложности (Лёгкий → Очень сложный) — цветные квадратные кнопки с целевым ELO.
- Превью боя: обе команды в сетке 3×4 (задний врага, передний врага, передний игрока, задний игрока). Своих юнитов можно перетаскивать, меняя порядок перед боем.
- Результат боя: зритель лога с кнопками Play/Pause и пошаговой навигацией. Клик по строке лога подсвечивает актора и цель прямо на поле юнитов. Проценты успешных атак/скиллов/ультов отображаются на карточках.
- Распределение: перетаскивание юнитов в пять цветных «банков» (Оставить, Мутация, Скрещивание, Химера, Удалить) с валидацией и отображением боевых процентов.
- Финальный выбор: та же механика подбора команды после распределения, через общий компонент unitSelector.
Дизайн-система
- Карточки юнитов: три варианта — полная MTG (150×200), компактная квадратная с процентами (105×105) и компактная вертикальная с портретом (100×140) — используются единообразно на всех экранах.
- Стиль: фэнтезийные шрифты и цвета навыков создают атмосферу D&D/MTG, вписанную в неоновый киберпанк интерфейса.
- Новая система лиг: диапазоны по 100 ELO (0–1150, 1150–1250, …, 2450+), хранятся в таблице leagues с названиями на двух языках. Эндпоинт /api/meta/batch позволяет получать мету для любого юнита мгновенно.
Серверные изменения
- Добавлен публичный batch-эндпоинт /api/meta/batch.
- Созданы миграции для таблиц leagues и skill_ultimate_meta_prev, обновлена функция update_skill_ultimate_meta().
- Исправлены middleware и SPA fallback — клиентские маршруты корректно отдают index.html.
Дальнейшие планы
- Визуальные портреты юнитов (сейчас заглушки).
- Анимации боя на Canvas.
- Лаборатория игрока с историей калибровок.
- Таймер вознесения и PvP-арена.
