Виджеты для оверлеев

<!-- HTML -->
<div id="root">Привет, чат!</div>

/* CSS */
#root {
  font: 600 28px/1.2 var(--font, sans-serif);
  color: #fff;
  padding: 8px 14px;
}

// JS
window.addEventListener('onWidgetLoad', function (event) {
  // как у SE: данные — в detail события
  document.getElementById('root').textContent =
    event.detail.fieldData.title;
});

[
  {
    "name": "title",
    "type": "text",
    "label": "Заголовок / Title",
    "value": "Привет, чат!"
  }
]

window.addEventListener('onWidgetLoad', function (event) {
  // Как у SE: onWidgetLoad — CustomEvent, все данные в detail.
  const obj = event.detail;

  // fieldData: значения полей из панели настроек
  const title = obj.fieldData.title;

  // session: снимок счётчиков канала (data — SE-форма, см. «Модель данных»)
  const tips = obj.session.data['tip-total'].amount;

  // channel: id — Account ID владельца оверлея, username — Twitch-логин (или null)
  const channelId = obj.channel.id;

  // overlay: { isEditorMode: true } в превью редактора — гасите звук/анимации
  const inEditor = obj.overlay.isEditorMode;

  // recents и currency присутствуют для совместимости с SE (пустые/заглушки)
  render(title, tips);
});

// Панель настроек прислала новые значения — документ НЕ перезагружается:
// накопленное состояние (сообщения чата, очередь алертов) живёт дальше.
window.addEventListener('onWidgetLoad', function (event) {
  const fieldData = event.detail.fieldData;
  document.documentElement.style.setProperty('--accent', fieldData.accent);
});
// Один и тот же обработчик вызывается и на загрузке, и на fields:update.

{
  "listener": "tip-latest",
  "event": {
    "name": "ByANiSh",
    "amount": 300,
    "currency": "RUB",
    "message": "на кофе",
    "platform": "donatex",          // метка источника, см. «Донаты»
    "goalId": "cb6d4fc8-…"          // только для дельт сборов Fetta
  }
}

window.addEventListener('onEventReceived', function (evt) {
  const listener = evt.detail.listener; // имя события (таблица ниже)
  const event   = evt.detail.event;     // данные события

  if (listener === 'tip-latest') {
    showDonation(event.name, event.amount, event.currency, event.message);
  }
  if (listener === 'message') {
    // event.data — SE-форма чата: text, nick, badges, tags, emotes
    appendMessage(event.data.nick, event.data.text);
  }
});

{
  "follows": 128,
  "subs": 12,
  "bits": 0,
  "tips": 1450,
  "follower-latest":  { "name": "View", "avatar": null },
  "subscriber-latest": { "name": "Kuma", "amount": 3, "tier": "1000", "sender": null, "message": "" },
  "cheer-latest":     { "name": "Forge", "amount": 500, "message": "Hi!" },
  "raid-latest":      { "name": "StreamTeam", "amount": 24 },
  "tip-latest":       { "name": "ByANiSh", "amount": 300, "currency": "RUB", "message": "на кофе" },
  "donationGoals": [
    {
      "id": "cb6d4fc8-…",
      "platform": "fetta",
      "title": "переезд и съем квартиры",
      "currentAmount": 12500,
      "goalAmount": 60000,
      "currency": "RUB",
      "imageUrl": null,
      "endsAt": null
    }
  ]
}

// session.data — SE goal-model, выведена из плоских счётчиков:
{
  "tip-total":         { "amount": 1450 },  // = tips + сборы Fetta (native)
  "tip-month":         { "amount": 1450 },  // периоды сейчас указывают на тотал
  "tip-week":          { "amount": 1450 },
  "tip-session":       { "amount": 1450 },
  "tip-goal":          { "amount": 1450 },
  "tip-tip-latest":    { "amount": 300 },
  "follower-total":    { "count": 128 },
  "follower-month":    { "count": 128 },
  "subscriber-total":  { "count": 12 },
  "subscriber-goal":   { "amount": 12 },
  "cheer-total":       { "amount": 0 }
}

window.addEventListener('onSessionUpdate', function (evt) {
  const session = evt.detail.session;   // полный снимок SessionData
  const tips    = session.data['tip-total'].amount;
  const follows = session.data['follower-total'].count;
  updateCounters(tips, follows);
});

// Значение хранится под ключом на канале — переживает перезагрузки OBS.
const KEY = 'my-widget:counter';

// чтение (null — ключ ещё не задан)
const saved = await SE_API.store.get(KEY);
let counter = typeof saved === 'number' ? saved : 0;

// запись
counter += 1;
await SE_API.store.set(KEY, counter);

// FIELDS: поле типа "button" — панель настроек рисует кнопку с этим label.
// Нажатие приходит обычным событием:
window.addEventListener('onEventReceived', function (evt) {
  if (evt.detail.listener === 'event:test') {
    // event.field — имя поля-кнопки из FIELDS, event.value — её значение
    if (evt.detail.event.field === 'testDonation') {
      showDonation('TestTip', 100, 'RUB', 'тест из редактора');
    }
  }
});

<!-- HTML -->
<div class="counter">
  <span id="amount">0</span><span id="cur">₽</span>
</div>

/* CSS */
.counter {
  font-family: {{font}};
  font-size: {{fontSize}}px;
  font-weight: 600;
  color: {{color}};
  background: {{bg}};
  padding: 10px 18px;
  border-radius: {{radius}}px;
}
.counter #cur { opacity: 0.7; margin-left: 4px; }

// JS
(function () {
  var root = document.getElementById('amount');
  var cur  = document.getElementById('cur');
  var total = 0;
  var currency = '₽';

  function render() {
    root.textContent = Math.floor(total).toLocaleString('ru-RU');
    cur.textContent = currency;
  }

  // стартовое число — из снапшота сессии (данные уже есть при загрузке).
  // Как у SE: данные — в detail события.
  window.addEventListener('onWidgetLoad', function (event) {
    var obj = event.detail;
    total = obj.session.data['tip-total'].amount;
    currency = obj.fieldData.currency;
    render();
  });

  // живые донаты двигают счётчик
  window.addEventListener('onEventReceived', function (evt) {
    if (evt.detail.listener === 'tip-latest') {
      total += evt.detail.event.amount;
      render();
    }
  });
})();

[
  { "name": "font",     "type": "googleFont", "label": "Шрифт / Font",        "value": "Inter" },
  { "name": "fontSize", "type": "slider",     "label": "Размер / Size",       "value": 42, "min": 10, "max": 120, "step": 1 },
  { "name": "color",    "type": "colorpicker","label": "Цвет текста / Text",  "value": "#ffffff" },
  { "name": "bg",       "type": "colorpicker","label": "Фон / Background",    "value": "rgba(20,22,30,0.75)" },
  { "name": "radius",   "type": "slider",     "label": "Скругление / Radius", "value": 10, "min": 0, "max": 40, "step": 1 },
  { "name": "currency", "type": "text",       "label": "Валюта / Currency",   "value": "₽" },
  { "name": "testDonation", "type": "button", "label": "Тест / Test",         "value": null }
]