# Welcome

Thank you for choosing to showcase your game on Haste Arcade! Our SDK was built to get you up and running fast, enabling you to leverage blockchain technology and engage a vibrant community of players. These docs will help you get started, ensuring a smooth integration process and successful deployment of your game on our platform.

Be sure to join the community:\
\
Twitter: <https://twitter.com/hastearcade>\
Telegram: <https://t.me/hastearcade>

#### Key Features of the SDK:

* **Easy Integration**: The [SDK](/integrate/sdk) provides a straightforward and lean set methods your game client can call to interact with the arcade. Most developers can be fully integrated in a few hours.
* **HST Tokens**: [HST is a utility token](https://alpha.1satordinals.com/market/bsv21/e03cf7038f36c97b3b654e1ba9a311f1c237e8c5ca0ea226c37eddd0895638c2_0), a digital asset that sits at the center of the Haste Arcade universe. Players and developers alike gain access to games and exclusive features using their HST. It's the arcade's native currency.
* **Web3:** The arcade integrates an open source web3 wallet called [Yours Wallet](https://github.com/yours-org/yours-wallet?tab=readme-ov-file), which means as a player or a developer, your personal information remains private.
* **Monetize**: Use HST to monetize your game by requiring payment to play, creating an in-game asset store, and more. The SDK makes accepting payments for your game a walk in the park.


# Quick Start Guide

To keep it simple, we've created a guide and an example integration that you can check out.

1. [Clone this repo](https://github.com/hastearcade/sdk-game-example) and follow the `README.md` to run an example game locally on your machine.
2. Navigate to <https://dev.hastearcade.com?gameId=f8c22e6c-1086-4529-8800-2c72f98b9915&src=http://localhost:1234>
3. At this point you should see 4 buttons rendered in an iFrame. Open up the your browser's dev console and then click the buttons and notice the logs.

{% hint style="info" %}
If you do not see the buttons rendered, check out the url query params and ensure that the <mark style="color:purple;">`src`</mark> param in step 2 matches where the demo game is being served.
{% endhint %}

<figure><img src="https://3904411602-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fejw7FsisKfPD5qk0ySlq%2Fuploads%2FFTzVu1Bgxi7NKvdA5Wx0%2FScreen%20Shot%202024-05-06%20at%206.16.17%20AM.png?alt=media&amp;token=3b9044dc-bb16-4d75-8b27-058e6b4442be" alt=""><figcaption></figcaption></figure>

4. Take a look at the `game.ts` file in the [example game repo](https://github.com/hastearcade/sdk-game-example/blob/main/src/game.ts) and get a feel for what is happening.
5. Integrate the needed methods into your game using the [SDK](/integrate/sdk), ensure your game is running locally, then update the `src` param found in the url of step 2 to wherever your game is being locally served.

{% hint style="info" %}
While in this test environment, use `f8c22e6c-1086-4529-8800-2c72f98b9915` as your `gameId` when creating a new instance of the `GameService`. In production you will use the gameId that is generated when you [register your game](/prep-work/register-your-game).
{% endhint %}

🍾 👏 Congrats if you see your game rendered in the iFrame. You've successfully integrated your game.

{% hint style="info" %}
Note that no database records are created and the messages the demo arcade returns are static (mock data). Just ensure that your game is properly handling and responding to the data it receives.
{% endhint %}

6. Once you've successfully integrated your game into the demo app, you can create and [API key](/prep-work/authentication), and [register your game](/prep-work/register-your-game).

Make sure to [update your production domain](/prep-work/register-your-game#update) and let us know when you are [ready to publish](/integrate/publish-your-game) 🚀


# Prepare To Integrate

First and foremost, **we're thrilled** to have you on board! To get you started, we've created an example game (it's really just buttons) that you can run locally and a demo arcade app that will host your game, mimicking the core functionality of the production arcade. If you've integrated your game successfully, you'll be able to play it within the demo arcade. See [Quick Start.](/intro/quick-start-guide)

Before we dive into that, let's take care of some prerequisites.

### 1. Create a Yours Wallet

Both players and developers need to have a [Yours Wallet](https://chromewebstore.google.com/detail/yours-wallet/mlbnicldlpdimbjdcncnklfempedeipj) to connect to the arcade. Instead of creating accounts the traditional way (email & password), users simply connect their wallet. The wallet is used to approve & broadcast transactions to the blockchain, sign messages, and more. To get started, click the link above, install the extension, and create your wallet. If you already have a Yours Wallet, feel free to skip this step.

### 2. Run Your Game

Since you're here, we assume you have a game ready to integrate. Before proceeding, please ensure your game is up and running in a local or development environment and is accessible via your web browser.


# Authentication

Before starting the integration process, you must generate an API key. This key is necessary for registering your game and managing its details in the next step.&#x20;

To generate your API key, [click here](https://dev.hastearcade.com/api-key) and connect your Yours Wallet. Once your wallet is successfully connected, your API key and developer account will be created, allowing you to manage multiple games under one account.

{% hint style="info" %}
Keep your API key safe and do not share it with anyone.
{% endhint %}


# Register Your Game

After you've [generated an api key](/prep-work/authentication), you need to generate a new `gameId` by registering your game. You can create multiple games using the same api key.

```typescript
// Request body
const type CreateGameRequest = {
    name: string; // game name
    description: string; // short game description
    coverUrl: string; // 1920x1080 pixels, 16:9 aspect ratio.
    scoreDisplay: "NORMAL" | "REVERSE"; // choose reverse if a lower value score is better
    prodDomain?: string; // your game's production domain 
};
```

```bash
curl -X POST https://api.hastearcade.com/game/create \
-H "Content-Type: application/json" \
-H "api-key: your-api-key-here" \
-d '{
    "name": "My New Game",
    "description": "An exciting puzzle game with challenging levels.",
    "coverUrl": "http://example.com/cover.jpg",
    "scoreDisplay": "NORMAL"
}'
```

## Update

If you need to make updates to your game you can simply make the following request:

{% hint style="info" %}
Before going live, make sure to update your prodDomain.
{% endhint %}

```bash
curl -X PATCH https://api.hastearcade.com/game/update \
-H "Content-Type: application/json" \
-H "api-key: your-api-key-here" \
-H "game-id: your-game-id" \
-d '{
    "description": "Updated description with more levels.",
    "coverUrl": "http://example.com/new-cover.jpg",
    "prodDomain": "https://myfunpuzzlegame.com"
}'

```


# SDK

The Haste Arcade SDK is a client-side integration that does not require server-side components, simplifying the setup process. The platform displays your registered game in a full-width and full-height iFrame, facilitating seamless communication between the host client (arcade) and your game.

### Installation

```bash
npm i haste-arcade-sdk
```

### Init()

Import and create a new instance of the `GameService`. Once the DOM is loaded, initialize it.

```typescript
import { GameService, Origin } from "haste-arcade-sdk";

const game = new GameService(
    "f8c22e6c-1086-4529-8800-2c72f98b9915", // your gameId
    Origin.DEV, // this is the host (arcade) origin. Use DEV or PROD
);

// Ensure that the DOM is loaded before calling the init method
document.addEventListener("DOMContentLoaded", function () {
    game.init();
});

// This may be implemented differently depending on your game's framework.
```

### Play()

Your game must include a "Play" or "Start" button to initiate gameplay. Upon clicking this button, a message will be sent to the arcade, prompting it to request that the user lock some HST into a smart-contract to begin playing.

{% hint style="info" %}
Wait until you receive a <mark style="color:purple;">**`playId`**</mark> back from the arcade before starting the game. This is done via the <mark style="color:purple;">**`on()`**</mark> method.
{% endhint %}

```typescript
myPlayButton.onClick(async()=> {
    // You should show some suspense here
    const res = await game.play();
    if (!res?.playId) {
        // kill suspence and DO NOT start the game
        return;
    };   
    console.log(res.playId);
    // kill suspence and start the game
};




// Alternantively, you can call play and listen for a play event
game.play();
game.on("play", (message: ReceivePlayMessage) => {
    console.log(message.playId);
});
```

### submitScore()

When the user has finished playing the game, call the `submitScore()` method and pass in the `playId` and `score`. The user will will sign a message with their wallet and manually submit their score. No need to listen for messages for score submissions.

<pre class="language-typescript"><code class="lang-typescript">let score = 0;
let timeToFinsih = 0;
let ringsCollected = 0;

// handle setting the score variable somewhere in your game logic then call submitScore()
score += ringsCollected - timeToFinish;
const res = await game.submitScore(playId, score);
console.log(res.playId);




<strong>// Alternantively, you can call submitScore and listen for a score event
</strong>game.submitScore();
game.on("score", (message: ReceiveSubmitScoreMessage) => {
    console.log(message.playId);
});
</code></pre>

### getLeaderboard()

If you'd like to display the current leaderboard directly in your game, the SDK makes this simple.

<pre class="language-typescript"><code class="lang-typescript"><strong>myLeaderboardButton.onClick(()=> {
</strong>    // use suspense
    const res = await game.getLeaderboard();
    console.log(res.leaderboard);
    // kill suspence
};




// Alternantively, you can call getLeaderboard and listen for a leaderboard event
game.getLeaderboard();
game.on("leaderboard", (message: ReceiveLeaderboardMessage) => {
    console.log(message.leaderboard);
});
</code></pre>

### transferHst()

Monetize your game with HST transfers by requesting payment from within your game. Simply pass in the amount of HST to transfer.

<pre class="language-typescript"><code class="lang-typescript"><strong>myPaymentButton.onClick(()=> {
</strong><strong>    // use suspense
</strong>    const res = await game.hstTransfer(100);
    if (!res.txid) {
        // If the user rejects the request, there will be no txid kill suspense
        return;
    };   
    console.log(res.txid);
    // Provision access or give them what they paid for and kil suspense
};




// Alternantively, you can call hstTransfer and listen for a hstTransfer event
game.hstTransfer(100);
game.on("hstTransfer", (message: ReceiveHstTransferMessage) => {
    console.log(message.txid);
});
</code></pre>


# Publish Your Game

When you are ready to publish your game to the arcade, please contact an admin in our telegram channel.

Telegram: <https://t.me/hastearcade>


