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:
- 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);
- You need to create a function to handle on button click.
const onWidgetButtonClick = () => {
setIsWidgetOpen(true);
};
- 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;
}
- 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.