Рецепты CSS/JS

Готовые примеры для своего CSS/JS (тарифы «База»/«Про»). Опираются на JS-API и CSS-таргетинг.

Расписание вайпов под сервером

Каждая строка сервера в мониторинге имеет атрибут data-server-key. Добавь подпись через CSS:

css

.srv[data-server-key="main"] .srv-name::after{
  content: "Вайп: понедельник 18:00";
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}

Фиксированная сетка и «бесплатно»

window.addEventListener('rb:ready', () => {
  RB.setConfig({ productsGrid: 3, zeroToFree: true });
});

Приветствие игрока

RB.on('rb:player', (e) => {
  console.log(`Привет, ${e.detail.player.name}!`);
});

Своё модальное окно

Витрина уже содержит контейнер #modal. Можно собрать свой блок и показать его своим кодом:

function openInfo(html) {
  const m = document.getElementById('modalBody');
  const modal = document.getElementById('modal');
  if (!m || !modal) return;
  m.innerHTML = html;
  modal.hidden = false;
}
RB.on('rb:ready', () => {
  // например, кнопка в шапке, открывающая инфо
});

Подсветка товаров категории

css

.card[data-category="VIP"]{
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-soft);
}

Внешние запросы из своего JS (fetch на чужие домены) блокируются политикой безопасности. Для аналитики используй встроенные поля, для проверки игрока — SteamIdSign.