### Install Stake Engine SDK

Source: https://github.com/stakeengine/ts-client/blob/main/README.md

Instructions for installing the Stake Engine SDK using npm or yarn package managers.

```bash
npm install stake-engine
```

```bash
yarn add stake-engine
```

--------------------------------

### React: Subscribe to Balance Events

Source: https://github.com/stakeengine/ts-client/blob/main/README.md

An example React component that subscribes to 'balanceUpdate' events and displays the user's current balance. It manages the balance state and cleans up the event listener when the component unmounts.

```typescript
import React, { useEffect, useState } from "react";

type Balance = {
  amount: number;
  currency: string;
};

const BalanceDisplay: React.FC = () => {
  const [balance, setBalance] = useState<Balance | null>(null);

  useEffect(() => {
    const handleBalanceUpdate = (event: Event) => {
      const customEvent = event as CustomEvent<Balance>;
      setBalance(customEvent.detail);
    };

    window.addEventListener("balanceUpdate", handleBalanceUpdate);

    return () => {
      window.removeEventListener("balanceUpdate", handleBalanceUpdate);
    };
  }, []);

  if (!balance) {
    return <p className="text-gray-500">Waiting for balance update...</p>;
  }

  return (
    <div className="p-4 rounded-2xl shadow bg-white">
      <h2 className="text-lg font-semibold">Current Balance</h2>
      <p className="text-xl font-bold">

        {balance.amount} {balance.currency}
      </p>
    </div>
  );
};

export default BalanceDisplay;
```

--------------------------------

### Initialize RGSClient and Basic Operations (TypeScript)

Source: https://github.com/stakeengine/ts-client/blob/main/README.md

Demonstrates how to initialize the RGSClient with a URL and perform basic operations such as authentication, playing a game, ending a round, and triggering an event.

```typescript
import { RGSClient } from 'stake-engine';

const rgsClient = RGSClient({
  url: window.location.href,
});

const handleAuthenticate = async () => {
  const response = await rgsClient.Authenticate();
  return response;
};

const handlePlay = async (amount: number, mode: string) => {
  // ensure amount is RGS compliant amount (1 * API_MULTIPLIER)
  // Or make sure you pass in a bet level value.
  const response = await rgsClient.Play({
    amount,
    mode,
  });

  return response;
};

const handleEndRound = async () => {
  const response = await rgsClient.EndRound();
  return response;
};

const handleEvent = async () => {
  const response = await rgsClient.Event('some_event');
  return response;
};

/*
  Params:
    decimals: Forces a certain number of decimals, otherwise defaults to a reasonable value based on currency.
    removeSymbol: Removes the currency symbol from the string EG CAD$1.99 -> 1.99
    trimDecimalForIntegers: Any number that is a whole number will not display the decimal points. This may help when displaying bet levels. EG 2.00 -> 2
*/
DisplayAmount(balance, {
  removeSymbol: true,
  decimals: 2,
  wholeNumberDecimals: true,
});
```

--------------------------------

### Listen for Balance Updates (TypeScript)

Source: https://github.com/stakeengine/ts-client/blob/main/README.md

Shows how to listen for 'balanceUpdate' events emitted by the client using `window.addEventListener`. This allows the frontend to update the UI with the latest user balance.

```typescript
type Balance = {
  amount: number;
  currency: Currency;
};

window.addEventListener('balanceUpdate', (event: Event) => {
  const customEvent = event as CustomEvent<Balance>;
  console.log('Balance Event', customEvent.detail);
});
```

--------------------------------

### Svelte: Subscribe to Balance Events

Source: https://github.com/stakeengine/ts-client/blob/main/README.md

A Svelte component that subscribes to 'balanceUpdate' events to display the user's balance. It uses `onMount` to attach the event listener and ensures proper cleanup on component destruction.

```typescript
<script lang="ts">
  type Balance = {
    amount: number;
    currency: string;
  };

  let balance: Balance | null = null;

  const handleBalanceUpdate = (event: CustomEvent<Balance>) => {
    balance = event.detail;
  };

  // attach listener when component mounts
  onMount(() => {
    window.addEventListener("balanceUpdate", handleBalanceUpdate as EventListener);
    return () => {
      window.removeEventListener("balanceUpdate", handleBalanceUpdate as EventListener);
    };
  });
</script>

<div class="p-4 rounded-2xl shadow bg-white">
  {#if balance}
    <h2 class="text-lg font-semibold">Current Balance</h2>
    <p class="text-xl font-bold">
      {balance.amount} {balance.currency}
    </p>
  {:else}
    <p class="text-gray-500">Waiting for balance update...</p>
  {/if}
</div>
```

--------------------------------

### Listen for Round State Changes (TypeScript)

Source: https://github.com/stakeengine/ts-client/blob/main/README.md

Demonstrates how to listen for 'roundActive' events, which indicate changes in the game's round state. This can be used to enable or disable UI elements like game buttons.

```typescript
type RoundState = {
  active: boolean;
};

window.addEventListener('roundActive', (event: Event) => {
  const customEvent = event as CustomEvent<RoundState>;
  console.log('Balance Event', customEvent.detail);
});
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.