- When the game loads, establish an event listener to listen for
message
events from the parent window:
window.addEventListener('message', (event) => {
if (event.origin !== 'https://rensa.games') return;
const { data, origin, source } = event;
// Do something with the message
});
data
will conform to this shape:
{
type: string,
payload: {}
}
data.type
can be one of the following:
| 'TEXT_MESSAGE';
| 'REQUEST_GAME_ID';
| 'GAME_ID';
| 'GAME_DETAILS';
| 'SCORE_ID';
| 'GAME_DATA';
| 'SCOREBOARD_DID_LOAD';
| 'WALLET_ADDRESS';
| 'REDIRECT';
- When the game has reached an end state, send a message to the parent window via the
postMessage
api requesting a game ID, and wallet address for the player:
const message = {
type: 'REQUEST_GAME_DETAILS',
payload: {},
};
window.parent.postMessage(message, 'https://rensa.games');
- Rensa Games will then
postMessage
back with the following:
rensa.games window:
const message = {
type: 'GAME_DETAILS',
payload: {
gameId: <The string id of the game. Conforms to an IPFS hash>,
walletAddress: <The wallet address of the player as a string>,
}
};
gameFrame.postMessage(message, <origin for hosted webGL package>);
Which will be handled by the event handler you previously initialized:
game running in iFrame
window.addEventListener('message', (event) => {
if (event.origin !== 'https://rensa.games') return;
const { data, origin, source } = event;
if (data.type === 'GAME_DETAILS') {
// Perform the next step with the game details.
}
});
- Now make a
POST
request tohttps://rensa.games/api/wall-of-game/scores/new-score
with thegameId
andwalletAddress
. This will generate and return ascoreId
for you to use in the next step. This can be done in JavaScript or C#. The JavaScript would be something like:
const requestBody = {
gameId: <game id from step 3>,
walletAddress: <wallet address from step 3>,
score: <player's score. Should be an Integer>,
};
const request = new Request(
'https://rensa.games/api/wall-of-game/scores/new-score',
{
method: 'POST',
body: JSON.stringify(requestBody),
}
);
fetch(request)
.then(response => {
console.log(response);
}).catch(error => {
console.error(error);
});
- Finally, in the response block,
postMessage
to the parent with the scoreId.
fetch(request)
.then(async (response) => {
const res = await response.json();
const { scoreId } = res;
parent.postMessage(
{
type: 'SCORE_ID',
playload: { scoreId },
},
'https://resna.games'
);
})
.catch((error) => {
console.error(error);
});
NOTE:
<gameId>
will be the samegameId
you received in the message from the parent in step 3.