Здраствуйте! Я очень долго сидел и пыхтел чтобы создать код из песочницы. Сделать одну прокрутку для рулетки раз плюнуть, но чтобы сделать 2 или больше прокруток подряд уже пришлось поднапрячься. Но это пока не работает. Проблема в том что состояние не меняется для проммиса который ждет что состояние targetIndex будет равен состоянию viewTargetIndex. Но они остаются такими же какими были и при запуске этого промисса. Проблемный код находиться чуть ниже console.log(2.1). Я так понимаю они не меняются потому что функция multiSpins которая содержит этот промисс рендерится с предыдущим состоянием. Я не могу понять как добиться этого.
Работа рулетки основана на библиотеке Swiper. Пролистывание рулетки основано на модуле autoplay библиотеки Swiper
Принцип работы:
- Пользователь нажимает на кнопку
- Состояние isSpin обновляется из-за чего запускается код в useEffect
- В useEffect при условии что isSpin true запускается функция multiSpins
- В multiSpins запускается рулетка с помощью swiper.ref.autoplay.start()
- Объявляются переменные spinsQnt и currentWin.Для чего они описано комментариями в песочнице.
- Создается промисс который меняет состояние targetIndex и завершается при окончании таймера.
- После завершения первого промисса по цепочке then запускается второй промисс.
- Запускается интервал который будет длиться до тех пор пока состояние targetIndex не будет равен viewTargetIndex
- Если условие в интервале истинно, то интервал очищается а состояния targetIndex и viewTargetIndex сбрасываются
- После сброса состояний промисс завершается
После завершения второго промисса по цепочке then запускается фрагмент кода
- spinsQnt декрементируется
- После небольшой задержки если spinsQnt > 0 multiSpins снова запускается и так рекурсивно пока spinsQnt >
- Если spinsQnt <= 0 то прокрутк(а/и) считаются завершенными и выполняется логика вывода призов.>
0
- В свойствах Swiper есть свойство onSlideChange в котором мы проверяем является ли текущий индекс активного слайда равным targetIndex.
- Если условие истинно, то останавливаем прокрутку swiperRef.autoplay.stop()
- Затем заменяем состояние viewTargetIndex на targetIndex
Все основные точки работы рулетки пронумерованы и выведены в консоль для упрощения вникания
Самое лучшее что у меня получилось: ссылка на песочницу:
https://codesandbox.io/p/sandbox/roulette-wf4wlg