Keys and wheel buttons — Dokumentation

Declare an action

An action is a setting of type binding. It has no default: only the player binds it. Racelink shows every action of the overlay on a tab of its own in the overlay’s settings, where the player presses the key or button to bind.

racelink.overlay.json

{
  "key": "TOGGLE_VISIBILITY",
  "label": "Show or hide",
  "type": "binding",
  "description": "Hides the overlay, and shows it again"
}

It goes among the other settings of the manifest; in Studio, add it like any setting.

Handle the press

Pressing what is bound never changes a setting. Racelink sends the overlay the action’s key, and the overlay decides what it means:

src/main.ts

overlay.on('action', (action) => {
  if (action === 'NEXT_PAGE') showPage(page + 1);
});

src/App.tsx

useEffect(
  () =>
    overlay.on('action', (action) => {
      if (action === 'NEXT_PAGE') setPage((page) => page + 1);
    }),
  [overlay],
);

A toggle that matches in the window and in OBS

The overlay’s window and its OBS page are separate copies. A toggle kept in a variable goes out of step the moment one of them reloads. overlay.actionCount(action) is how many times the action was pressed since Racelink started, and a page that opens later gets it at once, so derive the state from it:

src/main.ts

const applyVisibility = (): void => {
  root.hidden = overlay.actionCount('TOGGLE_VISIBILITY') % 2 === 1;
};
overlay.on('ready', applyVisibility);
overlay.on('action', applyVisibility);

Show what is bound

The setting’s value says what the player bound, for a hint in the overlay itself:

src/main.ts

const bound = overlay.settings.TOGGLE_VISIBILITY;
// { key: 'Ctrl+1' | null, button: { deviceName: 'Wheel', button: 5 } | null }
hint.textContent = bound.key ?? (bound.button ? `${bound.button.deviceName} ${bound.button.button}` : '');

To try an action while developing, add the overlay of your dev server to a layout in Racelink, bind the action in its settings and press it.