Duel - Copy this React, Tailwind Component to your project

Реализуйте игру "Дуэль" — Есть прямоугольное поле Canvas, на прямоугольном поле расположены фигуры — два круга. Круги представляют собой героев, которые сражаются друг с другом. — Герои двигаются по прямой вверх и вниз на противоположных сторонах экрана (как биты в арканоиде). По достижении края поля герой отталкивается и меняет направление движения. — Герои пользуются заклинаниями — стреляют друг в друга шариками поменьше. — Если герой встречает на своем пути курсор мыши, то он отталкивается от него как от границы поля — При соприкосновении с врагом, заклинание исчезает, а на табло засчитывается одно попадание. — Поле прямоугольное, выйти за границы нельзя — Если на героя кликнуть, то появляется менюшка, выполненная с помощью React, с помощью которой можно поменять цвет заклинаний, которые он кидает Для каждого героя есть два ползунка, которые настраивают частоту его стрельбы и скорость передвижения. Реализация должна быть выполнена на чистом канвасе и реакте, без использования сторонних графических или игровых библиотек.