# 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.hastearcade.com/integrate/sdk.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.