Skip to main content

Xgenia Slot Template Overview

The Xgenia Slot Template is a complete, ready-to-use foundation for building professional slot machine games. This template provides all essential components, functions, and connections needed to create a modern slot game experience.

Documentation Navigation Guide​

For optimal understanding, read the documentation in this order:

  1. Overview (Current) β†’ Understanding template purpose and architecture
  2. Layout β†’ Visual structure and responsive design
  3. Components β†’ Individual component details and connections
  4. Functions β†’ Backend logic and API integrations
  5. Guide β†’ Player experience and troubleshooting

Technical Architecture​

System Requirements:​

  • Frontend: Modern web browser with JavaScript enabled
  • Network: Stable internet connection (for API mode)
  • Device: Desktop, tablet, or mobile with touch support
  • Performance: Minimum 2GB RAM for optimal experience

Security Features:​

  • API Authentication: Session-based user authentication
  • Random Number Generation: Certified RNG for fair gameplay
  • Data Encryption: HTTPS communication for all API calls
  • Balance Validation: Server-side balance verification

API Endpoints Structure:​

Base URL: https://api.xgenia-slots.com/v1/
β”œβ”€β”€ /auth/session β†’ Player authentication
β”œβ”€β”€ /game/config β†’ Game configuration and assets
β”œβ”€β”€ /spin/bet β†’ Server-side spin processing
β”œβ”€β”€ /balance/get β†’ Balance inquiries
└── /exchange/rates β†’ Currency conversion rates

How It Works​

The template operates through a clear data flow system:

1. Game Initialization:

  • GameID β†’ Launch Game β†’ Get Session β†’ Asset Loading

2. Asset Management:

  • Config JSON β†’ Download Functions β†’ Image Processing β†’ Component Display

3. Gameplay Loop:

  • Button Press β†’ Bet Transactions β†’ Result Processing β†’ Symbol Display β†’ UI Update

4. Connections Flow:

  • From GameID β†’ Provides "slot_classic_01" to identify which game to load
  • From API β†’ Provides Balance (1000 credits), Icons array, Music URL
  • From User Input β†’ SPIN button sends bet amount (10 credits) to server or local generator
  • From Spin Options β†’ LocalSpin boolean determines API vs Local TRNG generation
  • From Server Response β†’ Returns win amount (50 credits) and symbol results (API mode)
  • From Local TRNG β†’ Generates immediate results using client-side algorithms (Local mode)

Architecture Diagram​

β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚ XGENIA SLOT TEMPLATE β”‚
β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€
β”‚ PRESENTATION β”‚ BUSINESS β”‚ DATA β”‚
β”‚ LAYER β”‚ LOGIC β”‚ LAYER β”‚
β”‚ β”‚ β”‚ β”‚
β”‚ β”Œβ”€ UI Components β”‚ β”Œβ”€ Game Engine β”‚ β”Œβ”€ API Services β”‚
β”‚ β”‚ β€’ Header β”‚ β”‚ β€’ Spin Logic β”‚ β”‚ β€’ Authentication β”‚
β”‚ β”‚ β€’ Slot Frame β”‚ β”‚ β€’ Bet Logic β”‚ β”‚ β€’ Balance Service β”‚
β”‚ β”‚ β€’ Buttons β”‚ β”‚ β€’ Win Logic β”‚ β”‚ β€’ Asset Service β”‚
β”‚ β”‚ β€’ Audio β”‚ β”‚ β€’ Session Mgmt β”‚ β”‚ β€’ Exchange Rate β”‚
β”‚ β”‚ β”‚ β”‚ β”‚ β”‚ β”‚
β”‚ β”œβ”€ Layout System β”‚ β”œβ”€ Spin Modes β”‚ β”œβ”€ Local Storage β”‚
β”‚ β”‚ β€’ Responsive β”‚ β”‚ β€’ API Mode β”‚ β”‚ β€’ Game State β”‚
β”‚ β”‚ β€’ Positioning β”‚ β”‚ β€’ Local TRNG β”‚ β”‚ β€’ Asset Cache β”‚
β”‚ β”‚ β€’ Animations β”‚ β”‚ β€’ Validation β”‚ β”‚ β€’ User Preferences β”‚
β”‚ └──────────────────│ └─────────────────│ └──────────────────────│
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

Data Flow Architecture:​

Node-Based Flow Structure:

β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚ NOODL NODE CONNECTIONS β”‚
β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€
β”‚ β”‚
β”‚ 1. INITIALIZATION PHASE β”‚
β”‚ β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”‚
β”‚ β”‚ GameID │───▢│ Launch Game │───▢│ Get Session β”‚ β”‚
β”‚ β”‚ Variable β”‚ β”‚ Function β”‚ β”‚ Function β”‚ β”‚
β”‚ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β””β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”˜ β”‚
β”‚ β”‚ β”‚
β”‚ β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”Œβ”€β”€β”€β”€β”€β”€β–Όβ”€β”€β”€β”€β”€β”€β”€β” β”‚
β”‚ β”‚ Download │◀───│ Get Config β”‚ β”‚
β”‚ β”‚ Assets β”‚ β”‚ JSON Functionβ”‚ β”‚
β”‚ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β”‚
β”‚ β”‚
β”‚ 2. GAMEPLAY PHASE β”‚
β”‚ β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”‚
β”‚ β”‚ SPIN Button│───▢│Spin Options │───▢│ Bet Trans. β”‚ β”‚
β”‚ β”‚ Component β”‚ β”‚ Controller β”‚ β”‚ OR Local TRNGβ”‚ β”‚
β”‚ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β””β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”˜ β”‚
β”‚ β”‚ β”‚
β”‚ β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”Œβ”€β”€β”€β”€β”€β”€β–Όβ”€β”€β”€β”€β”€β”€β”€β” β”‚
β”‚ β”‚ UI Update │◀───│ Process β”‚ β”‚
β”‚ β”‚ Components β”‚ β”‚ Results β”‚ β”‚
β”‚ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β”‚
β”‚ β”‚
β”‚ 3. STATE MANAGEMENT β”‚
β”‚ β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”‚
β”‚ β”‚ Balance │◀───│ Update │◀───│ Spin Result β”‚ β”‚
β”‚ β”‚ Variable β”‚ β”‚ State β”‚ β”‚ Data β”‚ β”‚
β”‚ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β”‚
β”‚ β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

Function Node Connections:

  • GameID Variable β†’ Outputs to Launch Game Function
  • Launch Game Function β†’ Triggers Get Session Function
  • Get Session Function β†’ Outputs UserID, SessionID, Balance
  • Get Config JSON Function β†’ Outputs BackgroundURL, IconsArray, AudioURL
  • Download Functions β†’ Process asset URLs and output processed data
  • Spin Options Controller β†’ Routes to either Bet Transactions OR Local TRNG
  • Result Processing β†’ Updates Balance Variable and UI Components

Component Interaction Flow​

The template follows a reactive architecture where components communicate through a centralized event system:

Event-Driven Communication:​

User Action β†’ Button Component β†’ Game Logic β†’ Data Layer β†’ UI Update
↓ ↓ ↓ ↓ ↓
Click Event Process API/Local Refresh
SPIN Trigger Request Response Display

Error Handling Chain:​

API Error β†’ Error Handler β†’ User Notification β†’ Fallback Action
↓ ↓ ↓ ↓
Network Log Error Show Message Retry/Local
Timeout & Recover to Player Alternative

Template Components​

Main Interface Elements:​

  • Header Display β†’ Shows CREDIT, BET, and WIN amounts
  • Control Buttons β†’ BET, SPIN, BONUS action buttons
  • Slot Frame β†’ 5x3 grid displaying game symbols
  • Audio System β†’ Background music and sound effects
  • Spin Options β†’ Toggle between API and Local TRNG generation modes

Core Functions:​

  • Game Logic β†’ Handles betting, spinning, and win calculations
  • Asset Loading β†’ Downloads backgrounds, symbols, and audio files
  • Data Processing β†’ Converts server results to visual symbols
  • Session Management β†’ Maintains player authentication and balance
  • Currency Support β†’ Real-time exchange rates for multi-currency display
  • Dual Spin Modes β†’ API server-side or Local TRNG client-side generation

Advanced Toolkit Functions:​

The template includes comprehensive utility libraries for advanced game development:

Math and Logic Toolkit:

  • Random Number Generation β†’ Supports Local TRNG with configurable RTP
  • Value Mapping and Clamping β†’ For betting limits and animation scaling
  • Easing Functions β†’ Smooth animations for better user experience
  • Color Blending β†’ Dynamic visual effects for winning combinations
  • Distance Calculations β†’ Touch/mouse interaction detection

String and Data Manipulation:

  • Array Operations β†’ Shuffle, sample, group for game mechanics
  • Object Processing β†’ Clone, merge, filter for state management
  • String Utilities β†’ Validation, formatting, HTML sanitization
  • JSON Processing β†’ Safe parsing with error handling

Utility and Helpers:

  • Validation Functions β†’ Email, URL, number validation for user input
  • Security Features β†’ UUID generation, hash functions, Base64 encoding
  • Browser Integration β†’ DOM manipulation, cookie management, file operations
  • Performance Optimization β†’ Memory management and asset caching

Date and Time Management:

  • Session Tracking β†’ Play duration monitoring and break reminders
  • Statistics Processing β†’ Daily/monthly game data analysis
  • Responsible Gaming β†’ Time limits and session management
  • Locale Support β†’ Indonesian language date formatting

Who is it for?​

This template is perfect for:

  • Game developers who want a quick start for slot projects.
  • Designers looking to customize the visual style of a slot game.
  • Anyone interested in learning how slot games are structured and function.

How to Get Started​

Explore the sections in this documentation to learn about the layout, components, functions, and how to play. You'll find step-by-step guides, feature explanations, and tips to help you make the most of the Xgenia Slot Template.

Enjoy building and playing your slot game!