🎰 Scratch Cards

Implementation Notes

This demo is a compact client for a Scratch Card prototype. It demonstrates a PixiJS-powered card reveal UI, with client-side scratch interactions and integration with a backend game service.

Frontend

• Layout: Tailwind CSS for responsive UI and quick styling.
• Rendering: PixiJS renders scratchable cards and reveals prizes with smooth animation.
• Interaction: Users scratch cards using pointer or touch input; frontend reports revealed sections to backend endpoints to determine outcomes.

Backend (technical overview)

The backend is implemented as a NestJS service exposing REST endpoints to power the UI. Key endpoints used by this demo:

• /api/new (POST) — creates a new scratch card session and returns a gameId.
• /api/info (GET) — returns card metadata (prize layout, scratchable areas, paytable).
• /api/scratch (POST) — accepts { gameId, positions } to report scratched sections for server-side evaluation.
• /api/bet (POST) — updates the bet amount for the session.
• /api/reveal (POST) — finalizes the scratch, calculates hits/prizes, and returns payout information.
• /api/paytable (POST) — returns prize multipliers for different reveal combinations.

Server design notes

• Session model: ephemeral sessions with gameId, betAmount, revealedPositions, and createdAt for auditing and debugging.
• Scratch RNG: the prize layout is generated server-side using a secure RNG to prevent tampering; clients only see the masked card until revealed.
• Validation & security: all inputs are validated and rate-limited; API returns only data necessary to animate the scratch. CORS and optional auth handled at API gateway.
• Scaling: stateless scratch/reveal operations can be scaled horizontally; sessions can be persisted in MongoDB with optional Redis caching for high-throughput scenarios.

Core Game Engine (Scratch Card)

The core engine handles scratch tracking, prize calculation, and payout evaluation. Conceptually:

• Rules: Players scratch a card with N hidden spots; prizes revealed based on matching symbols/positions.
• Card & Spots: Each card contains multiple scratchable areas; each spot tracks state: covered, revealed, hit.
• Game Flow: Create session → set bet → scratch card → server evaluates revealed positions → payout calculated.
• Payout Evaluation: Matches between revealed symbols/positions and prize layout determine payout multipliers, applied to the bet.
• Key Methods: constructor(), setBet(bet), reveal(positions), getScreen(), getState().
• RNG & Security: All prize determination occurs server-side; client receives only visible scratch positions to animate the card.

Notes: this demo is simplified for portfolio purposes.