How to configure betting odds overlap

To use the synchronization of overlapping odds development from client side is required. The development is simple - we need to configure property that are changeable for some interval of time.

const intervalOfOverlappingOdds = 3000; // this value is in ms and it handles the time of the overlapping
window.smpCustomBettingOverlapValue = false; // set the property to its default value

setInterval(() => {
	window.smpCustomBettingOverlapValue = !window.smpCustomBettingOverlapValue; // set the opposite value 
  window.dispatchEvent(new Event('smpCustomBettingOverlapValueChange')); // dispatch an event when the value changes, so our widgets can detect the changes
}, intervalOfOverlappingOdds);

Make sure to clear the interval when its not needed anymore!

Otherwise, you can have performance problems in your app.

How our widget's logic works

Inside the widget we are subscribing to smpCustomBettingOverlapValueChangeevent. If this event is dispatched -> we check the window.smpCustomBettingOverlapValue. Make sure this property is always a boolean!

When we detect changes in this field, we inform our odds components about the change and the overlapping occurs.

What we deprecated to include this functionality

Until version 6.0.0 we had data-betting-logo-overlap-timeattribute that was responsible for the time of the overlapping. With the new functionality this is handled in the side of our client (check the above example with intervalOfOverlappingOdds), so this attribute will be deprecated.

Additional info

Make sure to pass data-betting-logo-overlap because this logic is still relevant with this attribute. Check the docs in storybook for further info (example link: https://storybook.widgets.sportal365.com/?path=/docs/football-widgets-single-event-widget--single-event-widget)