Skip to main content

Quick Start - Browser Games

Quick Start - Browser Based Games🕹ī¸

Introduction

Ready to list your game? Follow these straightforward steps to ensure a seamless integration with our API that gets you (and your users) paid faster.

  • Verify your game is compatible with Haste-SDK.
  • Install all Required Packages.
  • Register your game through the Haste Developer Portal and generate game access keys.
  • Review the Security standards for Haste and ensure your game follows the authoritative server model described there.
  • Ensure all required functions are implemented. If you'd like to reference our API documentation, you can do that here, but below you'll find a quick list of the functions required to list your game in Haste Arcade.

This browser quick start assumes you are building using a Single Page Architecture (SPA) with a server side API and a client side application such as create-react-app. If you're not using a Single-Page application (SPA), but instead are using a traditional server-side web application, you can look at using our @haste-express library.

Table of Contents​

Architecture​

Haste Browser Architecture

Server-side Functions​

The @hastearcade/server package is the primary entry point to the Haste ecosystem. The SDK is a wrapper for the Haste API and allows developers to HLP enable a game. The Haste ecosystem provides tools to handle most components of HLP; these functions are required to list your game with us, so make sure you have them somewhere in your code.

Initialize Haste using Haste.build()​

To initialize the Haste SDK for use in your server, you need to perform the the code in InitializeHaste.tsx:

The client ID and secret are defined in the developer portal on your game page. See the image below for reference:

Game Server Keys

For the third parameter to build you can use nonproduction or production. Please use nonproduction when testing as it will not send payouts. When you are ready to test payouts and/or you are in your true production environment please change the third parameter to production. The best practice is to use an environment variable to manage this process. See Testing for more details.

InitializeHaste.tsx

import { Haste } from "@hastearcade/server";

// see Testing for more details
const environment = "nonproduction";
const haste = await Haste.build(
  // Retrieve from Developer Portal
  process.env.HASTE_SERVER_CLIENT_ID,
  // Retrieve from Developer Portal
  process.env.HASTE_SERVER_CLIENT_SECRET,
  environment
);

/// Now do things with the haste object like submit a play or a score.

NOTE: It is recommended to create an abstraction (service, lib, etc) around the haste-sdk in your codebase. This will allow you to initialize one haste object.

Integrate with Haste Authentication and your Game Client​

Every game listed in Haste Arcade must integrate with the Haste authentication system to allow players to receive payment for their skills. Users must be logged in to Haste Arcade to submit their score and later receive payment. The game client (using @hastearcade/web) will send the login token to the server with each request. The server can use the following code to validate the token:

IntegrateWithGameClient.tsx

import { Haste } from "@hastearcade/server";
/// this is custom code specific to your server to retrieve the token from the web request
/// for example if you send the token using the Authorization header, you can extract it from the request headers
const token = receiveTokenFromRequest();

try {
  const playerId = await Haste.validatePlayerAccess(token);
  console.log(`The player authenticated has an id of ${playerId}`);
} catch (err) {
  console.error(`An error occurred while validating the player's token.`);
}

Note: the above code does not use the haste object created from build(). build() and validatePlayerAccess() are both static functions. All other functions (including get leaderboards, submit a score, etc. should utilize the haste object created from the build() function).

Get Leaderboard for Play Selection​

In the Haste Arcade players can choose what level they wish to play at. They can risk small amounts or larger amounts based on their desire to earn. The Haste ecosystem currently has multiple leaderboards that can be played for every game. Each tier requires additional funds to play the game (i.e. paying a penny vs paying a "quarter"). Every game in the arcade must support this concept in game. Thus, most games will display a dropdown UI to allow the player to select what leaderboard they wish to participate in. In order to retrieve the list of leaderboards to show in your dropdown you can use

In most cases you should be using the formattedName property of the leaderboard in your game client UI. The formatted name will create consistency across the arcade and will display the appropriate currency to the user.

GetLeaderboardsForPlaySelection.tsx

const haste = await Haste.build(
  process.env.HASTE_SERVER_CLIENT_ID,
  process.env.HASTE_SERVER_CLIENT_SECRET
);
const leaderBoards = haste.game.leaderboards();
console.log(leaderBoards);

/*
output:

[{
  id: "guid", // The GUID id will be required for the play endpoint
  name: "Beginner",
  cost: 4, // cost to play in this leaderboard in USD.
  currency: 'USD', // the current currency being utilized
  formattedName: "Beginner - 4 USD", // the formatted name to be used in a dropdown
}]

*/

Create a function to submit a Play and Score​

To play a game in a physical arcade, you have to first insert a quarter. The @hastearcade/server SDK requires a similar flow. Once a player has selected their Leaderboard, the developer will need to submit a "play" to the Haste API via the SDK. The following code shows a demonstration of this concept: The general flow of the scoring process should be:

  • The play call comes back with a good response, indicating the player can start the game.
  • The player plays the game.
  • When the game ends, the score function is called.

Play.tsx

const haste = await Haste.build(process.env.HASTE_SERVER_CLIENT_ID, process.env.HASTE_SERVER_CLIENT_SECRET);

/// leaderboardId comes GetLeaderboardsForPlaySelection.tsx
const play = await haste.game.play(new Player(playerId), new Leaderboard(leaderboardId));
console.log(play);

/*
output:

{
  id: "guid",
  gameId: "your game guid",
  playerId: "player guid",
  leaderboard: {
    id: "guid",
    name: "Beginner",
    cost: 4,
  }
}

When creating your game, make sure to maintain the business logic and scoring logic server-side for security reasons. Do not keep score or make any important game state decisions on the client.

Upon hitting an end state for your game (i.e. the player gets hit by a bomb and dies), it is time to submit your score. To submit a score, you'll need the original play object. The play object can be maintained however you choose (memory, database, cache, etc). The score SDK method takes the current Play object, the appropriate Leaderboard, and the score.

Score.tsx

// the play object is the output from Play.tsx
// score is a number submitted from your game server through the SDK to the Haste API
await haste.game.score(play, score);

These are the only required functions since you're in the QuickStart section. If you want to see more functions from the SDK, skip ahead to the Desired Functions section in the Detailed Instructions.

Client-side Functions​

While the primary work of integrating with Haste is performed on the server-side (where all game logic and score state should be maintained), Haste also provides a web-based SDK to assist in the authentication process. In order for a player to play your game, they will need to authenticate with the Haste Arcade.

The web SDK works by utilizing a Single Sign-On (SSO) system with Haste Arcade. The SDK is a wrapper to help facilitate this process.

If you're not using a Single-Page application (SPA), but instead are using a traditional server-side web application, you can look at using our @haste-express library.

Initialize HasteClient using HasteClient.build()​

Similar to the server-side SDK, @hastearcade/web starts by initializing a Haste object. In this case, the name of the object is HasteClient and the object should be maintained via an abstraction so it only needs to be initialized once.

The client ID used here can be found in the developer portal and will be for your game, not your server. See the image below for a reference point:

Game Client Keys

InitializeHasteClient.tsx

const hasteClient = HasteClient.build();

Implement the Login() function​

Once you have built your HasteClient object, you may begin using it in your game. For the application component that displays the game, the developer will need to handle two possible player types: authenticated and unauthenticated.

To determine if a player is authenticated the developer can utilize the following code:

CheckIfUserLoggedIn.tsx

const details = hasteClient.getTokenDetails();

The getTokenDetails function will return a HasteAuthentication object with the following definition:

/// token is what needs to be provided to your game server
export type HasteAuthentication = {
  token: string;
  isAuthenticated: boolean;
  picture: string; // url
  displayName: string;
};

If the player is unauthenticated, then present the user with the 'Sign in with Haste' branded button.

The button should execute the login code to redirect the player to the arcade for sign-in with hasteClient.login(). Once the player signs in to Haste Arcade, the player will be redirected back to the game.

If the player is already authenticated, then you can present the player with the leaderboard selection so they can choose what level they wish to play at. The leaderboard selection will allow the player to select the payment amount and level they are playing for the Arcade. To display the leaderboards, the developer will need to utilize the server-side SDK.

LoginIfUnauthenticated.tsx

hasteClient.login();

Š 2023 Haste, Inc.