React-компонент в виде вращающейся рулетки
5000 UAHЗдравствуйте, дорогие коллеги!
Цель:
На своем ютуб канале https://www.youtube.com/c/HikariSenshi/
Я планирую провести розыгрыш аккаунтов из игры Pubg Mobile, а также разных наушников и прочих призов.
Мне нужна анимированная рулетка, которая будет вращаться после нажатия и выбирать случайное значение,
среди секторов размещенных на ней. Обращаю внимание, что просто использовать функцию Math.random недостаточно, так как нужна именно "повышенная случайность" . Поэтому желательно их комбинировать.
ТехЗадание:
Здесь вкратце описаны мои требования
- Рулетка должна быть компонентом одного из топ-3 фреймворка
- Рулетка должна быть доступна в мобильной версии
- Логика
- Рулетка должна вращаться по нажатию и выбирать один из секторов случайным (или не очень) образом, повторений быть не должно
- Рулетка должна поддерживать консольные команды, которые позволяют управлять ее элементами
- addSector()
- removeSector()
- setGroupChance()
- setNextPrize()
- Состояние рулетки должно меняться для всех пользователей
- Доступ к запуску рулетки должен быть только у победителей
- Нужна будет базовая авторизация; данные можно хранить хоть в текстовом файле и парсить сплитом, вообще фиолетово
- Если вы прочитали тз, включите в ставку слово hikari
- Требования к виду
- Рулетка состоит из трех ключевых элементов
- Внешний круг
- Должен смотреться красиво, смысловой нагрузки не несет. Представляю его как деревянный ободок, обсуждается
- Собственно рулетка
- На рулетке должны располагаться секторы с призами
- Чем больше секторов тем меньше их доля от круга 360, думаю это понятно
- Элементы на секторах не должны вылезать за его пределы, а также должны быть различимыми
- Секторы которые уже выиграны, должны быть затемненными, и явно отличаться от доступных, призы на них также должны быть различимыми
- При нажатии на сектор должна открываться модалка с данными о призе. Если это аккаунт, то это ник, айди, краткое описание его ключевых преимуществ, ссылка на видеообзор
- Если это деньги или наушники, то тогда другие характеристики
- Данные можно хранить в пропсах, тут по желанию исполнителя
- Анимация вращения
- Можно реализовать ее разными путями, можно сделать чтобы рулетка вращалась, и сверху стрелка показывала на приз. Можно просто чтобы секторы поочередно закрашивались специальным цветом, и затем закрашенным становился в итоге выигранный приз
2.Затем должно всплыть анимация выигранного приза, это должно выглядеть более-менее красиво, в случае если приз не выигран, это так называемые нулевые сектора, тогда плачущий смайл
- Можно реализовать ее разными путями, можно сделать чтобы рулетка вращалась, и сверху стрелка показывала на приз. Можно просто чтобы секторы поочередно закрашивались специальным цветом, и затем закрашенным становился в итоге выигранный приз
- Виды призов
- Секторы 0
- Секторы с красным крестиком, при нажатии должно отображаться сообщение, если рулетка попадет сюда, значит вы проиграли
- Секторы с деньгами, можно использовать картинку с деньгами, в зависимости от их количества, либо мешочки рисовать, по желанию
- В описании категория: реальные деньги и количество: х
- Секторы с вещами
- Пока планируются аирподсы и напальчники
- Секторы с аккаунтами
- ID
- Nickname
- Ссылка на видос
- Краткое описание
- История аккаунта
- Секторы 0
- На рулетке должны располагаться секторы с призами
- Внешний круг
- Рулетка состоит из трех ключевых элементов
- Дополнительно: никаких дыр в логике, все должно отрабатывать четки и без "приветов" на стримах, в том числе и команды. Также рекомендую выводить в консоль дебаг информацию, чтобы не было сюрпризов
- Бюджет можно расширить
Актуальные фриланс-проекты в категории Javascript и Typescript
Ищу наставника по Claude Code для запуска веб-проекта с нуля**Кратко о задаче:** Я новичок без опыта в программировании. Есть готовое ТЗ на разработку сайта (42 страницы, Next.js, PostgreSQL). Хочу реализовать его самостоятельно с помощью Claude Code - нужен специалист, который настроит среду и научит меня работать с инструментом. ---… Javascript и Typescript, Обучение ∙ 23 часа 51 минута назад ∙ 16 ставок |
Обновление дизайна на сайтеНужно обновить дизайн существующего сайта используя HTML, CSS, JS: освежить внешний вид, сделать его современным и адаптивным под мобильные устройства. Требуется добавить плавные анимации и интерактивные элементы . HTML и CSS верстка, Javascript и Typescript ∙ 1 день 17 часов назад ∙ 86 ставок |
Консультация и аудит текущего проекта на Odoo 19 Community EditionИщем Odoo разработчика — соло-разработчика с опытом разработки на Odoo 19 Community Edition, в том числе с использованием Claude Code. Нам нужен специалист, который успешно реализовал проекты в Odoo и имеет практический опыт разработки с использованием Claude Code. Важно:… C и C++, Javascript и Typescript ∙ 1 день 23 часа назад ∙ 5 ставок |
Интернет-магазин одеждыНужен разработчик для интернет-магазина одежды Ищу опытного разработчика для создания полноценного интернет-магазина одежды с дроп-моделью продаж. Что нужно сделать: 6 страниц: главная, товар, корзина, оформление, аккаунт, админ панель Вход через Google аккаунт Корзина и… HTML и CSS верстка, Javascript и Typescript ∙ 3 дня 20 часов назад ∙ 101 ставка |
Full-stack разработка — Amazon PPC Dashboard (Stage 1)Нужен full-stack разработчик с опытом работы с Amazon API для реализации Stage 1 внутреннего PPC-дашборда. Проект реальный, данные живые, всё готово к старту. Прототип фронтенда (5 страниц, React + TypeScript): ЧТО УЖЕ ГОТОВО — Фронтенд-прототип на React 18 + TypeScript + Vite… Javascript и Typescript, Веб-программирование ∙ 6 дней 7 часов назад ∙ 33 ставки |