Встраивание инструментов

Калькулятор характеристик и генератор имён живут не только на своих страницах — у каждого есть встраиваемая копия, которую можно поставить в статью, вики клуба или страницу своей кампании.

Это не то же самое, что встраивание листа персонажа: инструменты публичные. Домен в белый список добавлять не нужно, авторизации нет, SDK не нужен, доступа к чужим данным у страницы тоже нет.

Страница должна открываться по HTTPS

Мы разрешаем встраивание любому сайту, но только по https://. Страница по http:// — в том числе http://localhost во время разработки — получит от браузера пустой фрейм и ошибку Refused to frame … 'frame-ancestors' в консоли. Для локальной проверки поднимите свой dev-сервер по HTTPS или откройте страницу с тестового HTTPS-домена.

Калькулятор характеристик

Четыре способа набора, бонусы происхождения, подсчёт баланса. /iframe/tools/stats/

Генератор имён

Имена со значениями по восьми народам, с разбором каждой основы. /iframe/tools/names/

Быстрый старт

<iframe
    src="https://longstoryshort.app/iframe/tools/stats/"
    title="Калькулятор характеристик D&D"
    width="100%"
    height="900"
    loading="lazy"
    style="border:0"
    sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
></iframe>
<script>
window.addEventListener('message', function (event) {
    if (event.origin !== 'https://longstoryshort.app') return;

    var frame = document.querySelector('iframe[src^="https://longstoryshort.app/iframe/tools/"]');

    if (!frame || event.source !== frame.contentWindow) return;
    if (!event.data || event.data.type !== 'lss:embed:resize') return;

    frame.style.height = event.data.height + 'px';
});
</script>

Если во фрейме открылась страница «404», проверьте адрес: встраиваемые копии живут строго под /iframe/tools/, и опечатка в пути отдаёт 404, а не какую-то другую нашу страницу.

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

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

Параметр	Значения	По умолчанию
theme	dark, light	dark
template	default, hg, ph, dndr, by, ua, en	default

Незнакомое значение молча заменяется на значение по умолчанию: опечатка в атрибуте src не должна ломать вашу страницу.

Тема

light подходит для светлой вёрстки, dark — для тёмной. Своих цветов у инструмента нет, палитра целиком переключается параметром.

Перевод

template — это перевод игровых терминов, тот же самый, что игрок выбирает в листе персонажа. Меняются названия характеристик.

Значение	Перевод
default	Русский по умолчанию
hg	Hobby World
ph	PHantom Studios
dndr	Dungeons_ru
by	Беларуская
ua	Українська
en	English

Переводятся термины, а не весь интерфейс

Пояснения, подписи производных значений и справочные тексты остаются русскими при любом значении template. Параметр решает вопрос «как в этом переводе называется характеристика», а не «на каком языке говорит инструмент».

Генератор имён параметр template принимает и игнорирует: основы имён и их значения существуют только по-русски.

Высота

Инструмент сам сообщает свою высоту родительскому окну:

{ type: 'lss:embed:resize', height: 1240 }

Сообщение уходит после загрузки и дальше при каждом изменении целой высоты — например, когда читатель раскрывает строку характеристики или просит ещё имён. В нём нет ничего, кроме геометрии, поэтому оно отправляется всем (targetOrigin: '*').

Проверяйте и origin, и источник

Одной проверки event.origin мало: если на странице несколько наших фреймов, любой из них сможет менять высоту соседа. Проверяйте ещё и event.source === frame.contentWindow — как в примере выше.

Если вы не ставите слушатель, задайте фрейму фиксированную высоту с запасом: 900 пикселей хватает калькулятору, 1400 — генератору имён на широком экране.

Sandbox

Атрибут sandbox необязателен, но если вы его ставите, инструменту нужны четыре флага:

Флаг	Зачем
allow-scripts	Инструмент — это JS-приложение
allow-same-origin	Генератор помнит сохранённые имена в своём localStorage
allow-popups	Переход в лист персонажа открывается новой вкладкой
allow-popups-to-escape-sandbox	Открытая вкладка не должна унаследовать песочницу

Без allow-same-origin инструмент продолжает работать — Генератор просто перестаёт помнить сохранённые имена между заходами.

Переход в лист персонажа

В обоих инструментах есть кнопка, которая превращает собранное в лист персонажа Long Story Short. Внутри фрейма она всегда открывает новую вкладку.

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

Что можно и чего нельзя

Инструменты открыты для встраивания на любой сайт, в том числе коммерческий. Мы просим об одном: оставьте видимую подпись с ссылкой на Long Story Short — она уже есть внизу фрейма под инструментом.

Если вам нужно больше — броски из встроенного листа, состояние персонажа, права за столом — это уже встраивание листа персонажа со своим SDK и протоколом.