Создание темы оформления - rutony/rutonychat-testscripts GitHub Wiki

Самый простой способ это взять тему default за пример, и сделать на ее базе свою. Все темы располагаются в каталоге \themes и подкаталогах Steam (там располагаются работы из Мастерской Steam, \SteamLibrary\steamapps\workshop\content\524660)

Темы оформления (веб страница) подключатся к программе через WebSocket. Используя адрес ws://localhost:8383/Chat. Через протокол пересылаются несколько типов данных. Нас в первую очередь интересуют именно сообщения.

Их формат выглядит так:

public int id;                  // счетчик сообщений
public string message_id;       // id сообщения (с сайта источника)
public string user_id;          // id пользователя (с сайта источника)
public string site;             // название сайта
public string site_cut;         // сокращение сайта
public string site_img;         // ссылка на картинку сайта
public string sub;              // ссылки на иконки платного подписчика, а так же ссылки на разные специфические иконки, например, для твитча там может быть участие в каких то событиях
public string moderator;        // ссылка на иконку модератора
public string rank;             // название ранга
public string rank_img;         // ссылка на иконку ранга
public int rank_msg_qty;        // количество сообщений, исходя из данных база Рангов
public int rank_credits_qty;    // количество кредитов,  исходя из данных база Рангов
public string rank_time;        // количество времени,  исходя из данных база Рангов
public int x2;                  // четность сообщения (1 или 2)
public string user;             // никнейм
public string color_nick;       // цвет никнейма, если он не задан то цвет берется по умолчанию
public string user_avatar;      // ссылка на аватар пользователя
public string channel_avatar;   // ссылка на аватар канала (на случай режима сокастеров, захвата нескольких чатов с одного сайта, например, для твитча)
public string text;             // текст сообщения, с обработкой ссылок, смайлов и тд.
public string text_text;        // текст сообщения, raw данные, без обработки
public int reply;               // признак выделения сообщения (0 или 1)
public bool clear_chat;         // признак удаления сообщения (использеутся user_id, message_id)
public string color_text;       // цвет текста сообщения (например, для твитча комада /me, старая ее вариация)
public bool spec_user;          // признак что человек в Списке избанных
public string spec_img;         // ссылка на картинку избранное зрителя
public bool sub_alert;          // признак что это оповещение о платной подписке
public bool fol_alert;          // признак что это оповещение о бесплатной подписке
public bool don_alert;          // признак что это оповещение о донате
public bool host_alert;         // признак что это оповещение о хосте или рейде
public bool system;             // признак что это системное уведомление (например, подклчюение программы к сайту, ошибка подключения и тд)
public ChatMessages.enumMsgType type; // признак типа сообщения, message - обычное сообщение, alert - оповещение, system - системное уведомление, special - специально сообщение, например, подсветка сообщения с twitch за баллы канала

Помимо обычных сообщений происходит отправка настроек темы которые были сделаны в программе. Описания структуры не требуется, так как достаточно посмотреть инициацию параметров у темы default. Для этого используется функция function InitParams(data) { } в теме оформления. Там видно что тема оформления ассоциируется с программой через индекс темы. По сути, это просто ключевое слово, название темы, по нему программа понимает какие именно настройки следует отправить для темы. Далее в самой функции, в теме оформления, происходит модификация стилей.

	var themeIndex = "default";
	
	function InitParams(data) {
	
		//console.debug(data);
		
		if  (data.themeIndex == themeIndex) {
			getStyleRule('#div_nick').color = data.NicknameColor;
			getStyleRule('#div_nick').fontSize = data.FontNickname.size + 'px';
			getStyleRule('#div_nick').fontFamily = data.FontNickname.name;		
                ....

Файл в каталоге темы оформления, может быть файл params.json Который содержит определения типов и значений параметров для темы оформления. Примеры и описание типов, можно посмотреть в теме оформления default. Описание типов параметров для файла параметров, можно глянуть у скриптов, используется тот же формат. В файле параметров так же присутствует тот же идентификатор темы

Стоит упомянуть что при загрузке темы в Мастерскую, у которой есть параметры, так же следует указать идентификатор темы.