Необходимо сверстать два макета
Обязательно использовать: React, Next и TypeScript
HUD:
Левая часть:
1. левый верхний угол прогресс бары (min, max, value) обязательно SVG
1.1. счетчик очков, просто присылаю текст сколько очков у игрока
2. ниже прогресс бара (ATTENTION!) строка уведомлений - плавное появление и затухание, работает по состоянию true/false
3. левый нижний угол: мини-карта (просто отобразить всё что на ней есть, программировать саму мини-карту не требуется)
Центр:
1. верхняя часть: кнопка LEVEL UP, появляется по состоянию true/false, после нажатия скрывается и передает событие (вывод в консоль любого сообщения)
2. нижняя часть: 6 кнопок, все кликабельные, отображаются по состоянию блока true/false, если true требуется с анимацией отобразить все 6 кнопок, если false скрыть все 6 кнопок, после нажатия на одну из кнопок ничего скрывать не нужно, достаточно показать что кнопка нажата (изменение размера или всё что угодно, можно любую анимацию на ваш вкус)
Желательно абсолютно все изображения использовать в формате SVG, макет: Figma
Пожалуйста напишите сколько будет стоить и сколько по времени займет
