Dice (Vanilla JS)

Classic dice game — pick over/under and roll.

Quick Start


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Dice Game</title>
  <link rel="stylesheet" href="https://unpkg.com/@maktubbet/sdk/dist/dice/styles.css" />
  <script src="https://unpkg.com/@maktubbet/sdk/dist/vanilla.global.js"></script>
</head>
<body>
  <div id="dice-game"></div>
 
  <script>
    const game = MaktubSDK.dice('#dice-game', {
      accessToken: null,
      user: { betCount: 0, isAuthenticated: false },
      updateBalance: function (newBalance) {
        console.log('Balance:', newBalance)
      },
      onAuthRequired: function () {
        console.log('Auth required')
      },
      currency: { code: 'USD', prefix: '$', rate: 1 },
      language: 'en',
    })
 
    // Update props later
    // game.update({ accessToken: 'user-jwt-token' })
 
    // Clean up when done
    // game.destroy()
  </script>
</body>
</html>

With ESM Bundler


import MaktubSDK from '@maktubbet/sdk/vanilla'
import '@maktubbet/sdk/dice/styles.css'
 
 
const game = MaktubSDK.dice('#dice-game', {
  accessToken: null,
  user: { betCount: 0, isAuthenticated: false },
  updateBalance: (b) => { console.log('Balance:', b) },
  onAuthRequired: () => console.log('Auth required'),
  currency: { code: 'USD', prefix: '$', rate: 1 },
  language: 'en',
})

Dynamic Updates


// Authenticate the user
game.update({
  accessToken: 'new-jwt-token',
  user: { betCount: 10, isAuthenticated: true },
})
 
// Change currency
game.update({
  currency: { code: 'EUR', prefix: '€', rate: 0.92 },
})

Cleanup


game.destroy()