WALL_OF_GAME.md

Wall of Game

Coordinating a new high score

1. 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';

2. 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');

3. 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.
  }
});

4. Now make a POST request to https://rensa.games/api/wall-of-game/scores/new-score with the gameId and walletAddress. This will generate and return a scoreId 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);
  });

5. 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 same gameId you received in the message from the parent in step 3.