@treasureplaynet/js-sdk

TreasurePlay JavaScript SDK for web games. Uses the exact same UI components as the TreasurePlay portal, ensuring identical design across all platforms.

Installation

npm install @treasureplaynet/js-sdk @mui/material @emotion/react @emotion/styled

Quick Start

import { TreasurePlayQuests } from '@treasureplaynet/js-sdk';

function Game() {
  return (
    <TreasurePlayQuests
      appKey="your-api-key"
      userId="player_123"
      onRewardClaimed={(questId, amount) => {
        addCoinsToPlayer(amount);
      }}
    />
  );
}

Showing/Hiding Quests

import { useState } from 'react';
import { TreasurePlayQuests } from '@treasureplaynet/js-sdk';

function Game() {
  const [showQuests, setShowQuests] = useState(false);

  return (
    <div>
      <button onClick={() => setShowQuests(true)}>
        🎯 Open Quests
      </button>

      {showQuests && (
        <TreasurePlayQuests
          appKey="your-api-key"
          userId="player_123"
          onClose={() => setShowQuests(false)}
          onRewardClaimed={(questId, amount) => {
            addCoinsToGame(amount);
          }}
        />
      )}
    </div>
  );
}

Props

<TreasurePlayQuests
  // Required
  appKey="your-api-key"
  userId="player_123"
  
  // Optional
  advertisingId="..."
  email="[email protected]"
  environment="production"        // 'production' | 'testnet'
  categories={['engagement', 'monetization', 'progression']}
  tokenType="coins"               // Auto-detected if not provided
  enableLogging={false}
  refreshInterval={0}             // ms, 0 to disable
  
  // Theming (see Theming section below)
  theme={{}}
  
  // Container styling
  style={{}}
  className=""
  
  // Callbacks
  onClose={() => {}}
  onGameClick={(appId) => {}}
  onRewardClaimed={(questId, amount) => {}}
  onQuestCompleted={(questId) => {}}
  onTokensChanged={(tokens) => {}}
  onLoad={() => {}}
  onError={(error) => {}}
/>

Theming

The SDK supports comprehensive theming to match your game's aesthetic. Pass a theme prop to customize colors, typography, and more.

Basic Theming

<TreasurePlayQuests
  appKey="your-api-key"
  userId="player_123"
  theme={{
    colors: {
      primary: '#FF6B6B',        // Main accent color
      secondary: '#4ECDC4',      // Secondary accent
      success: '#2ECC71',        // Claim buttons, completed states
      backgroundColor: '#1a1a2e', // Main background
    }
  }}
/>

Full Theme Configuration

import type { ThemeConfig } from '@treasureplaynet/js-sdk';

const myGameTheme: ThemeConfig = {
  name: 'my-game-theme',
  
  colors: {
    // Brand colors
    primary: '#6360E7',          // Primary accent (progress bars, active states)
    secondary: '#F20CE2',        // Secondary accent (titles, highlights)
    success: '#17DA00',          // Success states (claim buttons, completed)
    warning: '#FFB800',          // Warning states (claimable rewards)
    error: '#FF4444',            // Error states
    
    // Background
    backgroundColor: '#f5f5f7',  // Main container background
    textOverBackgroundColor: '#666666', // Text on background
    
    // Card styling
    card: {
      backgroundColor: '#ffffff',
      titleTextColor: '#333333',
      mainTextColor: '#333333',
      secondaryTextColor: '#666666',
      borderColor: '#eeeeee',
    },
    
    // Header
    header: {
      backgroundColor: '#ffffff',
      textColor: '#333333',
    },
    
    // Quest list
    questList: {
      titleColor: '#F20CE2',     // Section title color
      questCard: {
        stepIndicator: {
          activeColor: '#6360E7',    // In-progress step
          completedColor: '#17DA00', // Completed step
          lockedColor: '#999999',    // Locked step
        },
        progressBar: {
          backgroundColor: '#e0e0e0',
          fillColor: '#6360E7',
        },
      },
    },
    
    // Buttons
    buttons: {
      start: {
        backgroundColor: '#17DA00',
        textColor: '#ffffff',
        borderColor: '#01B723',
      },
      continue: {
        backgroundColor: '#6360E7',
        textColor: '#ffffff',
        borderColor: '#4846BF',
      },
      claim: {
        backgroundColor: '#17DA00',
        textColor: '#ffffff',
        borderColor: '#15c500',
      },
    },
    
    // Banner gradient
    bannerBackground: 'linear-gradient(30deg, #7CB2FC 0%, #F47DE0 50%, #FEB971 100%)',
  },
  
  // Typography
  typography: {
    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
    displayFontFamily: '"Luckiest Guy", cursive', // For big button text
  },
  
  // Border radius
  borderRadius: {
    small: 8,
    medium: 12,
    large: 16,
  },
};

// Use the theme
<TreasurePlayQuests
  appKey="your-api-key"
  userId="player_123"
  theme={myGameTheme}
/>

Theme Examples

Dark Theme

const darkTheme: Partial<ThemeConfig> = {
  colors: {
    primary: '#BB86FC',
    secondary: '#03DAC6',
    success: '#00E676',
    backgroundColor: '#121212',
    textOverBackgroundColor: '#B3B3B3',
    card: {
      backgroundColor: '#1E1E1E',
      titleTextColor: '#FFFFFF',
      mainTextColor: '#E0E0E0',
      secondaryTextColor: '#B3B3B3',
      borderColor: '#333333',
    },
    header: {
      backgroundColor: '#1E1E1E',
      textColor: '#FFFFFF',
    },
    bannerBackground: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
  },
};

Playful/Colorful Theme

const playfulTheme: Partial<ThemeConfig> = {
  colors: {
    primary: '#FF6B6B',
    secondary: '#4ECDC4',
    success: '#45B7D1',
    backgroundColor: '#FFF9E6',
    card: {
      backgroundColor: '#FFFFFF',
      titleTextColor: '#2D3436',
      borderColor: '#FFE66D',
    },
    buttons: {
      start: {
        backgroundColor: '#FF6B6B',
        borderColor: '#E55555',
      },
      claim: {
        backgroundColor: '#4ECDC4',
        borderColor: '#3DBDB4',
      },
    },
    bannerBackground: 'linear-gradient(135deg, #FF6B6B 0%, #FFE66D 50%, #4ECDC4 100%)',
  },
  borderRadius: {
    small: 12,
    medium: 20,
    large: 28,
  },
};

Minimal/Corporate Theme

const minimalTheme: Partial<ThemeConfig> = {
  colors: {
    primary: '#2563EB',
    secondary: '#3B82F6',
    success: '#10B981',
    backgroundColor: '#F8FAFC',
    card: {
      backgroundColor: '#FFFFFF',
      titleTextColor: '#1E293B',
      mainTextColor: '#334155',
      secondaryTextColor: '#64748B',
      borderColor: '#E2E8F0',
    },
    bannerBackground: '#2563EB',
  },
  typography: {
    fontFamily: '"Inter", -apple-system, sans-serif',
    displayFontFamily: '"Inter", sans-serif',
  },
  borderRadius: {
    small: 4,
    medium: 8,
    large: 12,
  },
};

Using Theme Helpers

import { defaultTheme, mergeTheme } from '@treasureplaynet/js-sdk';

// Get the default theme
console.log(defaultTheme.colors?.primary); // '#6360E7'

// Merge your customizations with defaults
const myTheme = mergeTheme(defaultTheme, {
  colors: {
    primary: '#FF0000',
    // All other values inherit from defaultTheme
  },
});

TypeScript Support

import type { ThemeConfig, ThemeImages } from '@treasureplaynet/js-sdk';

const theme: Partial<ThemeConfig> = {
  // Full type hints and autocomplete
};

Full-Screen Modal Example

function Game() {
  const [showQuests, setShowQuests] = useState(false);

  return (
    <>
      <button onClick={() => setShowQuests(true)}>Open Quests</button>

      {showQuests && (
        <div style={{
          position: 'fixed',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          backgroundColor: 'rgba(0, 0, 0, 0.8)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          zIndex: 1000,
        }}>
          <div style={{ 
            width: '400px', 
            height: '90vh', 
            borderRadius: '16px',
            overflow: 'hidden',
          }}>
            <TreasurePlayQuests
              appKey="your-api-key"
              userId="player_123"
              onClose={() => setShowQuests(false)}
            />
          </div>
        </div>
      )}
    </>
  );
}

Using Individual Components

For custom layouts, use components directly:

import { 
  UIProvider,
  GameList,
  GameCard,
  GameDetail,
  RewardOverlay,
  defaultTheme,
} from '@treasureplaynet/js-sdk';

function CustomQuestUI({ quests }) {
  return (
    <UIProvider 
      tokenType="coins" 
      balance={1000}
      theme={{
        colors: {
          primary: '#FF6B6B',
        },
      }}
    >
      <GameList 
        quests={quests} 
        onGameClick={(appId) => navigateToGame(appId)}
        onClaimReward={(questId) => handleClaim(questId)}
      />
    </UIProvider>
  );
}

Architecture

@treasureplaynet/js-sdk
├── TreasurePlayQuests   (main component)
├── GameList / GameCard  (UI components)
├── ApiClient            (API communication)
├── AppService           (app metadata from CDN)
└── SessionManager       (localStorage persistence)

portal/web (TreasurePlay Portal)
└── Similar UI, separate codebase

Unity SDK
└── WebView pointing to portal/web

The JS SDK is a self-contained package with its own UI components that can be fully customized via theming.

Unity SDK Comparison

| Unity SDK | JS SDK | |-----------|--------| | ShowQuestWebView() | <TreasurePlayQuests /> | | HideQuestWebView() | Unmount component / onClose | | CheckRewardsAsync() | onTokensChanged callback | | RedeemAsync() | Automatic via onRewardClaimed |

TypeScript

Full TypeScript support:

import type { 
  TreasurePlayQuestsProps,
  Quest,
  QuestState,
  Environment,
  ThemeConfig,
  ThemeImages,
} from '@treasureplaynet/js-sdk';

// Import theme helpers
import { defaultTheme, mergeTheme } from '@treasureplaynet/js-sdk';

Requirements

• React 17+
• Material UI 5+ (@mui/material)
• Emotion (@emotion/react, @emotion/styled)

Support

• Email: [email protected]
• Website: https://treasureplay.com

License

MIT