Инструкция по настройке виджета «Колесо фортуны — Рулетка»
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. Сохранение и активация:
- Сохраните изменения и активируйте виджет.
Вы можете вносить изменения в код рулетки, создавая уникальный дизайн по своему вкусу.
Если у вас остались вопросы, обращайтесь в нашу техническую поддержку!
