Запустите оверлей

Запустите сервер разработки

Запустите Racelink. Затем в терминале редактора, в папке my-hud, выполните:

$ npm run dev

> my-hud@1.0.0 dev
> vite

  VITE v8.3.5  ready in 253 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
[racelink] Connected to Racelink Studio as dev:my-hud.

Vite запустил сервер разработки по адресу http://localhost:5173/, а строка [racelink] Connected to Racelink Studio значит, что Racelink увидел проект.

Пока сервер работает, терминал занят: команда не заканчивается, так и должно быть. Не закрывайте его. Для других команд откройте второй терминал — кнопка + на панели терминала в VS Code. Остановить сервер — Ctrl + C в его терминале.

Откройте оверлей в браузере

Откройте http://localhost:5173/ в браузере. Вы увидите оверлей шаблона: полосы газа и тормоза, передачу и скорость. В браузере он растягивается на всё окно — это нормально, в Racelink у него будет свой размер.

Что покажет оверлей:

• Если игра запущена и вы едете, оверлей показывает живые данные из неё.
• Если игры нет, оверлей стоит на месте: передача N, скорость 0, полосы пустые. Это не ошибка — Racelink просто нечего передать.
• Если Racelink закрыт, страница сама переключается на демо-данные.

Чтобы оверлей ожил без игры, включите демо-данные: добавьте к адресу ?demo — http://localhost:5173/?demo. Машина поедет по кругу, педали и передачи начнут меняться, так что оверлей можно делать вообще без игры.

Демо-данные свои у каждой игры, потому что игры отдают разные данные: в демо Assetto Corsa Rally нет карты трассы и соперников, у Le Mans Ultimate есть запас виртуальной энергии, которого нет в других играх. Просто ?demo показывает демо игры, выбранной в Racelink; если Racelink закрыт — демо iRacing. Чтобы проверить оверлей на конкретной игре, не переключая её в Racelink, укажите её после знака =:

• ?demo=iracing — iRacing
• ?demo=le-mans-ultimate — Le Mans Ultimate
• ?demo=assetto-corsa — Assetto Corsa
• ?demo=assetto-corsa-evo — Assetto Corsa EVO
• ?demo=assetto-corsa-rally — Assetto Corsa Rally

Например, http://localhost:5173/?demo=assetto-corsa-rally покажет, как оверлей выглядит на ралли. Неизвестное имя игры не считается ошибкой: страница покажет демо так же, как с одним ?demo.

Найдите проект в Racelink Studio

В Racelink откройте раздел Studio. В списке Проекты появился My HUD с пометкой dev-сервер запущен. Выберите его: справа Studio показывает сам оверлей на демо-данных и путь проекта — разработка, сборка, проверка, превью, публикация. По этому пути пойдут следующие шаги руководства.

Поставьте оверлей на экран

1. Откройте раздел Макеты и нажмите Добавить.
2. В окне Добавить оверлей найдите My HUD — поиском по названию или в категории Управление и приборы. Он помечен Разработка.
3. Нажмите Добавить. Оверлей появится на экране поверх остальных окон в размере 360 × 120 из манифеста. Перетащите его куда удобно, затем нажмите Завершить редактирование.

Это тот же оверлей, что в браузере: оба берут код с сервера разработки, поэтому обновляются вместе.

Проверьте живую перезагрузку

Откройте src/style.css, найдите правило .gear и добавьте цвет:

.gear {
  font-size: clamp(24px, 45cqh, 120px);
  line-height: 1;
  color: #ff7a1a;
}

Сохраните файл (Ctrl + S). Номер передачи станет оранжевым сразу и в браузере, и на экране — без перезапуска и обновления страницы. Так вы будете работать дальше: меняете код, сохраняете, смотрите результат. Цвет можно оставить или вернуть как было.

Когда сервер остановлен

После Ctrl + C оверлей перестаёт обновляться, а проект с пометкой «Разработка» пропадает из Добавить оверлей. Пока проект не собран (это шаг «Соберите и проверьте»), Racelink показывает его только при запущенном npm run dev. Чтобы продолжить работу, снова выполните npm run dev.

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

• Адрес не 5173. Если порт занят, Vite берёт следующий — 5174 и так далее. Открывайте адрес из строки Local: в терминале.
• Проекта нет в Studio. Проверьте, что запущена полная версия Racelink, и посмотрите в терминал: строка Racelink did not accept the dev server объясняет причину.
• Пустая страница. Посмотрите ошибки в терминале с сервером и в консоли браузера (F12 → Console). Чаще всего это опечатка в последнем изменённом файле.