How the widget works

Data and refreshing

• getPlayerStats in widget/src/utils/faceit_util.ts loads the profile, match statistics and the ranking from the FACEIT Data API v4.
• The results go into React state and an effect refreshes them at the interval from the refreshInterval setting.
• In the generator preview the widget does not call the API: it gets data through the preview* props.
• VERSUS mode loads the second player with the same function, by the id from opponent_id.

Session in the browser data

With saveSession on, the widget stores the keys fcw_session_start, fcw_session_end, fcw_session_player-id and fcw_session_starting-elo in localStorage. On start it checks whether the session is still alive (the end is in the future and the player is the same). If so, wins and losses are counted from the saved start. If not, the session starts from zero. The session end is pushed two hours ahead on every refresh and when the page closes.

Size algorithm

resolveBannerSize in widget/src/utils/banner_size.ts turns the AUTO, Recommended and Manual modes into a target size clamped to the layout limits. From the target it computes a scale: when shrinking the scale fits the content to the box, when growing it rises only by 60 percent (GROWTH_SHARE) and the layout takes the rest. The widget sets the layout width and height and a zoom property on the wrapper. In Recommended mode the height is empty, so the banner fits its content.

Animations

• Showcase and Spotlight use the BroadcastDeck component: tabs, autoplay and pause.
• Ticker, Cycle and Reel change pages with a counter in useEffect; Marquee and Surge are animated by CSS.
• The banner border (::after) has pointer-events: none so it does not block clicks on the tabs.