Добавьте настройки

Держите запущенными npm run dev и Racelink, а оверлей — на экране, как в шаге «Запустите оверлей».

Откуда берётся панель настроек

Настройки объявляются в манифесте racelink.overlay.json, в поле settings. По нему Racelink сам рисует панель, хранит выбор игрока для каждого оверлея на экране и передаёт значения в код. Писать панель руками не нужно. В шаблоне уже есть пять настроек; вот их начало:

"settings": {
  "pages": [
    {
      "id": "general",
      "label": "General",
      "groups": [
        {
          "label": "Display",
          "settings": [
            { "key": "showSpeed", "label": "Show speed", "type": "boolean", "default": true },
            {
              "key": "units",
              "label": "Speed units",
              "type": "select",
              "options": [
                { "value": "kph", "label": "km/h" },
                { "value": "mph", "label": "mph" }
              ],
              "default": "kph",
              "visibleIf": { "showSpeed": true }
            }
          ]
        }
      ]
    }
  ]
}

Панель делится на страницы (вкладки), страницы — на группы, группы — на настройки. У каждой настройки:

key

Имя в коде: overlay.settings.showSpeed. Латиница, без пробелов. После публикации не меняйте: у игроков сбросится выбранное значение.

label

Название, которое игрок видит в панели.

type

Вид поля: boolean (переключатель), number (число с min, max и step), select (выбор из списка), color, text, order (порядок пунктов), binding (клавиша или кнопка руля).

default

Значение, пока игрок ничего не менял.

visibleIf

Необязательно: показывать настройку только при значении другой. Здесь единицы скорости видны, только пока скорость включена.

Поменяйте настройку в Racelink

1. Откройте Макеты и выберите My HUD в списке оверлеев макета. Справа откроется панель Настройки с превью оверлея.
2. Поменяйте Throttle на другой цвет и выключите Show speed. Оверлей на экране меняется сразу, а настройка Speed units пропадает — это работает visibleIf.

Та же панель открывается и прямо на экране: в режиме редактирования (Изменить расположение) у оверлея есть кнопка Настройки с иконкой ползунков.

Выбор сохраняется для этого оверлея на этом макете. Если поставить на экран второй My HUD, у него будут свои настройки.

Как код получает значения

В src/main.ts настройки применяет функция applySettings:

const applySettings = (settings: Settings): void => {
  root.style.setProperty('--throttle', settings.throttleColor);
  root.style.setProperty('--brake', settings.brakeColor);
  root.style.setProperty('--opacity', String(settings.opacity / 100));
  if (speed) speed.hidden = !settings.showSpeed;
};

overlay.on('ready', (settings) => { applySettings(settings); /* … */ });
overlay.on('settings', applySettings);

• ready приходит один раз, когда известны настройки игрока. До него шаблон ничего не рисует, поэтому оверлей не мелькает видом по умолчанию.
• settings приходит каждый раз, когда игрок что-то поменял в панели.
• overlay.settings всегда полный и правильный: каждое значение есть и лежит в допустимых пределах. Проверять на пустоту не нужно.

Добавьте свою настройку

В шаге «Выведите живые данные» вы вывели время последнего круга. Дадим игроку его выключать: добавим настройку showLap. Сделать это можно в Studio или прямо в файле — результат один и тот же.

Способ 1. В Racelink Studio

1. Откройте Studio, выберите My HUD и вкладку Настройки. Слева — страницы, группы и настройки, посередине — поля выбранной, справа — предпросмотр панели.
2. Выберите слева Show speed и нажмите + Настройка: новая настройка встанет сразу после неё.
3. Заполните: Тип — «Вкл/выкл», Ключ — showLap, Название в панели — Show last lap, отметьте Включено по умолчанию.
4. Нажмите Сохранить (Ctrl + S). Studio запишет настройку в racelink.overlay.json.

Способ 2. В файле

В racelink.overlay.json добавьте строку после showSpeed в группе Display и сохраните файл:

{ "key": "showSpeed", "label": "Show speed", "type": "boolean", "default": true },
{ "key": "showLap", "label": "Show last lap", "type": "boolean", "default": true },

Каким бы способом вы ни добавили настройку, в терминале с npm run dev появится строка:

[racelink] Updated src/racelink-settings.ts from racelink.overlay.json.

Это SDK обновил типы настроек в src/racelink-settings.ts. Этот файл не редактируют: он всегда собирается из манифеста. Теперь примените настройку в коде — одна строка в applySettings:

  if (speed) speed.hidden = !settings.showSpeed;
  if (lap) lap.hidden = !settings.showLap;

Сохраните. Откройте настройки My HUD в Racelink: появился переключатель Show last lap, и он прячет время круга. В браузере проверьте ?demo&settings={"showLap":false}.

Если что-то пошло не так

• Новая настройка не появилась в панели. Проверьте терминал: если манифест с ошибкой, там будет racelink.overlay.json has problems и что не так. Частая причина — пропущенная запятая между настройками.
• Studio не даёт сохранить. Поле с ошибкой подсвечено: например, ключ с пробелом или такой же, как у другой настройки.
• Studio пишет, что файл изменён вне Studio. Вы поменяли манифест в редакторе, пока в Studio были несохранённые изменения. Выберите Загрузить из файла, чтобы взять версию из файла.