FACEIT BANNER / DOCS
Settings system
Every generator option is a single entry in a single file. That entry describes the type, the default, the URL parameter and the allowed values.
A setting definition
All settings live in src/settings/definition.ts as the SETTINGS_DEFINITIONS object. The Settings type and the SettingKey key follow from it automatically.
bannerRadius: {
type: 'number',
defaultValue: 14,
min: 0,
max: 48,
query: ['banner_radius'],
},| Field | Meaning |
|---|---|
type | string, string_undefined, number, boolean, statistic_type, language, ranking_state |
defaultValue | value in the generator; only values that differ from it go into the link |
defaultWidgetValue | optional different default for the widget itself (older links) |
query | URL parameter names; the first is the main one, the rest are aliases |
options / min / max / regex | value validation when loading |
requirements | the setting applies only when other settings have given values |
Data flow
- The generator keeps settings in React state and stores them in localStorage under the key fcw_generator_settings.
- The "Generate OBS link" button turns the settings into widget URL parameters.
- The widget reads the parameters from the address through useSettings(true) and does not read the generator’s localStorage.
- Values outside the allowed range are rejected and replaced by the defaults.
How to add a setting
- Add an entry to SETTINGS_DEFINITIONS with a type, a default and a query parameter.
- Use it in the widget through SETTINGS.get('name') and in the generator through settings.get / settings.set.
- For a toggle use the Checkbox component with the setting prop.
- Add the texts to the three translation files.
- Run pnpm docs: the parameter table in the documentation fills itself.
Updated: