Games Integration
Guide

# serve this one folder — same origin as the page that mounts the game
/wasabi/wasabi-games.es.js    # the library ES bundle
/wasabi/manifest.json         # asset manifest (CSS injection)
/wasabi/chunks/               # per-game JS chunks (game art/audio inlined as data URIs)
/wasabi/assets/               # CSS + fonts & CSS-referenced images

<div id="game" style="width:100%; height:720px;"></div>

<script type="module">
  const origin      = location.origin;
  const wasabiUrl   = `${origin}/wasabi/wasabi-games.es.js`;
  const manifestUrl = `${origin}/wasabi/manifest.json`;

  const { mountOperatorGame } = await import(/* @vite-ignore */ wasabiUrl);

  await mountOperatorGame(document.getElementById('game'), {
    game:       'dice',                                  // any id from Game IDs
    backendUrl: 'https://api.yourplatform.com/games/api',   // library appends /dice
    cdnUrl:     'https://cdn.wasabi.casino',                // currency icons / avatars
    demoMode:   true,                                     // ← runs on mock data, no backend
    session:    { player: 'demo-1', currency: 101, balance: 1000, minBet: 0.10, maxBet: 500 },
    library:    { bundle: wasabiUrl, manifest: manifestUrl },
    callbacks:  {
      onBet:           (e) => console.log('bet', e),
      onRoundFinished: (e) => console.log('done', e),
      onServerError:   (e) => console.error('error', e),
    },
  });
</script>

  Player            Operator Backend         BetterPlay Games          Operator Wallet
    │                      │                        │                         │
    │  open game           │                        │                         │
    │─────────────────────▶│  mint launch JWT       │                         │
    │   302 to /launch?token=…                      │                         │
    │◀─────────────────────│                        │                         │
    │  GET /launch?token=…&game=mines               │                         │
    │──────────────────────────────────────────────▶│  verify JWT             │
    │                      │   POST /wallet/auth  (HMAC signed)                │
    │                      │                        │────────────────────────▶│
    │                      │        balance + currency + rg_limits            │
    │                      │                        │◀────────────────────────│
    │   302 → game UI  (+ session cookie set)       │                         │
    │◀──────────────────────────────────────────────│                        │
    │  play a round (bet)  │                        │                         │
    │──────────────────────────────────────────────▶│                         │
    │                      │   POST /wallet/bet-win  (HMAC, idempotent)        │
    │                      │                        │────────────────────────▶│
    │                      │             new balance │                         │
    │                      │                        │◀────────────────────────│
    │   result + balance   │                        │                         │
    │◀──────────────────────────────────────────────│                        │

{
  "iss":      "acme-casino",   // REQUIRED — must equal your operator code
  "sub":      "player_abc123", // REQUIRED — your player id (what your wallet knows)
  "jti":      "1f3c9a…unique", // REQUIRED — single-use nonce (replay-protected)
  "iat":      1700000000,      // REQUIRED — issued-at, Unix seconds
  "exp":      1700000300,      // REQUIRED — expiry; exp > iat and (exp − iat) ≤ 600s
  "currency": "USDT",          // optional — default currency for the session
  "language": "en",            // optional
  "country":  "US"             // optional
}

// npm i jsonwebtoken
import jwt from 'jsonwebtoken';
import { randomUUID } from 'node:crypto';

const OPERATOR_CODE = 'acme-casino';             // your registered code → becomes iss
const JWT_SECRET    = process.env.LAUNCH_JWT_SECRET;  // the HS256 shared secret you registered

// Mint a single-use launch token for one player. Server-side only.
function mintLaunchToken(playerId, { currency = 'USDT', language = 'en', country } = {}) {
  const now = Math.floor(Date.now() / 1000);
  const payload = {
    iss: OPERATOR_CODE,      // must equal your operator code
    sub: playerId,           // your player id (what your wallet knows)
    jti: randomUUID(),        // single-use nonce — replay-protected
    iat: now,                 // issued-at (keep your clock NTP-synced)
    exp: now + 300,           // 5 min — must be ≤ 600s and > iat
    currency, language,              // optional
    ...(country ? { country } : {})  // optional
  };
  return jwt.sign(payload, JWT_SECRET, { algorithm: 'HS256' });
  // RS256 operator? sign with your PRIVATE key instead:
  //   jwt.sign(payload, privateKeyPem, { algorithm: 'RS256' })
}

// Build the launch URL and 302 the player's browser to it.
function launchUrl(playerId, game) {
  const u = new URL('https://games.betterplay.example/launch');
  u.searchParams.set('token', mintLaunchToken(playerId));
  u.searchParams.set('game', game);             // see Game IDs
  u.searchParams.set('return_url', 'https://acme.com/lobby');
  return u.toString();
}

// Express:  app.get('/play/:game', (req, res) =>
//   res.redirect(launchUrl(req.user.id, req.params.game)));

GET https://games.betterplay.example/launch
      ?token=<signed-jwt>
      &game=mines              // game id — see Game IDs (§ Part 2)
      &lang=en                 // optional
      &currency=USDT           // optional, overrides the JWT claim
      &mode=real               // optional; "demo" not yet active (see §6)
      &return_url=https://acme.com/lobby   // optional

secret = wallet_hmac_secret
msg    = X-Timestamp  +  "POST"  +  <request path>  +  <raw body bytes>   // concatenated, NO separator
sig    = hex( HMAC_SHA256(secret, msg) )
reject with INVALID_SIGNATURE unless constant_time_equal(sig, X-Signature)

secret      = "whsec_demo_secret"
X-Timestamp = "2024-01-15T10:30:00.000Z"
method      = "POST"
path        = "/wallet/bet"
body        = '{"amount":"10.00"}'

signing string = 2024-01-15T10:30:00.000ZPOST/wallet/bet{"amount":"10.00"}

X-Signature = 5d6c52374a9223c04f6277f7d2df839231716a2be978444ffdd25eb290e6bbb1

{
  "request_id":  "550e8400-e29b-41d4-a716-446655440000",
  "timestamp":   "2024-01-15T10:30:00.000Z",
  "operator_id": "acme-casino",        // your CODE, not the UUID
  "player": {
    "id":            "player_abc123",
    "currency":      "USDT",
    "session_token": "eyJ…"          // present only on /wallet/auth
  },
  "data": { /* per-endpoint, see below */ },
  "metadata": {                          // optional analytics, may be omitted
    "gameName": "mines", "winChance": 0.97, "winMultiplier": 2.5
  }
}

// success
{ "status": "ok", "request_id": "550e8400-…", "data": { /* … */ } }

// error
{ "status": "error", "request_id": "550e8400-…",
  "error": { "code": "INSUFFICIENT_FUNDS", "message": "balance below requested bet" } }

{
  "player_id": "player_abc123",
  "currency":  "USDT",
  "balance":   "1500.00",
  "country":   "US",                 // optional
  "language":  "en",                 // optional
  "rg_limits": {                       // optional — omit for no limits
    "max_bet":               "100.00",
    "session_limit_minutes": 60
  }
}

{ "balance": "1490.00" }

// request.data
{ "transaction_id": "a3f4e812-…", "round_id": "b7c2d099-…",
  "game_id": "mines", "amount": "10.00" }

// response.data
{ "balance": "1480.00", "transaction_id": "a3f4e812-…" }

// request.data
{ "transaction_id": "c9e1f034-…", "round_id": "b7c2d099-…",
  "game_id": "mines", "amount": "27.50", "bet_transaction_id": "a3f4e812-…" }

// response.data
{ "balance": "1507.50", "transaction_id": "c9e1f034-…" }

// request.data
{ "transaction_id": "d1a8b234-…", "original_transaction_id": "a3f4e812-…" }

// response.data
{ "balance": "1490.00", "transaction_id": "d1a8b234-…" }

// request.data
{ "bet_transaction_id": "a3f4e812-…", "credit_transaction_id": "c9e1f034-…",
  "round_id": "b7c2d099-…", "game_id": "dice",
  "bet_amount": "10.00", "payout_amount": "19.80" }   // payout_amount "0" = loss

// response.data
{ "balance": "1509.80", "transaction_id": "c9e1f034-…" }

{
  "enabled_games": ["dice", "mines", "plinko", "limbo", "crash"],
  "currencies": {
    "USDT": { "min_bet": "0.10", "max_bet": "500.00" },
    "BTC":  { "min_bet": "0.00001", "max_bet": "0.1" }
  },
  "feature_flags": {
    "autoplay": true, "turbo": true, "chat": false, "sound_default": true
  },
  "rg_reality_check_minutes": 60,
  "allowed_origins": ["https://staging.acme.com"]   // extra CORS origins (see note)
}

# Serve this one folder from your static file server / CDN
/wasabi/wasabi-games.es.js    # ← the library ES bundle
/wasabi/manifest.json         # ← Vite asset manifest (for CSS injection)
/wasabi/chunks/               # ← per-game JS chunks (game art/audio inlined as data URIs)
/wasabi/assets/               # ← CSS + fonts & CSS-referenced images

<script type="module">
  const wasabiUrl   = `${location.origin}/wasabi/wasabi-games.es.js`;
  const manifestUrl = `${location.origin}/wasabi/manifest.json`;

  const { loadGame, preloadGame } = await import(wasabiUrl);
</script>

<div
  id="game-container"
  style="width: 100%; height: 700px; min-height: 600px;"
></div>

const container = document.getElementById('game-container');

const instance = await loadGame(
  container,
  'mines',          // game id — see Game IDs section below
  {
    gameName:      'mines',
    balance:       1000,
    currency:      101,   // numeric currency code — 101 = BTC (see Currency Codes)
    maxBetAmount:  500,
    minBetAmount:  0.10,
    user: { id: 'user-123', username: 'alice' },

    config: {
      gamesBackendUrl: 'https://api.betterplay.io/games/api/mines',
      cdnUrl:          'https://cdn.betterplay.io',
      apiTimeout:      10000,
      bettingTimeMs:   10000,
    },

    callbacks: {
      onBet:           (e) => console.log('bet placed', e),
      onRoundFinished: (e) => console.log('round done', e),
      onServerError:   (e) => console.error('error', e),

      // Intercept outgoing HTTP before a bet — must return requestConfig
      onBeforeBet: (betRequest, requestConfig) => {
        requestConfig.headers['Authorization'] = `Bearer ${myToken}`;
        return requestConfig;
      },
    }
  },
  { manifestUrl }   // tells the library where to find CSS chunks
);

// Unmount and clean up when done
instance.destroy();

const { mountOperatorGame } = await import(wasabiUrl);

const instance = await mountOperatorGame(container, {
  game:       'mines',
  backendUrl: 'https://api.betterplay.io/games/api',  // library appends /mines
  cdnUrl:     'https://cdn.betterplay.io',

  session: {
    player:       'user-123',
    currency:     101,    // numeric currency code — 101 = BTC
    balance:      1000,
    minBet:       0.10,
    maxBet:       500,
    sessionToken: myToken,   // sent as Authorization: Bearer on every game call
  },

  library: { bundle: wasabiUrl, manifest: manifestUrl },

  callbacks: {
    onBet:           (e) => console.log('bet placed', e),
    onRoundFinished: (e) => console.log('round done', e),
    onServerError:   (e) => console.error('error', e),
  },
});

// Unmount and clean up when done
instance.destroy();

{
  timeoutMs:   30000,                // request timeout (default 30000)
  heartbeatMs: 25000,                // WS heartbeat interval (default 25000)
  debug:       false,                // verbose client logging
  reconnect: { maxAttempts: 10, baseDelayMs: 1000, maxDelayMs: 30000 },
  onUnauthenticated: () => {}            // called when the WS session is rejected
}

const { loadGame, preloadGame } = await import(wasabiUrl);

// Fire and forget — no need to await
['mines', 'plinko', 'keno', 'crash', 'wheel'].forEach(preloadGame);

// App-wide (recommended): set data-theme only. The game — and its
// modals/toasts — inherit it and re-theme live. Don't also pass config.theme.
document.documentElement.dataset.theme = 'b';

// Per-game: pin ONE game to its own theme (then don't also flip <html>)
config: { theme: 'b', ... }

const theme = await fetch(`/themes/${tenant}/dice.json`)
  .then((r) => r.json())
  .catch(() => ({ general: {} }));   // fallback to no overrides on fetch failure

await loadGame(el, 'dice', { ...session, skin: theme.general }, { manifestUrl });

// Swap the skin live (e.g. tenant switcher) — no remount needed
handle.setSkin(theme.general);

await loadGame(container, 'crash', {
  gameName: 'crash',
  balance: 1000,
  currency: 101,  // 101 = BTC
  maxBetAmount: 500,
  minBetAmount: 0.10,
  user: { id: 'user-123' },

  config: {
    gamesBackendUrl:   'https://api.betterplay.io/games/api/crash',
    crashWebsocketUrl: 'wss://api.betterplay.io/games/api/crash/ws',
    bettingTimeMs:     6800,   // must match server-side betting window
    cdnUrl:            'https://cdn.betterplay.io',
    apiTimeout:        10000,
  },

  callbacks: { /* ... */ }
}, { manifestUrl });

await loadGame(container, 'blackjack-mp', {
  gameName: 'blackjack-mp',
  balance:  1000,
  currency: 101,  // 101 = BTC
  maxBetAmount: 500,
  minBetAmount: 0.10,
  user: { id: 'user-123', username: 'alice' },

  config: {
    gamesBackendUrl: 'https://api.betterplay.io/games/api',  // no game suffix!
    cdnUrl:          'https://cdn.betterplay.io',
    apiTimeout:      10000,
    bettingTimeMs:   10000,
  },

  // Called once the game module is initialised
  onModuleReady: (module) => {
    // Optional: inject auth header into the module's HTTP client
    module.http.interceptors.request.use((cfg) => ({
      ...cfg,
      headers: { ...cfg.headers, Authorization: `Bearer ${myToken}` }
    }));

    // Join the first available table
    (async () => {
      const tables = await module.tables.listTables();
      if (tables.length > 0) {
        await module.service.joinTable(tables[0].id);
      }
    })();
  },

  callbacks: { /* ... */ }
}, { manifestUrl });

<!DOCTYPE html>
<html lang="en" data-theme="b">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Casino</title>
</head>
<body>
  <div id="game" style="width:100%; height:700px;"></div>

  <script type="module">
    const origin      = location.origin;
    const manifestUrl = `${origin}/wasabi/manifest.json`;

    const { loadGame, preloadGame } =
      await import(`${origin}/wasabi/wasabi-games.es.js`);

    // Warm cache for other games while the user is on the page
    ['plinko', 'keno', 'crash'].forEach(preloadGame);

    const instance = await loadGame(
      document.getElementById('game'),
      'mines',
      {
        gameName:     'mines',
        balance:      1000,
        currency:     101,  // 101 = BTC
        maxBetAmount: 500,
        minBetAmount: 0.10,
        user:         { id: 'user-123', username: 'alice' },
        config: {
          gamesBackendUrl: 'https://api.betterplay.io/games/api/mines',
          cdnUrl:          'https://cdn.betterplay.io',
          apiTimeout:      10000,
          bettingTimeMs:   10000,
          theme:           'b',
        },
        callbacks: {
          onBet:           (e) => console.log('bet', e),
          onRoundFinished: (e) => console.log('finished', e),
          onServerError:   (e) => console.error('error', e),
          onBeforeBet: (_req, cfg) => {
            cfg.headers['Authorization'] = 'Bearer <token>';
            return cfg;
          },
        },
      },
      { manifestUrl }
    );

    // instance.destroy() to unmount
  </script>
</body>
</html>