**1. Выбор шаблона:**

* Перейдите в галерею виджетов и выберите шаблон «Колесо фортуны».


**2. Настройка внешнего вида:**

* В разделе «Параметры» задайте желаемые цвета для виджета, подложки, текста и секторов. Вы также можете заменить изображение рулетки на свою картинку.

* Установите подходящие размеры: ширину, высоту и диаметр рулетки.

* Настройте цвета, шрифты и другие визуальные элементы по своему усмотрению.


**3. Добавление секторов и призов:**

* Откройте панель кода, нажав Alt+X.

* Определите количество секторов (например, 6, 8 или 12).

* Для каждого сектора укажите текст, а также при желании добавьте изображение или иконку.

* Установите вероятность выпадения каждого сектора.

```
// Определение призов, нужно будет вынести в параметры. При этом у нас нет компонента массива значений.
// Или можно выносить в элемент страницы в виде JSON
export const options = [
    { label: "Скидка 300р. на сумки", value: "Скидка 300р. на сумки", probability: 0 },
    { label: "Секретный приз", value: "Секретный приз", probability: 0 },
    { label: "–50% на всё", value: "–50% на всё", probability: 0 },
    { label: "-10% на всё", value: "-10% на всё", probability: 50 },
    { label: "1000 бонусных рублей", value: "1000 бонусных рублей", probability: 0 },
    { label: "Подарочный сертификат", value: "Подарочный сертификат", probability: 5 },
    { label: "–10% на новую коллекцию", value: "–10% на новую коллекцию", probability: 0 },
    { label: "Подарок 500 бонусов", value: "Подарок 500 бонусов", probability: 45 },
];
```

* Задайте цвет и толщину границы рулетки и линий секторов (например, 5px для толщины и RGB для цвета). Настраивается панели кода в разделе CSS / Less, открытие панели кода Alt+X.

```
.roulette_rotator {
  background: url(@roulette_bg_image) center;
  background-size: cover;
  border-radius: 100%;
  border: 5px solid rgb(116, 24, 236);
}
```


**4. Настройка механики вращения:**

* Установите параметры вращения, такие как скорость и количество оборотов. Для этого откройте панель кода (Alt+X) и укажите значения: *DEFAULT_SPEED = 3* (скорость анимации) и *DEFAULT_IDDLE = 2* (время простоя или задержка перед выполнением действия). Настраивается в панели кода, раздел JavaScript, открытие панели кода Alt+X.

```
import { Component, Locator, createContext, withContext } from "dom-utils";
const DEFAULT_SPEED = 3;
const DEFAULT_IDDLE = 2;
```


**5. Интерактивность:**

* Настройте действия при клике на кнопку (например, показать результат или выполнить другое действие). Для этого в конструкторе виджета найдите раздел «Страница игры» и задайте нужный переход.

* Добавьте возможность перехода на страницу с призами или другими вариантами.


**6. Сохранение и активация:**

* Сохраните изменения и активируйте виджет.

Вы можете вносить изменения в код рулетки, создавая уникальный дизайн по своему вкусу.\
Если у вас остались вопросы, обращайтесь в нашу техническую поддержку!