GameOS Wheel of Fortune Widget

Usage:

Install gameos-wof-widget

npm install gameos-wof-widget

In your root file add import

import { applyPolyfills, defineCustomElements } from 'gameos-wof-widget/loader';

In that file apply polyfills that you imported before

applyPolyfills().then(() => {
  defineCustomElements(window);
});

Then you can use the gos-wheel-of-fortune tag where you need it.

Attributes:

• token: String: Ready-to-use long-life token.

To get token and to be aware if current player have available WoF, you should make an API request GET /wof/available/{player_id}/ and token in headers.

headers: {
 "Authorization": "Bearer cCjIkGfFfPbbBkSI0agLIed0oeiikk"
}

Response example:

[
  {
    name: 'Binding',
    token:
      'eyJhbGciOiJIUz351iIsInR5cCI6IkpXVCJ9.eyJ3b2Zfc2VjX2lkIjoiMjI3ZmJjMzQtZTkzNS00ODdjLTlhOTItNWRhYzYzYjZhZTE1IiwijxkydG5lcl9pZCI6IlNreVNvZnRUZWNoIiwiZXhwaXJhdGlvbl9kYXRlIjoiMjAyMy0xMS0wMyAxMTo0Mjo0Ny43ODA2MjkrMDA6MDAifQ.MqlpORCdBrJz4WnTtTLIHI2cbVKGKTXkfX_YMSJgZF8',
    type: 'Single',
  },
];

Example of usage in React:

1. Assume that you already have a button that will open the WoF widget and you should manage the state of WoF visibility. In React you can do it by using useState hook:

const [isWidgetOpen, setIsWidgetOpen] = useState(false);

2. You need to create a function to handle on button click.

const onWidgetButtonClick = () => {
  setIsWidgetOpen(true);
};

3. Add a check in your code to show or hide WoF dependence of isWidgetOpen state.

{
  isWidgetOpen ? (
    <gos-wheel-of-fortune token="eyJhbGciOiJIUz351iIsInR5cCI6IkpXVCJ9.eyJ3b2Zfc2VjX2lkIjoiMjI3ZmJjMzQtZTkzNS00ODdjLTlhOTItNWRhYzYzYjZhZTE1IiwijxkydG5lcl9pZCI6IlNreVNvZnRUZWNoIiwiZXhwaXJhdGlvbl9kYXRlIjoiMjAyMy0xMS0wMyAxMTo0Mjo0Ny43ODA2MjkrMDA6MDAifQ.MqlpORCdBrJz4WnTtTLIHI2cbVKGKTXkfX_YMSJgZF8"></gos-wheel-of-fortune>
  ) : null;
}

4. When a player clicks on “Close” button you will receive the event “closeModal”. You can handle it in useEffect hook.

useEffect(() => {
  document.body.addEventListener('closeModal', () => {
    setIsWidgetOpen(false);
  });
  return () => {
    document.body.removeEventListener('closeModal', () => {
      setIsWidgetOpen(false);
    });
  };
}, []);

After the player claims the reward in the WoF widget, you will receive reward_id and player_id in the API provided as part of the integration process. In case of receiving error from the API call you will receive the event closeModal.