Front End

Integration

To get the game up and running you will need to insert this snippet on the page where you want the game platform to be loaded:

    

      

      

      

    
    
<div class="scout-games-wrapper">
  <view-port></view-port>
</div>
<script
  src="https://fanteam-static.api.scoutgg-stg.net/application.js"
  data-white-label="fanteam"
></script>

    

      

      

      

    
    
<div class="scout-games-wrapper">
  <view-port></view-port>
</div>
<script
  src="https://fanteam-static.api.scoutgg.net/application.js"
  data-white-label="fanteam"
></script>

Configuration options

Scout Widgets API

The Widgets API is a way to change configuration parameters after the script has bootstrapped. After boostrapping window.ftWidgets will be available. ftWidgets contains a few helper functions, including the config scheme.

    

      

      

      

    
    
// Accessible in the browser after Scout Gaming
// platform has bootstraped
{
  "page": Function,             // Access to the Scout UI Router
  "renderSite": Function,       // Trigger a repaint of all visible components
  "config": Object,             // Access all configuration parameters
  "models": Object              // Access to all models used,
  "startApp": Function          // Force fantasy app to re-initialize for integration with your spa router or handling browser history navigation
}

You can change the configuration options on the fly. Example:

    

      

      

      

    
    
// Guard the API (check that its bootstrapped)
if (window.ftWidgets) {
  window.ftWidgets.config.lang = "es";
  window.ftWidgets.config.token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.KMUFsIDTnFmyG3nMiGM6H9FNFUROf3wh7SmqJp-QV30"
}

SPA Integration example

    

      

      

      

    
    
  const script = document.createElement('script')
  script.src = `https://fanteam-static.api.scoutgg.net/application.js`
  script.setAttribute('data-white-label', 'fanteam')
  script.setAttribute('data-base-path', `/fantasy/`) //basepath where fantasy app will be started at your navigation e.g /fantasy/

  document.body.appendChild(script)

  // Wait for script to load, then ensure app is started
  script.onload = () => {
    // Call startApp to initialize the app
    if(window.ftWidgets) {
      window.ftWidgets.startApp()
    }
  }

Integration with React example

    

      

      

      

    
    function FantasyApp({ token }) {
      useEffect(() => {
        const script = document.createElement('script')
        script.src = `https://fanteam-static.api.scoutgg.net/application.js`
        script.setAttribute('data-white-label', 'fanteam')
        script.setAttribute('data-token', token) //initial token if exist
        script.setAttribute('data-base-path', `/fantasy/`) //basepath where fantasy app will be started at your navigation e.g /fantasy/

        document.body.appendChild(script)

        // Wait for script to load, then ensure app is started
        script.onload = () => {
          // Call startApp to initialize the app
          if(window.ftWidgets) {
            window.ftWidgets.startApp()
          }
        }

      }, []) //run once

      useEffect(() => {
        if (window.ftWidgets) {
          window.ftWidgets.config.token = token
        }
      }, [token]) //update auth token when changed

      return (
        <div>
          <h1>Fantasy Page</h1>
          <div className="scout-games-wrapper">
            {/* //viewport required */}
            <view-port></view-port> 
          </div>
        </div>
      )
}

Authentication

Authentication is done by passing a JWT Token to the token config parameter. A secret to sign the JWT token will be provided to you by your key account manager. For more information on JWT you can see jwt.io. Generating the token must happen server side to not expose the secret in the frontend. The token should include the following payload:

    

      

      

      

    
    
{
  id: String,           // The unique identifier of your user
  username: String,     // A username that is displayed in the game
  exp: Number,          // Expiry of the token. Unix timestamp (seconds).
  iat: Number,          // Issued at. Timestamp of when the token was generated.
}

Node.js Express example of generating token.

    

      

      

      

    
    
const jwt = require("jsonwebtoken");
const moment = require("moment");
const config = require("../config");
const db = require("../services/database-connection");

module.exports = async function getToken(req, res, next) {
  const user = await db.query(`SELECT * FROM users WHERE id = ${req.user.id}`);
  const payload = {
    id: user.id,
    username: user.username,
    exp: +moment().add(1, "hour").format("X"), // Unix timestamp
    iat: +moment().format("X"), // Unix timestamp
  };

  const token = jwt.sign(payload, config.secret);

  res.send(token);
};