Предикты

Предикты — это витрина предикта Twitch на сцене OBS плюс пульт в кабинете. Сам предикт живёт в Twitch: PulseCaster его не подменяет, а показывает и вызывает те же действия, что и панель предиктов на самом Twitch.

Из этого следует главное: предикт, запущенный из панели Twitch, со Stream Deck или чужим ботом, появится на сцене так же, как запущенный из кабинета. Никакой отдельной «нашей» игры нет — есть один предикт канала.

Нужна помощь разработчика?

Напишите mrgorkiy в Telegram. Укажите страницу, ожидаемый результат, что произошло и шаги для повторения. Можно приложить скриншот или короткое видео. Перед отправкой закройте токены, коды подтверждения и приватные ссылки OBS.

Что нужно, чтобы это работало

Условие	Зачем	Что будет без него
Статус Affiliate или Partner	Twitch разрешает предикты только им	Запуск вернёт отказ Twitch
Подключён Twitch-аккаунт владельца	Через него идут все вызовы	Раздел скажет, что аккаунт не подключён
Право channel:read:predictions	Ставки зрителей приходят событиями EventSub	Проценты на сцене замрут между действиями
Право channel:manage:predictions	Пульт запускает и завершает предикт	Пульт покажет предикт, но кнопки будут недоступны

Права выдаются при подключении Twitch-аккаунта владельца. Если раздел просит переподключиться — значит, токен выпущен до появления этих прав.

Кому в команде открыт раздел

Владельцу канала — всегда. Модератору — только если вы выдали ему зону Предикты в разделе Модераторы. Она вынесена отдельно от зоны Счётчики и OBS намеренно: итог предикта раздаёт баллы зрителей и не отменяется, поэтому вместе с оверлеями для сцены такое право не выдаётся само.

Что можно делать

На странице Владелец → Предикты две вкладки — так же устроены Голосования.

Предикты — всё, что нужно во время эфира:

• пульт: Закрыть ставки, Отменить и вернуть баллы, выбор победителя;
• итог последнего предикта;
• заготовки предиктов с запуском в одну кнопку и форма для новой заготовки.

Сцена OBS — то, что настраивается один раз:

• сроки показа на сцене после закрытия ставок и после итога;
• тумблер сумм ставок на сцене;
• оформление сцены с превью: цвета, размер текста, скругление, положение в источнике и появление;
• приватная OBS-ссылка для Browser Source и демонстрационный режим.

Как предикт ведёт себя на сцене

Стадия	Что на сцене
Приём ставок идёт	предикт виден, проценты растут, идёт обратный отсчёт
Ставки закрыты	предикт виден ещё 5 секунд, затем источник пустеет
Итог подведён	предикт возвращается на 15 секунд, победитель подсвечен
Отменён	предикт возвращается на 15 секунд с сообщением, что баллы вернулись
Предикта нет	источник пустой

5 и 15 секунд — значения по умолчанию, они настраиваются во вкладке Сцена OBS, блок Показ на сцене. Диапазон — от 0 до 3600 секунд; 0 означает «убрать сразу».

Пока идёт приём ставок, предикт виден всегда — это не настраивается: иначе зритель не поймёт, на что ставит.

Обратный отсчёт страница ведёт сама. Сервер присылает момент закрытия ставок, а не остаток, поэтому цифры идут ровно даже при коротком обрыве связи.

Заготовки

Заготовка — это заранее собранный предикт: заголовок, исходы и время приёма ставок. Запуск делается одной кнопкой, без набора текста в эфире.

Время приёма ставок вводится с переключателем секунды / минуты: 2 минуты и 120 секунд — одно и то же, но в списке заготовок это видно без пересчёта в уме.

Заготовки живут в PulseCaster, а не в Twitch. Удаление заготовки не влияет на идущий предикт.

Ограничения Twitch

Кабинет проверяет поля теми же мерками, что и Twitch, поэтому отказ приходит до запуска, а не после.

Поле	Ограничение
Заголовок	до 45 символов
Исходы	от 2 до 10, каждый до 25 символов
Время приёма ставок	от 30 секунд до 30 минут
Одновременных предиктов	ровно один на канал
Цвета исходов	два исхода — синий и розовый, три и больше — все синие

Ещё несколько правил самого Twitch, которые полезно знать:

• закрытый предикт нужно завершить: если победителя не выбрать за 24 часа, Twitch сам вернёт баллы;
• отмена возвращает зрителям все поставленные баллы;
• подведённый итог отменить нельзя — Twitch раздаёт баллы сразу;
• пока предикт идёт или закрыт, следующий запустить не получится.

Оформление сцены

Во вкладке Сцена OBS блок Оформление на сцене меняет вид предикта без CSS. Слева превью, справа настройки: нажмите на элемент превью — откроются его настройки. Кнопки Приём ставок и Итог переключают пример, Повторить проигрывает появление ещё раз.

Настройка	Что меняет
Положение в источнике	Сверху или Снизу прижимает плашку к краю источника OBS. Как в адресе ссылки оставляет решение параметру position в адресе, без него — сверху
Появление	откуда плашка выезжает: снизу, сверху, слева, справа или просто проявляется
Панель	цвет фона, его непрозрачность и скругление углов
Текст	основной цвет (вопрос и проценты), второстепенный (таймер, подписи, суммы ставок) и размер текста от 12 до 32 px; вопрос и таймер крупнее, подписи мельче — пропорции сохраняются
Исходы	цвета первого и второго исхода. Как в Twitch: при двух исходах второй красится своим цветом, при трёх и больше все исходы первого цвета
Победитель	цвет названия, полосы и значка победившего исхода после итога

Нажмите Сохранить оформление: открытый источник в OBS подхватит изменения сам, перезагружать его и менять ссылку не нужно. Это работает и в демонстрационном режиме: выдуманный предикт продолжает крутиться, а цвета меняются сразу. Вернуть стандартное подставляет встроенную тему — она тоже применяется только после сохранения.

Пока оформление не сохраняли, предикт выглядит так же, как раньше. Правила из поля Custom CSS в OBS сильнее настроек кабинета, поэтому готовые варианты оформления ниже задают свои цвета поверх них. С ?style=none в адресе встроенная тема отключена, и из этих настроек действует только положение.

OBS-ссылка

Публичная ссылка имеет вид:

/{channel}/predict/{link_id}/{token}

Токен показывается только сразу после создания или замены. PulseCaster хранит только хэш токена, поэтому старую полную ссылку нельзя повторно раскрыть из настроек. Если URL потерялся, нажмите Заменить ссылку и вставьте новый адрес в OBS.

Если ссылка выключена, токен неверный или канал не совпадает, страница отдаёт 404.

Как добавить в OBS

1. Откройте Владелец → Предикты → вкладка Сцена OBS.
2. Нажмите Создать ссылку и скопируйте адрес.
3. В OBS добавьте источник Browser / Браузер.
4. Вставьте ссылку в поле URL.
5. Задайте ширину 620 и высоту 400 для двух исходов или 1000 для 3–10 исходов. Это стартовые размеры с запасом: проверьте длинные названия, итог и свой шрифт; при необходимости увеличьте высоту.
6. При желании вставьте своё оформление в поле Custom CSS.

Кабинет обновляет состояние в фоне без замены страницы экраном загрузки и без сброса несохранённых настроек и начатой заготовки.

Страница прозрачная и приходит с готовым оформлением: если ничего не менять, предикт уже выглядит уместно на тёмной сцене. Она обновляется через SSE — перезагружать источник при запуске и завершении не нужно.

Параметры адреса

Параметр	Что делает
?demo=1	крутит выдуманный предикт по кругу: приём ставок, закрытие, итог, отмена
?style=none	отключает декоративную тему; для полностью собственного CSS, а не шаблонов ниже
?position=bottom	прижимает предикт к нижнему краю источника, если в кабинете выбрано Как в адресе ссылки
?position=top	прижимает к верхнему краю (так же ведёт себя адрес без параметра)

?demo=1 нужен, чтобы подбирать CSS: настоящий предикт для этого запускать не надо. Демонстрационный предикт живёт только на этой странице, в Twitch он не попадает и баллов не трогает.

Уберите ?demo=1 перед эфиром

Пока параметр в адресе источника, страница показывает выдуманный предикт и не следит за настоящим.

Положение проще задать в блоке Оформление на сцене: выбор Сверху или Снизу там сильнее параметра в адресе и применяется к уже добавленному источнику без правки URL. Параметр position нужен, когда положение хранится в адресе конкретного источника — так копировались ссылки раньше. Параметры совмещаются через &: ?demo=1&position=bottom.

style=none нужен только для оформления с нуля. Готовые CSS ниже дополняют встроенную тему: удалите style=none из адреса, полностью замените содержимое поля Custom CSS выбранным блоком и обновите источник OBS. Не смешивайте несколько шаблонов. Без темы не будет сетки, отступов, цветов и полос; скрытие неактивного таймера, чужого значка победителя и отключённых сумм сохраняется.

Стили в OBS

Оформление по умолчанию целиком завёрнуто в :where(), у которого нулевой вес. Поэтому обычное правило из Custom CSS — например .pc-predict { ... } — сильнее любого правила темы, и !important не нужен.

Стабильная структура страницы:

<div class="pc-predict"
     data-status="active"
     data-visible="true"
     data-layout="duo"
     data-outcomes="2"
     data-totals="true"
     data-hurry="false"
     data-prediction-id="9f2c...">
  <div class="pc-predict-head">
    <span class="pc-predict-title">Пройду босса с первой попытки?</span>
    <span class="pc-predict-timer" data-seconds="95">01:35</span>
  </div>
  <span class="pc-predict-note"></span>
  <ul class="pc-predict-outcomes">
    <li class="pc-predict-outcome"
        data-index="1"
        data-outcome-id="a1b2"
        data-color="blue"
        data-winner="false"
        data-percent="62.4"
        style="--pc-predict-percent: 62.40;">
      <span class="pc-predict-outcome-head">
        <span class="pc-predict-outcome-title">Да, легко</span>
        <span class="pc-predict-outcome-badge">Победитель</span>
      </span>
      <span class="pc-predict-outcome-stats">
        <span class="pc-predict-outcome-percent">62%</span>
        <span class="pc-predict-outcome-points">38 200</span>
        <span class="pc-predict-outcome-users">96</span>
      </span>
      <span class="pc-predict-outcome-bar"><span class="pc-predict-outcome-fill"></span></span>
    </li>
  </ul>
  <span class="pc-predict-total">61 250 баллов · 148 участников</span>
</div>

Что можно использовать в CSS:

Селектор или атрибут	Что это
.pc-predict	корень: плашка, рамка, фон, размер
.pc-predict-title	заголовок предикта
.pc-predict-timer	обратный отсчёт до закрытия ставок
.pc-predict-note	подпись стадии: закрытие, победитель, отмена
.pc-predict-outcome	один исход целиком
.pc-predict-outcome-title	название исхода
.pc-predict-outcome-badge	значок победителя
.pc-predict-outcome-percent	доля ставок в процентах
.pc-predict-outcome-points, .pc-predict-outcome-users	баллы и число участников
.pc-predict-outcome-bar, .pc-predict-outcome-fill	полоса и её заполнение
.pc-predict-total	итоговая строка под исходами
[data-status="active\|locked\|resolved\|canceled"]	оформление под стадию
[data-layout="duo\|multi"]	два исхода или больше
[data-outcomes]	сколько всего исходов
[data-color="blue\|pink"]	цвет исхода, как его отдаёт Twitch
[data-winner="true"]	победивший исход
[data-hurry="true"]	последние десять секунд приёма ставок
[data-totals="false"]	суммы ставок выключены в кабинете
--pc-predict-percent	доля ставок числом, для ширины полосы

Скрытием управляет сама страница: когда срок показа вышел, она ставит data-visible="false". Своё правило display для .pc-predict это не сломает. Если хочется своей анимации исчезновения, верните показ более сильным селектором и анимируйте прозрачность:

html body .pc-predict[data-visible] { display: flex; }
.pc-predict { transition: opacity 0.4s ease; }
.pc-predict[data-visible="false"] { opacity: 0; }

Готовые варианты оформления

Каждый вариант рассчитан на источник шириной около 620 пикселей. Вставляйте CSS в поле Custom CSS у Browser Source. Все три варианта требуют включённой базовой темы (без style=none).

Пройду босса? Да62% Нет38%

Полосы во всю ширину Тема по умолчанию: плашка со стеклом, синий и розовый как в Twitch.

62%01:3538%

Дуэль Два исхода лицом к лицу, между ними обратный отсчёт. Только для двух вариантов.

Пройду босса? Да 62% Нет 38%

Без плашки Только текст и тонкие полосы поверх игры или камеры.

Полосы во всю ширину

Оформление по умолчанию уже такое — этот блок нужен, если хочется поменять цвета или размер, не собирая всё с нуля. Достаточно переопределить переменные:

.pc-predict {
  --pc-predict-blue: #4cc9f0;
  --pc-predict-pink: #f72585;
  --pc-predict-win: #80ed99;
  --pc-predict-surface: rgba(6, 10, 18, 0.9);
  --pc-predict-text: #ffffff;
  --pc-predict-muted: #9aa7bd;
  --pc-predict-radius: 26px;

  font-family: "Bahnschrift", "Segoe UI", system-ui, sans-serif;
}

.pc-predict-title {
  font-size: 26px;
  text-transform: uppercase;
}

.pc-predict-outcome-bar {
  height: 14px;
}

Дуэль

Два исхода расходятся к краям, между ними обратный отсчёт. Вариант рассчитан ровно на два исхода: правило включается только при data-layout="duo", поэтому предикт с четырьмя исходами останется в обычном виде.

/* Дополнение к встроенной теме: уберите style=none из URL. */
.pc-predict {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-shadow: 0 2px 10px #000;
}
.pc-predict[data-layout="duo"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}
.pc-predict[data-layout="duo"] .pc-predict-head,
.pc-predict[data-layout="duo"] .pc-predict-outcomes {
  display: contents;
}
.pc-predict[data-layout="duo"] .pc-predict-title {
  grid-column: 1 / -1;
  grid-row: 1;
  text-align: center;
  overflow-wrap: anywhere;
}
.pc-predict[data-layout="duo"] .pc-predict-timer {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  text-align: center;
  font-size: 20px;
}
.pc-predict[data-layout="duo"] .pc-predict-outcome {
  grid-row: 2;
  grid-column: 1;
  grid-template-areas: "stats" "head" "bar";
  grid-template-rows: auto 1fr auto;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
}
.pc-predict[data-layout="duo"] .pc-predict-outcome:last-child {
  grid-column: 3;
}
.pc-predict[data-layout="duo"] .pc-predict-outcome-head,
.pc-predict[data-layout="duo"] .pc-predict-outcome-stats {
  justify-content: center;
  text-align: center;
}
.pc-predict[data-layout="duo"] .pc-predict-outcome-percent {
  font-size: 38px;
  color: var(--pc-predict-color);
}
.pc-predict[data-layout="duo"] .pc-predict-outcome-title {
  font-size: 18px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.pc-predict[data-layout="duo"] .pc-predict-note {
  grid-column: 1 / -1;
  grid-row: 3;
  text-align: center;
}
.pc-predict-outcome-points,
.pc-predict-outcome-users,
.pc-predict-total {
  display: none;
}

Без плашки

Текст поверх игры без фона: подходит, когда на сцене уже есть своя рамка.

html,
body {
  margin: 0;
  background: transparent;
  overflow: hidden;
}

.pc-predict {
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  color: #ffffff;
  font-family: "Inter", system-ui, sans-serif;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

.pc-predict-title {
  font-size: 21px;
}

.pc-predict-outcome-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.18);
}

.pc-predict-outcome-points,
.pc-predict-outcome-users,
.pc-predict-total {
  display: none;
}

/* Итог виден без чтения: победитель загорается, остальные почти исчезают. */
.pc-predict[data-status="resolved"] .pc-predict-outcome[data-winner="false"] {
  opacity: 0.25;
}

.pc-predict[data-status="resolved"] .pc-predict-outcome[data-winner="true"] {
  filter: drop-shadow(0 0 12px rgba(66, 211, 146, 0.55));
}

Промпт для AI-агента, который сделает свой CSS

Скопируйте текст ниже в ChatGPT, Codex или другой AI-инструмент, если хотите получить оформление под свою сцену.

Сделай готовый OBS Custom CSS для Browser Source с предиктом PulseCaster.

Контекст:
- OBS открывает прозрачную HTML-страницу с предиктом Twitch.
- Я не могу менять HTML и не хочу добавлять JavaScript.
- Можно использовать только CSS.
- У страницы уже есть оформление по умолчанию, завёрнутое в :where() с нулевым весом,
  поэтому мои обычные правила его перебивают без !important.
- HTML-структура такая:

<div class="pc-predict"
     data-status="active"
     data-visible="true"
     data-layout="duo"
     data-outcomes="2"
     data-totals="true"
     data-hurry="false">
  <div class="pc-predict-head">
    <span class="pc-predict-title">Пройду босса с первой попытки?</span>
    <span class="pc-predict-timer" data-seconds="95">01:35</span>
  </div>
  <span class="pc-predict-note"></span>
  <ul class="pc-predict-outcomes">
    <li class="pc-predict-outcome" data-index="1" data-color="blue" data-winner="false"
        data-percent="62.4" style="--pc-predict-percent: 62.40;">
      <span class="pc-predict-outcome-head">
        <span class="pc-predict-outcome-title">Да, легко</span>
        <span class="pc-predict-outcome-badge">Победитель</span>
      </span>
      <span class="pc-predict-outcome-stats">
        <span class="pc-predict-outcome-percent">62%</span>
        <span class="pc-predict-outcome-points">38 200</span>
        <span class="pc-predict-outcome-users">96</span>
      </span>
      <span class="pc-predict-outcome-bar"><span class="pc-predict-outcome-fill"></span></span>
    </li>
  </ul>
  <span class="pc-predict-total">61 250 баллов · 148 участников</span>
</div>

Что меняется само:
- data-status равен active, locked, resolved или canceled;
- data-visible становится false, когда срок показа вышел, и страница сама убирает предикт со сцены;
- data-layout равен duo при двух исходах и multi при трёх и более;
- data-color у исхода равен blue или pink: Twitch красит розовым только второй исход из двух;
- data-winner="true" появляется у победившего исхода после подведения итога;
- data-hurry="true" появляется в последние десять секунд приёма ставок;
- data-totals="false" появляется, если суммы ставок выключены в кабинете;
- переменная --pc-predict-percent на исходе всегда равна его доле ставок;
- .pc-predict-note содержит подпись стадии: закрытие ставок, победитель или отмена.

Задача:
- Сделай CSS для OBS Custom CSS.
- Фон должен быть прозрачным.
- Текст должен хорошо читаться поверх игры или камеры.
- Нужен стиль: [опиши стиль: неон, минимализм, ретро, киберпанк, спортивное табло и т.д.].
- Цвета сцены: [впиши основные цвета].
- Размер источника OBS: 620x1000, при двух исходах можно уменьшить высоту до 400.
- Число исходов, на которое рассчитываю: [например ровно два или до четырёх].
- Шрифт: [системный или file:///путь/к/моему-шрифту.woff2].

Требования к ответу:
- Верни только готовый CSS.
- Не используй внешние URL, кроме моего file:/// шрифта, если я его указал.
- Используй селекторы .pc-predict, .pc-predict-title, .pc-predict-timer, .pc-predict-note,
  .pc-predict-outcome, .pc-predict-outcome-title, .pc-predict-outcome-percent,
  .pc-predict-outcome-bar, .pc-predict-outcome-fill и атрибуты data-*.
- Не скрывай .pc-predict-outcome-title и .pc-predict-outcome-percent.
- Не пытайся скрывать предикт сам: это делает страница через data-visible.
- Ширину полосы бери из var(--pc-predict-percent), не из фиксированных значений.
- Сделай отдельный вид для data-status="resolved" и data-status="canceled".
- Учитывай, что исходов может быть от двух до десяти: правила под два варианта закрывай
  селектором .pc-predict[data-layout="duo"].
- Добавь font-variant-numeric: tabular-nums, чтобы проценты не дёргались.
- Если добавляешь анимацию, сделай её медленной и ненавязчивой.

Что делать, если на сцене пусто

Признак	Причина	Что сделать
Источник пуст всегда	виджет выключен или ссылка заменена	включите виджет во вкладке Сцена OBS и проверьте адрес в OBS
Предикт виден, проценты стоят	нет права channel:read:predictions	переподключите Twitch-аккаунт владельца
Предикт не появился после запуска из Twitch	события EventSub не дошли	откройте раздел Предикты — вход в него сверяет состояние с Twitch
Кнопки пульта недоступны	нет права channel:manage:predictions	переподключите Twitch-аккаунт владельца
Запустить не нажимается	на канале уже идёт предикт	подведите итог или отмените текущий
Twitch отказывает при запуске	канал не Affiliate и не Partner	предикты Twitch такому каналу недоступны

Безопасность

• Не публикуйте OBS-ссылку в чате или описании канала: по ней виден предикт канала.
• Не показывайте ссылку на стриме — в ней есть токен.
• Если ссылка утекла, нажмите Заменить ссылку: старый адрес сразу перестанет открываться.
• Если источник больше не нужен, нажмите Выключить виджет: заготовки и настройки останутся.