🎲 d20 Craps - Technical Architecture
3D interactive gaming platform combining classic craps mechanics with d20 dice, featuring realistic physics, probability engines, and comprehensive analytics.
System Architecture Overview
d20 Craps merges traditional table game mechanics with modern web technology. The platform features a fully playable 3D demo with realistic dice physics, comprehensive probability calculators, complete game rules, and operator information for casino deployment.
┌──────────────────────────────────────────────────────────┐
│ MARKETING & DEMO SITE (Next.js) │
├──────────────────────┬──────────────────────┬────────────┤
│ Landing Pages │ Interactive Demo │ Rules │
│ Game Information │ Probability Calc │ Pricing │
└──────────────────────┴──────────────────────┴────────────┘
↓
┌──────────────────────────────────────────────────────────┐
│ 3D GAMING ENGINE (Three.js / Babylon.js) │
├──────────────────────┬──────────────────────┬────────────┤
│ Dice Physics │ Table Rendering │ Animations│
│ (Cannon.js) │ (3D Models) │ (Tweens) │
└──────────────────────┴──────────────────────┴────────────┘
↓
┌──────────────────────────────────────────────────────────┐
│ GAME LOGIC & MECHANICS (Tier 2) │
├──────────────────────┬──────────────────────┬────────────┤
│ Betting System │ Dice Probability │ State │
│ (Pass/Don't Pass) │ Engine │ Manager │
└──────────────────────┴──────────────────────┴────────────┘
↓
┌──────────────────────────────────────────────────────────┐
│ DATA & ANALYTICS (Tier 3) │
├──────────────────────┬──────────────────────┬────────────┤
│ Game Stats API │ Analytics │ Database │
│ History tracking │ Dashboard │ Storage │
└──────────────────────┴──────────────────────┴────────────┘
Technology Stack
🎨 Frontend
- Next.js 16.1+
- React 18+
- TypeScript
- Tailwind CSS
- Next.js Image Optimization
🎮 3D Graphics
- Three.js
- Cannon.js (physics)
- WebGL 2.0
- GLSL Shaders
- 3D Models (glTF/GLTF)
🎲 Game Logic
- State management (Zustand)
- Event system
- Probability calculations
- Game rules engine
- Betting simulator
📊 Data & Analytics
- Node.js + Express
- PostgreSQL
- Firebase (optional)
- Chart.js (dashboards)
- D3.js (probability viz)
🧪 Testing & Quality
- Jest (unit tests)
- Playwright (E2E)
- Vitest (fast testing)
- ESLint + Prettier
- GitHub Actions CI/CD
🚀 Deployment
- Vercel hosting
- API Routes (Next.js)
- Serverless functions
- CDN + image caching
- Progressive enhancement
Core Game Components
🎲 3D Dice Physics
Realistic d20 dice with gravity, collision detection, and rotation using Cannon.js physics engine.
🎰 Betting System
Complete implementation of Pass/Don't Pass, Field, Place Bets, Hardways, and Odds bets with realistic payouts.
📈 Probability Calculator
Real-time distribution analysis, comparison with 2d6 craps, and probability-based strategy recommendations.
📊 Statistics Engine
Track roll history, bankroll management, win/loss ratios, and generate detailed game analytics.
📚 Rules Engine
Complete game rules with point bands (A-F), resolution logic, and comprehensive tutorial system.
💼 Operator Dashboard
Deployment information, casino integration specs, table requirements, and revenue projections.
Physics & 3D Rendering Pipeline
Physics Simulation
- • Gravity-based dice rolling with realistic weight distribution
- • Collision detection with table boundaries and felt surface
- • Angular momentum for realistic spinning and tumbling
- • Damping for natural deceleration and settling behavior
Rendering Features
- • PBR materials with realistic lighting and shadows
- • Post-processing effects (bloom, depth of field, FXAA)
- • Responsive camera controls and multiple viewing angles
- • Adaptive quality settings for different devices
Probability & Statistics Engine
d20 Distribution
- Range: 2-40 (2d20)
- Mode: 21
- Standard Deviation: ~3.74
- Advantage: More mid-range results
2d6 Distribution (Classic)
- Range: 2-12 (2d6)
- Mode: 7
- Standard Deviation: ~2.42
- Variance: Narrower range
Player Experience Features
🎯 Interactive Tutorial
Step-by-step guide to all game mechanics, bet types, and strategy with guided examples.
💰 Bankroll Management
Track starting amount, current balance, win/loss percentage, and projected outcomes.
📊 Roll History
Complete history of rolls with analysis, hot/cold sequences, and statistical insights.
🏅 Achievements
Track milestones like first win, big rolls, profitable sessions, and streaks.
🎬 Replay System
Replay any roll with physics rewinds, camera manipulation, and slow-motion playback.
⚙️ Settings
Customizable table appearance, sound/music controls, difficulty settings, and preferences.
Performance & Optimization
Frame Rate
60 FPS
On mid-range devices
Load Time
< 2s
Initial page load + assets
Bundle Size
~500KB
Gzipped JavaScript
Mobile Support
Responsive
Touch optimized