Задача: нарисовать интерфейс на странице симуляции боя.

Суть проекта: пользователи покупают персонажей и могут выставить их на бой. По итогам боя персонажи растут в опыте и прокачиваются.

Суть боя: пользователь выставляет одного из своих персонажей на бой с персонажами других игроков (нельзя выставить несколько своих персонажей на один бой). Симуляция боя происходит автоматически. Пользователь не может повлиять на исход боя или его процесс, может только смотреть.

Элементы интерфейса, которые необходимо нарисовать:
1. Список участвующих персонажей (карточки персонажей)
User actions:

• посмотреть информацию о персонаже (все 8 abilities + владелец).
• перейти на страницу персонажа.
• перейти на страницу владельца персонажа.
• сделать ставку на персонажа.

2. Поле боя

• Заставка к началу боя.
• Заставка таймера до начала боя.
• Заставка конца боя.
• Заставка с победителем и статистикой (дамаг за матч нанесенный им/ему, количество убийств, найденный лут).
• Заставка как улучшаются качества победителя.
• Выделение для персонажа пользователя.
• Выделение для персонажа, за которым наблюдает пользователь.
• Фон на время баттла (космический корабль).
• Рельеф, с которым взаимодействуют персонажи (прячутся за ним, обходят).
• Персонажи.
• Анимация выстрела.
• Анимация движения по карте.
• Анимация нанесения урона.
• Анимация получения урона.
• Анимация смерти.
• Единый паттерн для персонажей после смерти (фильтр снижающий насыщенность / ящик-гробик / иные вариации).

User actions:

• Наблюдать за всем полем.
• Зумить + двигаться с зумом по полю.
• Вернуться к своему персонажу.
• Возможность просмотреть информацию о персонаже по наведению.

3. Онлайн-табло происходящего: нанесённые удары, убийства
Например:
персонаж 1 -> персонаж 2 -100 hp
персонаж 2 -> персонаж 3 -100hp
персонаж 3 -> персонаж 2 -25 hp
персонаж 3 -> персонаж 2 kill
персонаж 1 -> персонаж 3 kill
User actions:

• Скрыть.
• Показать персонажа, связанного с действием.

Стек разработки:
Движок: Phaser.js, TypeScript.
Контракты: Truffle, Solidity, Open-Zeppelin.
Сайт: React, Next, WebPack, Web3.