Platform Integration Guide

Use MCAP Platform Games & Features

Quickly add proven gaming experiences to your platform by integrating existing MCAP games, prediction markets, and features directly into your website. This approach gets you to market fast with minimal development effort.

What's Included

🎮 Pre-Built Games

Casino Games

• Gem Slot: Themed slot machine with 5 reels, wild symbols, and progressive payouts
• High-Low: Card prediction game where players bet on next card being higher, lower, or same
• Roulette: Classic casino roulette with real-time betting and automated payouts

Skill-Based Games

• Chess: Head-to-head chess matches where winner takes the entire pot
• Battleship: Player vs player naval combat with winner-takes-all betting

📊 Prediction Markets

Event Markets

• Real-time AMM Trading: Automated market maker with constant product formula provides continuous liquidity and fair pricing
• Share-based Betting: Users buy and sell shares representing different outcomes of future events
• Multi-outcome Markets: Support for binary and multi-choice prediction markets
• Custom Market Creation: Providers can create oracle-verified markets for any future event

Integration Benefits

⚡ Speed to Market

• 1-2 week implementation from start to launch
• Pre-tested games with proven engagement metrics
• No game development required - focus on your community
• Immediate token utility for your community

🎨 Customization Options

• White-label theming to match your brand
• Custom color schemes and logos
• Branded game variants with your community themes
• Personalized tournaments and events

📈 Proven Performance

• High user engagement with tested game mechanics
• Optimized retention based on user behavior data
• Balanced economics with sustainable payout ratios
• Cross-platform compatibility for mobile and desktop

🛠️ Minimal Maintenance

• MCAP manages updates and security patches
• Automatic scaling for traffic spikes
• Built-in compliance and fair play measures
• 24/7 monitoring and support

SDK Setup

For platform integration, you'll use the MCAP Platform SDK which provides pre-built game components and features.

📖 Complete SDK Setup: See the MCAP SDK Guide for detailed installation and configuration instructions.

Quick Setup Summary

# Install platform SDK
npm install @mcap/platform-sdk @mcap/sdk-react

// Basic platform configuration
import { MCAPPlatform } from '@mcap/platform-sdk';

export const mcapPlatform = new MCAPPlatform({
  providerId: process.env.MCAP_PROVIDER_ID,
  apiKey: process.env.MCAP_API_KEY,
  environment: process.env.MCAP_ENVIRONMENT,
  theme: {
    primaryColor: '#your-brand-color',
    logoUrl: '/path/to/your/logo.png'
  }
});

Quick Start Implementation

1. Embed Casino Games

// components/CasinoGames.jsx
import React from 'react';
import { MCAPGamesContainer } from '@mcap/platform-sdk/react';

const CasinoGames = () => {
  return (
    <div className="casino-section">
      <h2>Casino Games</h2>
      <MCAPGamesContainer
        gameTypes={['gem_slot', 'high_low', 'roulette']}
        layout="grid"
        itemsPerRow={4}
        showFilters={true}
        enableSearch={true}
      />
    </div>
  );
};

export default CasinoGames;

2. Add Prediction Markets

// components/PredictionMarkets.jsx
import React from 'react';
import { MCAPMarketsContainer } from '@mcap/platform-sdk/react';

const PredictionMarkets = () => {
  return (
    <div className="markets-section">
      <h2>Prediction Markets</h2>
      <MCAPMarketsContainer
        categories={['sports', 'crypto', 'politics']}
        layout="list"
        showTrending={true}
        enableFiltering={true}
        maxItems={20}
      />
    </div>
  );
};

export default PredictionMarkets;

3. Integrate Tournament System

// components/Tournaments.jsx
import React from 'react';
import { MCAPTournamentsContainer } from '@mcap/platform-sdk/react';

const Tournaments = () => {
  return (
    <div className="tournaments-section">
      <h2>Tournaments</h2>
      <MCAPTournamentsContainer
        showUpcoming={true}
        showLive={true}
        showCompleted={false}
        enableRegistration={true}
        maxTournaments={10}
      />
    </div>
  );
};

export default Tournaments;

4. User Dashboard Integration

// components/UserDashboard.jsx
import React from 'react';
import { 
  MCAPWalletWidget,
  MCAPHistoryWidget,
  MCAPStatsWidget,
  MCAPAchievementsWidget
} from '@mcap/platform-sdk/react';

const UserDashboard = ({ user }) => {
  return (
    <div className="user-dashboard">
      <div className="dashboard-grid">
        <MCAPWalletWidget 
          showBalance={true}
          showDeposit={true}
          showWithdraw={true}
          compactMode={false}
        />
        
        <MCAPStatsWidget
          userId={user.id}
          showWinRate={true}
          showTotalPlayed={true}
          showFavoriteGames={true}
          timeRange="30d"
        />
        
        <MCAPHistoryWidget
          userId={user.id}
          maxItems={10}
          showFilters={true}
          showExport={true}
        />
        
        <MCAPAchievementsWidget
          userId={user.id}
          showProgress={true}
          showUnlocked={true}
          layout="compact"
        />
      </div>
    </div>
  );
};

export default UserDashboard;

Advanced Platform Features

Custom Tournament Creation

// Create custom tournaments for your community
import { mcapPlatform } from './mcap-platform-config';

const createCommunityTournament = async () => {
  const tournament = await mcapPlatform.tournaments.create({
    name: "Weekly DOGE Chess Championship",
    gameType: "chess",
    entryFee: "1000000000000000000", // 1 DOGE in wei (18 decimals)
    tokenId: "doge-token-id",
    maxParticipants: 64, // Perfect for bracket-style tournament
    startTime: "2025-02-01T20:00:00Z",
    prizeStructure: {
      first: 40,    // 40% of prize pool
      second: 25,   // 25% of prize pool
      third: 15,    // 15% of prize pool
      remaining: 20 // 20% distributed among other finishers
    },
    customRules: {
      time_control: "10+5", // 10 minutes + 5 second increment
      round_structure: "elimination",
      max_round_time: 30 // minutes per round
    }
  });
  
  return tournament;
};

White-Label Game Customization

// Customize games to match your brand
const gameCustomization = {
  gem_slot: {
    themes: ['your-token-theme', 'community-theme'],
    symbols: [
      { name: 'your-token-logo', multiplier: 100 },
      { name: 'community-mascot', multiplier: 50 },
      { name: 'diamond', multiplier: 25 }
    ],
    backgroundMusic: '/audio/your-theme-music.mp3',
    soundEffects: {
      win: '/audio/your-win-sound.mp3',
      spin: '/audio/your-spin-sound.mp3'
    }
  },
  chess: {
    boardTheme: 'your-brand-theme',
    pieceSet: '/images/your-piece-design/',
    boardColors: {
      light: '#your-light-color',
      dark: '#your-dark-color'
    },
    soundEffects: {
      move: '/audio/chess-move.mp3',
      capture: '/audio/chess-capture.mp3'
    }
  }
};

mcapPlatform.games.customize(gameCustomization);

Analytics Integration

// Track platform-specific metrics
import { MCAPAnalytics } from '@mcap/platform-sdk';

const analytics = new MCAPAnalytics({
  providerId: process.env.MCAP_PROVIDER_ID,
  trackingEnabled: true
});

// Track custom events
analytics.track('community_tournament_joined', {
  tournament_id: 'weekly-doge-championship',
  user_id: user.id,
  entry_fee_wei: '1000000000000000000',
  token_symbol: 'DOGE'
});

// Get platform insights
const insights = await analytics.getInsights({
  timeRange: '30d',
  metrics: [
    'total_players',
    'games_played',
    'total_volume',
    'top_games',
    'user_retention'
  ]
});

Theming & Branding

CSS Customization

/* Custom theme for MCAP components */
.mcap-platform {
  --mcap-primary-color: #your-brand-color;
  --mcap-secondary-color: #your-secondary-color;
  --mcap-accent-color: #your-accent-color;
  --mcap-background-color: #your-bg-color;
  --mcap-text-color: #your-text-color;
  --mcap-border-radius: 8px;
  --mcap-font-family: 'Your Brand Font', sans-serif;
}

/* Game container styling */
.mcap-games-container {
  border-radius: var(--mcap-border-radius);
  background: var(--mcap-background-color);
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Tournament card styling */
.mcap-tournament-card {
  background: linear-gradient(135deg, var(--mcap-primary-color), var(--mcap-secondary-color));
  color: white;
  border-radius: var(--mcap-border-radius);
}

Logo & Asset Integration

// Brand asset configuration
const brandAssets = {
  logo: {
    main: '/images/your-logo.svg',
    compact: '/images/your-logo-compact.svg',
    favicon: '/images/favicon.ico'
  },
  backgrounds: {
    casino: '/images/casino-bg.jpg',
    tournaments: '/images/tournament-bg.jpg',
    markets: '/images/markets-bg.jpg'
  },
  sounds: {
    notification: '/audio/notification.mp3',
    success: '/audio/success.mp3',
    error: '/audio/error.mp3'
  }
};

mcapPlatform.setBrandAssets(brandAssets);

Mobile Responsive Design

Responsive Game Grid

// Auto-responsive game layout
<MCAPGamesContainer
  gameTypes={['gem_slot', 'high_low']}
  responsive={{
    mobile: { itemsPerRow: 1, showFilters: false },
    tablet: { itemsPerRow: 2, showFilters: true },
    desktop: { itemsPerRow: 4, showFilters: true }
  }}
  enableSwipeGestures={true}
  touchOptimized={true}
/>

Mobile-Optimized Components

// Mobile wallet widget
<MCAPWalletWidget 
  mobileLayout="bottom-sheet"
  showQuickActions={true}
  enableBiometricAuth={true}
  signatureVerification={true}
  compactMode={true}
/>

Performance Optimization

Lazy Loading

// Lazy load game components for better performance
import { lazy, Suspense } from 'react';

const CasinoGames = lazy(() => import('./components/CasinoGames'));
const PredictionMarkets = lazy(() => import('./components/PredictionMarkets'));

const PlatformTabs = () => {
  return (
    <div className="platform-tabs">
      <Suspense fallback={<div>Loading games...</div>}>
        <CasinoGames />
      </Suspense>
      
      <Suspense fallback={<div>Loading markets...</div>}>
        <PredictionMarkets />
      </Suspense>
    </div>
  );
};

Caching Strategy

// Configure caching for better performance
mcapPlatform.configure({
  cache: {
    gameData: 300,      // 5 minutes
    marketData: 60,     // 1 minute
    tournamentData: 120, // 2 minutes
    userStats: 600      // 10 minutes
  },
  prefetch: {
    popularGames: true,
    upcomingTournaments: true,
    trendingMarkets: true
  }
});

Support & Resources

Community Support

• Technical Support: tech@mcap.meme
• Community Slack: Developer community

Best Practices

• Regular Updates: Keep SDK updated for new features and security
• Performance Monitoring: Track game load times and user engagement
• A/B Testing: Test different game layouts and configurations
• Community Feedback: Gather user feedback for continuous improvement

Success Metrics

Key Performance Indicators

• User Engagement: Average session duration and games per session
• Revenue Metrics: Total betting volume and on-chain platform fees
• Retention Rates: Daily, weekly, and monthly active users
• Game Performance: Most popular games and features

Optimization Strategies

• Game Selection: Promote high-engagement games prominently
• Tournament Timing: Schedule tournaments for peak user activity
• Prize Structures: Optimize prize pools for maximum participation
• Community Events: Create special events around trending memecoins

---

Ready to integrate MCAP platform games? Contact our platform team at partnership@mcap.meme for personalized guidance and implementation support.