Game Iframe File Example

In order to get the JWT token from the parent website ( bananaclip.io ) use these functions in your main game html file :

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Game iframe file example</title>
    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">
   <!-- Adding SockJS and STOMP CDN links -->
    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script>
  </head>
  <body>
    <div id="unity-container" class="unity-desktop">
      <canvas id="unity-canvas" tabindex="-1"></canvas>
      <div id="unity-loading-bar">
        <div id="unity-logo" style="display: none;"></div>
        <div id="unity-progress-bar-empty">
          <div id="unity-progress-bar-full"></div>
        </div>
      </div>
      <div id="unity-warning" style="display: none;"></div>
    </div>

    <script>
      const pendingRequests = new Map();

      // Utility function to generate a GUID
      function generateGUID() {
          return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
              const r = (Math.random() * 16) | 0;
              const v = c === 'x' ? r : (r & 0x3) | 0x8;
              return v.toString(16);
          });
      }

      function requestGetMessage(type, functionToInvoke) {
          return new Promise((resolve, reject) => {
              const requestId = generateGUID(); // Generate a unique identifier for the request

              // Store the resolver and function in the map
              pendingRequests.set(requestId, { resolve, functionToInvoke });

              // Send the request to the parent window with the requestId
              window.parent.postMessage({ type: type, requestId }, '*');

              // Timeout to reject the promise if no response is received
              setTimeout(() => {
                  if (pendingRequests.has(requestId)) {
                      pendingRequests.delete(requestId);
                      reject(new Error(`Request for type "${type}" timed out`));
                  }
              }, 5000); // 5 seconds timeout
          });
      }

      // Event listener to handle messages from the parent window
      window.addEventListener('message', (event) => {
          const data = event.data;
          // Handle localStorage response
          if (data.type && data.requestId) {
              const requestEntry = pendingRequests.get(data.requestId);

              if (requestEntry) {
                  const { resolve, functionToInvoke } = requestEntry;

                  // Invoke the stored function, if provided
                  if (typeof functionToInvoke === 'function') {
                      try {
                          functionToInvoke(data.value);
                      } catch (err) {
                          console.error('Error while invoking callback function:', err);
                      }
                  }

                  // Resolve the promise with the value
                  resolve(data.value);

                  // Clean up the map
                  pendingRequests.delete(data.requestId);
              }
          }
      });

      // requestGetMessage('getAccessToken').then(token => {
      //     console.log('Received Access Token:', token);
      // }).catch(err => console.error(err));

      // requestGetMessage('getRoomId').then(roomId => {
      //     console.log('Received Room ID:', roomId);
      // }).catch(err => console.error(err));

    </script>
  </body>
</html>

PreviousGame Result Webhook Handler

Last updated 3 days ago

<!DOCTYPE html> <html lang="en-us"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Game iframe file example</title> <link rel="shortcut icon" href="TemplateData/favicon.ico"> <link rel="stylesheet" href="TemplateData/style.css">  <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script> </head> <body> <div id="unity-container" class="unity-desktop"> <canvas id="unity-canvas" tabindex="-1"></canvas> <div id="unity-loading-bar"> <div id="unity-logo" style="display: none;"></div> <div id="unity-progress-bar-empty"> <div id="unity-progress-bar-full"></div> </div> </div> <div id="unity-warning" style="display: none;"></div> </div> <script> const pendingRequests = new Map(); // Utility function to generate a GUID function generateGUID() { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { const r = (Math.random() * 16) | 0; const v = c === 'x' ? r : (r & 0x3) | 0x8; return v.toString(16); }); } function requestGetMessage(type, functionToInvoke) { return new Promise((resolve, reject) => { const requestId = generateGUID(); // Generate a unique identifier for the request // Store the resolver and function in the map pendingRequests.set(requestId, { resolve, functionToInvoke }); // Send the request to the parent window with the requestId window.parent.postMessage({ type: type, requestId }, '*'); // Timeout to reject the promise if no response is received setTimeout(() => { if (pendingRequests.has(requestId)) { pendingRequests.delete(requestId); reject(new Error(`Request for type "${type}" timed out`)); } }, 5000); // 5 seconds timeout }); } // Event listener to handle messages from the parent window window.addEventListener('message', (event) => { const data = event.data; // Handle localStorage response if (data.type && data.requestId) { const requestEntry = pendingRequests.get(data.requestId); if (requestEntry) { const { resolve, functionToInvoke } = requestEntry; // Invoke the stored function, if provided if (typeof functionToInvoke === 'function') { try { functionToInvoke(data.value); } catch (err) { console.error('Error while invoking callback function:', err); } } // Resolve the promise with the value resolve(data.value); // Clean up the map pendingRequests.delete(data.requestId); } } }); // requestGetMessage('getAccessToken').then(token => { // console.log('Received Access Token:', token); // }).catch(err => console.error(err)); // requestGetMessage('getRoomId').then(roomId => { // console.log('Received Room ID:', roomId); // }).catch(err => console.error(err)); </script> </body> </html>