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
Виправити CSS/DOM-верстку карток у Chrome extension для локалізації D&D BeyondЄ Chrome extension Manifest V3, який локалізує сайт D&D Beyond українською. Проєкт написаний на TypeScript + WXT. Розширення працює через content script: знаходить англійський текст на сторінках D&D Beyond і замінює його українським перекладом. Проблема виникла на сторінці:… HTML та CSS верстання, Javascript та Typescript ∙ 1 день 10 годин тому ∙ 37 ставок |
Розробка платформи AM Mobility (автосервіс, парковка, страхування, оренда автомобілів)
259 176 UAH
Шукаємо команду або досвідченого Full Stack розробника для створення MVP платформи AM Mobility. AM Mobility — це єдина цифрова екосистема для автомобілістів, що об'єднує в одному додатку та веб-платформі: парковку; автосервіс; шиномонтаж; автомийку; оренду автомобілів;… Javascript та Typescript, Веб-програмування ∙ 1 день 19 годин тому ∙ 98 ставок |
Gsap анімації
1000 UAH
Доброго дня. Треба внести правки в поточному проєкті. Потрібен фахівець, який добре працює на gsap/lenis Треба зробити анімацію карточок. Детально ТЗ тут: https://www.figma.com/design/5bLEJudN5LPpB9ZSoJa2Eb/Untitled?m=auto&t=qwyluUctL1lrMNvh-6 Треба проявити креатив та… Javascript та Typescript, Веб-програмування ∙ 2 дні тому ∙ 21 ставка |
Комерційна on-premise платформа відеозв'язку «ViM»Требуется разработати on-premise систему відеозв'язку з базовим розрахунком на 100 одночасних підключень (10 ізольованих кімнат по 10 осіб). Платформа повинна мати закладену архітектуру для майбутнього горизонтального масштабування до 1000 користувачів шляхом додавання нових… Javascript та Typescript, Веб-програмування ∙ 2 дні 20 годин тому ∙ 32 ставки |
Шукаю наставника з Claude Code для запуску веб-проєкту з нуля**Коротко про завдання:** Я новачок без досвіду в програмуванні. Є готове ТЗ на розробку сайту (42 сторінки, Next.js, PostgreSQL). Хочу реалізувати його самостійно за допомогою Claude Code - потрібен спеціаліст, який налаштує середовище і навчить мене працювати з інструментом.… Javascript та Typescript, Навчання ∙ 3 дні 23 години тому ∙ 18 ставок |